/* Homepage scroll film (2026-10-16). Pinned stage + canvas frame sequence + one chapter at a time.
   Static fallback (no JS, reduced motion, viewports under 32rem tall): poster band with chapter 1,
   the other chapters as a plain list under it. Flat ink tint only; no gradients, shadows or glows. */
:root { --nk-nav-h: 64px; --film-runway: 420vh; --film-tint: .42; }

.nk-film { position: relative; background: var(--ink); color: #fff; }
.nk-film__stage { position: relative; overflow: hidden; background: var(--ink); }
.nk-film__poster, .nk-film__poster img, .nk-film__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center;
}
.nk-film__canvas { visibility: hidden; }
.nk-film__tint { position: absolute; inset: 0; background: var(--ink); opacity: var(--film-tint); }

/* Chapters: bottom corner of the stage, one visible at a time (film-on), all visible in the static layout */
.nk-film__ch {
  position: absolute; bottom: clamp(28px, 7vh, 72px); inset-inline-start: var(--pad);
  max-width: min(46rem, 62%); display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.nk-film__ch[data-position="right"] { inset-inline-start: auto; inset-inline-end: var(--pad); align-items: flex-end; text-align: end; }
.nk-film__ch .nk-h1 { color: #fff; }
.nk-film__ch .nk-lead { color: rgba(255, 255, 255, .86); }
.nk-film__ch .nk-announce { color: rgba(255, 255, 255, .78); text-decoration-color: rgba(255, 255, 255, .35); }
.nk-film__ch .nk-announce b { color: var(--lime); }
.nk-film__ch .nk-proof { border-top-color: rgba(255, 255, 255, .22); }
.nk-film__ch .nk-proof span:last-child, .nk-film__ch .nk-stores-note { color: rgba(255, 255, 255, .8); }
.nk-film__ch .nk-store { background: #fff; color: var(--ink); }
.nk-film__ch .nk-store:hover { background: var(--lime); }
.nk-film__ch .nk-store small { color: #5b5c55; }
/* Chapters 2–5 sit over busy frames (the app screens, the pitch): a flat ink shade behind the
   text block, the standard's only allowed readability aid (no gradient, no shadow, no glow). */
.nk-film__ch:has(> h2) { background: rgba(10, 15, 26, .62); padding: 22px 26px; border-radius: 18px; }
.nk-film__ch h2 { font: 800 clamp(2rem, 4.6vw, 3.6rem)/1.02 var(--f-display); letter-spacing: -.035em; color: #fff; max-width: 15ch; text-wrap: balance; }
.nk-film__ch p { font: 400 1.1rem/1.5 var(--f-body); color: rgba(255, 255, 255, .92); max-width: 30em; }
.nk-film__logo { width: 64px; height: 64px; border-radius: 16px; }
.nk-film__caption { font: 500 .52rem/1.3 var(--f-body); color: rgba(255, 255, 255, .45); letter-spacing: .03em; margin-top: -8px; }
html[dir="rtl"] .nk-film__ch { text-align: start; }

/* Skip link: bottom centre, keyboard reachable; fades with the last chapter */
.nk-film__skip {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font: 600 .8rem/1 var(--f-body); color: rgba(255, 255, 255, .75); padding: 10px 14px; border-radius: 999px;
  background: rgba(10, 15, 26, .55); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center;
}
.nk-film__skip:hover, .nk-film__skip:focus-visible { color: #fff; }
.nk-film[data-end] .nk-film__skip { opacity: 0; pointer-events: none; }

/* --- Pinned film (JS on, motion allowed, viewport tall enough) ------------------------------- */
@media screen and (min-height: 32rem) {
  html.film-on .nk-film { height: var(--film-runway); }
  html.film-on .nk-film__stage { position: sticky; top: var(--nk-nav-h); height: calc(100vh - var(--nk-nav-h)); height: calc(100svh - var(--nk-nav-h)); }
  html.film-on .nk-film__canvas { visibility: visible; }
  html.film-on .nk-film__ch { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  html.film-on .nk-film__ch[data-active] { opacity: 1; pointer-events: auto; }
}

/* --- Static layout (no JS, reduced motion, or a viewport under 32rem tall) ---------------------
   The poster is a normal band; the five chapters stack under it on ink. Nothing pins, no tint.
   (Chapters are selected directly: the tint is also a div, so :first-of-type would not work.) */
html:not(.film-on) .nk-film__poster { position: relative; aspect-ratio: 16 / 9; max-height: 82vh; }
html:not(.film-on) .nk-film__canvas, html:not(.film-on) .nk-film__tint, html:not(.film-on) .nk-film__skip { display: none; }
html:not(.film-on) .nk-film__ch { position: static; max-width: none; padding: 28px var(--pad); border-top: 1px solid rgba(255, 255, 255, .14); align-items: flex-start; text-align: start; }
html:not(.film-on) .nk-film__tint + .nk-film__ch { border-top: 0; }
html:not(.film-on) .nk-film__ch:has(> h2) { background: none; border-radius: 0; }
@media screen and (max-height: 31.99rem) {
  html.film-on .nk-film__poster { position: relative; aspect-ratio: 16 / 9; max-height: 82vh; }
  html.film-on .nk-film__canvas, html.film-on .nk-film__tint, html.film-on .nk-film__skip { display: none; }
  html.film-on .nk-film__ch { position: static; max-width: none; padding: 28px var(--pad); border-top: 1px solid rgba(255, 255, 255, .14); opacity: 1; pointer-events: auto; align-items: flex-start; text-align: start; }
  html.film-on .nk-film__tint + .nk-film__ch { border-top: 0; }
}

/* Phones: portrait frames, every chapter bottom-left, full width */
@media (max-width: 48rem) {
  html:not(.film-on) .nk-film__poster { aspect-ratio: 9 / 16; max-height: 90vh; }
  .nk-film__ch, .nk-film__ch[data-position="right"] { inset-inline-start: var(--pad); inset-inline-end: var(--pad); max-width: none; align-items: flex-start; text-align: start; bottom: 56px; }
  .nk-film__ch h2 { max-width: 12ch; }
  .nk-film__ch .nk-h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  /* Phones: chapter 1 keeps H1, lead, stores and the AI label; the announce line and the proof
     row would push the text over the whole picture. They stay in the DOM for the static layout. */
  html.film-on .nk-film__tint + .nk-film__ch .nk-announce, html.film-on .nk-film__tint + .nk-film__ch .nk-proof { display: none; }
  .nk-film__ch .nk-lead { font-size: 1rem; line-height: 1.45; }
  .nk-film__ch { gap: 14px; }
}

.nk-film-debug { position: fixed; top: 8px; left: 8px; z-index: 99; background: #000; color: #fff; font: 12px/1.3 monospace; padding: 6px 8px; }