/* ============================================================
   ANIMATIONS.CSS — Scroll Reveals, Hero Stagger, Keyframes
   Unique Stays Media
============================================================ */


/* ------------------------------------------------------------
   SCROLL REVEAL — Base
   JS adds `.is-visible` when element enters viewport
------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transition:
    opacity var(--dur-cinematic) var(--ease-out-expo),
    transform var(--dur-cinematic) var(--ease-out-expo);
  will-change: transform, opacity;
}

.reveal.is-visible {
  opacity: 1;
  transform: none !important;
  will-change: auto;
}

/* Variants */
.reveal--up {
  transform: translateY(48px);
}

.reveal--left {
  transform: translateX(-40px);
}

.reveal--right {
  transform: translateX(40px);
}

.reveal--scale {
  transform: scale(0.96);
}

/* Stagger: parent has .reveal--stagger, children get sequential delays */
.reveal--stagger .service-card:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger .service-card:nth-child(2) { transition-delay: 120ms; }
.reveal--stagger .service-card:nth-child(3) { transition-delay: 240ms; }

/* Generic stagger for other lists */
.reveal--stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger > *:nth-child(2) { transition-delay: 100ms; }
.reveal--stagger > *:nth-child(3) { transition-delay: 200ms; }
.reveal--stagger > *:nth-child(4) { transition-delay: 300ms; }

/* Staggered children also need the reveal treatment */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--dur-cinematic) var(--ease-out-expo),
    transform var(--dur-cinematic) var(--ease-out-expo);
  will-change: transform, opacity;
}

.reveal--stagger.is-visible > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}


/* ------------------------------------------------------------
   HERO STAGGER — Controlled from JS via data-delay
   .reveal-hero elements start hidden, JS adds .is-visible
   with delay from data-delay attribute
------------------------------------------------------------ */
.reveal-hero {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s var(--ease-out-expo),
    transform 0.9s var(--ease-out-expo);
  will-change: transform, opacity;
}

.reveal-hero.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}


/* ------------------------------------------------------------
   SCROLL INDICATOR ANIMATION
------------------------------------------------------------ */
.hero__scroll-line {
  animation: scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top center; }
  30%  { opacity: 1; transform: scaleY(1); transform-origin: top center; }
  70%  { opacity: 1; transform: scaleY(1); transform-origin: bottom center; }
  100% { opacity: 0; transform: scaleY(0); transform-origin: bottom center; }
}


/* ------------------------------------------------------------
   NAV ENTRANCE — Fade in on page load
------------------------------------------------------------ */
#site-nav {
  animation: nav-fade-in 0.8s var(--ease-out-expo) 0.1s both;
}

@keyframes nav-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ------------------------------------------------------------
   PAGE LOAD — Body reveal
------------------------------------------------------------ */
body {
  animation: page-reveal 0.4s ease both;
}

@keyframes page-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ------------------------------------------------------------
   FORM FIELD — Label float transition smoothing
------------------------------------------------------------ */
.form-label {
  /* Supplemental easing beyond what components.css defines */
  transition-timing-function: var(--ease-out-expo);
}


/* ------------------------------------------------------------
   CASE STUDY — Image parallax prep
   Actual parallax offset applied via JS
------------------------------------------------------------ */
.case-study__image {
  transform-origin: center center;
  /* will-change set/removed by JS */
}


/* ------------------------------------------------------------
   SECTION SEPARATOR LINES — Animate on scroll
------------------------------------------------------------ */
.intro__rule {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s var(--ease-out-expo);
}

.intro__rule.is-visible {
  transform: scaleX(1);
}


/* ------------------------------------------------------------
   STAT COUNTER — Number pop-in
------------------------------------------------------------ */
.stat {
  transition: opacity 0.5s var(--ease-out-expo);
}


/* ------------------------------------------------------------
   ACCESSIBILITY — Reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-hero,
  .reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}