/* ============================================================
   SCROLL ANIMATION SYSTEM
   All animation values live as CSS custom properties —
   change a value here and it updates everywhere.

   HOOKS (where to add classes/attributes in HTML):
   → data-anim="text"   — headings, paragraphs, buttons
   → data-anim="image"  — image wrappers (.intro-image, etc.)
   → data-anim="stat"   — stat number blocks
   → data-anim="cards"  — PARENT of a card row (children auto-stagger)
   → .reveal            — existing fade+slide-up (kept for compat)
   → .reveal-left       — existing fade+slide-left (kept for compat)
   → .reveal-right      — existing fade+slide-right (kept for compat)
   ============================================================ */

:root {
  /* ── Text / stat ── */
  --anim-text-duration:    600ms;
  --anim-text-translate-y: 40px;
  --anim-text-easing:      ease-out;

  /* ── Images ── */
  --anim-image-duration:   700ms;
  --anim-image-scale:      0.96;
  --anim-image-easing:     ease-out;

  /* ── Cards (stagger) ── */
  --anim-card-duration:    500ms;
  --anim-card-stagger:     120ms;   /* delay multiplier per card — set in JS */
  --anim-card-easing:      ease-out;

  /* ── Existing .reveal ── */
  --anim-reveal-duration:  600ms;
  --anim-reveal-easing:    ease-out;

  /* ── Nav scrolled ── */
  --nav-scrolled-bg:       #f5f0e8;
  --nav-scrolled-shadow:   0 2px 20px rgba(0, 0, 0, 0.07);
  --nav-color-transition:  color 400ms ease;
}


/* ──────────────────────────────────────────
   NAV — scrolled state
   → HOOK: <nav class="nav"> element
   Overrides the dark bg set in style.css.
   Text colours flip to dark automatically.
   ────────────────────────────────────────── */

/* Add colour transition to all nav text */
.nav-logo-name,
.nav-links a,
.nav-cta,
.nav-hamburger span {
  transition: var(--nav-color-transition);
}

.nav.scrolled {
  background: var(--nav-scrolled-bg) !important;
  box-shadow: var(--nav-scrolled-shadow) !important;
  backdrop-filter: none !important;
}

/* Logo */
.nav.scrolled .nav-logo-name  { color: var(--dark, #181614) !important; }
.nav.scrolled .nav-logo-sub   { color: var(--gold, #c4a97d) !important; }

/* Links */
.nav.scrolled .nav-links a        { color: rgba(24, 22, 20, 0.6) !important; }
.nav.scrolled .nav-links a:hover  { color: var(--dark, #181614) !important; }
.nav.scrolled .nav-links a::after { background: var(--gold, #c4a97d); }

/* CTA pill */
.nav.scrolled .nav-cta       { border-color: var(--dark, #181614) !important; color: var(--dark, #181614) !important; }
.nav.scrolled .nav-cta:hover { background: var(--dark, #181614) !important; color: #fff !important; }

/* Hamburger bars */
.nav.scrolled .nav-hamburger span { background: var(--dark, #181614) !important; }


/* ──────────────────────────────────────────
   DATA-ANIM — initial (hidden) states
   JS adds .has-animated to trigger entrance.
   ────────────────────────────────────────── */

/* → data-anim="text" and data-anim="stat" */
[data-anim="text"],
[data-anim="stat"] {
  opacity: 0;
  transform: translateY(var(--anim-text-translate-y));
  will-change: opacity, transform;
}

/* → data-anim="image" */
[data-anim="image"] {
  opacity: 0;
  transform: scale(var(--anim-image-scale));
  will-change: opacity, transform;
}

/* → data-anim="cards" — children start hidden */
[data-anim="cards"] > * {
  opacity: 0;
  transform: translateY(var(--anim-text-translate-y));
  will-change: opacity, transform;
}


/* ──────────────────────────────────────────
   DATA-ANIM — animated (visible) states
   Applied once .has-animated is added by JS.
   ────────────────────────────────────────── */

[data-anim="text"].has-animated,
[data-anim="stat"].has-animated {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  var(--anim-text-duration)  var(--anim-text-easing),
    transform var(--anim-text-duration) var(--anim-text-easing);
}

[data-anim="image"].has-animated {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity  var(--anim-image-duration)  var(--anim-image-easing),
    transform var(--anim-image-duration) var(--anim-image-easing);
}

/* Children of a card group animate when parent gets .has-animated.
   transition-delay is set inline by JS for the stagger. */
[data-anim="cards"].has-animated > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  var(--anim-card-duration)  var(--anim-card-easing),
    transform var(--anim-card-duration) var(--anim-card-easing);
}


/* ──────────────────────────────────────────
   EXISTING .reveal SYSTEM
   Retains old class API; upgrades durations
   to use CSS vars for consistent tuning.
   → HOOK: .reveal / .reveal-left / .reveal-right
   ────────────────────────────────────────── */

.reveal,
.reveal-left,
.reveal-right {
  transition-duration: var(--anim-reveal-duration) !important;
  transition-timing-function: var(--anim-reveal-easing) !important;
}


/* ──────────────────────────────────────────
   BRAND STRIP — pause on hover
   CSS-only. The animation is defined in
   style.css (@keyframes marquee).
   → HOOK: .brand-strip wrapping element
   ────────────────────────────────────────── */

.brand-strip:hover .brand-strip-inner {
  animation-play-state: paused;
}


/* ──────────────────────────────────────────
   PREFERS-REDUCED-MOTION
   Disables ALL entrance animations and
   parallax for users who prefer it.
   This block is the single kill-switch.
   ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  /* Instant show — skip opacity/transform entirely */
  [data-anim="text"],
  [data-anim="image"],
  [data-anim="stat"],
  [data-anim="cards"] > *,
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1        !important;
    transform: none   !important;
    transition: none  !important;
    animation: none   !important;
  }

  /* No parallax shift on hero */
  .hero-video-wrap {
    transform: none !important;
  }

  /* Stop brand strip from looping */
  .brand-strip-inner {
    animation: none !important;
  }

  /* Instant nav transition */
  .nav,
  .nav-logo-name,
  .nav-links a,
  .nav-cta,
  .nav-hamburger span {
    transition: none !important;
  }
}