/* Scroll-scrubbed film — the opening of the Larisel page (and its /film/ test page). */

.film {
  position: relative;
  height: 420vh;                 /* scroll distance = film length (film.js sets the real one) */
  /* Transparent on purpose: at the handoff the stage fades out and what must
     show through is the live WebGL cup behind the page, not a dark band. */
  background: transparent;
  color: #f4efe5;
}
/* The LARGE viewport: a phone's toolbar sliding away must uncover more film, not
   the page under it (the small one left a cream band at the foot of the screen).
   The live cup behind (css/site.css .stage) is the same box, so the hand-over
   still lands on the same pose. What sits at the stage's foot is lifted by the
   toolbar's height while it shows (--bar). */
.film__stage {
  --bar: 0px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
}
@supports (height: 100dvh) { .film__stage { --bar: calc(100lvh - 100dvh); } }

/* The first frame is a plain image: it is the LCP element and it is what a
   visitor sees if WebGL never starts. The canvas fades in over it. */
.film__poster,
.film__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.film__poster { object-fit: cover; }
.film__canvas { opacity: 0; transition: opacity 600ms var(--e-out); }
.film.is-live .film__canvas { opacity: 1; }

/* A local scrim under the type instead of darkening the whole film. */
.film__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* plus a soft band under the header and a corner under "Skip the film":
     chapter 3 is white porcelain, and cream type on it disappears */
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0.36) 0, transparent 8.5rem),
    linear-gradient(0deg, rgba(5, 4, 4, 0.5) 0, transparent 8rem),          /* the chapter names, on porcelain too */
    radial-gradient(ellipse 34rem 14rem at 100% 100%, rgba(5, 4, 4, 0.46), transparent 70%),
    linear-gradient(90deg, rgba(5, 4, 4, 0.72) 0%, rgba(5, 4, 4, 0.28) 38%, transparent 62%);
  /* the type scrim leaves with the night: the last frames are the cream page */
  opacity: calc(1 - var(--film-end, 0));
}
@media (orientation: portrait) {
  .film__stage::after {
    background:
      linear-gradient(0deg, rgba(5, 4, 4, 0.55) 0, transparent 9rem),
      radial-gradient(ellipse 22rem 12rem at 100% 100%, rgba(5, 4, 4, 0.46), transparent 70%),
      linear-gradient(180deg, rgba(5, 4, 4, 0.74) 0%, rgba(5, 4, 4, 0.3) 34%, transparent 55%);
  }
}

.film__beat {
  position: absolute;
  z-index: 2;
  left: clamp(1.25rem, 6vw, 6rem);
  top: 50%;
  transform: translateY(-50%);
  /* wide enough for a designed line to stay one line (most are 3.4-7.6em;
     at 34rem nearly every headline broke, leaving "the" or "of" alone) and
     still inside the left of the frame, which the shots keep for type */
  max-width: min(56rem, 60vw);
  visibility: hidden;
}
.film__beat.is-on { visibility: visible; }
@media (orientation: portrait) {
  .film__beat { top: clamp(6rem, 16vh, 10rem); transform: none; max-width: 86vw; }
}

.film__label {
  /* the page's own label voice (base.css .label): mono at --ls-label, so the
     film's eyebrow and "Skip the film" in the same frame are one style */
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.62);
  margin: 0 0 var(--s-5);
  opacity: 0;
}
.film__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  /* a soft dark halo: the longer lines reach past the scrim onto bright
     frames (chapter 3 is white porcelain) */
  text-shadow: 0 2px 28px rgba(5, 4, 4, 0.32);
}
.film__title em { font-style: italic; color: #e8b27a; }
/* Each line is its own mask: the words rise out of an edge, not fade in.
   The mask reaches 0.14em above the line: at line-height 0.98 it clipped the
   dot of a capital İ ("İki dakika" read "Iki dakika") and would clip Й/Ё. */
.film__line { display: block; overflow: hidden; padding: 0.14em 0 0.08em; margin-top: -0.14em; }
/* the rare line longer than the box (EN "the moment you ask.", RU
   "Двадцать граммов —") breaks into two even halves, never a lone word */
.film__line > span { display: inline-block; text-wrap: balance; transform: translate3d(0, 105%, 0); will-change: transform; }
.film__lead {
  font-family: var(--f-body);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.78);
  margin: var(--s-6) 0 0;
  max-width: 26rem;
  opacity: 0;
}

/* Still mode: reduced motion or no WebGL — one frame, one headline, no scrub. */
.film.is-still { height: 100vh; height: 100svh; }
.film.is-still .film__stage { height: 100%; --bar: 0px; }       /* the still poster fills its own box, no more */
.film.is-still .film__canvas { display: none; }
.film.is-still .film__line > span { transform: none; }
.film.is-still .film__label,
.film.is-still .film__lead { opacity: 1; }

.film__hud {
  position: absolute;
  z-index: 5;
  left: 8px;
  bottom: 8px;
  font: 11px/1.4 var(--f-mono);
  color: #9f9;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  border-radius: 4px;
}

.film-after {
  min-height: 100vh;
  background: var(--c-cream);
  color: var(--c-ink);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: var(--t-h1);
}

/* "Skip the film": always one tap away, and seen. A pill anyone recognises at a glance (the
   streaming services' "skip intro"), in glass over the film: its ring is how much of the film
   is behind you (film.js sets --skip-p). It rises in as the curtain lifts, breathes once a moment
   later — never blinking — and fades with the film's end like the chapters. */
.film__skip {
  --skip-p: 0;
  position: absolute; z-index: 4;
  right: var(--pad-edge);
  bottom: calc(clamp(1.25rem, 5vh, 2.75rem) + var(--bar) - 0.55rem);
  display: inline-flex; align-items: center; gap: 0.7rem; height: 3rem; padding-block: 0; padding-inline: 1.25rem 0.42rem; border-radius: 999px;
  background: rgba(10, 8, 7, 0.44); color: #f4efe5;
  box-shadow: inset 0 0 0 1px rgba(244, 239, 229, 0.26), 0 14px 30px -16px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  font: 500 0.92rem/1 var(--f-body); letter-spacing: 0.005em; white-space: nowrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity 700ms var(--e-out), transform 700ms var(--e-out), background 300ms var(--e-out), color 300ms var(--e-out), box-shadow 300ms var(--e-out);
}
html:not(.is-loading) .film__skip { opacity: calc(1 - var(--film-end, 0)); transform: none; transition-delay: 350ms, 350ms, 0s, 0s, 0s; }
.film__skip-i { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #f4efe5; color: #1e1611;
  transition: background 300ms var(--e-out), color 300ms var(--e-out); }
.film__skip-i svg { position: absolute; inset: -0.2rem; width: calc(100% + 0.4rem); height: calc(100% + 0.4rem); max-width: none; overflow: visible; }
.film__skip-i path { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform 450ms var(--e-out); }
.film__skip-track, .film__skip-ring { fill: none; stroke-width: 2.1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.film__skip-track { stroke: rgba(244, 239, 229, 0.18); }
.film__skip-ring { stroke: var(--c-accent-glow); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--skip-p)); transition: stroke-dashoffset 200ms linear; }
.film__skip:hover, .film__skip:focus-visible { background: #f4efe5; color: #1e1611; box-shadow: inset 0 0 0 1px rgba(244, 239, 229, 0.9), 0 18px 34px -16px rgba(0, 0, 0, 0.75); }
.film__skip:hover .film__skip-i, .film__skip:focus-visible .film__skip-i { background: #1e1611; color: #f4efe5; }
.film__skip:hover path, .film__skip:focus-visible path { transform: translateY(2px); }
.film__skip:active { transform: scale(0.97); transition-duration: 150ms; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-loading) .film__skip-i { animation: skip-breathe 1.6s var(--e-io) 2.4s 1; }
}
@keyframes skip-breathe { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(232, 178, 122, 0); } 45% { transform: scale(1.1); box-shadow: 0 0 0 0.55rem rgba(232, 178, 122, 0.24); } }

/* ---- the page around the film -------------------------------------------
   While the film is dark the header turns to cream type with no bar behind
   it (a cream bar over a night scene reads as a mistake); the order rail
   stays out of the way until the order starts. */
html[data-film="dark"] .site-header.is-stuck { background: transparent; box-shadow: none; }
html[data-film="dark"] .brand,
html[data-film="dark"] .nav__link:hover { color: #f4efe5; }
html[data-film="dark"] .nav__link { color: rgba(244, 239, 229, 0.82); }
/* a breath of shadow keeps cream type legible on the bright porcelain frames */
html[data-film="dark"] .brand,
html[data-film="dark"] .nav__link { text-shadow: 0 1px 14px rgba(5, 4, 4, 0.4); }
html[data-film="dark"] .lang { border-color: rgba(244, 239, 229, 0.22); background: rgba(5, 4, 4, 0.28); }
html[data-film="dark"] .lang__btn { color: rgba(244, 239, 229, 0.62); }
html[data-film="dark"] .lang__btn:hover { color: #f4efe5; }
html[data-film="dark"] .lang__btn[aria-pressed="true"] { background: #f4efe5; color: #1e1611; }
.site-header .brand, .site-header .nav__link { transition: color var(--d-base) var(--e-out); }
html[data-film="dark"] .rail,
html[data-film="light"] .rail { opacity: 0; pointer-events: none; }
.rail { transition: opacity var(--d-base) var(--e-out); }

/* Chapters — the film's own contents: four names along the foot of the
   picture, each with a hairline that fills as its chapter plays; the one on
   screen is brighter. A click is a cut to that chapter. Leaves with the film. */
.film__chapters {
  position: absolute; z-index: 3;
  left: var(--pad-edge);                               /* on the header's own edge */
  bottom: calc(clamp(1.25rem, 5vh, 2.75rem) - 6px + var(--bar));   /* on "Skip the film"'s baseline */
  display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem);
  opacity: calc(1 - var(--film-end, 0));
  transition: opacity 400ms var(--e-out);
}
.film__chapters.is-gone { opacity: 0; pointer-events: none; }
.film__chapters button {
  display: grid; gap: 7px; min-width: 5.5rem; padding: 0.55em 0 0.35em; text-align: left;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 239, 229, 0.5);
  text-shadow: 0 1px 12px rgba(5, 4, 4, 0.45);
  transition: color var(--d-fast) var(--e-out);
}
.film__chapters button:hover, .film__chapters button[aria-current] { color: #f4efe5; }
.film__chapters button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.film__chapters i {
  display: block; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #f4efe5 calc(var(--p, 0) * 100%), rgba(244, 239, 229, 0.22) 0);
  box-shadow: 0 1px 8px rgba(5, 4, 4, 0.3);
}
@media (max-width: 720px) {
  /* a phone: across the foot, above the skip pill, four equal parts */
  .film__chapters { left: 1rem; right: 1rem; bottom: calc(clamp(1.25rem, 5vh, 2.75rem) + 3.4rem + var(--bar)); gap: 0.6rem; }
  .film__skip { height: 2.85rem; right: 1rem; }
  .film__chapters button { flex: 1; min-width: 0; min-height: 44px; letter-spacing: 0.08em; }
  .film__chapters span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}