/* ==========================================================================
   ANIMATIONS
   Base states for GSAP-driven reveals + a few pure-CSS entrances/loops.
   Everything here is disabled under prefers-reduced-motion (see bottom).
   ========================================================================== */

/* ---- Nav + hero load-in (pure CSS, runs immediately, no JS dependency) ---- */
@keyframes navDrop{
  from{ opacity:0; transform:translateY(-16px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes fadeScale{
  from{ opacity:0; transform:scale(0.9); }
  to{ opacity:1; transform:scale(1); }
}
header.nav{ animation:navDrop .7s var(--ease) both; }
.hero-anim{ opacity:0; animation:fadeUp .9s var(--ease) both; }
.hero-anim.d1{ animation-delay:.05s; }
.hero-anim.d2{ animation-delay:.2s; }
.hero-anim.d3{ animation-delay:.35s; }
.hero-anim.d4{ animation-delay:.5s; }
.hero-visual{ opacity:0; animation:fadeScale 1.1s var(--ease) both; animation-delay:.25s; }

/* ---- GSAP ScrollTrigger targets ----
   JS sets these elements' initial state via GSAP `from()` calls, so no
   opacity:0 is hardcoded here (avoids a flash-of-hidden-content if JS
   fails to load — content is visible by default, then animated). */
.gs-fade-up, .gs-fade-left, .gs-fade-right, .gs-zoom, .gs-mask, .gs-stagger{
  will-change:transform, opacity;
}

/* Mask reveal wrapper (used for headings / image reveals) */
.mask-reveal{ overflow:hidden; display:block; }
.mask-reveal-inner{ display:block; }

/* Card hover elevation (used across benefit / class / testimonial cards) */
.hover-lift{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.hover-lift:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

/* Cursor-follow ambient glow (desktop only) */
#cursor-glow{
  position:fixed; width:480px; height:480px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(160,69,15,0.07), transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s;
  opacity:0;
}
@media(hover:hover){ #cursor-glow.active{ opacity:1; } }

/* Loading veil (brief, elegant — prevents FOUC flash on load) */
#veil{
  position:fixed; inset:0; z-index:999; background:var(--cream);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#veil.hide{ opacity:0; visibility:hidden; }
#veil .mark{
  width:64px; height:64px; border-radius:50%; overflow:hidden; border:1px solid var(--border);
  animation:breathe 2.4s ease-in-out infinite;
}
#veil .mark img{ width:100%; height:100%; object-fit:cover; }

/* ---- Reduced motion: disable everything decorative ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  header.nav, .hero-anim, .hero-visual{ opacity:1 !important; }
}