/* Live-text reconstructions of the three approved film-section storyboards. */
.film-story {
  --film-bone: #efe9df;
  --film-red: #f10101;
  --film-paper: #f0e8d9;
  --film-ink: #211911;
  --film-progress: 1;
  --film-cover: -158deg;
  --film-opening: 0;
  --film-camera: 1.34;
  position: relative;
  background: #050404;
  color: var(--film-bone);
  scroll-margin-top: 90px;
  padding: 54px 0 80px;
  isolation: isolate;
}
.film-story__header { text-align: center; }
#the-case.film-story--descent { padding-block-start: clamp(128px, 12vw, 160px); }
#the-case.film-story--descent { padding-block-end: clamp(88px, 10vw, 148px); }
.film-story__header .lead { max-width: 60ch; margin-inline: auto; font-family: Barlow, sans-serif; }
.film-story__header h2 { margin: 32px auto 38px; max-width: 500px; }
.film-story__header h2 img { display: block; width: 100%; height: auto; }
.film-review { position: absolute; top: 22px; right: max(7vw, 24px); z-index: 8; font: 400 13px/1.35 Barlow, sans-serif; }
.film-review button { color: var(--film-bone); background: none; border: 1px solid #544a44; padding: 10px 13px; min-height: 44px; font: inherit; cursor: pointer; }
.film-review button[hidden] { display: none; }
.film-review button:focus-visible, .film-story__continue:focus-visible { outline: 2px solid var(--film-bone); outline-offset: 5px; }
.film-story__track { position: relative; }
.film-story__scene { position: relative; isolation: isolate; overflow: hidden; min-height: 640px; padding: 100px max(7vw, 24px) 90px; display: flex; align-items: center; justify-content: center; }
.film-story__scene::after { content: ''; position: absolute; z-index: 5; inset: auto 0 0; height: 80px; pointer-events: none; background: linear-gradient(transparent, #050404); }
.film-story__eyebrow { position: absolute; top: 38px; left: max(7vw, 24px); z-index: 4; margin: 0; font: 400 14px/1.4 "Home Video", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--film-red); }
.film-story__eyebrow span { margin-right: 8px; }
.film-art, .film-signal, .film-story__shade, .film-signal__veil { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.film-art img, .film-signal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film-art img { transform: scale(var(--film-camera)); transform-origin: 78% 48%; }
.film-story--descent .film-art__camera { position: absolute; inset: 0; transform: scale(var(--film-camera)); transform-origin: 78% 48%; }
.film-story--descent .film-art__camera img { position: absolute; inset: 0; transform: none; }
.film-story--descent .film-art__camera::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--film-room-shade, linear-gradient(90deg, #050404f7 0%, #050404e8 36%, #05040485 61%, #05040420 100%)); }
.film-story--descent .film-story__shade { display: none; }
.film-story--descent .film-ceiling__light { z-index: 2; opacity: .55; }
.film-room__light { position: absolute; inset: 0; z-index: 2; }
.film-room__light img { transition: opacity .8s ease; }
.film-room__amber { opacity: 0; }
.film-room__red { opacity: 1; }
.film-room__pulse { opacity: .85; }
.film-story--descent[data-film-room-tone="amber"] .film-room__amber { opacity: 1; }
.film-story--descent[data-film-room-tone="amber"] .film-room__red { opacity: 0; }
.film-story--descent .film-story__scene { scroll-margin-top: 80px; }
@media (min-width: 901px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .film-story--descent.is-film-enhanced[data-film-in-view="true"][data-film-room-tone="amber"] .film-room__pulse { animation: film-room-pulse 2.8s ease-in-out infinite; }
}
@keyframes film-room-pulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .95; }
}
.film-story--case-file .film-art img { transform: none; }
.film-story__shade { z-index: -1; background: linear-gradient(90deg, #050404f7 0%, #050404e8 36%, #05040485 61%, #05040420 100%); }
.film-story--signal .film-story__shade { background: radial-gradient(ellipse at center, #050404 20%, #050404f0 47%, #05040455 83%, #050404 100%); }
.film-signal__capture { width: 100%; height: 100%; }
.film-signal__veil { z-index: -2; background: linear-gradient(#05040490, transparent 25%, transparent 70%, #050404); }
.film-copy { position: relative; z-index: 3; width: min(100%, 770px); margin-inline: auto; }
.film-copy__title { margin: 0 0 30px; }
.film-copy__kicker { margin: 0 0 14px; font: 400 14px/1.4 "Home Video", monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--film-red); }
.film-copy__kicker span { margin-right: 8px; }
.film-copy__title h3 { margin: 0; font: 400 clamp(34px, 3.6vw, 52px)/1.05 "Home Video", monospace; text-transform: uppercase; letter-spacing: .02em; color: var(--film-bone); text-wrap: balance; }
.film-copy__title::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 20px; background: var(--film-red); }

/* Hero seats: the four screening-room chairs slide in from each side as the page scrolls (hero-seats.js).
   The container reuses the plate's grade and edge fade; the floor plate shows carpet where the seats were. */
.mhero__seats {
  --seats-in: 1;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  filter: brightness(.66) saturate(.8) contrast(1.08);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 11%, black 89%, transparent 100%), linear-gradient(to bottom, transparent 13%, black 21%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, black 11%, black 89%, transparent 100%), linear-gradient(to bottom, transparent 13%, black 21%, black 88%, transparent 100%);
  mask-composite: intersect;
}
.mhero__seats img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.mhero__seats-side { will-change: transform; }
.mhero__seats-side--left { transform: translate3d(calc((1 - var(--seats-in)) * -52%), calc((1 - var(--seats-in)) * 3%), 0); }
.mhero__seats-side--right { transform: translate3d(calc((1 - var(--seats-in)) * 52%), calc((1 - var(--seats-in)) * 3%), 0); }
.mhero__seats[data-seats-state="seated"] .mhero__seats-side, .mhero__seats[data-seats-state="still"] .mhero__seats-side { will-change: auto; }
.film-copy__line { margin: 0 0 20px; max-width: 46ch; font: 400 clamp(19px, 2vw, 26px)/1.55 "Home Video", monospace; font-synthesis: none; text-transform: uppercase; text-wrap: pretty; color: var(--film-bone); }
.film-copy__lead { max-width: 44ch; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.4; }
.film-copy__hook { max-width: 33ch; margin-top: 24px; margin-bottom: 0; padding-top: 21px; border-top: 1px solid #8b1916; font-size: clamp(26px, 3vw, 39px); line-height: 1.32; }
.film-story--descent .film-copy { margin-inline: 0 auto; width: min(66%, 760px); }
.film-story--descent .film-copy__line { font-size: clamp(19px, 1.8vw, 25px); }
.film-story--descent .film-copy__hook { font-size: clamp(28px, 2.6vw, 36px); }
.film-story__continue { position: absolute; bottom: 34px; right: max(7vw, 24px); z-index: 7; font: 400 14px/1.5 Barlow, sans-serif; text-decoration: none; color: var(--film-bone); padding: 6px 0; border-bottom: 1px solid #857167; }
.film-story__continue span { padding-left: 12px; }
.film-story__progress { position: absolute; z-index: 6; bottom: 44px; left: max(7vw, 24px); display: flex; gap: 7px; }
.film-story__progress i { width: 24px; height: 2px; background: #68554f; }
.film-story__progress i:last-child { background: var(--film-red); }
.film-routing { position: absolute; z-index: 1; left: 0; top: 8%; width: 25%; height: 86%; color: #cf1411; opacity: .55; pointer-events: none; }
.film-routing path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--film-progress)); }
.film-folder { position: relative; z-index: 3; width: min(72%, 780px); margin: 0 8% 0 auto; transform: rotate(-2deg); perspective: 1600px; }
.film-folder__back { position: absolute; z-index: -1; inset: -16px -13px -16px -18px; background: #9b805b; box-shadow: 0 20px 40px #0008; border-radius: 2px 10px 5px 2px; }
.film-folder__back::before { content: ''; position: absolute; top: -17px; right: 30px; width: 28%; height: 19px; background: #9b805b; border-radius: 6px 6px 0 0; }
.film-folder__sheet { padding: clamp(28px, 4vw, 52px); background: linear-gradient(132deg, #f4eddc, #eadbc1 94%); box-shadow: inset 0 0 35px #76604320, 0 3px 5px #0005; }
.film-copy--paper { width: 100%; }
.film-copy--paper .film-copy__line { color: var(--film-ink); font: 400 clamp(17px, 1.55vw, 22px)/1.55 "Bohemian Typewriter", monospace; margin-bottom: 18px; }
.film-copy--paper .film-copy__lead { font: 400 clamp(18px, 1.7vw, 24px)/1.45 "Home Video", monospace; }
.film-copy--paper .film-copy__hook { font: 400 clamp(25px, 2.5vw, 34px)/1.32 "Home Video", monospace; border-color: #aa241b; margin-bottom: 0; }
.film-folder__cover { position: absolute; z-index: 4; inset: -12px -9px -12px -14px; transform-origin: left center; transform: rotateY(var(--film-cover)); background: linear-gradient(108deg, #bca380, #a98b60 80%, #8f714d); box-shadow: inset 0 0 1px 1px #cfbb9a; backface-visibility: hidden; border-radius: 2px 7px 4px 2px; pointer-events: none; }
.film-folder__cover::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(96deg, transparent, transparent 2px, #57442608 3px); }
.film-folder__cover span { position: absolute; bottom: 32px; right: 26px; font: 400 18px/1.4 "Bohemian Typewriter", monospace; color: #2d251b; }
.film-story__opening { position: absolute; z-index: 4; top: 17%; left: max(7vw, 24px); right: 12%; opacity: var(--film-opening); font: 400 clamp(23px, 2.3vw, 32px)/1.45 "Home Video", monospace; text-transform: uppercase; pointer-events: none; }
/* Enhancement only. Without JS, every word remains in ordinary page flow. */
.film-story.is-film-enhanced .film-story__track { height: calc(82svh + 1300px); }
.film-story.is-film-enhanced .film-story__scene { position: sticky; top: 80px; height: calc(100svh - 110px); min-height: 0; padding-top: 80px; padding-bottom: 80px; }
.film-story.is-film-enhanced .film-copy__line { transition: opacity .4s cubic-bezier(.23, 1, .32, 1), transform .4s cubic-bezier(.23, 1, .32, 1); }
.film-story.is-film-enhanced .film-copy__line:not(.is-film-visible) { opacity: 0; transform: translateY(14px); }
.film-story.is-film-enhanced .film-story__progress i { background: #68554f; }
.film-story.is-film-enhanced .film-story__progress i.is-film-current { background: var(--film-red); }
.film-story.is-film-enhanced .film-story__continue { opacity: 0; visibility: hidden; }
.film-story.is-film-enhanced[data-film-state="3"] .film-story__continue { opacity: 1; visibility: visible; }
.film-story--signal[data-film-state="2"] .film-copy__line[data-film-unlock="2"] { color: var(--film-red); }
.film-story--signal .film-story__scene { padding-left: max(20vw, 36px); }
.film-story.is-film-static .film-art img { transform: none; }
.film-story--descent.is-film-static .film-art__camera { transform: none; }
@media (max-width: 900px), (max-height: 759px) {
  .film-story { padding-top: 42px; padding-bottom: 50px; }
  .film-story__header h2 { width: min(82%, 500px); }
  .film-story__scene { min-height: 0; padding: 86px max(6vw, 20px) 108px; }
  .film-story--signal .film-story__scene { padding-left: max(6vw, 20px); }
  .film-copy, .film-story--descent .film-copy { width: 100%; }
  .film-copy__line, .film-story--descent .film-copy__line { font-size: clamp(18px, 3.7vw, 24px); }
  .film-copy__hook, .film-story--descent .film-copy__hook { font-size: clamp(25px, 5.2vw, 34px); }
  .film-story__shade { background: linear-gradient(90deg, #050404f5, #050404df 68%, #050404a0); }
  .film-story--descent { --film-room-shade: linear-gradient(90deg, #050404f5, #050404df 68%, #050404a0); }
  .film-story--descent .film-art img { object-position: 70%; }
  .film-folder { width: calc(100% - 20px); margin-inline: auto; transform: none; }
  .film-folder__sheet { padding: clamp(22px, 5vw, 42px); }
  .film-folder__cover { display: none; }
  .film-copy--paper .film-copy__line { font-size: clamp(17px, 3.8vw, 22px); }
  .film-copy--paper .film-copy__hook { font-size: clamp(25px, 5.2vw, 34px); }
  .film-story__continue { bottom: 39px; left: max(6vw, 20px); right: auto; }
  .film-story__progress { display: none; }
  .film-routing { opacity: .2; width: 42%; }
}
@media (max-width: 900px) {
  #the-case.film-story--descent { padding-block-start: 112px; }
  .film-story--descent .film-ceiling__light, .film-room__light { z-index: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .film-story .film-art img { transform: none; }
  .film-story .film-copy__line { transition: none !important; }
  .film-room__light img { transition: none; }
  .film-room__pulse { animation: none !important; }
}

/* Review build: CanvasUI glitch options on the incident wire (cctv-fx.js). */
.cctv-fx-layer { position: absolute; inset: 0; z-index: 3; display: block; visibility: hidden; pointer-events: none; }
.cctv-fx-layer > canvas, .cctv-fx-layer > span { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cctv-fx-layer > canvas:last-child { pointer-events: none; }
.cctv-fx-layer--warp { z-index: 2; pointer-events: auto; }
.cctv-fx-layer.is-on { visibility: visible; }
.news-wire__reports.is-cctv-sweeping { position: relative; display: grid; }
.news-wire__reports.is-cctv-sweeping > .news-report:not([hidden]) { grid-area: 1 / 1; }
.cctv-fx-sweep { position: absolute; z-index: 3; display: block; pointer-events: none; }
.cctv-fx-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-top: 32px; }
.news-wire .cctv-fx-row > .news-wire__credits { flex: 1 1 auto; min-width: 0; margin: 0; }
.cctv-fx-switch { position: relative; flex: none; display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg); }
.cctv-fx-switch__title { margin: 0; font: 400 12px/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.cctv-fx-switch__buttons { display: flex; gap: 4px; }
.cctv-fx-switch__buttons button {
  min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 0; background: transparent;
  color: var(--muted); font: 400 12px/1 var(--font-mono); text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.cctv-fx-switch__buttons button[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); box-shadow: inset 0 -2px var(--red); }
.cctv-fx-switch__buttons button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
/* The description opens above the row only while the switcher is hovered or focused. */
.cctv-fx-switch__note {
  position: absolute; z-index: 5; right: 0; bottom: calc(100% + 6px); width: min(320px, calc(100vw - 40px)); margin: 0;
  padding: 10px 12px; border: 1px solid #4b514b; background: rgb(9 13 11 / .96); font-size: 13px; line-height: 1.45;
  color: var(--muted); opacity: 0; visibility: hidden; pointer-events: none;
}
.cctv-fx-switch:is(:hover, :focus-within) .cctv-fx-switch__note { opacity: 1; visibility: visible; }
@media (max-width: 700px) {
  .cctv-fx-row { flex-direction: column; align-items: stretch; }
  .cctv-fx-switch__buttons { flex: 1 1 auto; justify-content: space-between; }
  .cctv-fx-switch__buttons button { flex: 1 1 0; min-height: 40px; padding-inline: 4px; font-size: 11px; }
  .cctv-fx-switch__note { left: 0; right: auto; }
}
