/* =========================================================================
   THE WORLD (establishing shots) + THE HALL OF HITS (white gallery)
   ========================================================================= */

/* ---------------- stage ---------------- */
.world { position: relative; background: #000; height: 680vh; }
.w-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; contain: layout paint; background: #000; }
.w-scene { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; overflow: hidden; }
.w-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 100%; will-change: transform; }

/* ---------------- L.A. ---------------- */
.w-clouds { position: absolute; inset: 0; pointer-events: none; }
.w-clouds i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: calc(var(--w) * 0.16); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.18) 55%, rgba(255, 255, 255, 0)); will-change: transform; animation: wDrift 60s linear infinite alternate; }
.w-clouds i:nth-child(2n) { animation-duration: 80s; opacity: 0.7; }
@keyframes wDrift { to { transform: translateX(8vw); } }
.w-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 52%, var(--s3) 74%, var(--s3) 100%); }
.w-sky.ny { background: linear-gradient(180deg, #01020a 0%, #070c26 45%, #1a1636 72%, #3a2236 100%); }
.w-sky.alley { background: #050407; }
.w-sun { position: absolute; left: 61%; top: 47%; width: 15vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fffdf3 0%, var(--sun) 46%, transparent 70%); box-shadow: 0 0 120px 40px color-mix(in srgb, var(--sun) 55%, transparent); filter: saturate(1.1); }
.w-sun.moon { top: 18%; left: 72%; width: 7vmin; background: radial-gradient(circle at 40% 40%, #fffdf3, #e6dcc2 60%, transparent 72%); box-shadow: 0 0 80px 18px rgba(240, 230, 200, 0.18); }
.w-beams { position: absolute; inset: 0; pointer-events: none; }
.w-beams.faint { opacity: 0.18; }
.w-beams i { position: absolute; bottom: 30%; left: var(--x, 30%); width: 11vmin; height: 130vh; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255, 248, 225, 0.55), rgba(255, 248, 225, 0.12) 55%, transparent 92%); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); will-change: transform; animation: wSweep var(--d, 10s) ease-in-out infinite alternate; }
@keyframes wSweep { from { transform: rotate(calc(var(--a) - 20deg)); } to { transform: rotate(calc(var(--a) + 20deg)); } }
.w-lt text { font-family: var(--display); font-size: 78px; fill: #f7f4ec; letter-spacing: 0; }
.w-lt-in { will-change: transform, opacity; }
.w-homes .tw { animation: wTw 3.2s steps(2) var(--d) infinite; }
@keyframes wTw { 50% { opacity: 0.2; } }
.w-lamp { filter: drop-shadow(0 0 10px #ffe7a8) drop-shadow(0 0 26px rgba(255, 220, 150, 0.7)); }
.w-car { position: absolute; bottom: 5.4%; left: -25%; width: 22vw; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 40, 40, 0.9)); box-shadow: 0 0 14px 2px rgba(255, 30, 30, 0.6); animation: wDrive 8s linear infinite; }
@keyframes wDrive { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(160vw); } }
.w-stars { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.w-stars svg { width: 100%; height: 100%; display: block; }
.w-stars circle { fill: #fff; }
.w-stars .tw { animation: wTw 2.6s steps(2) var(--d) infinite; }

/* ---------------- N.Y.C. ---------------- */
.w-moon { position: absolute; right: 14%; top: 14%; width: 9vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fffef6, #ece2c6 55%, #b9ad90 70%, transparent 72%); box-shadow: 0 0 90px 20px rgba(230, 220, 190, 0.16); }
.w-blink { animation: wBlink 1.6s steps(1) infinite; }
@keyframes wBlink { 50% { opacity: 0.1; } }
.w-ny .fl { animation: wFlick 9s steps(1) var(--d) infinite; }
@keyframes wFlick { 0%, 40% { opacity: 0; } 41%, 78% { opacity: 1; } 79%, 100% { opacity: 0; } }
.w-target rect:first-child { filter: drop-shadow(0 0 6px rgba(255, 210, 120, 0.9)); }
.w-trail { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 26 180; animation: wTrail 3.2s linear infinite; }
.w-trail.w { stroke: #fff4d6; filter: drop-shadow(0 0 4px #fff4d6); }
.w-trail.r { stroke: #ff3b30; stroke-dasharray: 18 140; animation-duration: 4.1s; filter: drop-shadow(0 0 4px #ff3b30); }
@keyframes wTrail { to { stroke-dashoffset: -412; } }
.w-bulb { animation: wTw 2.4s steps(2) var(--d) infinite; }
.w-refl { animation: wShim 2.2s steps(3) infinite alternate; transform-origin: 50% 0; transform-box: fill-box; }
@keyframes wShim { to { opacity: 0.55; transform: scaleX(1.25); } }

/* ---------------- the alley ---------------- */
.w-neon text { font-family: var(--display); font-size: 46px; fill: #ffd1da; stroke: #ff2d55; stroke-width: 1.2px; paint-order: stroke; }
.w-neon { filter: drop-shadow(0 0 4px #ff2d55) drop-shadow(0 0 14px rgba(255, 45, 85, 0.85)); animation: wNeon 6s steps(1) infinite; }
.w-neon-glow { animation: wNeon 6s steps(1) infinite; }
@keyframes wNeon { 0%, 61%, 64%, 66%, 100% { opacity: 1; } 62%, 65% { opacity: 0.25; } }
.w-stencil { font-family: var(--mono); font-size: 13px; letter-spacing: 3px; fill: #cfc6b4; }
.w-stencil.small { font-size: 9px; letter-spacing: 1.5px; fill: #6d665c; }
.w-leaf { transform-box: fill-box; will-change: transform; }
.w-leaf.l { transform-origin: 0% 50%; }
.w-leaf.r { transform-origin: 100% 50%; }
.w-doorlight { filter: drop-shadow(0 0 30px #fff7e0); }
.w-bulbs circle { filter: drop-shadow(0 0 5px #ffcf73); animation: wTw 3s steps(2) var(--d) infinite; }
.w-steam { position: absolute; inset: 0; pointer-events: none; }
.w-steam i { position: absolute; left: 44%; bottom: 6%; width: 14vw; height: 26vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(230, 230, 240, 0.13), rgba(230, 230, 240, 0.05) 60%, transparent); will-change: transform, opacity; animation: wSteam 7s ease-out infinite; }
.w-steam i:nth-child(2) { left: 48%; animation-delay: 2.3s; }
.w-steam i:nth-child(3) { left: 41%; animation-delay: 4.6s; }
@keyframes wSteam { 0% { transform: translateY(10vh) scale(0.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-30vh) scale(1.6) translateX(4vw); opacity: 0; } }

/* ---------------- shared overlays ---------------- */
.w-rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.w-grade { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 50%, #fff, #ffe6bf 70%); opacity: calc(var(--g, 0) * 0.85); }
.w-stage::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(70% 60% at 18% 82%, rgba(0, 0, 0, 0.62), transparent 70%), radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)); }
.w-cut { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center end; padding-right: 9vw; background: #000; font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: clamp(26px, 4.2vw, 64px); font-weight: 700; letter-spacing: 0.04em; color: #f6f1e4; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; }
.w-cut span::after, .w-slate span::after { content: ""; display: inline-block; width: 0.5em; height: 0.9em; margin-left: 0.08em; vertical-align: -0.1em; background: currentColor; animation: wCaret 0.8s steps(1) infinite; }
@keyframes wCaret { 50% { opacity: 0; } }
.w-slate { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: pre; min-width: min(640px, 86vw); font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: clamp(22px, 3vw, 44px); font-weight: 700; color: #f2ede4; pointer-events: none; }
.w-white { position: absolute; inset: 0; z-index: 9; background: #f2efe8; opacity: 0; pointer-events: none; }

/* captions: a script slug line, a headline, a line of copy */
.w-caps { position: absolute; z-index: 7; left: var(--gutter); bottom: 13vh; width: min(560px, calc(100vw - var(--gutter) * 2)); }
.w-cap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; color: #f6f1e4; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65); }
.w-cap-k { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.26em; color: #e6cc94; margin-bottom: 14px; }
.w-cap-k i { font-style: normal; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(230, 204, 148, 0.6); border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.w-cap-t { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-size: clamp(54px, 7vw, 112px); line-height: 0.88; letter-spacing: 0.005em; text-transform: uppercase; }
.w-cap-t em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--gold-2); font-size: 0.82em; letter-spacing: -0.02em; }
.w-cap p { margin: 0 0 20px; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(246, 241, 228, 0.86); max-width: 470px; }
.w-cap-a { display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px; border-radius: 999px; background: rgba(246, 241, 228, 0.1); border: 1px solid rgba(246, 241, 228, 0.35); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; background-color: rgba(20, 18, 16, 0.55); transition: background 0.3s, transform 0.3s var(--ease); }
.w-cap-a:hover { background: rgba(246, 241, 228, 0.22); transform: translateY(-2px); }
.w-live, .w-path { position: absolute; z-index: 7; top: calc(var(--nav-h) + var(--bar-h) + 22px); font-size: 10px; letter-spacing: 0.24em; color: rgba(246, 241, 228, 0.82); opacity: 0; pointer-events: none; }
.w-live { left: var(--gutter); display: flex; align-items: center; gap: 10px; }
.w-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; animation: wBlink 1.2s steps(1) infinite; }
.w-path { right: var(--gutter); display: flex; align-items: center; gap: 10px; }
.w-path i { width: 28px; height: 1px; background: rgba(246, 241, 228, 0.35); }
.w-path span { opacity: 0.45; transition: opacity 0.4s, color 0.4s; }
.w-path span.on { opacity: 1; color: var(--gold-2); }

/* nothing animates while you can't see it */
.world.idle *, .w-scene.off, .w-scene.off * { animation-play-state: paused !important; }
.w-scene.off { visibility: hidden; }

/* reduced motion: three still frames */
.world.static { height: auto !important; }
.world.static .w-stage { position: relative; height: auto; display: grid; contain: none; }
.world.static .w-scene { position: relative; height: 80vh; opacity: 1; }
.world.static .w-stars, .world.static .w-cut, .world.static .w-slate, .world.static .w-white, .world.static .w-grade, .world.static .w-live, .world.static .w-path, .world.static .w-rain { display: none; }
.world.static .w-caps { position: relative; left: auto; bottom: auto; width: auto; padding: 40px var(--gutter); display: grid; gap: 40px; }
.world.static .w-cap { position: relative; opacity: 1; }
.world.static .w-lt-in { opacity: 1; }

@media (max-width: 760px) {
  .w-caps { bottom: 9vh; }
  .w-cap p { font-size: 14px; }
  .w-path { display: none; }
  .w-cut { place-items: center start; padding: 0 var(--gutter); }
  .w-beams i { width: 18vmin; }
}

/* =========================================================================
   THE HALL OF HITS
   ========================================================================= */
.hits { position: relative; background: #f2efe8; color: #141311; }
.hits-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  /* everything below is sized from the window HEIGHT, so frame + info card always fit on screen */
  --vh: 100vh; --top: calc(var(--nav-h) + var(--bar-h) + clamp(56px, 13vh, 180px)); --plaque: clamp(118px, 19vh, 168px); --gap: clamp(12px, 2.6vh, 28px);
  --room: calc(var(--vh) - var(--top) - var(--plaque) - var(--gap) - clamp(44px, 7vh, 80px)); }
@supports (height: 100svh) { .hits-stage { --vh: 100svh; } }
@media (min-width: 901px) and (max-height: 580px) {
  .hit-meta .mono { display: none; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .hit-meta { gap: 1px; }
  .hit-meta b { font-size: 13.5px; }
  .hit-meta span { font-size: 11.5px; }
  .hits-t { font-size: clamp(36px, 7vh, 64px); }
  .hits-d { display: none; }
}
.hits-wall { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at 50% -10%, #fbfaf6 0%, rgba(251, 250, 246, 0) 60%),
  radial-gradient(40% 50% at 15% 40%, rgba(0, 0, 0, 0.03), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  #f2efe8; }
.hits-big { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font-family: var(--display); font-size: min(34vw, 62vh); line-height: 0.8; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.5px rgba(20, 19, 17, 0.07); white-space: nowrap; pointer-events: none; }
.hits-big.swap { animation: hitsSwap 0.9s var(--ease) both; }
@keyframes hitsSwap { from { opacity: 0; transform: translate(-50%, -42%) scale(0.96); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, -50%); filter: none; } }
.hits-head { position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--nav-h) + var(--bar-h) + 3vh); max-width: min(440px, 34vw); }
.hits-k { font-size: 11px; letter-spacing: 0.26em; color: #8a7a58; margin: 0 0 10px; }
.hits-t { margin: 0 0 10px; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 5vw, 80px); line-height: 0.9; text-transform: uppercase; color: #141311; }
.hits-t em { font-family: var(--serif); font-style: italic; text-transform: none; color: #9a7b3c; font-size: 0.86em; }
.hits-d { margin: 0; color: #5c574e; font-size: 15px; max-width: 420px; }
.hits-track { position: absolute; z-index: 2; left: 0; top: var(--top); display: flex; align-items: flex-start; gap: clamp(60px, 8vw, 150px); padding: 0 34vw 0 max(46vw, calc(var(--gutter) + 470px)); will-change: transform; }
.hit { position: relative; flex: none; width: var(--hw, max(150px, min(clamp(210px, 21vw, 330px), calc(var(--room) / 1.45)))); --near: 0; --rx: 0deg; --ry: 0deg; --gx: 30%; --gy: 20%; }
.hit-lamp { position: absolute; left: 50%; top: calc(var(--top) * -1 + var(--nav-h)); width: 260%; height: calc(var(--top) - var(--nav-h) + 100%); transform: translateX(-50%); pointer-events: none; }
.hit-lamp::before { content: ""; position: absolute; left: 50%; top: 0; width: 34px; height: 22px; transform: translateX(-50%); border-radius: 4px 4px 10px 10px; background: linear-gradient(#2b2a28, #0e0d0c); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.hit-lamp i { position: absolute; inset: 18px 0 0; background: radial-gradient(38% 60% at 50% 46%, rgba(255, 246, 222, 0.95), rgba(255, 246, 222, 0) 70%); clip-path: polygon(46% 0, 54% 0, 92% 100%, 8% 100%); opacity: calc(0.12 + var(--near) * 0.4); transition: opacity 0.4s; }
.hit-frame { position: relative; padding: 11px; background: linear-gradient(145deg, #232120, #0c0b0a 60%, #1b1a18); border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 10px 18px -8px rgba(0, 0, 0, 0.35), 0 40px 70px -26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(calc((1 - var(--near)) * 18px)) scale(calc(0.9 + var(--near) * 0.1));
  transition: transform 0.5s var(--ease), box-shadow 0.5s; transform-style: preserve-3d; }
.hit.on .hit-frame { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 18px 26px -10px rgba(0, 0, 0, 0.35), 0 70px 90px -30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.hit-mat { background: #fbfaf6; padding: 8%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06), inset 2px 2px 6px rgba(0, 0, 0, 0.12); }
.hit-poster { aspect-ratio: 2 / 3; overflow: hidden; background: #111; position: relative; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
.hit-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* real one-sheets hang at their own proportions (4:5, 27x40…), like a real gallery wall */
.hit-poster.real { aspect-ratio: auto; }
.hit-poster.real img { height: auto; max-height: max(90px, calc(var(--room) - 22px - 4vh)); object-fit: contain; }
.hp-ph { position: absolute; inset: 0; }
.hp-ph > svg, .hp-ph > .poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-ph-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 22% 8% 9%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); color: #f6f1e4; text-align: center; }
.hp-ph-t span { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.75; }
.hp-ph-t b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.2vw, 34px); line-height: 0.92; margin: 6px 0 4px; text-transform: uppercase; }
.hp-ph-t i { font-family: var(--serif); font-size: 13px; opacity: 0.8; }
.hp-ph-tag { position: absolute; top: 8px; right: 8px; font-size: 7px; letter-spacing: 0.2em; padding: 3px 6px; background: rgba(0, 0, 0, 0.55); color: rgba(246, 241, 228, 0.85); border: 1px dashed rgba(246, 241, 228, 0.4); text-transform: uppercase; }
.hit-glass { position: absolute; inset: 11px; pointer-events: none; background: radial-gradient(40% 30% at var(--gx) var(--gy), rgba(255, 255, 255, 0.32), transparent 70%), linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.12) 46%, transparent 52%); }
.hit-rank { position: absolute; left: -10px; top: 18px; z-index: 2; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: #2b2210; background: linear-gradient(135deg, #f3dc9c, #b8913f 45%, #f1d68f 60%, #9c7a32); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6); transform: translateZ(30px); }
.hit-plaque { width: max(100%, 236px); margin-left: 50%; translate: -50% 0; margin-top: var(--gap); background: #fff; padding: clamp(10px, 1.8vh, 16px) 16px clamp(9px, 1.6vh, 14px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 8px 18px -10px rgba(0, 0, 0, 0.2); transform: translateY(calc((1 - var(--near)) * 10px)); transition: transform 0.5s var(--ease); }
.hit-od { position: relative; display: flex; align-items: center; height: 1em; font-family: var(--display); font-size: clamp(26px, min(3.1vw, 5.2vh), 50px); line-height: 1; margin-bottom: clamp(6px, 1.3vh, 12px); }
.od-d { position: relative; display: block; width: 0.6em; height: 1.08em; overflow: hidden; margin-right: 3px; border-radius: 3px; background: #121110; color: #f7f2e6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 3px rgba(0, 0, 0, 0.25); }
.od-d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, transparent 32%, transparent 68%, rgba(0, 0, 0, 0.75) 100%), linear-gradient(180deg, transparent 49%, rgba(0, 0, 0, 0.5) 50%, transparent 51%); pointer-events: none; }
.od-strip { display: block; transform: translateY(calc(var(--to, 0) * -1.08em)); transition: transform calc(1.7s + var(--i) * 0.22s) cubic-bezier(0.12, 0.72, 0.08, 1); }
.od-strip b { display: block; height: 1.08em; line-height: 1.08em; text-align: center; font-weight: 400; }
.od-s { font-family: var(--display); margin: 0 3px 0 1px; color: #141311; }
.hit-est { margin-left: 10px; padding: 3px 6px; font-size: 9px; letter-spacing: 0.18em; color: #b3261e; border: 1.5px solid #b3261e; transform: rotate(-6deg); border-radius: 2px; }
.hit-meta { display: grid; gap: 3px; }
.hit-meta b { font-size: 15px; letter-spacing: 0.01em; }
.hit-meta span { font-size: 12.5px; color: #6a645a; }
.hit-meta .mono { font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #9a7b3c; }
.hit-bar { height: 3px; margin-top: clamp(6px, 1.3vh, 12px); background: #ece8df; overflow: hidden; }
.hit-bar i { display: block; height: 100%; background: linear-gradient(90deg, #9a7b3c, #e6cc94); transform-origin: 0 50%; transform: scaleX(0); transition: transform 2.2s cubic-bezier(0.12, 0.72, 0.08, 1) 0.2s; }
.hit.rolled .hit-bar i { transform: scaleX(var(--w)); }
.hit-end { flex: none; align-self: center; display: grid; gap: 16px; justify-items: start; width: 280px; margin-top: 12vh; }
.hit-end p { margin: 0; font-size: 10px; letter-spacing: 0.3em; color: #8a7a58; }
.btn-dark { background: #141311; color: #f6f1e4; border: 1px solid #141311; }
.btn-dark:hover { background: #2a2824; }
.hits-note { position: absolute; z-index: 3; left: var(--gutter); bottom: 2.4vh; margin: 0; max-width: min(680px, 34vw); font-size: 9.5px; letter-spacing: 0.12em; color: #8f887c; }
.hits-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 11vh; z-index: 1; background: linear-gradient(180deg, #ddd8cd 0%, #e9e5dc 30%, #d9d4c9 100%); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 10px 18px -12px rgba(0, 0, 0, 0.25); }
.hits-floor::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: #c9c3b6; }
.hits-out { height: 34vh; background: linear-gradient(180deg, #f2efe8 0%, #9c978d 38%, #1a1918 78%, #070707 100%); display: grid; place-items: end center; padding-bottom: 7vh; }
.hits-out p { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.4em; color: rgba(246, 241, 228, 0.6); text-transform: uppercase; }

@media (max-width: 900px) {
  .hits { height: auto !important; }
  .hits-stage { position: relative; height: auto; overflow: visible; padding: calc(var(--nav-h) + 30px) 0 70px; }
  .hits-head { position: relative; left: auto; top: auto; padding: 0 var(--gutter); margin-bottom: 18px; max-width: none; }
  .hits-track { position: relative; top: auto; transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26vh 12vw 40px; margin-top: -18vh; gap: 10vw; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hits-track::-webkit-scrollbar { display: none; }
  .hit { width: 70vw; scroll-snap-align: center; }
  .hit-lamp { top: -12vh; height: calc(12vh + 115%); }
  .hit-lamp::before { display: none; }
  .hit-end { margin-top: 30vh; width: 64vw; scroll-snap-align: center; }
  .hits-big { top: 46%; font-size: 46vw; }
  .hits-note { position: relative; left: auto; bottom: auto; padding: 0 var(--gutter); }
  .hits-floor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .od-strip, .hit-bar i { transition: none; }
}

/* =========================================================================
   THE NUMBERS: a roll of admission tickets (tear one off)
   ========================================================================= */
.troll { position: relative; display: flex; align-items: center; padding: 30px 0 10px; min-height: 300px; }
.troll-spool { position: relative; z-index: 2; flex: none; width: clamp(160px, 19vw, 270px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a1414 0 17%, #3b3030 17.5% 21%, transparent 21.5%), repeating-radial-gradient(circle at 50% 50%, #c4162f 0 2.5px, #8e0e22 2.5px 3.4px, #b5132a 3.4px 5px), #b5132a;
  box-shadow: inset -14px -14px 30px rgba(0, 0, 0, 0.45), inset 10px 10px 24px rgba(255, 255, 255, 0.12), 0 24px 40px -14px rgba(0, 0, 0, 0.8); }
.troll-spool i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.16), transparent 20%, transparent 50%, rgba(255, 255, 255, 0.1) 60%, transparent 75%); }
.troll.rolling .troll-spool i { animation: trSpin 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes trSpin { from { transform: rotate(-900deg); } to { transform: rotate(0); } }
.troll-strip { display: flex; align-items: center; margin-left: -18px; padding: 20px 0; clip-path: inset(-40px 100% -40px 0); transition: clip-path 2.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.troll.rolling .troll-strip { clip-path: inset(-60px -40px -60px 0); }
.tk { --c: #c8152f; --ink: #fff3dc; position: relative; flex: none; display: grid; align-content: center; gap: 6px; width: clamp(200px, 18.5vw, 290px); height: 184px; padding: 14px 22px; border: 0; margin: 0; text-align: left; cursor: pointer; color: var(--ink); font: inherit;
  background: radial-gradient(circle at 0 50%, transparent 9px, var(--c) 9.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 9px, var(--c) 9.5px) right / 51% 100% no-repeat;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.45));
  transform: rotate(calc(((var(--i) % 2) - 0.5) * 2.2deg)) translateY(calc(((var(--i) % 2) - 0.5) * 8px));
  transition: transform 0.45s var(--ease), filter 0.45s; }
.tk:nth-child(3n+2) { --c: #f0e4c6; --ink: #9a1022; }
.tk:nth-child(3n+3) { --c: #d9b878; --ink: #2b1c08; }
.tk::before { content: ""; position: absolute; inset: 8px 16px; border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 4px; pointer-events: none; }
.tk::after { content: ""; position: absolute; top: 6px; bottom: 6px; right: -1px; border-right: 2px dotted rgba(0, 0, 0, 0.35); }
.tk:hover, .tk:focus-visible { transform: translateY(-12px) rotate(-1.5deg); filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.5)); outline: none; }
.tk-admit { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.8; }
.tk-n { font-family: var(--display); font-size: clamp(56px, 5.4vw, 78px); line-height: 0.82; letter-spacing: 0.01em; }
.tk-n small { font-size: 0.55em; margin-left: 2px; }
.tk-l { font-weight: 800; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.tk-fine { font-size: 7.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.tk.torn { animation: tkTear 1.1s cubic-bezier(0.5, 0, 0.9, 0.6) both; pointer-events: none; }
@keyframes tkTear { 0% { transform: translateY(-14px) rotate(-3deg); } 18% { transform: translateY(-20px) rotate(6deg); } 100% { transform: translateY(110vh) rotate(38deg); opacity: 0; } }
.tk.reprint { animation: tkPrint 0.7s var(--ease) both; }
@keyframes tkPrint { from { opacity: 0; transform: translateX(-40px) scaleX(0.6); } }
@media (max-width: 760px) {
  .troll { flex-direction: column; align-items: flex-start; }
  .troll-spool { width: 130px; margin-left: 10px; }
  .troll-strip { flex-direction: column; align-items: flex-start; margin: -30px 0 0 34px; clip-path: inset(0 -40px 100% -40px); }
  .troll.rolling .troll-strip { clip-path: inset(0 -40px -60px -40px); }
  .tk { width: min(300px, 80vw); margin-top: -2px; }
}

/* =========================================================================
   Q&A: a bound screenplay page
   ========================================================================= */
.script-page { position: relative; max-width: 780px; margin: 40px auto 0; padding: 60px clamp(24px, 8vw, 92px) 64px clamp(44px, 11vw, 124px); color: #1d1b17; font-family: "Courier Prime", "Courier New", Courier, monospace; font-size: 16px; line-height: 1.55;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.04)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), #fbf9f3;
  box-shadow: 0 1px 0 #e7e1d3, 3px 4px 0 -1px #f1ece0, 3px 4px 0 0 #ddd6c6, 6px 8px 0 -1px #f4f0e6, 6px 8px 0 0 #d6cfbe, 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  transform: rotate(-0.5deg); }
.sp-brads { position: absolute; left: clamp(14px, 3vw, 30px); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 64px 0; pointer-events: none; }
.sp-brads i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff1c2, #c9a24d 45%, #7d5f22 80%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35), 0 0 0 3px #1a1714; }
.sp-brads i:nth-child(2) { visibility: hidden; }
.sp-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 30px; font-size: 11px; letter-spacing: 0.06em; color: #6f685c; }
.sp-slug { margin: 0 0 14px; font-weight: 700; text-transform: uppercase; }
.sp-action { margin: 0 0 30px; }
.sp-beat + .sp-beat { margin-top: 22px; }
.sp-beat summary { list-style: none; cursor: pointer; }
.sp-beat summary::-webkit-details-marker { display: none; }
.sp-char { display: block; margin-left: 38%; text-transform: uppercase; }
.sp-dia { display: block; margin: 0 14% 0 20%; }
.sp-beat summary .hl { background: linear-gradient(104deg, rgba(255, 214, 70, 0) 0.9%, rgba(255, 214, 70, 0.82) 2.4%, rgba(255, 220, 90, 0.6) 86%, rgba(255, 214, 70, 0.1) 99%) no-repeat 0 60% / 0% 78%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; transition: background-size 0.6s var(--ease); }
.sp-beat summary:hover .hl, .sp-beat[open] summary .hl { background-size: 100% 78%; }
.sp-beat summary:focus-visible { outline: 2px dashed #9a7b3c; outline-offset: 6px; }
.sp-ans { margin-top: 16px; }
.sp-beat[open] .sp-ans .sp-dia:empty::after, .sp-ans .sp-dia::after { content: ""; display: inline-block; width: 0.55em; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: #1d1b17; animation: wCaret 0.8s steps(1) infinite; }
.sp-trans { margin: 40px 0 0; text-align: right; font-weight: 700; }
@media (max-width: 640px) {
  .script-page { font-size: 14px; transform: none; padding-left: 52px; padding-right: 22px; }
  .sp-char { margin-left: 24%; }
  .sp-dia { margin: 0 2% 0 8%; }
}