/* Homepage opening film: the approved 16:9 plate plus the live phone subtitles
   drawn over its glass. film.js scales .film-ui to the plate and drives the
   cues from the video clock; this file owns that projection and the wheel.
   The phone draws no controls: the app hides them 5 s into playback. */
.cinema-picture { position: relative; width: 82.037037%; margin-inline: auto; direction: ltr; }
.cinema-film { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; pointer-events: none; user-select: none; background: #000; border: 0; }
.film-ui { visibility: hidden; position: absolute; top: 0; left: 0; width: 1280px; height: 720px; transform-origin: 0 0; pointer-events: none; user-select: none; }
/* 360×780 glass → measured TL/TR/BR/BL in the original 1280×720 plate.
   One perspective projection; transparent glass preserves the painted bezel.
   The glass stands for the app's 402 pt display, so --pt is one app point. */
.film-phone { --pt: calc(360px / 402); position: absolute; width: 360px; height: 780px; transform-origin: 0 0; transform: matrix3d(.393759712565,.010482411948,0,-.000121956757,-.123857408016,.455974219352,0,-.00003110255,0,0,1,0,889.299987792969,221.100006103516,0,1); overflow: hidden; border-radius: 34px; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif; }
/* The app's wheel at its default sizes (src/core/subtitle-text-scale.ts):
   38.5 pt bold over 22.75 pt, 64 pt side lanes and 12 pt of row padding.
   film.js stacks the rows on the display's centre line and fades them; the
   wheel stops short of the bottom row, as rows that far out are gone in the app. */
.film-cues { position: absolute; top: 0; right: 0; bottom: calc(126 * var(--pt)); left: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
.film-cue { position: absolute; top: 0; left: 0; right: 0; padding: calc(12 * var(--pt)) calc(64 * var(--pt)); text-align: center; }
.film-cue strong { display: block; font-size: calc(38.5 * var(--pt) * var(--fit, 1)); font-weight: 700; line-height: calc(52.5 * var(--pt) * var(--fit, 1)); white-space: pre; letter-spacing: 0; }
.film-cue small { display: block; margin-top: calc(10 * var(--pt)); font-size: calc(22.75 * var(--pt)); font-weight: 400; line-height: calc(31.5 * var(--pt)); white-space: nowrap; }