/* =====================================================================
   TACTIC V3 — Masterful Layer
   Loaded AFTER styles.css. Enhances V1 with:
   1. Z-axis depth tier system (5 layers, progressive blur)
   2. Rack-focus entry animation (cinematic reveal on first scroll)
   3. Chromatic aberration + lens distortion utilities
   4. Stretched vertical breathing (4x section padding)
   5. Section-by-section variety to break "violently similar" pattern
   6. Investigative-creator motif deepening (journal paper, polaroid,
      story-arc callouts, dossier file numbers)
   Voice anchor: Make it land. Make it stick. Make it count.
   ===================================================================== */

:root {
  /* V3 depth-tier blur amounts. Lighter than V1's old 40px/120px
     experiments — Ryan's note: "less than current mid and deep blur,
     more subtle and realistic." */
  --depth-0-blur: 0px;
  --depth-1-blur: 0.8px;
  --depth-2-blur: 2.5px;
  --depth-3-blur: 5px;
  --depth-4-blur: 9px;
  --depth-0-opacity: 1;
  --depth-1-opacity: 0.88;
  --depth-2-opacity: 0.72;
  --depth-3-opacity: 0.5;
  --depth-4-opacity: 0.32;

  /* V3 stretched section breathing — 4x V1's typical section padding.
     Ryan: "stretch out the design x4 with vertical breathing room." */
  --sec-pad-v3:        clamp(140px, 18vh, 240px);
  --sec-pad-v3-tall:   clamp(220px, 28vh, 380px);
  --sec-pad-v3-cinema: clamp(320px, 40vh, 520px);

  /* Aberration channel offsets (subtle by default, stronger on hover) */
  --cab-r: 0.45px;
  --cab-b: 0.3px;
  --cab-r-hover: 1.6px;
  --cab-b-hover: 1.1px;

  /* Color channels for aberration — coral red split, soft blue split */
  --cab-red:  rgba(239, 50, 45, 0.55);
  --cab-blue: rgba(60, 170, 255, 0.42);
}

/* ─────────────────────────────────────────────────────────────────
   1) Z-DEPTH TIER SYSTEM
   Apply data-depth="0..4" to any element to slot it into the system.
   Foreground stays sharp; depth grows with subtle blur + opacity drop.
   This is the core of the "investigative creator" diorama feel.
   ───────────────────────────────────────────────────────────────── */
[data-depth="0"] {
  filter: blur(var(--depth-0-blur));
  opacity: var(--depth-0-opacity);
}
[data-depth="1"] {
  filter: blur(var(--depth-1-blur));
  opacity: var(--depth-1-opacity);
}
[data-depth="2"] {
  filter: blur(var(--depth-2-blur));
  opacity: var(--depth-2-opacity);
}
[data-depth="3"] {
  filter: blur(var(--depth-3-blur));
  opacity: var(--depth-3-opacity);
}
[data-depth="4"] {
  filter: blur(var(--depth-4-blur));
  opacity: var(--depth-4-opacity);
}

/* While the cursor is near a depth element, ease toward sharper —
   simulates a focus puller riding the rack. Subtle. */
[data-depth]:hover {
  filter: blur(0);
  opacity: 1;
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────
   2) RACK-FOCUS ENTRY ANIMATION
   On first user scroll, the bg-collage layer "racks into focus" —
   starts blurred + slightly oversized, dissolves into sharp position.
   The hero text and primary content stay sharp throughout.
   Ryan: "I wanted rack focus experience when we start to scroll."
   ───────────────────────────────────────────────────────────────── */
body.rack-focus--init .bg-collage {
  filter: blur(14px);
  transform: scale(1.06);
  opacity: 0;
  transition: none;
}
body.rack-focus--armed .bg-collage {
  filter: blur(14px);
  transform: scale(1.06);
  opacity: 0;
}
/* Active = animation running. 1.4s rack pull. */
body.rack-focus--active .bg-collage {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  transition:
    filter 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1600ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hero atmosphere also racks in but slower, asymmetric (back focus) */
body.rack-focus--init .bg-atmosphere,
body.rack-focus--armed .bg-atmosphere {
  filter: blur(22px);
  opacity: 0.4;
}
body.rack-focus--active .bg-atmosphere {
  filter: blur(8px);
  opacity: 1;
  transition:
    filter 1800ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reduced motion — no rack focus, just present */
@media (prefers-reduced-motion: reduce) {
  body.rack-focus--init .bg-collage,
  body.rack-focus--armed .bg-collage,
  body.rack-focus--active .bg-collage,
  body.rack-focus--init .bg-atmosphere,
  body.rack-focus--armed .bg-atmosphere,
  body.rack-focus--active .bg-atmosphere {
    filter: none;
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   3) CHROMATIC ABERRATION (.cab)
   Subtle red+blue channel split via text-shadow stack. Pairs with
   serif italic accent words to feel like a vintage anamorphic lens.
   .cab--strong = stronger split for hover states.
   ───────────────────────────────────────────────────────────────── */
.cab {
  text-shadow:
    var(--cab-r) 0 0 var(--cab-red),
    calc(var(--cab-b) * -1) 0 0 var(--cab-blue);
  transition: text-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cab:hover,
.cab.is-cabbing {
  text-shadow:
    var(--cab-r-hover) 0 0 var(--cab-red),
    calc(var(--cab-b-hover) * -1) 0 0 var(--cab-blue);
}
@media (prefers-reduced-motion: reduce) {
  .cab { text-shadow: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   4) LENS DISTORTION
   Subtle barrel + vignette via SVG filter. Apply to .lens-frame
   wrappers around hero or full-bleed media. Performance-cheap because
   we use a static CSS gradient vignette + a transform-only "barrel".
   ───────────────────────────────────────────────────────────────── */
.lens-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lens-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Vignette for cinema feel */
  background:
    radial-gradient(120% 100% at 50% 50%,
      transparent 60%,
      rgba(0,0,0,0.18) 78%,
      rgba(0,0,0,0.42) 100%);
  mix-blend-mode: multiply;
  z-index: 4;
}
.lens-frame--barrel {
  perspective: 1400px;
}
.lens-frame--barrel > .lens-frame__inner {
  transform: rotateX(0.2deg) scale(1.012);
  transform-origin: 50% 60%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────
   5) SECTION BREATHING (4x stretch)
   Section-spacing variant classes. Apply .sec--breathing or
   .sec--cinema to get progressively more vertical room.
   ───────────────────────────────────────────────────────────────── */
.sec--breathing {
  padding-top:    var(--sec-pad-v3);
  padding-bottom: var(--sec-pad-v3);
}
.sec--tall {
  padding-top:    var(--sec-pad-v3-tall);
  padding-bottom: var(--sec-pad-v3-tall);
}
.sec--cinema {
  padding-top:    var(--sec-pad-v3-cinema);
  padding-bottom: var(--sec-pad-v3-cinema);
}
/* Override V1 default section padding for the V3 sections we mark up */
section.sec--breathing,
section.sec--tall,
section.sec--cinema {
  position: relative;
}

/* ─────────────────────────────────────────────────────────────────
   6) SECTION VARIETY — break "violently similar"
   Each major section gets distinct visual treatment beyond just copy.
   ───────────────────────────────────────────────────────────────── */

/* HERO V3 — keep V1's hero look. No lens-frame wrapper, no aberration on
   accent words, no cursor flare. Just a stronger bottom-anchored shade
   for type readability over the video. */
.hero.sec--hero-v3 {
  position: relative;
}
/* hero__readability-shade is a dedicated DOM element layered between
   the video and the content. Sits bottom-third, dark→transparent so
   the headline area always reads cleanly regardless of which frame
   the looping hero video is showing. */
.hero__readability-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Strong bottom shade for the tagline + meta + Watch Reel block */
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78) 0%,
      rgba(0, 0, 0, 0.62) 22%,
      rgba(0, 0, 0, 0.30) 48%,
      rgba(0, 0, 0, 0.08) 70%,
      transparent 88%),
    /* Subtle top shade so the nav bar reads cleanly too */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.12) 18%,
      transparent 32%);
}
@media (prefers-reduced-motion: reduce) {
  .hero__readability-shade { transition: none; }
}

/* STAKES V3 — typographic sculpture. Big asymmetric type, minimal
   ornament. The stakes section needs to BREATHE more than chatter. */
.sec--stakes-v3 {
  background:
    radial-gradient(60% 70% at 22% 30%, rgba(239,50,45,0.04), transparent 70%),
    radial-gradient(50% 50% at 84% 78%, rgba(194,145,112,0.03), transparent 70%),
    var(--c-ink, #0a0a0a);
}
.sec--stakes-v3 .stakes__h,
.sec--stakes-v3 h2 {
  font-size: clamp(2.4rem, 6.5vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.sec--stakes-v3 .stakes__h em,
.sec--stakes-v3 h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cream, #c9b894);
}

/* POSITIONING V3 — wide measured paragraph block. Used as the breath
   between hero punch and the work showcase. */
.sec--position-v3 {
  background-color: rgba(10,10,10,0.92);
}
.sec--position-v3 .position__line {
  font-family: var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.4;
  max-width: 38ch;
  color: var(--c-bone, #ece9e1);
}

/* SELECTED WORK V3 — depth-tiered tile mosaic */
.sec--work-v3 .work-grid > .work-tile:nth-child(3n+1) {
  /* near-camera focus, sharp */
}
.sec--work-v3 .work-grid > .work-tile:nth-child(3n+2) > .work-tile__cat,
.sec--work-v3 .work-grid > .work-tile:nth-child(3n+2) > .work-tile__meta {
  /* slight depth, the other tiles read as background-positioned */
  filter: blur(0);
}
.sec--work-v3 .work-tile:hover .work-tile__cat,
.sec--work-v3 .work-tile:hover .work-tile__meta {
  filter: blur(0);
  opacity: 1;
}

/* THREE TESTS V3 — spatial grid, cine-icons that respond to cursor proximity */
.sec--three-tests-v3 .three-tests__grid {
  gap: clamp(48px, 6vw, 96px);
}
.sec--three-tests-v3 .three-tests__card {
  position: relative;
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
  border: 1px solid rgba(236, 233, 225, 0.06);
  background:
    linear-gradient(135deg, rgba(236,233,225,0.02), transparent 60%);
  backdrop-filter: blur(0.4px);
  transition: border-color 400ms ease, transform 600ms cubic-bezier(0.22,1,0.36,1);
}
.sec--three-tests-v3 .three-tests__card:hover {
  border-color: rgba(239, 50, 45, 0.22);
  transform: translateY(-4px);
}

/* ATMOSPHERE V3 — full-bleed, chromatic aberration on the quote */
.sec--atmosphere-v3 {
  position: relative;
}
.sec--atmosphere-v3 blockquote,
.sec--atmosphere-v3 .atmosphere__line {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.25;
  text-shadow:
    var(--cab-r) 0 0 var(--cab-red),
    calc(var(--cab-b) * -1) 0 0 var(--cab-blue);
  transition: text-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sec--atmosphere-v3:hover blockquote,
.sec--atmosphere-v3:hover .atmosphere__line {
  text-shadow:
    var(--cab-r-hover) 0 0 var(--cab-red),
    calc(var(--cab-b-hover) * -1) 0 0 var(--cab-blue);
}

/* CTA CLOSE V3 — warm gold field, magnetic pull on CTA */
.sec--cta-v3 {
  background:
    linear-gradient(180deg,
      rgba(194, 145, 112, 0.04) 0%,
      rgba(194, 178, 112, 0.10) 40%,
      rgba(194, 145, 112, 0.04) 100%),
    var(--c-ink, #0a0a0a);
}
.sec--cta-v3 .cta-close__h {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1.05;
}

/* ─────────────────────────────────────────────────────────────────
   7) INVESTIGATIVE-CREATOR DEEPENING
   Add new ambient elements: journal paper, polaroid, dossier numbers,
   tape strips, redaction marks. All sit at depth 3-4 (background).
   ───────────────────────────────────────────────────────────────── */
.bg-paper {
  position: absolute;
  pointer-events: none;
  user-select: none;
  background:
    /* Faint paper grain via radial noise stand-in */
    repeating-linear-gradient(
      113deg,
      rgba(236, 233, 225, 0.014) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(
      27deg,
      rgba(236, 233, 225, 0.012) 0 1px,
      transparent 1px 4px),
    rgba(236, 233, 225, 0.022);
  border: 0.5px solid rgba(236, 233, 225, 0.08);
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.18),
    0 4px 22px rgba(0,0,0,0.28);
  border-radius: 2px;
}

.bg-polaroid {
  position: absolute;
  pointer-events: none;
  background: rgba(236, 233, 225, 0.07);
  border: 1px solid rgba(236, 233, 225, 0.14);
  padding: 6px 6px 28px 6px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}
.bg-polaroid::after {
  content: attr(data-caption);
  position: absolute;
  left: 8px;
  bottom: 4px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: rgba(10,10,10,0.7);
  text-transform: uppercase;
}
.bg-polaroid__inner {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(60% 70% at 30% 30%, rgba(239,50,45,0.18), transparent 70%),
    rgba(10, 10, 10, 0.5);
}

/* Dossier file number — large mono ID floating at depth 3 */
.bg-dossier-number {
  position: absolute;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: clamp(28px, 5vw, 64px);
  letter-spacing: 0.12em;
  color: rgba(236, 233, 225, 0.06);
  font-weight: 300;
  pointer-events: none;
  user-select: none;
}

/* Redaction bar — black blocks over hidden words */
.bg-redaction {
  position: absolute;
  height: 14px;
  background: rgba(10, 10, 10, 0.92);
  border: 0.5px solid rgba(236, 233, 225, 0.04);
  pointer-events: none;
}

/* Tape strip — diagonal, with serial-number text */
.bg-tape-strip {
  position: absolute;
  height: 28px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(236, 233, 225, 0.06) 0 6px,
      rgba(239, 50, 45, 0.04) 6px 8px),
    rgba(236, 233, 225, 0.04);
  border-top:    0.5px solid rgba(236, 233, 225, 0.10);
  border-bottom: 0.5px solid rgba(236, 233, 225, 0.10);
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 8px;
  letter-spacing: 0.32em;
  color: rgba(236, 233, 225, 0.4);
  display: flex;
  align-items: center;
  padding: 0 16px;
  pointer-events: none;
}

/* Story arc callout — labeled curve overlay */
.bg-arc-callout {
  position: absolute;
  pointer-events: none;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(236, 233, 225, 0.32);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────
   8) HERO V3 — lens character without text gimmicks.
   Per Ryan 2026-05-02: lens effects + chromatic aberration on hero are
   IN. The text rack (word-by-word focus pull) is OUT — that was the
   easy-route fake. Real rack focus is reserved for actual cinema-grade
   footage (the editor's-mark / letterpress shoot). Aberration here is
   subtle on italic accents only, modulating with scroll velocity from
   section 7 above.
   ───────────────────────────────────────────────────────────────── */
.hero__phrase em,
.hero__tagline em {
  text-shadow:
    var(--cab-r) 0 0 var(--cab-red),
    calc(var(--cab-b) * -1) 0 0 var(--cab-blue);
  transition: text-shadow 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero:hover .hero__phrase em,
.hero:hover .hero__tagline em {
  text-shadow:
    var(--cab-r-hover) 0 0 var(--cab-red),
    calc(var(--cab-b-hover) * -1) 0 0 var(--cab-blue);
}
@media (prefers-reduced-motion: reduce) {
  .hero__phrase em,
  .hero__tagline em { text-shadow: none; }
}

/* ─────────────────────────────────────────────────────────────────
   9) FOCUS-PULL ANIMATION KEYFRAMES
   Used by JS to animate specific elements on enter. Slow zoom-out as
   if the camera is pulling back from a single subject. */
/* Section-by-section focus pull. Each block enters at 50% opacity +
   soft blur, racks to 100% sharp over ~700ms. Short and tasteful —
   complements the headline, doesn't compete. Per Ryan 2026-05-03. */
.fp-enter {
  filter: blur(5px);
  opacity: 0.5;
  transform: translateY(4px);
  transition:
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter, opacity, transform;
}
.fp-enter.is-in {
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fp-enter, .fp-enter.is-in {
    filter: none; opacity: 1; transform: none; transition: none;
  }
}
/* Belt-and-suspenders: exclude bg-collage and bg-atmosphere descendants
   from being pulled into focus — they're ambient by design. */
.bg-collage .fp-enter,
.bg-atmosphere .fp-enter {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ─────────────────────────────────────────────────────────────────
  10) WATCH-REEL CTA REFINEMENT
   The WATCH THE REEL meta line had "60 LBS" garble — clean it up to
   read "2026 · SOUND ON" (matches the index.html update). Stays subtle.
   ───────────────────────────────────────────────────────────────── */
.hero__watch-meta {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.6);
}

/* ─────────────────────────────────────────────────────────────────
  11) MOTION PROFILE: depth-aware parallax tuning
   When an element has BOTH data-depth and data-parallax, scale the
   parallax amount inversely with depth — far elements move LESS in y
   than near elements (proper diorama).
   (JS sets --py from data-parallax * scroll-velocity; here we just
   tune transition curves. Actual depth-multiplier logic is in JS.)
   ───────────────────────────────────────────────────────────────── */
[data-parallax][data-depth] {
  transition: filter 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────
  12) CINEMATIC INTRO OVERLAY
   On first-session-visit, a full-bleed black scrim opens with a single
   line "Make it land. Make it stick. Make it count." that racks into
   focus, holds 1.2s, then aperture-irises out to reveal the hero.
   First-paint moment that establishes brand voice immediately.
   ───────────────────────────────────────────────────────────────── */
.cinema-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #0a0a0a;
  display: grid;
  place-items: center;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cinema-intro__line {
  font-family: var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1.45;
  color: var(--c-bone, #ece9e1);
  text-align: center;
  max-width: 28ch;
  filter: blur(10px);
  opacity: 0;
  transform: scale(1.04);
  transition:
    filter 1500ms cubic-bezier(0.16, 1, 0.3, 1) 200ms,
    opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1) 200ms,
    transform 1700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.cinema-intro__line em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-cream, #c9b894);
}
.cinema-intro__mark {
  position: absolute;
  bottom: 28px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(236, 233, 225, 0.4);
  text-transform: uppercase;
}
.cinema-intro.is-revealing .cinema-intro__line {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
.cinema-intro.is-irising-out {
  /* Aperture-iris-out: clip-path circle shrinks to center then opens */
  clip-path: circle(160% at 50% 50%);
  transition: clip-path 1600ms cubic-bezier(0.7, 0, 0.84, 0), opacity 700ms ease 1100ms;
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cinema-intro__line {
    filter: none; opacity: 1; transform: none; transition: none;
  }
  .cinema-intro.is-irising-out { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
  13) CURSOR-AWARE LENS FLARE (hero only)
   A small radial-gradient "flare" follows the cursor when over the
   hero. Reads as "lens reflection" without being garish. Restored
   2026-05-02 per Ryan: lens effects on hero are wanted; only the
   text-as-rack-focus animation was removed.
   ───────────────────────────────────────────────────────────────── */
.hero {
  --flare-x: 50%;
  --flare-y: 45%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(160px 160px at var(--flare-x) var(--flare-y),
      rgba(239, 50, 45, 0.05) 0%,
      rgba(239, 50, 45, 0.015) 40%,
      transparent 70%),
    radial-gradient(60px 60px at var(--flare-x) var(--flare-y),
      rgba(236, 233, 225, 0.06) 0%,
      transparent 70%);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero::before { display: none; } }
@media (hover: none) { .hero::before { display: none; } }

/* ─────────────────────────────────────────────────────────────────
  14) BEAT MARKERS — narrative chapter system
   Small mono-font "beat" labels float in the gutters at key sections,
   reinforcing the investigative-creator dossier metaphor. Ryan: "you
   see the story arcs, character diagrams, scribbles."
   ───────────────────────────────────────────────────────────────── */
.beat-marker {
  position: absolute;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(236, 233, 225, 0.36);
  text-transform: uppercase;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.beat-marker::before {
  content: "";
  width: 16px;
  height: 1px;
  background: rgba(239, 50, 45, 0.6);
}
.beat-marker--right { right: 32px; }
.beat-marker--left  { left: 32px; }
.beat-marker--right::before { order: 1; margin-left: 6px; }
.beat-marker .beat-num {
  color: rgba(239, 50, 45, 0.7);
  font-weight: 500;
  margin-right: 4px;
}

/* ─────────────────────────────────────────────────────────────────
  15) MOBILE TUNING
   Reduce blur strength + section breathing on small viewports —
   what reads as cinematic on desktop reads as broken on phones.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root {
    --depth-1-blur: 0.4px;
    --depth-2-blur: 1px;
    --depth-3-blur: 2px;
    --depth-4-blur: 4px;
    --sec-pad-v3: clamp(80px, 12vh, 130px);
    --sec-pad-v3-tall: clamp(120px, 16vh, 200px);
    --sec-pad-v3-cinema: clamp(160px, 22vh, 280px);
  }
  /* Collage elements with low opacity may disappear on mobile —
     bump them up so the texture is still visible */
  [data-depth="3"] { opacity: 0.65; }
  [data-depth="4"] { opacity: 0.45; }
  /* Hide the heaviest depth-4 polaroids on mobile to save room */
  .bg-polaroid[data-depth="4"],
  .bg-paper[data-depth="4"] { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
  16) HARD SPECIFICITY OVERRIDES
   Bump data-depth opacity to win against .bg-collage__el.is-in.
   ───────────────────────────────────────────────────────────────── */
.bg-collage__el[data-depth="0"] { filter: blur(var(--depth-0-blur)); opacity: var(--depth-0-opacity); }
.bg-collage__el[data-depth="1"] { filter: blur(var(--depth-1-blur)); opacity: var(--depth-1-opacity); }
.bg-collage__el[data-depth="2"] { filter: blur(var(--depth-2-blur)); opacity: var(--depth-2-opacity); }
.bg-collage__el[data-depth="3"] { filter: blur(var(--depth-3-blur)); opacity: var(--depth-3-opacity); }
.bg-collage__el[data-depth="4"] { filter: blur(var(--depth-4-blur)); opacity: var(--depth-4-opacity); }
.bg-collage__el[data-depth].is-in {
  /* Allow opacity transition to play but cap at depth-set value */
  transition: filter 800ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────────────────────────────────────────────────────────────
  17) HERO WORD-BY-WORD FOCUS PULL
   Each word in the hero tagline starts in soft focus, then racks into
   sharp one at a time across ~1.4s. Tied to the cinema-intro reveal
   end so it lands as the overlay dissolves. JS adds .word-focus and
   .word-focus--n classes; CSS handles the actual transitions.
   ───────────────────────────────────────────────────────────────── */
.hero__tagline .word-focus {
  display: inline-block;
  filter: blur(6px);
  opacity: 0.55;
  transform: translateY(2px);
  transition:
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__tagline.is-pulling .word-focus--0  { transition-delay:    0ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--1  { transition-delay:  120ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--2  { transition-delay:  240ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--3  { transition-delay:  360ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--4  { transition-delay:  480ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--5  { transition-delay:  600ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--6  { transition-delay:  720ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--7  { transition-delay:  840ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--8  { transition-delay:  960ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--9  { transition-delay: 1080ms; filter: blur(0); opacity: 1; transform: none; }
.hero__tagline.is-pulling .word-focus--10 { transition-delay: 1200ms; filter: blur(0); opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__tagline .word-focus {
    filter: none; opacity: 1; transform: none; transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
  18) WATCH REEL — quiet variant
   .hero__watch--quiet replaces V1's --bold variant on the home hero.
   Subtle outline pill, bone-on-glass, no coral fill. The button still
   reads as a call to action but doesn't compete with the headline.
   ───────────────────────────────────────────────────────────────── */
.hero__watch--quiet {
  padding: 11px 18px 11px 14px !important;
  gap: 10px !important;
  background: rgba(10, 10, 10, 0.42) !important;
  color: rgba(236, 233, 225, 0.92) !important;
  border: 1px solid rgba(236, 233, 225, 0.28) !important;
  border-radius: 999px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin-top: 22px !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:
    background 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__watch--quiet:hover {
  background: rgba(10, 10, 10, 0.62) !important;
  border-color: rgba(236, 233, 225, 0.5) !important;
  transform: translateY(-1px) !important;
}
.hero__watch--quiet .hero__watch-icon {
  width: 20px !important;
  height: 20px !important;
  background: rgba(239, 50, 45, 0.85) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto;
}
.hero__watch--quiet .hero__watch-icon svg {
  width: 9px !important;
  height: 9px !important;
}
.hero__watch--quiet .hero__watch-label {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}
.hero__watch--quiet .hero__watch-meta {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 9.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.55) !important;
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   MARK HIGHLIGHT — coral marker draws across one key word per section
   on scroll-in. IntersectionObserver in script-v3.js adds
   .is-marked-section, which flips the ::before from scaleX(0) to
   scaleX(1). Origin is left, so it reads as a marker dragged across.
   Sits behind text via z-index: -1 inside an isolated stacking context.
   ════════════════════════════════════════════════════════════════════ */
.mark-hl {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}
.mark-hl::before {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.04em;
  height: 0.55em;
  background: #EF322D;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 880ms cubic-bezier(0.55, 0, 0.20, 1);
  z-index: -1;
  pointer-events: none;
  border-radius: 1px;
}
.mark-hl.is-marked-section::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .mark-hl::before {
    transition: none;
    transform: scaleX(1);
  }
}

/* ─────────────────────────────────────────────────────────────────
  20) CLOSE ANIMATION — staggered reverse-out
   The full reverse-cascade rule for leaders lives at section "(b)
   Cloth-sim leader bars" below where --close-delay is honored per
   leader. We previously redeclared transition here with `!important`
   which stomped the per-leader stagger (a transition shorthand resets
   transition-delay to 0). Removed.

   ALSO: extend V1's visibility timer so the cloth panels + leaders
   actually finish their close animation before .nav-overlay goes
   visibility:hidden. V1 set 720ms; max close-delay (180ms) + duration
   (580ms) = 760ms, plus a 40ms safety buffer.
   ───────────────────────────────────────────────────────────────── */
.nav-overlay {
  transition: visibility 0s linear 800ms;
}
.nav-overlay.is-open {
  transition: visibility 0s linear 0s;
}

/* ─────────────────────────────────────────────────────────────────
  20b) KILL V1 PRELOADER + PAGE-TRANS ENTIRELY
   Per Ryan 2026-05-04: the circular TACTIC wordmark page-transition
   animation and the 5-4-3-2-1 countdown preloader both flash on top
   of the page after the hamburger closes. Neither earns its place
   in V3 — the brand reveals itself through the doctrine and the
   dossier vector animations, not through generic loaders.
   ───────────────────────────────────────────────────────────────── */
[data-preloader],
[data-page-trans] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
  21) BG-COLLAGE TEXTURE VISIBILITY BUMP
   The investigative-creator deepening (polaroids, journal paper,
   dossier numbers, tape strips, redaction bars, arc callouts) was
   originally tuned for "barely-there ambient" — too far. Ryan flagged
   the parallax layer reads as missing. Bump alpha across the system
   so the textures REGISTER as intentional craft without dominating.
   ───────────────────────────────────────────────────────────────── */
.bg-paper {
  background:
    repeating-linear-gradient(
      113deg,
      rgba(236, 233, 225, 0.04) 0 1px,
      transparent 1px 3px),
    repeating-linear-gradient(
      27deg,
      rgba(236, 233, 225, 0.035) 0 1px,
      transparent 1px 4px),
    rgba(236, 233, 225, 0.07) !important;
  border: 0.5px solid rgba(236, 233, 225, 0.18) !important;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.18),
    0 4px 22px rgba(0,0,0,0.32) !important;
}
.bg-polaroid {
  background: rgba(236, 233, 225, 0.14) !important;
  border: 1px solid rgba(236, 233, 225, 0.28) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45) !important;
}
.bg-polaroid::after {
  color: rgba(10, 10, 10, 0.85) !important;
}
.bg-polaroid__inner {
  background:
    radial-gradient(60% 70% at 30% 30%, rgba(239,50,45,0.22), transparent 70%),
    rgba(10, 10, 10, 0.55) !important;
}
.bg-dossier-number {
  color: rgba(236, 233, 225, 0.16) !important;
}
.bg-tape-strip {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(236, 233, 225, 0.10) 0 6px,
      rgba(239, 50, 45, 0.07) 6px 8px),
    rgba(236, 233, 225, 0.07) !important;
  border-top:    0.5px solid rgba(236, 233, 225, 0.18) !important;
  border-bottom: 0.5px solid rgba(236, 233, 225, 0.18) !important;
  color: rgba(236, 233, 225, 0.55) !important;
}
.bg-arc-callout {
  color: rgba(236, 233, 225, 0.50) !important;
}
.bg-redaction {
  border: 0.5px solid rgba(236, 233, 225, 0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────
   CHARACTER PROFILE / EVIDENCE / RESEARCH / WITNESS CARDS
   Composed dossier elements, not just blank polaroids. Each carries
   structured content (name, role, trait, data, quote) so the parallax
   layer reads as a CASE FILE — exactly what the brand posture asks for.
   ───────────────────────────────────────────────────────────────── */

/* Character profile card — index-card style */
.bg-character {
  position: absolute;
  width: 168px;
  pointer-events: none;
  user-select: none;
  background: rgba(236, 233, 225, 0.085);
  border: 1px solid rgba(236, 233, 225, 0.22);
  padding: 8px;
  font-family: var(--f-mono, ui-monospace, monospace);
  color: rgba(236, 233, 225, 0.7);
  box-shadow: 0 6px 22px rgba(0,0,0,0.42);
}
.bg-character__photo {
  width: 100%;
  height: 96px;
  background:
    radial-gradient(60% 80% at 50% 30%, rgba(236,233,225,0.18) 0%, rgba(10,10,10,0.6) 70%),
    rgba(10, 10, 10, 0.85);
  border: 0.5px solid rgba(236, 233, 225, 0.18);
  margin-bottom: 8px;
}
.bg-character__type {
  font-size: 8.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(239, 50, 45, 0.75);
  margin-bottom: 4px;
}
.bg-character__name {
  font-family: var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(236, 233, 225, 0.92);
  font-weight: 400;
  margin-bottom: 6px;
  line-height: 1;
}
.bg-character__trait {
  display: block;
  font-size: 8px;
  letter-spacing: 0.16em;
  line-height: 1.5;
  color: rgba(236, 233, 225, 0.55);
}
.bg-character__trait::before {
  content: "—  ";
  color: rgba(239, 50, 45, 0.65);
}
.bg-character__stamp {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 6.5px;
  letter-spacing: 0.2em;
  color: rgba(239, 50, 45, 0.6);
  border: 0.5px solid rgba(239, 50, 45, 0.45);
  padding: 1px 4px;
  transform: rotate(8deg);
}

/* Evidence sample card — research data slip */
.bg-evidence {
  position: absolute;
  width: 192px;
  pointer-events: none;
  user-select: none;
  background: rgba(236, 233, 225, 0.06);
  border: 1px solid rgba(236, 233, 225, 0.16);
  padding: 10px 12px;
  font-family: var(--f-mono, ui-monospace, monospace);
  color: rgba(236, 233, 225, 0.7);
  box-shadow: 0 4px 18px rgba(0,0,0,0.36);
}
.bg-evidence__id {
  font-size: 8px;
  letter-spacing: 0.32em;
  color: rgba(236, 233, 225, 0.45);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(236, 233, 225, 0.18);
  padding-bottom: 4px;
}
.bg-evidence__id strong {
  color: rgba(239, 50, 45, 0.85);
  font-weight: 500;
}
.bg-evidence__row {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: rgba(236, 233, 225, 0.65);
}
.bg-evidence__row b {
  color: rgba(236, 233, 225, 0.92);
  font-weight: 500;
}
.bg-evidence__delta {
  color: rgba(239, 50, 45, 0.85);
  font-weight: 600;
}

/* Research note — handwritten-style ruled paper with a margin highlight */
.bg-research {
  position: absolute;
  width: 220px;
  pointer-events: none;
  user-select: none;
  background:
    repeating-linear-gradient(
      transparent 0,
      transparent 13px,
      rgba(236, 233, 225, 0.10) 13px,
      rgba(236, 233, 225, 0.10) 13.5px,
      transparent 13.5px,
      transparent 14px),
    rgba(236, 233, 225, 0.05);
  border-left: 1.5px solid rgba(239, 50, 45, 0.55);
  border-top: 0.5px solid rgba(236, 233, 225, 0.14);
  border-right: 0.5px solid rgba(236, 233, 225, 0.10);
  border-bottom: 0.5px solid rgba(236, 233, 225, 0.14);
  padding: 10px 12px 10px 14px;
  font-family: var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-size: 11px;
  line-height: 14px;
  color: rgba(236, 233, 225, 0.78);
  letter-spacing: 0.01em;
  box-shadow: 0 4px 18px rgba(0,0,0,0.32);
}
.bg-research__hi {
  background: rgba(239, 50, 45, 0.22);
  padding: 0 2px;
  color: rgba(236, 233, 225, 0.95);
  font-style: italic;
  border-radius: 1px;
}
.bg-research__foot {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(236, 233, 225, 0.42);
}

/* Witness quote — smaller paper card with a serif pull-quote */
.bg-witness {
  position: absolute;
  width: 184px;
  pointer-events: none;
  user-select: none;
  background: rgba(236, 233, 225, 0.06);
  border: 1px solid rgba(236, 233, 225, 0.18);
  border-left: 2px solid rgba(194, 184, 148, 0.70);
  padding: 10px 12px;
  font-family: var(--f-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-size: 12px;
  line-height: 15px;
  color: rgba(236, 233, 225, 0.85);
  box-shadow: 0 4px 18px rgba(0,0,0,0.32);
}
.bg-witness__attr {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(194, 184, 148, 0.70);
}
.bg-witness__attr::before {
  content: "— ";
  color: rgba(239, 50, 45, 0.7);
}

/* ─────────────────────────────────────────────────────────────────
   ANAMORPHIC FLARE — single hero element
   Replaced the cheesy radial glow blobs (TD-04 retired) with one
   deliberate horizontal streak across the upper-hero third. Per Ryan:
   "needs to be intentional and designed." Hard-anchored, narrow band,
   hard center, soft falloff. Reads as a lens flare off helmet metal,
   not ambient decoration.
   ───────────────────────────────────────────────────────────────── */
.bg-flare {
  position: absolute;
  height: 90px;
  pointer-events: none;
  user-select: none;
  /* Horizontal sliver: hard center streak + soft falloff up/down */
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(170, 200, 235, 0.05) 38%,
      rgba(190, 215, 240, 0.18) 48%,
      rgba(220, 230, 240, 0.28) 50%,
      rgba(190, 215, 240, 0.18) 52%,
      rgba(170, 200, 235, 0.05) 62%,
      transparent 100%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(180, 210, 240, 0.12) 18%,
      rgba(220, 230, 240, 0.22) 50%,
      rgba(180, 210, 240, 0.12) 82%,
      transparent 100%);
  background-blend-mode: screen;
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0.85;
  animation: flare-drift 9s ease-in-out infinite;
}
@keyframes flare-drift {
  0%, 100% { opacity: 0.78; transform: translateY(0) scaleX(1); }
  50%      { opacity: 1.0;  transform: translateY(-2px) scaleX(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-flare { animation: none; opacity: 0.85; }
}
@media (max-width: 720px) {
  .bg-flare { height: 60px; opacity: 0.65; }
}

/* Reduce depth-4 blur so background-tier elements stay readable.
   Was 9px → way too aggressive. */
:root {
  --depth-4-blur: 4px !important;
  --depth-3-blur: 2.5px !important;
}

/* Beat marker — bump alpha so the chapter labels actually read */
.beat-marker {
  color: rgba(236, 233, 225, 0.62) !important;
  font-size: 11px !important;
  letter-spacing: 0.34em !important;
}
.beat-marker .beat-num {
  color: rgba(239, 50, 45, 0.88) !important;
  font-weight: 600 !important;
}
.beat-marker__icon {
  display: inline-flex;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  color: rgba(239, 50, 45, 0.75);
  vertical-align: middle;
}
.beat-marker__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
  19) HAMBURGER VISIBILITY + RED LEADERS
   The hamburger trigger and the cloth-sim reveal both fight against
   dark-on-dark invisibility. Add:
   (a) coral ghost offset behind each hamburger bar so the trigger
       reads on busy/dark hero frames.
   (b) a leader bar per cloth panel — thin coral horizontals that drop
       in ahead of the dark slabs and settle as a permanent accent line
       at the bottom of each slab.
   ───────────────────────────────────────────────────────────────── */

/* (a) Hamburger trigger — coral chromatic offset behind the bone bars */
.nav__hamburger-bar {
  position: relative;
  /* Allow the ::before ghost to overflow the bar */
  overflow: visible;
}
.nav__hamburger-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--c-rust, #ef322d);
  transform: translate(2px, 2px);
  opacity: 0.65;
  z-index: -1;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.65, 0, 0.35, 1),
    opacity 220ms ease;
}
.nav__hamburger:hover .nav__hamburger-bar::before {
  transform: translate(3px, 3px);
  opacity: 0.9;
}
.nav__hamburger.is-active .nav__hamburger-bar::before {
  /* Hide the ghost when the X-shape is active — X reads clearly */
  opacity: 0;
}

/* (b) Cloth-sim leader bars — staggered coral horizontals leading each
   dark panel down. JS in script-v3.js injects one .nav-overlay__leader
   per panel with the same --slab-start / --slab-end and a slightly
   shorter --delay so the leader arrives ~70ms ahead of its panel.

   Each leader is positioned absolute, full-viewport-height, but only
   PAINTS a thin coral bar at the bottom (via gradient) clipped to its
   slab. As it descends from -110% to 0%, the coral bar is the
   leading visible edge. After landing, it sits as a permanent accent
   line at viewport bottom, one per slab. */
.nav-overlay__leader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Paint a 2.5px coral bar at the bottom of the slab */
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent calc(100% - 3px),
      rgba(239, 50, 45, 0.95) calc(100% - 3px),
      rgba(239, 50, 45, 0.95) 100%
    );
  /* Same slab clip as the corresponding panel */
  clip-path: inset(0 calc(100% - var(--slab-end, 14.29%)) 0 var(--slab-start, 0%));
  transform: translateY(-110%);
  /* z-index above the cloth panel so the coral edge is visible while
     it leads, and stays painted on top of the dark slab when settled. */
  z-index: 1;
  transition: transform 720ms cubic-bezier(0.5, 1.6, 0.4, 1);
  transition-delay: var(--delay, 0ms);
  will-change: transform;
}
.nav-overlay.is-open .nav-overlay__leader {
  transform: translateY(0);
  /* Open easing matches the cloth panels' overshoot */
  transition: transform 760ms cubic-bezier(0.34, 1.56, 0.55, 1);
  /* Each leader lands ~70ms ahead of its corresponding panel.
     The negative delay relative to panel is achieved by setting the
     leader's --delay to (panel-delay - 70ms) when JS injects it. */
  transition-delay: var(--delay, 0ms);
}
.nav-overlay:not(.is-open) .nav-overlay__leader {
  transition: transform 580ms cubic-bezier(0.6, 0, 0.4, 1);
  transition-delay: var(--close-delay, 0ms);
}

/* Reduced-motion variant — no aggressive bounce, just opacity */
@media (prefers-reduced-motion: reduce) {
  .nav-overlay__leader {
    transition: opacity 240ms linear;
    transform: none;
    opacity: 0;
  }
  .nav-overlay.is-open .nav-overlay__leader { opacity: 1; }
  .nav__hamburger-bar::before { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
  22) RAY FEATHER OVERRIDE
   V1's .bg-atmosphere .ray had gradient stops at 38/48/52/62% — only
   ~10% feather each side, leaving visible diagonal hard edges (Ryan
   flagged this since V1). Override with stops distributed across the
   full element so falloff is smooth, plus a small blur to kill any
   remaining edge artefacts.
   ───────────────────────────────────────────────────────────────── */
.bg-atmosphere .ray {
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(212, 179, 132, 0.012) 22%,
      rgba(212, 179, 132, 0.04)  44%,
      rgba(212, 179, 132, 0.06)  50%,
      rgba(212, 179, 132, 0.04)  56%,
      rgba(212, 179, 132, 0.012) 78%,
      transparent 100%) !important;
  filter: blur(28px) !important;
  opacity: 0.55 !important;
}
.bg-atmosphere .ray--1 {
  /* default warm-tan */
}
.bg-atmosphere .ray--2 {
  background:
    linear-gradient(106deg,
      transparent 0%,
      rgba(239, 50, 45, 0.010) 22%,
      rgba(239, 50, 45, 0.035) 44%,
      rgba(239, 50, 45, 0.055) 50%,
      rgba(239, 50, 45, 0.035) 56%,
      rgba(239, 50, 45, 0.010) 78%,
      transparent 100%) !important;
}
.bg-atmosphere .ray--3 {
  background:
    linear-gradient(118deg,
      transparent 0%,
      rgba(236, 233, 225, 0.008) 22%,
      rgba(236, 233, 225, 0.030) 44%,
      rgba(236, 233, 225, 0.045) 50%,
      rgba(236, 233, 225, 0.030) 56%,
      rgba(236, 233, 225, 0.008) 78%,
      transparent 100%) !important;
}

/* ─────────────────────────────────────────────────────────────────
  23) EDIT-DOWN: KILL hero chromatic aberration + cursor lens flare
   Per Ryan + bsmnt.com lesson: stop adding subtle effects that don't
   earn their place. Both were too faint to register as intentional.
   Save the budget for moves that land.
   ───────────────────────────────────────────────────────────────── */
.hero__phrase em,
.hero__tagline em {
  text-shadow: none !important;
}
.hero::before {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
  24) V1 DIAGRAM ANIMATIONS — scroll-triggered on .is-in
   Four animations, one per V1 SVG diagram element. Each fires once
   when the element scrolls into viewport and stays at end-state.
   Per Ryan 2026-05-04: distance-between-rings on disc stack,
   dot-climbing on story arc, staggered light-up on 3-point lighting,
   ring ripple + cone sweep on camera blueprint.
   ───────────────────────────────────────────────────────────────── */

/* (1) DISC STACK — distance between rings spreads then settles
   Spread timings updated 2026-05-04: longer durations + bigger gaps
   between staggered elements so the motion lands as deliberate. */
.bg-collage__stack .disc-bone,
.bg-collage__stack .disc-gold {
  transform-box: fill-box;
  transform-origin: center;
}
.bg-collage__stack.is-in .disc-bone {
  animation: disc-spread-up 2.8s cubic-bezier(0.34, 1.4, 0.55, 1) 100ms forwards;
}
.bg-collage__stack.is-in .disc-rust {
  animation: disc-fade-mid 2.8s cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
}
.bg-collage__stack.is-in .disc-gold {
  animation: disc-spread-down 2.8s cubic-bezier(0.34, 1.4, 0.55, 1) 1100ms forwards;
}
@keyframes disc-spread-up {
  0%   { transform: translateY(28px); opacity: 0; }
  60%  { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
@keyframes disc-fade-mid {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes disc-spread-down {
  0%   { transform: translateY(-28px); opacity: 0; }
  60%  { transform: translateY(10px);  opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* (2) STORY ARC — dot climbs to climax, pulses */
.bg-collage__diagram--story-arc .arc-dot {
  /* Park the dot at SETUP (offset from native climax position) until
     .is-in fires, then animate back to climax. */
  transform: translate(-124px, 48px);
  opacity: 0.35;
  transform-box: fill-box;
}
.bg-collage__diagram--story-arc.is-in .arc-dot {
  /* Slower climb (3.4s) so each leg of the arc reads, then 2 deliberate
     pulses spaced apart. Total ~6.8s. */
  animation:
    arc-climb 3.4s cubic-bezier(0.45, 0, 0.55, 1) 300ms forwards,
    arc-climax-pulse 1.8s ease-in-out 3.7s 2;
}
@keyframes arc-climb {
  0%   { transform: translate(-124px, 48px); opacity: 0.35; r: 2.2; }
  22%  { transform: translate(-78px, 34px);  opacity: 0.55; }
  48%  { transform: translate(-42px, 22px);  opacity: 0.85; }
  100% { transform: translate(0, 0);          opacity: 1;    r: 2.5; }
}
@keyframes arc-climax-pulse {
  0%, 100% { r: 2.5; filter: drop-shadow(0 0 0 rgba(239,50,45,0)); }
  50%      { r: 4.4; filter: drop-shadow(0 0 9px rgba(239,50,45,0.85)); }
}

/* (3) 3-POINT LIGHTING — staggered light-up like older electronic */
.bg-collage__diagram--lighting .light-key,
.bg-collage__diagram--lighting .light-fill,
.bg-collage__diagram--lighting .light-back {
  opacity: 0;
}
.bg-collage__diagram--lighting.is-in .light-key {
  /* Spread the lamp stagger out — bigger gaps so each light's flicker
     reads as its own moment, not a quick burst. */
  animation: lamp-on 1.8s cubic-bezier(0.65, 0, 0.35, 1) 400ms forwards;
}
.bg-collage__diagram--lighting.is-in .light-fill {
  animation: lamp-on 1.8s cubic-bezier(0.65, 0, 0.35, 1) 1500ms forwards;
}
.bg-collage__diagram--lighting.is-in .light-back {
  animation: lamp-on 1.8s cubic-bezier(0.65, 0, 0.35, 1) 2600ms forwards;
}
@keyframes lamp-on {
  0%   { opacity: 0; }
  16%  { opacity: 0.95; }   /* first spike on */
  26%  { opacity: 0.30; }   /* flicker dip */
  38%  { opacity: 0.95; }   /* recover */
  54%  { opacity: 0.55; }   /* second flicker */
  68%  { opacity: 0.95; }
  100% { opacity: 1; }
}

/* (4) CAMERA BLUEPRINT — rings ripple, cone sweeps wide → settles */
.bg-collage__diagram--camera .lens-ring {
  transform-box: fill-box;
  transform-origin: 100px 45px;
  opacity: 0;
}
.bg-collage__diagram--camera.is-in .lens-ring--inner {
  /* Spread the ripple — each ring lands as its own beat. */
  animation: lens-ripple 2.6s cubic-bezier(0.5, 1.4, 0.5, 1) 300ms forwards;
}
.bg-collage__diagram--camera.is-in .lens-ring--mid {
  animation: lens-ripple 2.6s cubic-bezier(0.5, 1.4, 0.5, 1) 900ms forwards;
}
.bg-collage__diagram--camera.is-in .lens-ring--outer {
  animation: lens-ripple 2.6s cubic-bezier(0.5, 1.4, 0.5, 1) 1500ms forwards;
}
@keyframes lens-ripple {
  0%   { transform: scale(0.2); opacity: 0; }
  60%  { transform: scale(1.18); opacity: 0.95; }
  100% { transform: scale(1);    opacity: 1; }
}
.bg-collage__diagram--camera .cone-line {
  transform-box: fill-box;
  transform-origin: 100px 45px;
  opacity: 0;
}
.bg-collage__diagram--camera.is-in .cone-line--top {
  /* Cone sweeps after the rings have all landed — delays out to 2200ms */
  animation: cone-sweep-top 2.2s cubic-bezier(0.45, 0, 0.55, 1) 2200ms forwards;
}
.bg-collage__diagram--camera.is-in .cone-line--bottom {
  animation: cone-sweep-bottom 2.2s cubic-bezier(0.45, 0, 0.55, 1) 2200ms forwards;
}
@keyframes cone-sweep-top {
  0%   { transform: rotate(-32deg); opacity: 0; }
  60%  { transform: rotate(7deg);   opacity: 1; }
  100% { transform: rotate(0);      opacity: 1; }
}
@keyframes cone-sweep-bottom {
  0%   { transform: rotate(32deg);  opacity: 0; }
  60%  { transform: rotate(-7deg);  opacity: 1; }
  100% { transform: rotate(0);      opacity: 1; }
}

/* Reduced motion — skip animations, leave elements at end state */
@media (prefers-reduced-motion: reduce) {
  .bg-collage__stack .disc-bone,
  .bg-collage__stack .disc-rust,
  .bg-collage__stack .disc-gold,
  .bg-collage__diagram--story-arc .arc-dot,
  .bg-collage__diagram--lighting .light-key,
  .bg-collage__diagram--lighting .light-fill,
  .bg-collage__diagram--lighting .light-back,
  .bg-collage__diagram--camera .lens-ring,
  .bg-collage__diagram--camera .cone-line {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
  25) SCRIBBLE WORDS — hand-drawn coral underline on key body copy
   For specific running-text words that deserve emphasis without italic.
   JS wraps target words (defend / Monday / hold up / etc.) with a
   .scribble-word span that paints a wavy SVG underline below them.
   Animates via stroke-dashoffset on .is-marked (set by intersection).
   ───────────────────────────────────────────────────────────────── */
.scribble-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scribble-word__line {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.22em;
  width: 106%;
  height: 0.42em;
  pointer-events: none;
  overflow: visible;
}
.scribble-word__line path {
  stroke: rgba(239, 50, 45, 0.92);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.55, 1);
}
.scribble-word.is-marked .scribble-word__line path {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .scribble-word__line path {
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
  29) PROOF · CLIENT LOGO STRIP (V3)
   Per Ryan 2026-05-04: 19 client logos replace the wordmark text list.
   Disparate aspect ratios + wordmarks + symbol marks all get equalized
   to a uniform optical height. Bone-tinted filter at rest, full color
   on hover (when SVGs carry color) or ink-bright bone on hover (when
   SVGs are monochrome). Wordmark fallback (.proof__logos > span) keeps
   the typographic spirit while logos land asynchronously.
   ───────────────────────────────────────────────────────────────── */
.proof__logos {
  row-gap: clamp(20px, 2.4vw, 36px);
  column-gap: clamp(32px, 3.6vw, 56px);
  align-items: center;
}
.proof__logos > img {
  display: block;
  height: clamp(22px, 2.2vw, 32px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  /* Treatment B (Ryan, 2026-05-04): hard mono — every logo flattened to
     bone-white silhouette so 17 disparate brands hold together as a
     coherent strip on the editorial dark theme. brightness(0) collapses
     all opaque pixels to black, then invert(1) flips them to white;
     transparent pixels stay transparent. */
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 360ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.proof__logos > img:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* TFB — "license plate" card treatment.
   SVG has been recolored to all-black fills so it reads as dark ink on
   a bone-white tile. No filter needed — the SVG is already monochrome. */
.proof__logos > img[alt="The Farmer's Bank"] {
  background: var(--c-bone, #ece9e1);
  border: 1px solid rgba(10, 10, 10, 0.85);
  border-radius: 3px;
  padding: 6px 10px;
  height: clamp(30px, 2.8vw, 42px);
  filter: none;
  opacity: 0.95;
}
.proof__logos > img[alt="The Farmer's Bank"]:hover {
  opacity: 1;
}
/* Wordmark fallback (when src is null or img errors out and JS swaps to span) */
.proof__logos > span {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: 0.01em;
  color: rgba(236, 233, 225, 0.62);
  transition: color 200ms var(--ease);
  white-space: nowrap;
}
.proof__logos > span:hover { color: var(--c-bone); }

/* Staggered entrance — reuses V3's fp-enter ethos for the strip. */
.proof__logos > * {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 580ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
}
.proof__row.is-in .proof__logos > * {
  /* Treatment B opacity — see .proof__logos > img above. Wordmark span
     fallback keeps a slightly lower opacity for tonal consistency. */
  opacity: 0.78;
  transform: translateY(0);
}
.proof__row.is-in .proof__logos > span { opacity: 0.62; }
.proof__row.is-in .proof__logos > *:nth-child(1)  { transition-delay: 40ms; }
.proof__row.is-in .proof__logos > *:nth-child(2)  { transition-delay: 80ms; }
.proof__row.is-in .proof__logos > *:nth-child(3)  { transition-delay: 120ms; }
.proof__row.is-in .proof__logos > *:nth-child(4)  { transition-delay: 160ms; }
.proof__row.is-in .proof__logos > *:nth-child(5)  { transition-delay: 200ms; }
.proof__row.is-in .proof__logos > *:nth-child(6)  { transition-delay: 240ms; }
.proof__row.is-in .proof__logos > *:nth-child(7)  { transition-delay: 280ms; }
.proof__row.is-in .proof__logos > *:nth-child(8)  { transition-delay: 320ms; }
.proof__row.is-in .proof__logos > *:nth-child(9)  { transition-delay: 360ms; }
.proof__row.is-in .proof__logos > *:nth-child(10) { transition-delay: 400ms; }
.proof__row.is-in .proof__logos > *:nth-child(n+11) { transition-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .proof__logos > * {
    transition: none;
    transform: none;
    opacity: 0.62;
  }
}

/* End V3 layer */