/* Scroll films, shared by every Invata site that has them (film.js drives them). Loaded after site.css.
   The stage blends at both ends: an ink veil lifts at the top (.veil) and the bottom always fades to ink. */

/* ---------- films ---------- */
.film { position: relative; height: var(--len, 340vh); }
.film .stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.film canvas, .film .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.film.painted .poster { visibility: hidden; }
.film .stick::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,14,20,.55) 0%, rgba(11,14,20,0) 20%, rgba(11,14,20,0) 48%, rgba(11,14,20,.72) 82%, var(--ink) 100%); }
/* an ink veil at the top that lifts as the film starts, so the section above hands over without a seam */
.film.veil .stick::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; z-index: -1; pointer-events: none;
  opacity: clamp(0, calc(1 - var(--p, 0) * 7), 1); background: linear-gradient(180deg, var(--ink) 0%, rgba(11,14,20,.85) 22%, rgba(11,14,20,0) 100%); }
.film:not(.live), .film.still { height: auto; }
.film:not(.live) .stick, .film.still .stick { position: relative; min-height: 100vh; min-height: 100svh; }

.kicker { display: block; margin: 0 0 14px; font: 600 13px/1.2 var(--head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-hi); }

/* hero beats: one at a time */
.beats { position: absolute; left: var(--gl); right: var(--gr); bottom: clamp(64px, 12vh, 128px); max-width: 900px; margin: 0; padding: 0; list-style: none; }
.beats > [data-at] { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; }
.beats > .on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s ease .12s, transform .45s ease .12s; }
.film:not(.live) .beats > :last-child, .film.still .beats > :last-child { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.fbig { display: block; margin: 0; font: italic 600 clamp(58px, 10vw, 156px)/.9 var(--serif); letter-spacing: -.01em; text-shadow: 0 2px 40px rgba(11,14,20,.5); }
.beats h1 { margin: 0; font: 800 clamp(44px, 6.4vw, 92px)/1 var(--head); letter-spacing: -.025em; max-width: 14ch; }
.fsub { margin: 18px 0 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: rgba(236,231,220,.88); }
.beats .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hint { position: absolute; right: var(--gr); bottom: clamp(64px, 12vh, 128px); font: 500 12px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  opacity: clamp(0, calc(1 - var(--p, 0) * 10), 1); }
.film:not(.live) .hint, .film.still .hint { display: none; }

/* ---------- hero legibility and phones ---------- */
.fbig { text-wrap: balance; }
.hero .stick::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,14,20,.72) 0%, rgba(11,14,20,.35) 40%, rgba(11,14,20,0) 62%); }
@media (max-width: 760px) {
  .beats { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .beats h1 { font-size: clamp(38px, 11vw, 52px); }
  .fsub { font-size: 16px; margin-top: 12px; }
  .beats .actions { margin-top: 20px; }
  .hero .stick::before { background: linear-gradient(180deg, rgba(11,14,20,0) 30%, rgba(11,14,20,.6) 62%, rgba(11,14,20,.85) 100%); }
}