/* propane media — landing. One statement: the wordmark set huge over a
   floodlit pitch photograph, then the first product. The hero is pinned
   (position: sticky) and the product section scrolls over it like a curtain;
   scroll shears the wordmark lines apart and pushes into the photo (JS sets
   transform/opacity inline). Builds entirely on brand.css tokens.

   JS contract (landing.mjs):
     html.fx        gates all hidden-until-revealed states (no-JS loads visible)
     html.is-in     added on load — releases the masked wordmark entrance
     #wmA / #wmB    wordmark line masks — scroll shear via inline transform
     .hero-media img / #heroFade   scroll push-in / dim via inline styles
     [data-rise]    one-shot rise+fade via .in (observeRise in api.mjs) */

/* no-JS / pre-JS: nothing is hidden (brand.css hides [data-rise] by default) */
html:not(.fx) [data-rise] { opacity: 1; transform: none; }

/* reduced motion: instant, fully visible, still */
@media (prefers-reduced-motion: reduce) {
  [data-rise], .fx [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx .wm-line { transform: none !important; transition: none !important; }
  .fx .nav--landing, .fx .hero-foot { opacity: 1 !important; transition: none !important; }
  .hero-foot .cue i { animation: none !important; transform: none !important; }
}

/* ── nav ──────────────────────────────────────────────────────────────────────
   Transparent over the hero, frosts once scrolled (.is-scrolled from JS). */
.nav.nav--landing {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: opacity .9s var(--ease) .95s,
              background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.fx .nav--landing { opacity: 0; }
.fx.is-in .nav--landing { opacity: 1; }
.nav.nav--landing.is-scrolled {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* screen one IS the brand statement — the corner mark only earns its place
   once the wordmark is gone and the frosted nav takes over wayfinding */
.nav--landing .brandmark { transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease); }
.fx .nav--landing:not(.is-scrolled) .brandmark { opacity: 0; visibility: hidden; }
.nav .nav-actions { display: flex; align-items: center; gap: .6rem; }
/* The nav sits over the TOP of the hero photo (floodlit night sky) — dark-ish in
   BOTH themes even though light mode scrims the BOTTOM bright for the wordmark.
   So pin the transparent-nav buttons light in both themes; the .is-scrolled
   frosted state reverts to the tokens (dark ink on the light frost in light mode). */
.nav--landing:not(.is-scrolled) .nav-actions .btn--ghost {
  --b-ink: rgba(255,255,255,.92); border-color: rgba(255,255,255,.28);
}
.nav--landing:not(.is-scrolled) .nav-actions .btn--ghost:hover { background: rgba(255,255,255,.12); }
.nav--landing:not(.is-scrolled) .nav-actions .btn:not(.btn--ghost) {
  --b-bg: #fafafa; --b-ink: #0a0a0b; border-color: transparent;
}
@media (max-width: 520px) {
  .nav .nav-actions .btn--ghost { display: none; }
}
/* already-signed-in visitor: hide the sign-in links (nav + product CTA) */
.is-authed a[href="/login"] { display: none; }

/* ── hero ─────────────────────────────────────────────────────────────────────
   Pinned full-viewport photograph. Everything that moves is transform-only. */
.hero {
  position: sticky;
  top: 0;
  height: 100vh;   /* fallback for pre-svh browsers */
  height: 100svh;
  display: flex;
  overflow: hidden;
  z-index: 0;
}
.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform-origin: 50% 30%;
  will-change: transform;
}
@media (max-width: 700px) {
  /* portrait crop: keep the left floodlight + its beam in frame */
  .hero-media img { object-position: 26% 30%; }
}
/* bottom-heavy scrim — theme-aware so the wordmark always reads:
   LIGHT (default) fades the floodlit photo up to the light canvas so dark ink
   reads over it; DARK keeps the near-black gradient. */
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(244,244,245,.30) 0%, rgba(244,244,245,.06) 26%,
    rgba(244,244,245,.34) 56%, rgba(244,244,245,.95) 100%);
}
[data-theme="dark"] .hero-scrim {
  background: linear-gradient(180deg,
    rgba(0,0,0,.52) 0%, rgba(0,0,0,.10) 30%,
    rgba(0,0,0,.16) 56%, rgba(0,0,0,.86) 100%);
}
/* lift + cool the floodlit night photo in light mode so it reads as an airy
   light hero rather than a dark slab */
.hero-media img { filter: saturate(.92) brightness(1.16) contrast(.98); }
[data-theme="dark"] .hero-media img { filter: none; }
/* film grain over photo + scrim, ties type and image into one surface */
.hero-grain {
  position: absolute; inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* dims to the page canvas as the curtain rises — opacity driven by scroll */
.hero-fade { position: absolute; inset: 0; background: var(--bg); opacity: 0; will-change: opacity; }

.hero-stage {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad) clamp(20px, 4vh, 44px);
}

/* ── wordmark ─────────────────────────────────────────────────────────────────
   Two masked lines: entrance rises each line out of its own overflow-hidden
   mask; scroll shears the masks apart horizontally. */
.wordmark {
  margin: 0 0 clamp(26px, 5.5vh, 60px);
  font-size: clamp(3.6rem, 18.5vw, 21rem);
  font-weight: 760;
  letter-spacing: -.05em;
  line-height: 1;
  /* LIGHT: dark ink over the lightened photo. DARK: light over the near-black photo. */
  color: var(--ink);
}
[data-theme="dark"] .wordmark { color: rgba(255,255,255,.92); }
.wm-mask {
  display: block;
  overflow: hidden;
  /* breathing room so descenders/overhangs never clip against the mask —
     .16em bottom covers Segoe UI's deeper descent on Windows */
  padding: .03em .04em .16em 0;
  margin-bottom: -.34em;
  will-change: transform;
}
.wm-mask:last-child { margin-bottom: 0; }
.wm-mask--media { margin-left: .42em; }
.wm-line { display: block; }
.wm-mask--media .wm-line { color: var(--ink-3); }
[data-theme="dark"] .wm-mask--media .wm-line { color: rgba(255,255,255,.66); }
.fx .wm-line {
  transform: translateY(118%);
  transition: transform 1.1s var(--ease-out);
}
.fx .wm-mask--media .wm-line { transition-delay: .14s; }
.fx.is-in .wm-line { transform: translateY(0); }

/* ── hero foot: scroll cue + product teaser ──────────────────────────────────
   Theme-aware: dark ink over the lightened photo in light mode, light over the
   near-black photo in dark mode. */
.hero-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2);
}
[data-theme="dark"] .hero-foot { border-top-color: rgba(255,255,255,.16); color: rgba(255,255,255,.66); }
.fx .hero-foot { opacity: 0; transition: opacity 1s var(--ease) 1.1s; }
.fx.is-in .hero-foot { opacity: 1; }
.hero-foot .cue { display: inline-flex; align-items: center; gap: .9em; }
.hero-foot .cue i {
  display: block; width: 36px; height: 1px;
  background: var(--ink); opacity: .75;
  transform-origin: left center;
  animation: cueSlide 2.8s var(--ease) infinite;
}
[data-theme="dark"] .hero-foot .cue i { background: #fff; }
@keyframes cueSlide {
  0%        { transform: scaleX(0); opacity: .75; }
  55%       { transform: scaleX(1); opacity: .75; }
  88%, 100% { transform: scaleX(1); opacity: 0; }
}
.hero-foot .teaser {
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease);
  /* widen the tap target without moving the layout */
  padding: 1em 0 1em 1em;
  margin: -1em 0 -1em -1em;
}
.hero-foot .teaser:hover { color: var(--ink); }
[data-theme="dark"] .hero-foot .teaser { color: rgba(255,255,255,.66); }
[data-theme="dark"] .hero-foot .teaser:hover { color: #fff; }

/* brand.css kills the outline on .btn:focus-visible and its white-on-white
   ring is invisible on the solid CTAs — restore a real ring on this page.
   Use the accent so it reads in both themes (over the dark photo AND on the
   light product surface) and stays on-brand. */
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── flagship service — clipping ──────────────────────────────────────────────
   Scrolls over the pinned hero: opaque background + higher z. Value-prop
   forward: index rail · statement · reel cutout. No cards. */
.product {
  position: relative; z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(110px, 16vh, 190px);
  /* the curtain must always be able to cover the pinned hero completely —
     without this, tall viewports un-pin the hero mid-scrub */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
}
.product-grid {
  display: grid;
  grid-template-columns: minmax(92px, .62fr) minmax(0, 1.5fr) minmax(248px, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
  width: 100%;
}
.product-side {
  align-self: start;
  display: flex; flex-direction: column; gap: 1.1rem;
}
/* brand.css kicker is --ink-3 (≈4.1:1) — too faint at this size; lift it */
.product .kicker { color: var(--ink-2); }
.product-side .index {
  font-family: var(--mono);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  color: var(--ink-4);
}

/* statement column */
.product-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.2rem;
}
.product-main .vp {
  font-size: clamp(2.3rem, 5.1vw, 4.5rem);
  line-height: 1.0; letter-spacing: -.04em; font-weight: 680;
  max-width: 15ch;
  margin: 0 0 clamp(30px, 5vh, 46px);
  text-wrap: balance;
}
.product .cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ── reel cutout ──────────────────────────────────────────────────────────────
   A static 9:16 mock of the engine's burned output (Impact + heavy black
   outline, crest discs, white band strip). The ghost stack behind sells the
   "millions" multiplier. Overlay sizes are cqw so type tracks the frame. */
.product-reel { justify-self: center; }
.reel-deck {
  position: relative;
  width: clamp(196px, 23vw, 272px);
  aspect-ratio: 9 / 16;
  filter: drop-shadow(0 36px 70px rgba(0,0,0,.62));
}
.reel,
.reel-ghost { position: absolute; inset: 0; border-radius: 18px; }
.reel-ghost {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  transform-origin: 70% 100%;
}
.reel-ghost--1 { transform: translate(6%,  -3%) rotate(4deg)  scale(.985); opacity: .58; }
.reel-ghost--2 { transform: translate(12%, -6%) rotate(8deg)  scale(.965); opacity: .34; }
.reel-ghost--3 { transform: translate(18%, -9%) rotate(12deg) scale(.945); opacity: .16; }
.reel {
  z-index: 2; overflow: hidden;
  background: #000;
  border: 1px solid var(--line-2);
  container-type: inline-size;
}
.reel-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 22% 50%;
  filter: grayscale(1) contrast(1.1) brightness(1.4);
}
.reel-grade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 24%,
    rgba(0,0,0,0) 60%, rgba(0,0,0,.82) 100%);
}
.reel-badge {
  position: absolute; top: 5cqw; right: 5cqw; z-index: 3;
  font: 600 2.5cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
  padding: 1.4cqw 2.4cqw;
}

/* burned-text grammar: Impact + black outline (engine draw_text_with_outline) */
.reel-vs, .reel-kick, .reel-name {
  font-family: Impact, Haettenschweiler, "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  color: #fff; line-height: 1; white-space: nowrap;
  text-shadow:
    .045em .045em 0 #000, -.045em .045em 0 #000, .045em -.045em 0 #000, -.045em -.045em 0 #000,
    .06em 0 0 #000, -.06em 0 0 #000, 0 .06em 0 #000, 0 -.06em 0 #000;
}
.reel-ov { position: absolute; left: 0; right: 0; display: flex; z-index: 3; }
.reel-ov--top { top: 5cqw; justify-content: center; align-items: center; gap: 3.6cqw; }
.reel-crest {
  width: 13cqw; height: 13cqw; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.32);
  color: #fff; font: 700 4.4cqw/1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .02em;
}
.reel-vs { font-size: 6.4cqw; font-weight: 700; }
.reel-ov--mid { flex-direction: column; align-items: center; gap: 1.8cqw; bottom: 24cqw; }
.reel-kick {
  font-size: 3.2cqw; letter-spacing: .12em; text-transform: uppercase;
}
.reel-name {
  font-size: 12cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
}
.reel-strip {
  position: absolute; left: 5cqw; right: 5cqw; bottom: 6cqw; z-index: 3;
  display: flex; gap: 2cqw;
}
.reel-band {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  padding: 2.2cqw 0; border-radius: 2.4cqw;
  background: rgba(255,255,255,.94); color: #000;
  font: 700 3.2cqw/1 Impact, "Arial Narrow Bold", sans-serif; letter-spacing: .06em;
}
.reel-band i { font-style: normal; font-size: 5cqw; }

@media (max-width: 980px) {
  .product-grid { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 56px); }
  .product-side { flex-direction: row; align-items: baseline; gap: 1.1rem; }
  .product-main .vp { max-width: 18ch; }
  .product-reel { justify-self: start; }
}
@media (max-width: 760px) {
  .product-side { justify-content: space-between; }
  .product-reel { justify-self: center; }
  .reel-deck { width: clamp(204px, 60vw, 272px); }
}

/* ── footer ──────────────────────────────────────────────────────────────────
   Also rides above the pinned hero. */
.foot {
  position: relative; z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: clamp(34px, 6vh, 56px);
}
.foot .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.2rem;
}
.foot .brandmark { font-size: 1.05rem; }
.foot .fine { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--ink-2); }
.foot .fine a { text-decoration: underline; text-underline-offset: 2px; }
.foot .fine a:hover { color: var(--ink); }