/* The film (#watch): a screening room. The 1949 tape deck stands left and
   throws a beam onto a walnut-framed screen; the film is a one-minute newsreel
   cut from real console stills (assets/film.mjs). The problem plays in
   black-and-white and the picture turns to warm colour when BugTape starts
   recording. Everything moves on the film clock, never on its own. */

@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.film-band { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 60% 45%, color-mix(in srgb, var(--set-glow) 8%, transparent), transparent 70%), var(--marketing-room); }
.film-head { max-width: 64ch; margin: 0 auto clamp(24px, 3vw, 40px); text-align: center; }
.film-head h2 { max-width: none; font-size: clamp(30px, 3.2vw, 44px); }
.film-head .lead { margin: var(--space-xl) auto 0; }

.screening { position: relative; display: grid; grid-template-columns: minmax(0, 14%) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }

/* The deck: a real 1949 Brush Soundmirror; its reels turn while the film plays. */
.deck { position: relative; width: 100%; aspect-ratio: 1100 / 1618; align-self: center; margin-top: 4%; }
.deck-photo { display: block; width: 100%; height: 100%; filter: contrast(1.08) saturate(.9) brightness(.9); }
.deck-reel { position: absolute; overflow: hidden; border-radius: 50%; }
.deck-reel span { position: absolute; inset: 0; background: url('/assets/deck-soundmirror.webp') no-repeat; transform: scaleY(var(--k)) rotate(0deg); }
.deck-reel-l { --k: .41; left: 11.23%; top: 44.52%; width: 34.58%; height: 9.64%; }
.deck-reel-l span { background-size: 289.2% 1037.2%; background-position: 17.16% 49.27%; }
.deck-reel-r { --k: .392; left: 53.22%; top: 45.57%; width: 35.49%; height: 9.47%; }
.deck-reel-r span { background-size: 281.8% 1056.1%; background-position: 82.5% 50.34%; }
.deck-lamp { position: absolute; left: 96%; top: 47%; width: 5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: var(--set-glow); opacity: .25; transition: opacity var(--motion-move) var(--ease-standard), box-shadow var(--motion-move) var(--ease-standard); }
.film-band.is-playing .deck-lamp { opacity: 1; box-shadow: 0 0 24px 6px color-mix(in srgb, var(--set-glow) 60%, transparent); }

/* The beam: from the deck lamp to the screen. */
.beam { position: absolute; left: calc(14% * .96); top: 6%; z-index: 0; width: calc(4% + clamp(28px, 5vw, 80px)); height: 70%; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--set-glow) 70%, transparent), color-mix(in srgb, var(--set-glow) 12%, transparent));
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); filter: blur(5px); mix-blend-mode: screen; opacity: .12; transition: opacity var(--motion-move) var(--ease-standard); }
.film-band.is-playing .beam { opacity: .5; }

.screen { position: relative; z-index: 1; min-width: 0; }
.screen-case { height: max(10px, .8vw); margin-inline: -1%; border-radius: var(--rounded-md) var(--rounded-md) 0 0; background: linear-gradient(180deg, var(--set-brass-light), var(--set-brass) 55%, var(--set-brass-deep)); box-shadow: 0 1px 0 color-mix(in srgb, var(--set-ivory) 40%, transparent) inset; }
.screen-cloth { padding: 1.1%; border-radius: 0 0 var(--rounded-lg) var(--rounded-lg); background: linear-gradient(180deg, var(--set-walnut), var(--set-walnut-deep)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 35%, transparent), 0 24px 60px color-mix(in srgb, var(--marketing-room) 80%, transparent); transition: box-shadow var(--motion-move) var(--ease-standard); }
.film-band.is-playing .screen-cloth { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--set-brass) 35%, transparent), 0 24px 60px color-mix(in srgb, var(--marketing-room) 80%, transparent), 0 0 80px color-mix(in srgb, var(--set-glow) 14%, transparent); }

/* ── The film ──────────────────────────────────────── */
.film { --fu: 1cqw; position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; container-type: inline-size; border-radius: var(--rounded-xs); background: var(--marketing-room); color: var(--set-screen); font-family: var(--font-ui); }
.film-frame { position: absolute; inset: 0; filter: grayscale(1) sepia(.24) saturate(1) contrast(1.16) brightness(.96); }
.scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; }
.film-flash { position: absolute; inset: 0; z-index: 3; background: var(--set-screen); opacity: 0; pointer-events: none; }

/* Countdown leader */
.scene-leader { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--set-screen) 62%, var(--set-ink)), color-mix(in srgb, var(--set-screen) 22%, var(--set-ink)) 72%); }
.leader-sweep { position: absolute; left: 50%; top: 50%; width: 46cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(color-mix(in srgb, var(--set-ink) 40%, transparent) var(--sweep), transparent 0); }
.leader-rings { position: absolute; inset: 0; background:
  linear-gradient(color-mix(in srgb, var(--set-screen) 70%, transparent), color-mix(in srgb, var(--set-screen) 70%, transparent)) 50% 0 / .18cqw 100% no-repeat,
  linear-gradient(90deg, color-mix(in srgb, var(--set-screen) 70%, transparent), color-mix(in srgb, var(--set-screen) 70%, transparent)) 0 50% / 100% .18cqw no-repeat; }
.leader-rings::before, .leader-rings::after { content: ''; position: absolute; left: 50%; top: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: .3cqw solid color-mix(in srgb, var(--set-screen) 85%, transparent); }
.leader-rings::before { width: 46cqw; }
.leader-rings::after { width: 38cqw; }
.leader-n { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--set-screen); font: 600 calc(var(--fu) * 26)/1 var(--font-marketing); text-shadow: 0 0 2cqw color-mix(in srgb, var(--set-ink) 60%, transparent); opacity: 0; }

/* Title cards: an art-deco frame, double brass rules and diamond corners. */
.scene-title, .scene-end, .scene-card { background: radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--set-walnut) 70%, var(--marketing-room)), var(--marketing-room) 80%); }
.deco { position: absolute; inset: 6.5cqw 13cqw; display: grid; place-content: center; justify-items: center; gap: 1.8cqw; border: .32cqw double color-mix(in srgb, var(--set-brass-light) 70%, transparent); text-align: center; }
.deco::before, .deco::after { content: ''; position: absolute; width: 1.4cqw; aspect-ratio: 1; rotate: 45deg; background: var(--set-brass-light); }
.deco::before { left: -.85cqw; top: calc(50% - .7cqw); }
.deco::after { right: -.85cqw; top: calc(50% - .7cqw); }
.film-kicker { margin: 0; color: var(--set-brass-light); font: 500 calc(var(--fu) * 1.55)/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.film-wordmark { display: block; width: 44cqw; height: auto; filter: drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--set-glow) 35%, transparent)); }
.film-sub { margin: 0; color: color-mix(in srgb, var(--set-screen) 72%, transparent); font: 500 calc(var(--fu) * 1.6)/1.3 var(--font-engrave); letter-spacing: .12em; text-transform: uppercase; }
.film-url { margin: 0; color: var(--set-brass-light); font: 500 calc(var(--fu) * 1.5)/1 var(--font-engrave); letter-spacing: .16em; }
.film-credit { position: absolute; left: 0; right: 0; bottom: 8cqw; margin: 0; color: color-mix(in srgb, var(--set-screen) 45%, transparent); font: 500 calc(var(--fu) * 1)/1 var(--font-ui); letter-spacing: .08em; text-align: center; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; margin: .6cqw 0 0; }
.film .end-actions .button { min-height: 0; padding: 1.1cqw 2.4cqw; font-size: calc(var(--fu) * 1.6); }
.deco-lines { gap: 2.4cqw; justify-items: start; padding-inline: 4cqw; }
.deco-lines .film-kicker { justify-self: center; }
.deco-line { display: flex; align-items: center; gap: 1.6cqw; margin: 0; color: var(--set-screen); font: 600 calc(var(--fu) * 3.3)/1.15 var(--font-marketing); letter-spacing: -.01em; }
.deco-line i { display: grid; place-items: center; width: 4.4cqw; aspect-ratio: 1; border: .22cqw solid color-mix(in srgb, var(--set-brass-light) 70%, transparent); border-radius: 50%; color: var(--set-glow); font: 600 calc(var(--fu) * 2)/1 var(--font-ui); font-style: normal; }
.deco-line .deco-alert { color: var(--marketing-accent); text-shadow: 0 0 1cqw var(--marketing-accent); }

/* Real console stills under a moving camera. */
.shot { position: absolute; inset: 0; transform-origin: 0 0; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ring ellipse, .ring rect { fill: none; stroke: var(--set-glow); stroke-width: .3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 .6px var(--set-glow)); }
.tag { position: absolute; z-index: 2; display: flex; gap: .7em; align-items: baseline; max-width: 70cqw; margin: 0; padding: 1cqw 1.6cqw; border-left: .32cqw solid var(--set-glow); border-radius: 0 var(--rounded-xs) var(--rounded-xs) 0; background: var(--marketing-room); color: var(--set-screen); font: 500 calc(var(--fu) * 1.65)/1.25 var(--font-ui); box-shadow: 0 .8cqw 2cqw color-mix(in srgb, var(--marketing-room) 60%, transparent); }
.tag b { color: var(--set-glow); font-weight: 600; }

/* The desk: paper reports, typed. */
.scene-desk { background: radial-gradient(ellipse 90% 80% at 40% 40%, color-mix(in srgb, var(--set-walnut-light) 55%, var(--set-walnut)), var(--set-walnut-deep) 85%); }
.scene-desk::after { content: ''; position: absolute; inset: 0; background: var(--set-noise); opacity: .35; mix-blend-mode: multiply; }
.pile { position: absolute; inset: 0; transform-origin: 50% 50%; }
.slip { position: absolute; z-index: 1; width: 33cqw; margin: 0; padding: 2cqw 2.4cqw 2.2cqw; border-radius: .3cqw; background: linear-gradient(172deg, var(--set-screen), color-mix(in srgb, var(--set-screen) 84%, var(--set-ivory-shade))); color: var(--set-ink); transform: rotate(var(--r, 0deg)); box-shadow: 0 1.2cqw 2.6cqw color-mix(in srgb, var(--marketing-room) 55%, transparent), 0 .2cqw .4cqw color-mix(in srgb, var(--marketing-room) 40%, transparent); }
.slip-head { margin: 0 0 1.2cqw; padding-bottom: .8cqw; border-bottom: .12cqw dashed color-mix(in srgb, var(--set-ink) 40%, transparent); color: color-mix(in srgb, var(--set-ink) 75%, transparent); font: 600 calc(var(--fu) * 1.2)/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.slip-text { margin: 0; overflow: hidden; font: 500 calc(var(--fu) * 2.3)/1.25 var(--font-mono); }
.slip-text[data-k='type'] { white-space: nowrap; }
.slip-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.4cqw; margin: 1.6cqw 0 0; font: 500 calc(var(--fu) * 1.25)/1.3 var(--font-mono); }
.slip-meta dt { color: color-mix(in srgb, var(--set-ink) 60%, transparent); font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.slip-meta dd { margin: 0; color: var(--set-ink); }
.machine { position: absolute; right: 8cqw; top: 14cqw; z-index: 2; width: 37cqw; margin: 0; padding: 1cqw 1cqw .9cqw; border-radius: .3cqw; background: var(--set-screen); color: var(--set-ink); box-shadow: 0 1.4cqw 3cqw color-mix(in srgb, var(--marketing-room) 60%, transparent); }
.machine img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.machine figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: .9cqw; font: 600 calc(var(--fu) * 1.5)/1 var(--font-ui); letter-spacing: .06em; }
.machine b { color: var(--set-ink); }

/* The turn: rewind, then BugTape's recording in colour. */
.rewind { position: absolute; inset: 0; z-index: 2; opacity: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--set-screen) 18%, transparent) 0 .25cqw, transparent .25cqw 2.6cqw); mix-blend-mode: screen; }
/* The turn: a warm burn sweeps across the picture as the colour comes in. */
.leak { position: absolute; inset: 0 -40%; z-index: 3; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 26% 90% at 50% 50%, var(--set-glow), color-mix(in srgb, var(--marketing-accent) 70%, var(--set-glow)) 40%, transparent 72%); mix-blend-mode: multiply; }
.rec { position: absolute; left: 3.4cqw; top: 3cqw; z-index: 2; display: flex; align-items: center; gap: 1cqw; margin: 0; padding: .9cqw 1.6cqw; border: .12cqw solid color-mix(in srgb, var(--set-brass) 60%, transparent); border-radius: var(--rounded-sm); background: color-mix(in srgb, var(--marketing-room) 78%, transparent); color: var(--set-screen); font: 600 calc(var(--fu) * 1.4)/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.rec i { width: 1cqw; aspect-ratio: 1; border-radius: 50%; background: var(--marketing-accent); box-shadow: 0 0 1cqw var(--marketing-accent); }
.track { position: absolute; left: 4cqw; right: 4cqw; bottom: 9cqw; z-index: 2; padding: 1.4cqw 1.8cqw 1.8cqw; border: .12cqw solid color-mix(in srgb, var(--set-brass) 50%, transparent); border-radius: var(--rounded-md); background: color-mix(in srgb, var(--marketing-room) 86%, transparent); transform-origin: 100% 100%; box-shadow: 0 1.4cqw 3cqw color-mix(in srgb, var(--marketing-room) 60%, transparent); }
.track-label { position: relative; margin: 0; padding-top: 1.2cqw; color: var(--set-brass-light); font: 500 calc(var(--fu) * 1.25)/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.track-events { display: flex; gap: .7cqw; margin: 1.2cqw 0 0; padding: 0; list-style: none; }
.ev { padding: .7cqw .85cqw; border: .1cqw solid var(--marketing-border); border-radius: var(--rounded-xs); background: var(--marketing-surface); color: var(--marketing-text); font: 500 calc(var(--fu) * 1.1)/1 var(--font-mono); white-space: nowrap; }
.ev b { margin-right: .5em; color: var(--set-brass-light); font-weight: 600; }
.ev-click b { color: var(--set-screen); }
.ev-fail { border-color: var(--marketing-danger); color: var(--marketing-danger); }
.ev-fail b { color: var(--marketing-danger); }
.track-bracket { position: absolute; left: 1.8cqw; right: 1.8cqw; top: 1cqw; height: .7cqw; border: .16cqw solid var(--set-glow); border-bottom: 0; transform-origin: 0 50%; opacity: 0; }
.sent { position: absolute; right: 4cqw; bottom: 9cqw; z-index: 2; display: grid; gap: .5cqw; margin: 0; padding: 1.2cqw 1.8cqw; border: .12cqw solid var(--set-brass); border-radius: var(--rounded-md); background: var(--marketing-surface); text-align: right; opacity: 0; box-shadow: 0 0 2cqw color-mix(in srgb, var(--set-glow) 25%, transparent); }
.sent b { color: var(--set-screen); font: 600 calc(var(--fu) * 1.8)/1 var(--font-marketing); }
.sent span { color: var(--marketing-muted); font: 500 calc(var(--fu) * 1.25)/1.2 var(--font-ui); }
.merge { position: absolute; left: 48%; top: 29%; z-index: 2; width: 0; height: 0; }
.mini-slip { position: absolute; width: 6cqw; height: 3.8cqw; margin: -1.9cqw 0 0 -3cqw; border-radius: .25cqw; opacity: 0;
  background: repeating-linear-gradient(180deg, transparent 0 .7cqw, color-mix(in srgb, var(--set-ink) 30%, transparent) .7cqw .82cqw), var(--set-screen);
  box-shadow: 0 .6cqw 1.4cqw color-mix(in srgb, var(--marketing-room) 60%, transparent); }

/* Your agent: an amber terminal with a little glass. */
.scene-term, .scene-handoff { background: radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--set-walnut) 55%, var(--marketing-room)), var(--marketing-room) 85%); }
.crt { position: absolute; left: 50%; top: 50%; width: 72cqw; translate: -50% -50%; padding: 0 0 2.4cqw; overflow: hidden; border-radius: 1.6cqw; background: radial-gradient(ellipse 90% 80% at 50% 40%, color-mix(in srgb, var(--set-glass) 80%, var(--set-glow) 8%), var(--set-glass) 80%);
  box-shadow: inset 0 0 5cqw color-mix(in srgb, var(--marketing-room) 75%, transparent), 0 0 0 .5cqw var(--set-brass-deep), 0 0 0 .75cqw var(--set-walnut), 0 2cqw 4cqw var(--marketing-room); }
.crt::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--marketing-room) 28%, transparent) 0 .12cqw, transparent .12cqw .36cqw); }
.crt-bar { display: flex; justify-content: space-between; margin: 0 0 1cqw; padding: 1.3cqw 2.6cqw; border-bottom: .12cqw solid color-mix(in srgb, var(--set-brass) 30%, transparent); color: var(--set-brass-light); font: 500 calc(var(--fu) * 1.2)/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.crt-line, .crt-out { margin: 0; padding: .5cqw 2.8cqw 0; font: 500 calc(var(--fu) * 1.7)/1.45 var(--font-mono); white-space: nowrap; }
.crt-line { color: var(--set-glow); text-shadow: 0 0 .9cqw color-mix(in srgb, var(--set-glow) 55%, transparent); }
.crt-line b { color: var(--marketing-accent); }
.crt-out { padding-left: 4.8cqw; color: color-mix(in srgb, var(--set-screen) 72%, var(--set-glow)); }
.crt-done { color: var(--set-screen); }

/* You review: the Live row and the issue's agent card, real stills. */
.live-row { position: absolute; left: 6cqw; right: 6cqw; top: 15cqw; aspect-ratio: 2123 / 100; overflow: hidden; border-radius: .4cqw; box-shadow: 0 0 0 .12cqw color-mix(in srgb, var(--set-brass) 40%, transparent), 0 1.4cqw 3cqw var(--marketing-room); }
.live-row img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.agent-card { position: absolute; left: 6cqw; right: 6cqw; top: 24.5cqw; }
.agent-card img { display: block; width: 100%; height: auto; border-radius: .4cqw; box-shadow: 0 1.4cqw 3cqw var(--marketing-room); }

/* Captions: always on unless switched off. */
.film-captions { position: absolute; left: 8%; right: 8%; bottom: 2.6cqw; z-index: 4; display: grid; justify-items: center; pointer-events: none; }
.film-captions [data-cue] { grid-area: 1 / 1; margin: 0; padding: .45cqw 1.3cqw .55cqw; border-radius: var(--rounded-xs); background: var(--marketing-room); color: var(--set-screen); font: 500 max(12px, calc(var(--fu) * 2))/1.3 var(--font-ui); text-align: center; text-shadow: 0 .1cqw .3cqw var(--marketing-room); opacity: 0; }
.film.cc-off .film-captions { display: none; }

/* Film artefacts. */
.fx-canvas { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: overlay; opacity: .2; }
.fx-flicker { position: absolute; inset: 0; z-index: 5; background: var(--set-screen); mix-blend-mode: soft-light; opacity: 0; pointer-events: none; }
.fx-vignette { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 78% 72% at 50% 50%, transparent 55%, color-mix(in srgb, var(--marketing-room) 72%, transparent)); }

/* Poster: the title card with a play key. */
.film-poster { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer; color: var(--set-screen); background: radial-gradient(ellipse 80% 70% at 50% 45%, color-mix(in srgb, var(--set-walnut) 70%, var(--marketing-room)), var(--marketing-room) 80%); }
.film-poster::after { content: ''; position: absolute; inset: 0; background: var(--set-noise); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.film:not([data-state='idle']) .film-poster { display: none; }
.poster-deco { position: absolute; inset: 6.5cqw 13cqw; display: grid; place-content: center; justify-items: center; gap: 1.9cqw; border: .32cqw double color-mix(in srgb, var(--set-brass-light) 70%, transparent); }
.poster-kicker { color: var(--set-brass-light); font: 500 calc(var(--fu) * 1.55)/1 var(--font-engrave); letter-spacing: .16em; text-transform: uppercase; }
.poster-wordmark { display: block; width: 40cqw; height: auto; filter: drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--set-glow) 30%, transparent)); }
.poster-play { display: inline-flex; align-items: center; gap: 1cqw; margin-top: .8cqw; padding: 1.2cqw 2.6cqw; border-radius: var(--rounded-sm); background: var(--marketing-accent); color: var(--marketing-accent-ink); font: 600 max(14px, calc(var(--fu) * 1.9))/1 var(--font-marketing); box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--marketing-accent) 45%, transparent); transition: background-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.poster-glyph { font-size: .8em; }
.poster-meta { color: color-mix(in srgb, var(--set-screen) 70%, transparent); font: 500 max(11px, calc(var(--fu) * 1.3))/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; }
.film-poster:hover .poster-play, .film-poster:focus-visible .poster-play { background: var(--marketing-accent-hover); box-shadow: 0 0 3.4cqw color-mix(in srgb, var(--marketing-accent) 60%, transparent); }
.film-poster:focus-visible { outline: 2px solid var(--set-glow); outline-offset: -6px; }
.film-noscript { margin: var(--space-xl) 0 0; text-align: center; }

/* ── Transport: brass keys, a position track with the parts, sound and captions ── */
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); padding: var(--space-md) var(--space-xl); border-radius: var(--rounded-lg); background: linear-gradient(180deg, var(--set-walnut), var(--set-walnut-deep)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--set-brass-light) 30%, transparent), 0 10px 24px color-mix(in srgb, var(--marketing-room) 70%, transparent); }
.transport-reel { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--set-ivory) 0 20%, var(--set-brass-deep) 21% 28%, var(--set-brass) 29% 60%, var(--set-brass-deep) 61%); }
.film-band.is-playing .transport-reel { animation: reel-turn 2.4s linear infinite; }
.transport-key { display: grid; place-items: center; min-width: var(--space-touch-target); min-height: var(--space-touch-target); padding: 0 var(--space-lg); border: 0; border-radius: var(--rounded-sm); background: linear-gradient(180deg, var(--set-ivory), var(--set-ivory-shade)); color: var(--set-ink); font: 600 14px/1 var(--font-ui); cursor: pointer; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--set-ink) 25%, transparent), 0 2px 0 var(--set-brass-deep); transition: transform var(--motion-instant) var(--ease-standard); }
.transport-key:active { transform: translateY(1px); box-shadow: inset 0 2px 3px color-mix(in srgb, var(--set-ink) 30%, transparent); }
.transport-key:focus-visible, .transport-toggle:focus-visible, .transport-file:focus-visible, .film-chapters button:focus-visible { outline: 2px solid var(--set-glow); outline-offset: 2px; }
.transport-play { min-width: 60px; }
.transport-play[data-playing] [data-play-glyph] { display: block; width: 12px; height: 14px; border-inline: 4px solid var(--set-ink); }
.transport-track { position: relative; display: flex; flex: 1 1 220px; align-items: center; min-width: 160px; min-height: var(--space-touch-target); }
.transport-scrub { width: 100%; height: var(--space-touch-target); margin: 0; background: transparent; cursor: pointer; appearance: none; }
.transport-scrub::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--set-brass-deep), var(--set-ink)); box-shadow: inset 0 1px 2px var(--marketing-room); }
.transport-scrub::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--set-brass-deep), var(--set-ink)); }
.transport-scrub::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--set-brass-light), var(--set-brass) 60%, var(--set-brass-deep)); box-shadow: 0 0 8px color-mix(in srgb, var(--set-glow) 50%, transparent); appearance: none; }
.transport-scrub::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--set-brass); }
.transport-ticks { position: absolute; inset: 0; pointer-events: none; }
.transport-ticks span { position: absolute; top: 50%; width: 2px; height: 12px; translate: -1px -50%; border-radius: 1px; background: color-mix(in srgb, var(--set-brass-light) 70%, transparent); }
.transport-time { min-width: 9ch; color: var(--set-ivory); font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.transport-toggle { min-height: var(--space-touch-target); padding: 0 var(--space-xl); border: 1px solid color-mix(in srgb, var(--set-brass) 45%, transparent); border-radius: var(--rounded-sm); background: transparent; color: var(--marketing-muted); font: 500 13px/1 var(--font-ui); cursor: pointer; }
.transport-toggle[aria-pressed='true'] { border-color: var(--set-brass-light); background: color-mix(in srgb, var(--set-brass) 18%, transparent); color: var(--set-ivory); }
.film-full { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; background: var(--marketing-room); }
.transport-file { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-touch-target); min-height: var(--space-touch-target); padding: 0 var(--space-lg); color: var(--set-brass-light); font: 500 13px/1 var(--font-ui); }
.film-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-3xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.film-chapters button { display: inline-flex; align-items: center; gap: var(--space-md); min-height: var(--space-touch-target); padding: 0; border: 0; background: none; color: var(--marketing-muted); font: 500 12px/1 var(--font-engrave); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.film-chapters button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--set-brass) 60%, transparent); }
.film-chapters button[data-current] { color: var(--set-glow); }
.film-chapters button[data-current]::before { background: var(--set-glow); box-shadow: 0 0 8px var(--set-glow); }

@keyframes reel-turn { to { rotate: 360deg; } }
@keyframes reel-spin { to { transform: scaleY(var(--k)) rotate(360deg); } }
.film-band.is-playing .deck-reel span { animation: reel-spin 3.2s linear infinite; }
.film-band.is-playing .deck-reel-r span { animation-duration: 4.4s; }
.film-band.is-cueing:not(.is-playing) .deck-reel span { animation: reel-spin 7s linear infinite; }

/* Waiting: the poster breathes a little. */
html.station-live .film[data-state='idle'] .film-poster { animation: screen-breathe 5s ease-in-out infinite; }
@keyframes screen-breathe { 50% { filter: brightness(1.1); } }

/* Phones: the screen takes the width; the deck and beam step aside. */
@media (width <= 820px) {
  .screening { grid-template-columns: minmax(0, 1fr); }
  .deck, .beam { display: none; }
  .transport { gap: var(--space-sm) var(--space-md); padding: var(--space-md); }
  .transport-track { order: 9; flex-basis: 100%; }
  .transport-reel { display: none; }
}

/* No script: the title card and a link to the MP4. */
html:not(.js) .film[data-state='idle'] .scene-title { opacity: 1; visibility: visible; }
html:not(.js) .film-poster, html:not(.js) .transport, html:not(.js) .film-chapters { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.station-live .film[data-state='idle'] .film-poster, .film-band.is-playing .deck-reel span, .film-band.is-playing .transport-reel { animation: none; }
  .beam { display: none; }
}

/* The MP4 render: the film alone, full frame. */
html.film-render, html.film-render body { overflow: hidden; background: var(--marketing-room); }
html.film-render body > :not(.film) { display: none !important; }
html.film-render .film { position: fixed; inset: 0; z-index: 2147483647; width: 100vw; height: 100vh; border-radius: 0; }
html.film-render .film-poster { display: none; }