/* ============================================================
   ANIMATIONS — Swiss design engineering
   Informed by Emil Kowalski's principles:
   - Only animate transform + opacity (GPU-composited)
   - ease-out for entries (immediate response, decelerates)
   - Under 300ms for UI; 400ms for larger reveals
   - Never from scale(0) — real objects don't appear from nothing
   - Stagger 40-60ms between list items
   - Respect prefers-reduced-motion completely
   - No scroll-jacking, no parallax, no bounce
   Swiss character: mechanical precision, not organic physics
   ============================================================ */

/* ---- Custom easing curves --------------------------------- */
:root {
  /* Strong ease-out — snappy, decisive, Swiss */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  /* In-out for on-screen transitions */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Crisp step-in for mechanical feel */
  --ease-crisp:  cubic-bezier(0.16, 1, 0.3, 1);
  /* produx.design custom easings */
  --ease-nature-sway: cubic-bezier(0.08, 0.494, 0.14, 1);
  --ease-power4-out:  cubic-bezier(0.25, 1, 0.5, 1);
}

/* ============================================================
   PAGE LOAD — hero reveals
   Cascade: nav → eyebrow → headline lines → sub → reel
   ============================================================ */

/* Elements start invisible, animate in on load */
.anim-load {
  opacity: 0;
  transform: translateY(1rem);
  animation: fadeUp var(--dur, 320ms) var(--ease-out) var(--delay, 0ms) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Delay cascade for load sequence */
.hero-display h1                 { --delay: 420ms; }
.hero-cta                        { --delay: 1100ms; }
.hero-reel                       { --delay: 1300ms; }
.hero-strap                      { --delay: 1500ms; }

/* Slower fade in reveal for navbar */
.nav.anim-load {
  opacity: 0;
  transform: none;
  animation: fadeNavIn 2.1s var(--ease-power4-out) 0ms forwards;
}
@keyframes fadeNavIn {
  to {
    opacity: 1;
  }
}

/* Slower slide up reveal for video player */
.hero-reel.anim-load {
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeUpReel 0.8s var(--ease-power4-out) var(--delay, 0ms) forwards;
}
@keyframes fadeUpReel {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Hero eyebrow row: slide up and fade insnappily before header 50% animation finishes ---- */
.hero-eyebrow-row-inner {
  opacity: 0;
  transform: translateY(1.5rem);
  animation: fadeRiseEyebrow 0.8s var(--ease-power4-out) 0ms both;
}
.hero-eyebrow-row-inner.no-anim {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}
@keyframes fadeRiseEyebrow {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Hero headline: word-by-word rise from the baseline ------ */
/* Two block rows force the line-1 / accent-line break; each word  */
/* is its own inline-block mask so it rises in place, one at a     */
/* time (0.7s rise, 0.3s pause between → delays 0/1/2/3s).         */
.hero-h1-line { display: block; }

.hero-h1-piece {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;          /* overflow:hidden re-baselines to the bottom edge; top-align
                                   identical-height pieces → one clean row */
  padding: 0.12em 0.08em 0.22em 0; /* vertical only + slight right pad to clear italic/glyph overflow */
  margin:  -0.12em -0.08em -0.22em 0; /* cancel the padding → tight rhythm unchanged */
  --rise-delay: 300ms;          /* piece 1 (delayed by 300ms so eyebrow row rises first) */
}
/* Global order across the two rows (nth-child counts elements, so inter-tag whitespace is safe) */
.hero-h1-line:nth-child(1) .hero-h1-piece:nth-child(2) { --rise-delay: 370ms; }
.hero-h1-line:nth-child(1) .hero-h1-piece:nth-child(3) { --rise-delay: 440ms; }
.hero-h1-line:nth-child(2) .hero-h1-piece:nth-child(1) { --rise-delay: 510ms; }

.hero-h1-inner {
  display: block;
  transform: translateY(125%);  /* fully below the padded clip edge (holds when a piece wraps) */
  animation: riseUp 1.4s var(--ease-nature-sway) var(--rise-delay) both;
}
@keyframes riseUp {
  to { transform: translateY(0); }
}

/* ---- Hero paragraph: line-by-line masked rise reveal --------- */
.hero-sub-line {
  display: block;
  overflow: hidden;
}
.hero-sub-line-inner {
  display: block;
  transform: translateY(120%);
  animation: riseUpParagraph 1.1s var(--ease-power4-out) var(--rise-delay, 0ms) both;
}
.hero-sub-line-inner.no-anim {
  transform: translateY(0) !important;
  animation: none !important;
}
@keyframes riseUpParagraph {
  to { transform: translateY(0); }
}

/* Case hero load sequence */
.case-eyebrow-bar                { --delay: 0ms;   }
.case-number                     { --delay: 60ms;  }
.case-headline-col               { --delay: 140ms; }
.case-sub-row                    { --delay: 200ms; }
.case-meta-strip                 { --delay: 240ms; }

/* ============================================================
   SCROLL REVEALS — IntersectionObserver sets .revealed (or GSAP)
   Elements start at translateY(14px) opacity 0
   On .revealed → translateY(0) opacity 1
   ============================================================ */
.gsap-active [data-reveal],
.gsap-active [data-reveal-clip] {
  transition: none !important;
}
[data-reveal] {
  opacity: 0;
  transform: translateY(1.40rem);
  transition:
    opacity 380ms var(--ease-out) var(--stagger, 0ms),
    transform 380ms var(--ease-out) var(--stagger, 0ms);
  will-change: opacity, transform;
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings in grids — set via JS or nth-child */
[data-reveal]:nth-child(1) { --stagger: 0ms;   }
[data-reveal]:nth-child(2) { --stagger: 55ms;  }
[data-reveal]:nth-child(3) { --stagger: 110ms; }
[data-reveal]:nth-child(4) { --stagger: 165ms; }

/* Section headers — col-by-col stagger */
.sec-head .sec-num  { --stagger: 0ms;   }
.sec-head h2        { --stagger: 50ms;  }
.sec-head .sec-lede { --stagger: 100ms; }

/* ============================================================
   CLIP-PATH REVEAL — for case number (editorial wipe)
   Mechanical: the giant ghosted number wipes in from bottom
   ============================================================ */
[data-reveal-clip] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 480ms var(--ease-in-out) var(--stagger, 0ms);
}
[data-reveal-clip].revealed {
  clip-path: inset(0% 0 0 0);
}

/* ============================================================
   HOVER STATES — tuned per Emil's rules
   - Specify exact properties (never `transition: all`)
   - Use transform + opacity only
   - :active → scale(0.97) for pressable feedback
   ============================================================ */

/* Nav CTA — already transitions bg/color in style.css, tighten it */
.nav-cta {
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

/* Hero pill CTA */
.hero-cta-circle {
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

/* Work cards — hover background */
.work-card {
  transition: background 240ms var(--ease-out);
}

/* Primary button — scale on :active */
.btn-primary {
  transition: transform 140ms var(--ease-out);
}
.btn-primary:active { transform: translate(1px, -1px) scale(0.97); }

/* Ghost button */
.btn-ghost {
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
}

/* Footer links */
.foot a {
  transition: color 140ms var(--ease-out);
}

/* Menu links */
.m-list a {
  transition:
    background 180ms var(--ease-out),
    color 180ms var(--ease-out),
    padding-left 180ms var(--ease-out);
}
.m-list a .m-num {
  transition: color 180ms var(--ease-out);
}
.m-list a .m-arr {
  transition:
    opacity 350ms var(--ease-out),
    transform 350ms var(--ease-out),
    color 350ms var(--ease-out);
}

/* Service cards */
.svc {
  transition: background 240ms var(--ease-out);
}

/* Team cards */
.team-card {
  transition: background 240ms var(--ease-out);
}

/* Outcome + result cells */
.outcome,
.impact-stat,
.rs-item {
  transition: background 240ms var(--ease-out);
}

/* Nav trigger bar — width expand */
.nav-trigger-bars i {
  transition: width 200ms var(--ease-out);
}

/* Reel play button */
.reel-btn {
  transition:
    background 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

/* ============================================================
   MENU OVERLAY — slide in from right + child stagger
   ============================================================ */
.menu-overlay {
  transition:
    transform 500ms var(--ease-power4-out),
    visibility 500ms step-end;
  transition-delay: 650ms;
}
.menu-overlay.open {
  transition:
    transform 800ms var(--ease-power4-out),
    visibility 0s;
  transition-delay: 0s;
}

/* Close button rotate */
.m-close {
  transition:
    background 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 280ms var(--ease-out);
}

/* Default closed/exit transition state for children */
.m-head {
  opacity: 0 !important;
  transform: translateY(-3.20rem) !important;
  transition: opacity 400ms var(--ease-power4-out), transform 400ms var(--ease-power4-out);
  transition-delay: 300ms;
}
.m-aside {
  opacity: 0 !important;
  transform: translateX(4.80rem) !important;
  transition: opacity 400ms var(--ease-power4-out), transform 400ms var(--ease-power4-out);
  transition-delay: 300ms;
}
.m-list a {
  opacity: 0 !important;
  transform: translateX(4.80rem) !important;
  transition: opacity 400ms var(--ease-power4-out), transform 400ms var(--ease-power4-out), background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), padding-left 250ms var(--ease-power4-out) !important;
}

/* Closed state reverse stagger delays (exit animations) */
.m-list a:nth-child(1) { transition: opacity 400ms var(--ease-power4-out) 250ms, transform 400ms var(--ease-power4-out) 250ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.m-list a:nth-child(2) { transition: opacity 400ms var(--ease-power4-out) 200ms, transform 400ms var(--ease-power4-out) 200ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.m-list a:nth-child(3) { transition: opacity 400ms var(--ease-power4-out) 150ms, transform 400ms var(--ease-power4-out) 150ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.m-list a:nth-child(4) { transition: opacity 400ms var(--ease-power4-out) 100ms, transform 400ms var(--ease-power4-out) 100ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.m-list a:nth-child(5) { transition: opacity 400ms var(--ease-power4-out) 50ms, transform 400ms var(--ease-power4-out) 50ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.m-list a:nth-child(6) { transition: opacity 400ms var(--ease-power4-out) 0ms, transform 400ms var(--ease-power4-out) 0ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }

/* Open/entry transition state for children */
.menu-overlay.open .m-head {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 800ms var(--ease-power4-out), transform 800ms var(--ease-power4-out);
  transition-delay: 200ms !important;
}
.menu-overlay.open .m-aside {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 800ms var(--ease-power4-out), transform 800ms var(--ease-power4-out);
  transition-delay: 200ms !important;
}
.menu-overlay.open .m-list a {
  opacity: 1 !important;
  transform: translateX(0) !important;
  transition: opacity 800ms var(--ease-power4-out), transform 800ms var(--ease-power4-out), background 250ms var(--ease-power4-out), color 250ms var(--ease-power4-out), padding-left 250ms var(--ease-power4-out) !important;
}

/* Open state stagger delays (entry animations) */
.menu-overlay.open .m-list a:nth-child(1) { transition: opacity 800ms var(--ease-power4-out) 200ms, transform 800ms var(--ease-power4-out) 200ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.menu-overlay.open .m-list a:nth-child(2) { transition: opacity 800ms var(--ease-power4-out) 300ms, transform 800ms var(--ease-power4-out) 300ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.menu-overlay.open .m-list a:nth-child(3) { transition: opacity 800ms var(--ease-power4-out) 400ms, transform 800ms var(--ease-power4-out) 400ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.menu-overlay.open .m-list a:nth-child(4) { transition: opacity 800ms var(--ease-power4-out) 500ms, transform 800ms var(--ease-power4-out) 500ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.menu-overlay.open .m-list a:nth-child(5) { transition: opacity 800ms var(--ease-power4-out) 600ms, transform 800ms var(--ease-power4-out) 600ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }
.menu-overlay.open .m-list a:nth-child(6) { transition: opacity 800ms var(--ease-power4-out) 700ms, transform 800ms var(--ease-power4-out) 700ms, background 250ms var(--ease-power4-out) 0s, color 250ms var(--ease-power4-out) 0s, padding-left 250ms var(--ease-power4-out) 0s !important; }

/* Navbar slide down transition when menu closes */
.nav {
  transition: opacity 800ms var(--ease-power4-out), transform 800ms var(--ease-power4-out) !important;
  transition-delay: 1035ms !important;
}
body.menu-open .nav {
  opacity: 0 !important;
  transform: translateY(-3.20rem) !important;
  transition: none !important;
  pointer-events: none !important;
}

/* ============================================================
   CASE STUDY — chapter index active indicator
   Hairline underline sweeps in from left (Swiss rule)
   ============================================================ */
.ci-item {
  transition:
    background 160ms var(--ease-out),
    color 160ms var(--ease-out);
  position: relative;
}
.ci-item::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 0.20rem;
  background: var(--accent);
  width: 0;
  transition: width 200ms var(--ease-out);
}
.ci-item.active::after { width: 100%; }
.ci-item:hover::after  { width: 100%; }

/* ============================================================
   PHASE / LEARNING / CHAIN items — reveal stagger
   ============================================================ */
.phase         { --stagger: 0ms; }
.phase:nth-child(2) { --stagger: 55ms; }
.phase:nth-child(3) { --stagger: 110ms; }
.phase:nth-child(4) { --stagger: 165ms; }

.chain-item { --stagger: 0ms; }
.chain-item:nth-child(2) { --stagger: 70ms; }
.chain-item:nth-child(3) { --stagger: 140ms; }

/* ============================================================
   MICRO-ANIMATIONS — loops
   ============================================================ */
.hero-eyebrow-star svg {
  animation: starSpin 20s linear infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes starSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   STATEMENT SECTION ANIMATIONS — editorial brutalist reveals
   ============================================================ */
/* ============================================================
   STATEMENT SECTION ANIMATIONS — editorial brutalist reveals
   ============================================================ */
/* GSAP active reset to prevent browser transition conflicts */
.gsap-active .statement-label,
.gsap-active .statement-quote-icon,
.gsap-active .statement-quote-inner,
.gsap-active .statement-sig-line,
.gsap-active .statement-sig > div {
  transition: none !important;
}

/* Eyebrow Label */
.statement-label-wrap {
  overflow: hidden;
  margin-bottom: 5.3rem; /* Preserves visual space since margin doesn't collapse inside overflow:hidden */
}
.statement .statement-label {
  margin-bottom: 0 !important; /* Clear bottom margin to prevent inner extra height inside mask */
}
body:not(.gsap-active) .statement .statement-label {
  transform: translateY(120%);
  transition: transform 0.8s var(--ease-power4-out) var(--stagger, 0ms);
}
body:not(.gsap-active) .statement-label.revealed {
  transform: translateY(0);
}

/* Quote Icon */
.statement-quote-icon-wrap {
  display: block;
  overflow: hidden;
}
body:not(.gsap-active) .statement-quote-icon-wrap .statement-quote-icon {
  transform: translateY(105%);
  transition: transform 1.4s var(--ease-nature-sway) var(--stagger, 0ms);
}
body:not(.gsap-active) .statement-quote-icon-wrap .statement-quote-icon.revealed {
  transform: translateY(0);
}

/* Quote Text Pieces */
.statement-quote-line {
  display: block;
}
.statement-quote-piece {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.12em 0.08em 0.22em 0;
  margin:  -0.12em -0.08em -0.22em 0;
}
.statement-quote-inner {
  display: block;
}
body:not(.gsap-active) .statement-quote-inner {
  transform: translateY(125%);
  transition: transform 1.4s var(--ease-nature-sway) var(--stagger, 0ms);
}
body:not(.gsap-active) .statement-quote-inner.revealed {
  transform: translateY(0);
}

/* Signature Line */
body:not(.gsap-active) .statement-sig-line {
  transform: scaleX(0);
  transition: transform 1.0s var(--ease-power4-out) var(--stagger, 0ms);
}
body:not(.gsap-active) .statement-sig-line.revealed {
  transform: scaleX(1);
}

/* Signature Items */
body:not(.gsap-active) .statement-sig > div {
  opacity: 0;
  transform: translateY(3rem);
  transition: 
    opacity 0.8s var(--ease-power4-out) var(--stagger, 0ms),
    transform 0.8s var(--ease-power4-out) var(--stagger, 0ms);
}
body:not(.gsap-active) .statement-sig > div.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   REDUCED MOTION — full compliance
   Opacity-only transitions (still communicate state),
   all transform-based motion disabled
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-clip],
  .anim-load {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
    transition: none;
  }

  /* Hero headline, paragraph, reel, navbar, eyebrow rise, and statement: show statically, no motion */
  .hero-h1-inner,
  .hero-sub-line-inner,
  .hero-reel.anim-load,
  .nav.anim-load,
  .hero-eyebrow-row-inner,
  .statement-label,
  .statement-quote-icon,
  .statement-quote-inner,
  .statement-sig-line,
  .statement-sig > div {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .nav-cta,
  .hero-cta-circle,
  .btn-primary,
  .btn-ghost,
  .foot a,
  .m-list a,
  .svc,
  .team-card,
  .outcome,
  .impact-stat,
  .rs-item,
  .work-card {
    transition: opacity 150ms ease;
  }

  .btn-primary:active,
  .reel-btn:active {
    transform: none;
  }

  .menu-overlay {
    transition: opacity 150ms ease;
    transform: none !important;
  }

  .menu-overlay.open .m-head,
  .menu-overlay.open .m-aside,
  .menu-overlay.open .m-list a {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ci-item::after {
    transition: none;
  }

  .hero-eyebrow-star svg {
    animation: none !important;
  }
}