/* ==========================================================================
   animations.css — Motion System
   Bankenveld Golf Estate
   Scroll reveals · Fade · Slide · Parallax · Glow · Loading · Hover
   Reveal classes are toggled to `.is-visible` by js/animations.js
   (IntersectionObserver). All motion is disabled under reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-2.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-3rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(3rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(200, 168, 106, 0); }
  50%      { box-shadow: var(--shadow-glow); }
}

@keyframes pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(200, 168, 106, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(200, 168, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 168, 106, 0); }
}

/* Page load: elegant logo intro */
@keyframes mark-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Themed loader keyframes */
@keyframes ball-roll {
  0%   { transform: translateX(-60px) rotate(0deg); }
  100% { transform: translateX(60px) rotate(360deg); }
}
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
@keyframes ripple-out {
  0%   { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes bird-fly {
  0%   { transform: translate(-40px, 10px) scaleX(1); }
  50%  { transform: translate(0, -6px) scaleX(1); }
  100% { transform: translate(40px, 10px) scaleX(1); }
}
@keyframes shutter-blink {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.05); }
}
@keyframes pin-drop {
  0%   { transform: translateY(-30px); opacity: 0; }
  60%  { transform: translateY(4px); opacity: 1; }
  100% { transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes scroll-hint {
  0%   { opacity: 0; transform: translateY(-6px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(6px); }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL — base + variants
   Add [data-reveal] in markup; js adds .is-visible when in view.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal="fade"]        { }
[data-reveal="fade-up"]     { transform: translateY(2.5rem); }
[data-reveal="fade-down"]   { transform: translateY(-2.5rem); }
[data-reveal="left"]        { transform: translateX(-3rem); }
[data-reveal="right"]       { transform: translateX(3rem); }
[data-reveal="zoom"]        { transform: scale(0.92); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children via inline --reveal-delay or these helpers */
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal-delay="5"] { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   PARALLAX — translateY driven by js/animations.js via --parallax-y
   -------------------------------------------------------------------------- */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0), 0);
}

/* --------------------------------------------------------------------------
   GLOW EFFECTS
   -------------------------------------------------------------------------- */
.glow        { box-shadow: var(--shadow-glow); }
.glow--pulse { animation: glow-pulse 2.8s var(--ease-in-out) infinite; }
.text-glow   { text-shadow: 0 0 18px rgba(201, 162, 39, 0.55); }

/* --------------------------------------------------------------------------
   LOADING / SKELETON
   -------------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-stone-200) 25%,
    var(--color-stone-100) 37%,
    var(--color-stone-200) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   HOVER ANIMATIONS (utility hooks)
   -------------------------------------------------------------------------- */
.hover-lift   { transition: var(--transition-transform); }
.hover-lift:hover { transform: translateY(-6px); }

.hover-grow   { transition: var(--transition-transform); }
.hover-grow:hover { transform: scale(1.04); }

.hover-underline { position: relative; }
.hover-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.hover-underline:hover::after { transform: scaleX(1); }

/* Continuous motion helpers */
.animate-float { animation: float 5s var(--ease-in-out) infinite; }
.scroll-hint   { animation: scroll-hint 1.8s var(--ease-in-out) infinite; }

/* --------------------------------------------------------------------------
   IMAGE REVEAL — clip-path wipe + gentle zoom
   Wrap an <img> in [data-img-reveal]; js adds .is-visible.
   -------------------------------------------------------------------------- */
[data-img-reveal] { overflow: hidden; }
[data-img-reveal] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path var(--dur-slower) var(--ease-out),
              transform 1200ms var(--ease-out);
  will-change: clip-path, transform;
}
[data-img-reveal].is-visible img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   STAGGERED CHILDREN — parent [data-stagger]; children cascade automatically
   (js sets --i on each child). Works with [data-reveal] children.
   -------------------------------------------------------------------------- */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* --------------------------------------------------------------------------
   COUNTERS
   -------------------------------------------------------------------------- */
.counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   THEMED LOADERS
   Each page sets .loader[data-theme-loader="golf|estate|..."]. Default = logo.
   -------------------------------------------------------------------------- */
.loader__mark { animation: mark-in 700ms var(--ease-out) both, float 3s var(--ease-in-out) 700ms infinite; }
.loader__theme { display: grid; place-items: center; height: 64px; margin-block-start: var(--space-5); }

/* Golf — rolling ball on a line */
.loader-golf__line { width: 140px; height: 2px; background: rgba(255,255,255,0.2); position: relative; border-radius: 2px; }
.loader-golf__ball {
  position: absolute; top: -6px; left: 50%; margin-left: -7px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--color-off-white);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.2);
  animation: ball-roll 1.4s var(--ease-in-out) infinite alternate;
}

/* Estate — house outline drawn */
.loader-estate__svg path { stroke: var(--color-accent-light); stroke-width: 2; fill: none;
  stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw-stroke 1.6s var(--ease-out) infinite alternate; }

/* Wildlife — flying bird */
.loader-wildlife__bird { color: var(--color-accent-light); animation: bird-fly 2.2s var(--ease-in-out) infinite; }

/* Recreation — water ripple */
.loader-recreation { position: relative; width: 40px; height: 40px; }
.loader-recreation span {
  position: absolute; inset: 0; border: 2px solid var(--color-accent-light); border-radius: 50%;
  animation: ripple-out 1.6s var(--ease-out) infinite;
}
.loader-recreation span:nth-child(2) { animation-delay: 0.5s; }
.loader-recreation span:nth-child(3) { animation-delay: 1s; }

/* Gallery — camera shutter blink */
.loader-gallery__lens { width: 34px; height: 34px; border: 2px solid var(--color-accent-light); border-radius: 6px; overflow: hidden; }
.loader-gallery__lens span { display: block; width: 100%; height: 100%; background: rgba(255,255,255,0.25);
  transform-origin: center; animation: shutter-blink 1.4s var(--ease-in-out) infinite; }

/* Contact — dropping location pin */
.loader-contact__pin { color: var(--color-accent-light); animation: pin-drop 1.4s var(--ease-out) infinite; }

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-img-reveal] img { clip-path: none !important; transform: none !important; }
  [data-parallax] { transform: none !important; }
  .glow--pulse, .animate-float, .scroll-hint, .skeleton,
  .loader__mark, .loader-golf__ball, .loader-estate__svg path,
  .loader-wildlife__bird, .loader-recreation span, .loader-gallery__lens span,
  .loader-contact__pin, .estate-map__pin { animation: none !important; }
}

/* Simplify heavier motion on small screens */
@media (max-width: 640px) {
  [data-img-reveal] img { transition-duration: var(--dur-slow); }
}