/* "In the Cut" — hero film. One sticky stage; the section's height is the film's scroll runtime. */
.film { position: relative; height: 760vh; background: var(--plum-ink); }
.film-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #150d1c; }
.film-canvas, .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-poster { object-fit: cover; opacity: 0; z-index: -1; }
.no-webgl .film-poster { opacity: 1; z-index: 0; }
.film-shade { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(12, 6, 17, .55) 100%),
  linear-gradient(180deg, rgba(12, 6, 17, .35), transparent 22%, transparent 58%, rgba(12, 6, 17, .7)); }
.film-grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
.film-canvas { touch-action: pan-y; }
.film.can-scrub .film-canvas { cursor: grab; }
.film.is-scrubbing .film-canvas { cursor: grabbing; }
.film.is-scrubbing { user-select: none; -webkit-user-select: none; }

/* HUD */
.film-hud { position: absolute; inset: 0; pointer-events: none; color: var(--cream); }
.film-hud p { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.hud-tl, .hud-tr, .hud-bl { position: absolute; padding: 6px 9px; border-radius: 4px; background: rgba(18, 12, 23, .62); }
.hud-tl { left: var(--gutter); top: calc(var(--nav-h) + 8px); display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: rec 0.8s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.hud-tr { right: var(--gutter); top: calc(var(--nav-h) + 8px); color: var(--lavender); }
.hud-bl { left: var(--gutter); bottom: 96px; transition: opacity var(--t-ui) var(--ease); }
.hud-line { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; background: var(--lime); transform-origin: top; transform: scaleY(0); }
.hud-brief { position: absolute; left: 50%; top: 50%; transform: translate(14px, -50%); color: var(--cream); white-space: nowrap; font-size: 13px !important; letter-spacing: .06em !important; text-transform: none !important; opacity: 0; }
.hud-mini { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(10, 34px); gap: 3px; padding: 6px; border-radius: 6px; background: rgba(18, 12, 23, .62); }
.hud-mini i { height: 10px; border-radius: 2px; background: rgba(239, 234, 224, .14); transition: background 120ms linear; }
.hud-mini i.on { background: var(--lavender); }
.hud-mini i.on:last-child { background: var(--lime); }

/* Phase visibility */
.film-stage .hud-mini, .film-stage .hud-bl, .film-stage .hud-brief, .film-stage .hud-line { opacity: 0; }
.film[data-phase="open"] .hud-line { opacity: 1; animation: line-in .6s var(--ease) forwards; }
.film[data-phase="open"] .hud-brief { opacity: 1; animation: type 0.55s steps(28) both; clip-path: inset(0 100% 0 0); }
@keyframes line-in { to { transform: scaleY(1); } }
@keyframes type { to { clip-path: inset(0 0 0 0); } }
.film[data-phase="montage"] .hud-mini, .film[data-phase="montage"] .hud-bl,
.film[data-phase="pull"] .hud-mini { opacity: 1; }
.film:is([data-phase="open"], [data-phase="montage"]) .film-ops, .film:is([data-phase="open"], [data-phase="montage"]) .film-controls { opacity: 0; }
.film:is([data-phase="rest"]) .hud-bl[data-scrub="on"] { opacity: 1; }

/* Projected labels */
.film-ops, .film-lanes { position: absolute; inset: 0; pointer-events: none; transition: opacity var(--t-enter) var(--ease); }
.op, .lane-label { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; }
.op { padding: 4px 8px; border-radius: 4px; background: rgba(18, 12, 23, .82); border: 1px solid rgba(217, 255, 89, .5); color: var(--cream); font-size: 10.5px; letter-spacing: .06em; transform-origin: 0 100%; }
.op b { color: var(--lime); font-weight: 500; text-transform: uppercase; margin-right: 4px; }
.op i { font-style: normal; color: var(--lavender); margin-left: 4px; }
.lane-label { padding: 5px 9px; border-radius: 4px; background: var(--cream); color: var(--plum); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transform-origin: 50% 50%; margin: -12px 0 0 -60px; }

/* Title cards */
.film-cards { position: absolute; inset: 0; pointer-events: none; }
.card { position: absolute; margin: 0; opacity: 0; visibility: hidden; transition: opacity 420ms var(--ease), transform 600ms var(--ease), visibility 0s linear 600ms; }
.card.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 420ms var(--ease), transform 600ms var(--ease), visibility 0s; }
.card-rest { left: var(--gutter); right: var(--gutter); bottom: clamp(96px, 14vh, 150px); display: grid; gap: 20px; max-width: 760px; transform: translateY(24px); }
.card-rest.is-on { transform: none; }
.card-rest h1 { font-size: clamp(44px, 6.4vw, 104px); line-height: .96; letter-spacing: -.05em; text-shadow: 0 2px 30px rgba(12, 6, 17, .6); }
.card-rest .lede { font-size: 19px; max-width: 34em; color: #e6deec; text-shadow: 0 1px 12px rgba(12, 6, 17, .8); }
.card-line { left: 50%; top: 50%; transform: translate(-50%, -40%); width: min(92vw, 1100px); text-align: center; font: 700 clamp(40px, 6vw, 96px)/1 var(--font-sans); letter-spacing: -.045em; color: var(--cream); text-shadow: 0 4px 40px rgba(12, 6, 17, .75); text-wrap: balance; }
.card-line.is-on { transform: translate(-50%, -50%); }
.card-line span { display: block; }
.card-line span + span { color: var(--lavender); }
.card-line small { display: inline-block; margin-top: 22px; padding: 6px 10px; border-radius: 4px; background: rgba(18, 12, 23, .7); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.card-low { top: auto; bottom: 8vh; transform: translate(-50%, 10%); font-size: clamp(32px, 4.2vw, 64px); }
.card-low.is-on { transform: translate(-50%, 0); }
.card-proposal { right: var(--gutter); top: 50%; width: min(400px, calc(100vw - 2 * var(--gutter))); transform: translate(20px, -50%); padding: 24px; border-radius: 18px; background: #21172b; border: 1px solid var(--lavender); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); display: grid; gap: 12px; --focus: var(--lime); }
.card-proposal.is-on { transform: translate(0, -50%); }
.card-proposal .k { color: var(--lavender); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.prop-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.prop-body { font-size: 15.5px; line-height: 1.55; color: #d8cfe0; }
.prop-actions { display: flex; gap: 10px; justify-content: flex-end; }
.chip-btn { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(239, 234, 224, .3); background: transparent; color: var(--cream); font: 700 15px var(--font-sans); cursor: pointer; transition: transform var(--t-ui) var(--ease), background var(--t-ui) var(--ease); }
.chip-btn:active { transform: scale(.95); }
.chip-apply { background: var(--lime); border-color: var(--lime); color: var(--plum); }
.prop-status { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-plum); min-height: 1.4em; }
.card-proposal[data-state="applied"] { border-color: var(--lime); }
.card-proposal[data-state="applied"] .prop-actions { display: none; }
.card-rev { left: var(--gutter); top: 50%; transform: translateY(-50%); font-size: clamp(56px, 8vw, 128px) !important; letter-spacing: -.02em; color: var(--cream); }
.card-rev b { font-weight: 500; color: var(--lime); }

/* Controls */
.film-controls { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; transition: opacity var(--t-enter) var(--ease); }
.film-controls > * { pointer-events: auto; }
.film-hint { display: flex; gap: 18px; margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-on-plum); }
.film-hint span::before { content: "· "; color: var(--lime); }
.film-buttons { display: flex; gap: 8px; }
.film-buttons .motion-btn[aria-pressed="true"] { background: var(--lime); color: var(--plum); border-color: var(--lime); }
.film[data-phase="rest"] [data-skip], .film[data-phase="pull"] [data-skip] { display: none; }
.film:not([data-phase="rest"]) [data-hold] { display: none; }
.film.past-rest .film-hint { opacity: 0; }

/* Fast-forward: a hint of speed in the frame itself */
.film.is-fast .film-shade { background:
  radial-gradient(110% 80% at 50% 45%, transparent 45%, rgba(12, 6, 17, .7) 100%),
  linear-gradient(180deg, rgba(12, 6, 17, .35), transparent 22%, transparent 58%, rgba(12, 6, 17, .7)); }

/* Navigation enters after the cold open, like credits after a title. */
.nav { transition: opacity 600ms var(--ease), background var(--t-enter) var(--ease); }
html.film-open .nav { opacity: 0; pointer-events: none; }

/* Hand-off: the film fades to plum as the camera passes through the monitor. */
.film-fade { position: absolute; inset: 0; background: var(--plum); opacity: 0; pointer-events: none; }

@media (max-width: 800px) {
  .film { height: 620vh; }
  .hud-tr { display: none; }
  .hud-mini { grid-template-columns: repeat(10, 22px); bottom: 34px; }
  .card-rest { bottom: 108px; }
  .card-rest .lede { font-size: 16px; }
  .card-proposal { left: var(--gutter); right: var(--gutter); top: auto; bottom: 24px; width: auto; transform: translateY(20px); }
  .card-proposal.is-on { transform: none; }
  .card-rev { top: 26%; }
  .film-hint .desk { display: none; }
  .film-hint { display: none; }
  .op { font-size: 9.5px; }
}

/* Reduced motion: no autoplay or flight. One composed still, then the scenes as readable cards. */
.reduced .film { height: auto; }
.reduced .film-stage { position: relative; height: auto; min-height: 100svh; overflow: visible; display: flex; flex-direction: column; }
.reduced .film-canvas, .reduced .film-poster { height: 100svh; }
.reduced .film-grain, .reduced .film-hud, .reduced .film-ops, .reduced .film-lanes, .reduced .film-controls { display: none; }
.reduced .film-cards { position: relative; inset: auto; display: grid; gap: 56px; padding: 0 var(--gutter) 120px; pointer-events: auto; }
.reduced .card { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; transition: none; }
.reduced .card-rest { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 96px; max-width: none; }
.reduced .card-line { left: auto; top: auto; width: auto; text-align: left; font-size: clamp(32px, 4vw, 56px); }
.reduced .card-proposal { right: auto; top: auto; max-width: 440px; }
.reduced .card-rev { display: none; }
.film[data-phase="rest"] .film-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 6, 17, .78), rgba(12, 6, 17, .35) 42%, transparent 65%); opacity: var(--rest-shade, 1); transition: opacity 400ms var(--ease); }
.film.past-rest { --rest-shade: 0; }
.film.deciding .film-controls { opacity: 0; pointer-events: none; }

/* The headline card only catches pointers on its links and buttons, so the scene under it stays draggable. */
.card-rest.is-on { pointer-events: none; }
.card-rest.is-on :is(a, button) { pointer-events: auto; }

/* Playhead readout, projected under the monitor. */
.film-readout { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: rgba(18, 12, 23, .78); color: var(--cream); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-enter) var(--ease); will-change: transform; }
.film-readout.on { opacity: 1; }
.film-readout .k { color: var(--lime); }
.film-readout .tag { padding: 2px 5px; border-radius: 3px; background: rgba(191, 169, 210, .2); color: var(--lavender); }

/* Hold button: a real press target. */
.hold-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; transition: transform 160ms var(--ease); }
.hold-btn[aria-pressed="true"] .hold-ring { transform: scale(1.4); border-color: var(--plum); background: var(--plum); }
.film-shade { transition: background 300ms var(--ease); }
.film.is-fast .film-grain { opacity: .14; }
@media (max-width: 800px) { .film-readout { display: none; } }