/* vNext prototype (legacy, to be reduced page by page). Not a source of truth for core. */
/* ===== Cinema page: Reel, Poster Index, Film Strip, Set, Camera rig, Rack Focus, Credits ===== */
@property --lb { syntax: '<percentage>'; inherits: false; initial-value: 12.8%; }
@property --f  { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --hh { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --mm { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --ss { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --ff { syntax: '<integer>'; inherits: true; initial-value: 0; }

/* ---------- Reel ---------- */
@keyframes tc { from { --f: 0; } to { --f: 1007; } }
.reel-pin { display: grid; gap: 14px; padding-block: 8px; }
.frame { position: relative; width: min(100%, calc(70svh * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto; background: #0A0A09; color: #EDEDDC; overflow: hidden; display: grid; place-items: center; }
.frame .dzb { position: absolute; inset: 0; }
.frame .dzb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05) brightness(.8); }
.frame .dzb::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(var(--axis), rgba(237,237,220,.14) 0 1px, transparent 1px 34px); }
.frame .dzf { position: relative; text-align: center; padding-inline: 6%; }
.frame .dzf small { display: block; margin-bottom: 1.2em; color: #CDD3AE; }
.frame .dzf p { font: 800 clamp(1.8rem, 6vw, 5.4rem)/.95 var(--font-display); letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.slate { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: min(100%, calc(70svh * 16 / 9)); margin-inline: auto; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.slate .tc { font: 14px var(--font-mono); font-size: clamp(14px, 2.2vw, 20px); letter-spacing: .04em; color: var(--fg); font-variant-numeric: tabular-nums;
  --hh: round(down, var(--f) / 86400); --mm: mod(round(down, var(--f) / 1440), 60); --ss: mod(round(down, var(--f) / 24), 60); --ff: mod(var(--f), 24); }
.slate .tc::before { counter-reset: hh var(--hh) mm var(--mm) ss var(--ss) ff var(--ff); content: counter(hh, decimal-leading-zero) ":" counter(mm, decimal-leading-zero) ":" counter(ss, decimal-leading-zero) ":" counter(ff, decimal-leading-zero); }
.slate .ratio { display: grid; justify-items: end; }
.slate .ratio span { grid-area: 1 / 1; }
.slate .ratio span + span { opacity: 0; }
@media (max-width: 600px) { .slate { grid-template-columns: 1fr 1fr; } .slate .tc { grid-column: 1 / -1; grid-row: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reel { height: 420vh; view-timeline: --reel block; }
    .reel-pin { position: sticky; top: 0; height: 100svh; align-content: center; padding-top: 72px; }
    .slate .tc { animation: tc linear both; animation-timeline: --reel; animation-range: cover 19% cover 81%; }
  }
}

/* ---------- Poster Index ---------- */
.ti { position: relative; overflow: hidden; background: #0A0A09; color: #EDEDDC; min-height: clamp(460px, 72svh, 720px); display: grid; align-items: end; }
.ti-bd { position: absolute; inset: 0; }
.bd { position: absolute; inset: 0; --t: 0; --n: 10; transition: --t 1s var(--ease); overflow: hidden; background: #0A0A09; }
.bd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.72) contrast(1.05); }
.bd::before { content: ''; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(var(--axis), rgba(237,237,220,.16) 0 1px, transparent 1px var(--g, 22px)); }
.bd::after { content: attr(data-w); position: absolute; z-index: 1; right: -.04em; top: -.12em; font: 800 clamp(8rem, 30vw, 26rem)/.8 var(--font-display); letter-spacing: -.05em; color: rgba(237,237,220,.13); white-space: nowrap; }
.bd.b1 { --t: 1; --g: 18px; }
.bd.b2 { --g: 30px; } .bd.b3 { --g: 12px; } .bd.b4 { --g: 26px; background: conic-gradient(from 200deg at 70% 60%, #0A0A09, color-mix(in oklab, var(--accent) 45%, #0A0A09), #0A0A09); }
.ti:has(.ti-list a:is(:hover, :focus-visible)) .b1 { --t: 0; }
.ti:has(.ti-list li:nth-child(1) a:is(:hover, :focus-visible)) .b1 { --t: 1; }
.ti:has(.ti-list li:nth-child(2) a:is(:hover, :focus-visible)) .b2 { --t: 1; }
.ti:has(.ti-list li:nth-child(3) a:is(:hover, :focus-visible)) .b3 { --t: 1; }
.ti:has(.ti-list li:nth-child(4) a:is(:hover, :focus-visible)) .b4 { --t: 1; }
.ti-list { position: relative; z-index: 2; list-style: none; margin: 0; padding: clamp(20px, 4vw, 48px); display: grid; gap: 2px; }
.ti-list a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; text-decoration: none; color: #EDEDDC; transition: opacity .4s var(--ease); }
.ti-list li:not(:first-child) a { opacity: .42; }
.ti-list:has(a:is(:hover, :focus-visible)) a { opacity: .42; }
.ti-list a:is(:hover, :focus-visible) { opacity: 1 !important; outline-color: #EDEDDC; }
.ti-list .tt { font: 700 clamp(1.9rem, 5vw, 4.2rem)/1 var(--font-display); letter-spacing: -.025em; }
.ti-list sup { font-size: 11px; color: rgba(237,237,220,.7); }
.ti-list .meta { color: rgba(237,237,220,.62); }
@media (prefers-reduced-motion: reduce) { .bd, .ti-list a { transition: none; } }

/* ---------- Film Strip ---------- */
.strip-wrap { position: relative; overflow: hidden; padding-block: clamp(32px, 6vw, 72px); }
.strip-wrap::before, .strip-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(48px, 14vw, 200px); z-index: 2; pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); background: linear-gradient(to right, var(--bg), transparent); -webkit-mask-image: linear-gradient(to right, #000 30%, transparent); mask-image: linear-gradient(to right, #000 30%, transparent); }
.strip-wrap::before { left: 0; }
.strip-wrap::after { right: 0; transform: scaleX(-1); }
.strip { --fw: clamp(220px, 28vw, 380px); width: 112%; margin-inline: -6%; overflow: clip; background: #0A0A09; transform: rotate(-3deg); }
.strip { -webkit-mask-image: none; mask-image: none; }
.strip-g { position: relative; display: flex; gap: 14px; padding: 34px 0 34px 14px; }
.strip-g::before, .strip-g::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, #E3E3CD 0 12px, transparent 12px 28px); }
.strip-g::before { top: 10px; } .strip-g::after { bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .strip-tr { animation: none; } .strip-dup { display: none; } }
.fr { margin: 0; width: var(--fw); display: grid; gap: 6px; }
.fr .pic { aspect-ratio: 2.39 / 1; background: #1a1a18; overflow: hidden; --n: 6; position: relative; }
.fr .pic img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); display: block; filter: contrast(1.05) saturate(.85); }
.fr figcaption { display: flex; justify-content: space-between; color: #CDD3AE; font-size: 10.5px; }

/* ---------- Set (3D ring) ---------- */
.set-pin { display: grid; place-items: center; perspective: 1600px; overflow: hidden; padding-block: clamp(32px, 6vw, 80px); }
.drum { --vl-ring-width: clamp(150px, 20vw, 250px); --vl-ring-gap: 28px; --vl-ring-count: 8; --vl-ring-turn: 315deg; --vl-perspective: 1600px; }
.panel { background: var(--surface); display: grid; grid-template-rows: auto 1fr auto; padding: 18px 18px 18px 22px; overflow: hidden; --cs: 14px; --ce: 2px; }
.panel b { grid-row: 3; position: relative; z-index: 1; font: 700 clamp(1.05rem, 2.1vw, 1.7rem) var(--font-display); letter-spacing: -.02em; }
.panel .mono { color: var(--muted); position: relative; z-index: 1; }
.panel.pimg { background: #0A0A09 var(--img) var(--pos, center) / cover; color: #EDEDDC; }
.panel::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(var(--axis), var(--line) 0 1px, transparent 1px var(--pitch)) bottom / 100% 46% no-repeat; }
.panel.pimg::before { background: repeating-linear-gradient(var(--axis), rgba(237,237,220,.22) 0 1px, transparent 1px var(--pitch)) bottom / 100% 46% no-repeat, linear-gradient(transparent 35%, rgba(10,10,9,.78)); }
.panel.pimg .mono { color: rgba(237,237,220,.8); }
.panel.v { background: var(--fg); color: var(--bg); }
.panel.v .mono { color: color-mix(in oklab, var(--bg) 70%, transparent); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .set { height: 360vh; view-timeline: --set block; }
    .set-pin { position: sticky; top: 0; height: 100svh; padding-top: 72px; }
    .drum { --vl-scroll-timeline: --set; --vl-range: cover 21.7% cover 78.3%; }
  }
}

/* ---------- Camera rig cards ---------- */
.cam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cam-card { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.cam-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cam-t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: baseline; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); }
.cam-t code { font: 12px var(--font-mono); text-transform: none; letter-spacing: 0; }
.cam-card:hover .cam-t span { color: var(--fg); }
@media (max-width: 700px) { .cam-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Rack Focus ---------- */
.rf { position: relative; display: grid; place-items: center; min-height: clamp(380px, 62svh, 620px); overflow: hidden; border-block: 1px solid var(--line); background: #0A0A09; }
.rf .bgi { position: absolute; inset: -4%; }
.rf .bgi img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.rf .fgw { position: relative; font: 800 clamp(3rem, 10vw, 8rem) var(--font-display); letter-spacing: -.04em; color: #EDEDDC; text-align: center; padding-inline: 4%; text-wrap: balance; }
.rf .fgw em { font-style: normal; color: #CDD3AE; }
.rf-cap { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); padding-top: 10px; }
.rf-cap .fl { display: grid; justify-items: end; }
.rf-cap .fl span { grid-area: 1 / 1; }
.rf-cap .fl span + span { opacity: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rf-wrap { view-timeline: --rf block; }
  }
}

/* ---------- End Credits ---------- */
.credits { position: relative; height: clamp(420px, 70svh, 640px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.roll { margin: 0; display: grid; gap: 22px; padding-block: 40px; }
.roll div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; }
.roll dt { text-align: right; color: var(--muted); font: 12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.roll dd { margin: 0; font: 700 clamp(1.3rem, 3vw, 2.2rem) var(--font-display); letter-spacing: -.015em; }
.roll .end { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 40px; }
.roll .end svg { width: min(260px, 60vw); fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .credits { height: auto; -webkit-mask-image: none; mask-image: none; } .roll-tr { animation: none; } .roll-dup { display: none; } }

/* existing-in-core band */
.core-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.core-band figure { margin: 0; display: grid; gap: 10px; }
.core-band .vl-media { border-radius: 0; }
.core-band figcaption { display: grid; gap: 4px; }
.core-band code { color: var(--accent); }
@media (max-width: 820px) { .core-band { grid-template-columns: minmax(0, 1fr); } }
.phero .photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0A0A09; --n: 9; animation: cut-a 1.6s var(--ease) .2s backwards; }
.phero .photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05) saturate(.9); }
.phero .photo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(var(--axis), rgba(237,237,220,.18) 0 1px, transparent 1px 30px); }
@media (prefers-reduced-motion: reduce) { .phero .photo { animation: none; } }

.subnav { display: flex; margin-top: 22px; width: max-content; border: 1px solid var(--line); }
.subnav a { padding: 8px 16px; color: var(--muted); text-decoration: none; }
.subnav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.subnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }