/* ═══════════════════════════════════════════════════════════════════════
   cinema.css — the v4 CINEMA layer (2026-07).
   Award-grade motion + depth on top of the v2/v3 system in site.css.
   Everything is namespaced `cn-` and ADDITIVE: removing this file (and
   cinema.js) must leave a fully working v3 site. Palette law unchanged:
   navy / cream / evergreen / sage. No gold. Transform + opacity only;
   every effect is gated by prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* NOTE: cross-document view transitions were deliberately REMOVED here.
   The @view-transition opt-in render-blocks navigations while the snapshot
   animation runs; a hidden/backgrounded tab freezes that clock and can
   strand the page blank (verified 2026-07-05). In-page motion below gives
   the cinematic feel without any nav-blocking failure mode — do not re-add
   the at-rule without solving the hidden-document case. */

/* ═══ 1 · THE OPENING TITLE — full-viewport navy hero ═══ */
.cn-hero {
  position: relative;
  min-height: max(92vh, 640px);
  display: flex; align-items: center;
  background:
    radial-gradient(130% 90% at 78% 10%, rgba(49, 91, 77, 0.34), transparent 55%),
    radial-gradient(90% 70% at 12% 88%, rgba(46, 59, 85, 0.5), transparent 60%),
    linear-gradient(178deg, var(--navy) 0%, var(--navy-deep) 78%, #0B0E19 100%);
  overflow: hidden;
  perspective: 1100px;
}
.cn-hero .container-wide { width: 100%; }
/* canvas dust sits behind copy, above the gradients */
.cn-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* the road layer gets true depth + mouse parallax (JS drives --cnx/--cny) */
.cn-hero .hero-road {
  z-index: 0; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,0.5) 30%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,0.5) 30%, #000 52%);
  transform:
    translate3d(calc(var(--cnx, 0) * 18px), calc(var(--cny, 0) * 12px), 0)
    rotateY(calc(var(--cnx, 0) * -2.4deg)) rotateX(calc(var(--cny, 0) * 1.8deg));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* road recolors for the dark scene */
.cn-hero .road-bed { stroke: rgba(154, 174, 163, 0.16); }
.cn-hero .road-line { stroke: var(--sage); stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(154, 174, 163, 0.55)); }
.cn-hero .road-node circle.ring { fill: var(--navy-soft); stroke: var(--sage); }
.cn-hero .road-node circle.dot { fill: var(--sage-soft); }
.cn-hero .road-node circle.halo { fill: rgba(154, 174, 163, 0.08); }
.cn-hero .road-node text { fill: var(--muted-on-navy); }

.cn-hero-copy { position: relative; z-index: 2; max-width: 860px; padding: clamp(5rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem); }
/* On narrow screens the road runs behind the copy — recede it. */
@media (max-width: 859px) { .cn-hero .hero-road { opacity: 0.34; } }
.cn-kicker {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--sage);
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.cn-kicker::before, .cn-kicker::after { content: ""; height: 1px; width: 34px; background: var(--sage); opacity: 0.5; }
.cn-title {
  font-family: var(--font-display); font-weight: 600; color: var(--cream);
  font-size: clamp(3rem, 8.6vw, 7.2rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0 0 clamp(1.4rem, 3vh, 2rem); text-wrap: balance;
}
.cn-title em { font-style: italic; font-weight: 500; color: var(--sage); }
/* staggered line reveal: each .cn-line clips its inner span */
.cn-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cn-line > span { display: inline-block; transform: translateY(112%); }
@media (prefers-reduced-motion: no-preference) {
  .cn-play .cn-line > span { animation: cn-line-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .cn-play .cn-line:nth-child(1) > span { animation-delay: 0.12s; }
  .cn-play .cn-line:nth-child(2) > span { animation-delay: 0.26s; }
  .cn-play .cn-line:nth-child(3) > span { animation-delay: 0.40s; }
  .cn-fade { opacity: 0; transform: translateY(16px); animation: cn-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .cn-play .cn-fade { animation-delay: var(--cfd, 0.65s); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-line > span { transform: none; }
  .cn-fade { opacity: 1; transform: none; }
}
@keyframes cn-line-up { to { transform: translateY(0); } }
@keyframes cn-fade-up { to { opacity: 1; transform: none; } }
/* Settle guard: hidden/backgrounded tabs freeze the CSS animation clock, so
   cinema.js stamps .cn-done ~2.6s after reveal starts — by then a visible tab
   has finished the sequence, and a hidden one jumps straight to legible. */
.cn-hero.cn-done .cn-line > span { animation: none; transform: none; }
.cn-hero.cn-done .cn-fade { animation: none; opacity: 1; transform: none; }
.cn-hero .lede { color: var(--muted-on-navy); font-size: clamp(1.05rem, 1.7vw, 1.28rem); max-width: 40em; }
.cn-hero .btn-note { color: var(--muted-on-navy); opacity: 0.85; }
.cn-hero .scroll-cue { color: var(--sage); }
/* app constellation row under the hero copy */
.cn-hero-apps { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.cn-hero-apps a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--muted-on-navy);
  transition: color 0.2s ease, transform 0.3s var(--ease-out);
}
.cn-hero-apps a:hover { color: var(--cream); transform: translateY(-2px); }
.cn-hero-apps img { width: 22px; height: 22px; border-radius: 5px; }

/* ═══ 2 · MARQUEE BAND ═══ */
.cn-marquee {
  overflow: hidden; white-space: nowrap; position: relative;
  background: var(--navy-deep); border-top: 1px solid var(--hairline-navy); border-bottom: 1px solid var(--hairline-navy);
  padding: 0.9rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cn-marquee-track { display: inline-flex; gap: 0; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .cn-marquee-track { animation: cn-marquee 38s linear infinite; }
  .cn-marquee:hover .cn-marquee-track { animation-play-state: paused; }
}
@keyframes cn-marquee { to { transform: translateX(-50%); } }
.cn-marquee span {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 1.7vw, 1.35rem); color: var(--muted-on-navy);
  padding: 0 1.6rem; letter-spacing: 0.04em;
}
.cn-marquee span::after { content: "✦"; color: var(--sage); font-style: normal; font-size: 0.7em; margin-left: 3.2rem; opacity: 0.7; }

/* ═══ 3 · 3D TILT + GLARE (cards) ═══ */
.cn-tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cn-tilt.cn-tilting { transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.cn-tilt .cn-glare {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(245, 240, 232, 0.55), rgba(245, 240, 232, 0.08) 42%, transparent 66%);
  mix-blend-mode: soft-light;
  transition: opacity 0.3s ease;
}
.cn-tilt:hover .cn-glare { opacity: 1; }
/* lift the card's inner icon toward the viewer */
.cn-tilt .card-icon { transform: translateZ(34px); }
.cn-tilt h3 { transform: translateZ(22px); }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .cn-tilt { transform: none !important; }
  .cn-tilt .cn-glare { display: none; }
}

/* ═══ 4 · CURSOR SPOTLIGHT on navy scenes ═══ */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cn-spot { position: relative; }
  .cn-spot::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(560px circle at calc(var(--sx, 0.5) * 100%) calc(var(--sy, 0.35) * 100%), rgba(154, 174, 163, 0.10), transparent 62%);
    opacity: 0; transition: opacity 0.5s ease;
  }
  .cn-spot:hover::after { opacity: 1; }
  .cn-spot > * { position: relative; z-index: 1; }
}

/* ═══ 5 · SCENE WIPES (clip-path section reveals) ═══ */
@media (prefers-reduced-motion: no-preference) {
  .cn-wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1); }
  .cn-wipe.in { clip-path: inset(0 0 0% 0); }
}

/* ═══ 6 · PERSONA ROADS — the upsell section ═══ */
.cn-roads { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 980px) { .cn-roads { grid-template-columns: 1fr 1fr 1fr; } }
.cn-road-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--cream-raised); border: 1px solid var(--hairline); border-radius: 14px;
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  box-shadow: var(--shadow-soft); overflow: hidden;
}
.cn-road-card.cn-featured { background: var(--navy); border-color: var(--navy); }
.cn-road-card.cn-featured::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 85% 0%, rgba(49, 91, 77, 0.45), transparent 55%);
  pointer-events: none;
}
.cn-road-card.cn-featured > * { position: relative; }
.cn-road-kicker { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--evergreen); margin: 0 0 0.7rem; }
.cn-featured .cn-road-kicker { color: var(--sage); }
.cn-road-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 0.3rem; }
.cn-featured h3, .cn-featured .cn-road-price strong { color: var(--cream); }
.cn-road-pain { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: var(--ink-muted); margin: 0 0 1rem; }
.cn-featured .cn-road-pain { color: var(--muted-on-navy); }
.cn-road-card .feature-list { flex: 1; margin-top: 0.4rem; }
.cn-featured .feature-list li { color: var(--muted-on-navy); }
.cn-featured .feature-list li strong { color: var(--cream); }
.cn-road-price { margin: 1.2rem 0 1rem; font-size: 0.85rem; color: var(--ink-muted); }
.cn-featured .cn-road-price { color: var(--muted-on-navy); }
.cn-road-price strong { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; color: var(--ink); }
.cn-road-price s { opacity: 0.6; margin-right: 0.4rem; }
.cn-save-chip {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--evergreen-deep); background: rgba(49, 91, 77, 0.1); border-radius: 100px;
  padding: 0.28rem 0.75rem; margin-left: 0.6rem; vertical-align: middle;
}
.cn-featured .cn-save-chip { color: var(--cream); background: rgba(154, 174, 163, 0.22); }

/* ═══ 7 · STICKY CTA RAIL ═══ */
.cn-rail {
  position: fixed; left: 50%; bottom: 1.1rem; z-index: 240;
  transform: translate(-50%, calc(100% + 2rem));
  display: flex; align-items: center; gap: 1rem;
  background: rgba(26, 26, 46, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-navy); border-radius: 100px;
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  box-shadow: 0 18px 50px rgba(10, 12, 24, 0.45);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  max-width: calc(100vw - 2rem);
}
.cn-rail.show { transform: translate(-50%, 0); }
.cn-rail .cn-rail-copy { font-size: 0.82rem; color: var(--muted-on-navy); white-space: nowrap; }
.cn-rail .cn-rail-copy strong { color: var(--cream); font-weight: 600; }
.cn-rail .btn { padding: 0.62rem 1.15rem; font-size: 0.8rem; white-space: nowrap; }
.cn-rail .cn-rail-x {
  background: none; border: 0; color: var(--muted-on-navy); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0.4rem; border-radius: 50%;
}
.cn-rail .cn-rail-x:hover { color: var(--cream); }
@media (max-width: 560px) { .cn-rail .cn-rail-copy { display: none; } }

/* ═══ 8 · GIANT GHOST TYPE (act titles) ═══ */
.cn-ghost {
  display: block; font-family: var(--font-display); font-weight: 700; line-height: 0.9;
  font-size: clamp(3.6rem, 10vw, 8.6rem); letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(49, 91, 77, 0.22);
  user-select: none; pointer-events: none; margin-bottom: -0.28em;
}
.on-navy .cn-ghost, .band-navy .cn-ghost, .band-navy-deep .cn-ghost { -webkit-text-stroke-color: rgba(154, 174, 163, 0.2); }
@supports not (-webkit-text-stroke: 1px black) { .cn-ghost { color: rgba(49, 91, 77, 0.08); } }

/* ═══ 9 · CLOSER (final CTA scene) ═══ */
.cn-closer {
  position: relative; overflow: hidden; text-align: center;
  background:
    radial-gradient(120% 100% at 50% 118%, rgba(49, 91, 77, 0.5), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  padding: clamp(5rem, 12vw, 9rem) 0;
}
.cn-closer h2 {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem); color: var(--cream); line-height: 1.04;
  margin-bottom: 1rem; text-wrap: balance;
}
.cn-closer h2 em { font-style: italic; color: var(--sage); }
.cn-closer .lede { color: var(--muted-on-navy); margin-left: auto; margin-right: auto; }
.cn-closer .road-line-mini {
  width: min(420px, 70vw); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); display: block; overflow: visible;
}
.cn-closer .road-line-mini path { fill: none; stroke: var(--sage); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cn-closer.in .road-line-mini path { animation: road-draw 2.2s var(--ease-out) 0.2s forwards; }
}
@media (prefers-reduced-motion: reduce) { .cn-closer .road-line-mini path { stroke-dashoffset: 0; } }

/* ═══ 10 · CROSS-SELL STRIP (product pages) ═══ */
.cn-xsell { border-top: 1px solid var(--hairline); }
.cn-xsell-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.8rem; }
@media (min-width: 860px) { .cn-xsell-grid { grid-template-columns: repeat(var(--xn, 2), 1fr); } }
.cn-xsell-card {
  display: flex; align-items: flex-start; gap: 0.9rem;
  background: var(--cream-raised); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.15rem 1.25rem; transition: transform 0.35s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.cn-xsell-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(49, 91, 77, 0.35); }
.cn-xsell-card img { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; }
.cn-xsell-card .xs-name { display: block; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.cn-xsell-card .xs-hook { display: block; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.15rem; }
.cn-xsell-card .xs-price { display: block; font-size: 0.72rem; font-weight: 700; color: var(--evergreen); margin-top: 0.4rem; letter-spacing: 0.04em; }

/* price chip on family cards */
.cn-from {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--evergreen-deep); background: rgba(49, 91, 77, 0.09);
  border-radius: 100px; padding: 0.26rem 0.7rem; margin-bottom: 0.9rem; align-self: flex-start;
}

/* ═══ 11 · ADAPTIVE NAV over dark heroes ═══
   On pages whose hero is a dark scene (body.cn-dark-top), the header belongs
   to that scene: transparent dark glass with light text at the top, then
   site.js adds .scrolled past the hero and it becomes the normal cream bar. */
body.cn-dark-top .site-header:not(.scrolled) {
  background: rgba(15, 18, 32, 0.34);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: rgba(245, 240, 232, 0.10);
}
body.cn-dark-top .site-header:not(.scrolled) .brand,
body.cn-dark-top .site-header:not(.scrolled) .brand-name { color: var(--cream); }
body.cn-dark-top .site-header:not(.scrolled) .brand img { box-shadow: 0 0 0 1px rgba(245, 240, 232, 0.22); border-radius: 7px; }
body.cn-dark-top .site-header:not(.scrolled) .nav-links > .nav-item > a,
body.cn-dark-top .site-header:not(.scrolled) .nav-menu-btn { color: rgba(245, 240, 232, 0.82); }
body.cn-dark-top .site-header:not(.scrolled) .nav-links > .nav-item > a:hover,
body.cn-dark-top .site-header:not(.scrolled) .nav-links > .nav-item > a[aria-current="page"],
body.cn-dark-top .site-header:not(.scrolled) .nav-menu-btn:hover,
body.cn-dark-top .site-header:not(.scrolled) .nav-item.open > .nav-menu-btn,
body.cn-dark-top .site-header:not(.scrolled) .nav-menu-btn.current { color: var(--cream); }
body.cn-dark-top .site-header:not(.scrolled) .nav-links > .nav-item > a::after,
body.cn-dark-top .site-header:not(.scrolled) .nav-menu-btn::after { background: var(--sage); }
body.cn-dark-top .site-header:not(.scrolled) .nav-toggle span { background: var(--cream); }

/* ═══ 12 · CINEMATIC HERO BAND (inner pages: signin, about, …) ═══
   A compact navy opening so inner pages match the homepage's drama instead
   of a flat cream slab. Pair with body.cn-dark-top for the adaptive nav. */
.cn-hero-band {
  position: relative; overflow: hidden;
  padding: clamp(7rem, 16vh, 9.5rem) 0 clamp(2.8rem, 6vh, 4rem);
  background:
    radial-gradient(120% 95% at 84% 4%, rgba(49, 91, 77, 0.4), transparent 56%),
    radial-gradient(80% 70% at 8% 100%, rgba(46, 59, 85, 0.5), transparent 60%),
    linear-gradient(176deg, var(--navy) 0%, var(--navy-deep) 82%, #0B0E19 100%);
}
.cn-hero-band .eyebrow { color: var(--sage); }
.cn-hero-band .eyebrow::before { background: var(--sage); }
.cn-hero-band h1 { color: var(--cream); font-size: clamp(2.6rem, 6vw, 4.6rem); text-wrap: balance; }
.cn-hero-band h1 em { font-style: italic; color: var(--sage); }
.cn-hero-band .lede { color: var(--muted-on-navy); }
.cn-hero-band .btn-ghost { border-color: var(--sage); color: var(--cream); }
.cn-hero-band .btn-ghost:hover { background: rgba(245, 240, 232, 0.08); }
/* soft road ghost bottom-right for texture */
.cn-hero-band::after {
  content: ""; position: absolute; right: -8%; bottom: -40%; width: 46%; height: 150%;
  background: radial-gradient(closest-side, rgba(154, 174, 163, 0.10), transparent 70%);
  pointer-events: none;
}

/* ═══ 13 · IMMERSIVE JOURNEY — enlarge the render PROPORTIONALLY on desktop ═══
   The base .vg caps the mockup at 460px (mockups.css). Forcing it wide made
   short cards look stretched (wide + short). Instead we keep a near-natural
   width and scale the WHOLE mockup uniformly — bigger in both dimensions, its
   aspect preserved (balanced, not stretched) — tuned so even the tallest act
   (the call sheet) still fits a laptop viewport inside the pinned stage. */
@media (min-width: 900px) {
  .journey-grid.journey-immersive {
    grid-template-columns: 0.58fr 1.42fr;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: center;
  }
  .journey-vignettes.big { min-height: clamp(500px, 70vh, 840px); }
  /* Pure uniform scale from the card's NATURAL width — grows in both dimensions,
     aspect preserved, zero stretch. Base scale is safe on short viewports. */
  .journey-vignettes.big .vg { transform: scale(1.16); transform-origin: center; }
}
/* Scale up only where the viewport is tall enough that the tallest act (the
   ~455px Cutroom/Darkroom card) still clears the pinned stage + heading. */
@media (min-width: 1100px) and (min-height: 800px) {
  .journey-vignettes.big .vg { transform: scale(1.32); }
}
@media (min-width: 1500px) and (min-height: 920px) {
  .journey-grid.journey-immersive { grid-template-columns: 0.54fr 1.46fr; }
  .journey-vignettes.big .vg { transform: scale(1.46); }
}

/* ═══ Global reduced-motion: the hard guard in site.css already zeroes
       all animation/transition durations; effects above degrade to their
       final states. Canvas dust + tilt + spotlight are additionally
       JS-gated (cinema.js checks the media query and never starts). ═══ */