/* Title Sequence (v15) */

:root {
  --bar: clamp(48px, calc((100vh - 100vw / 2.39) / 2), 150px);
  --pad: clamp(18px, 5vw, 84px);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --board: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sign: "Limelight", Georgia, serif;
  --marker: "Permanent Marker", "Marker Felt", cursive;
  --hf: "Bodoni Moda", Didot, Georgia, serif;
  --bf: "Bodoni Moda", Didot, Georgia, serif;
  --bg: #070707;
  --fg: #f1ede4;
  --accent: #d9c7a0;
  --tk-bg: #f6efdc;
  --tk-fg: #1a1612;
  --tk-stub: #e7d9b8;
  --tk-stub-fg: #1a1612;
  --tk-btn: #1a1612;
  --tk-btn-fg: #f6efdc;
  --p0: #e2492f; --p1: #f1b33b; --p2: #2c6c67; --p3: #16130f; --p4: #fbf5e8;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@media (max-aspect-ratio: 4/3) {
  :root { --bar: clamp(48px, 7vh, 76px); }
}

.g-cut { --bg: var(--p4); --fg: #16130f; --hf: "Archivo Black", "Arial Black", sans-serif; --bf: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --accent: var(--p0); --tk-stub: var(--p1); }
.g-noir { --bg: #070707; --fg: #f1ede4; --hf: "Bodoni Moda", Didot, Georgia, serif; --bf: "Bodoni Moda", Didot, Georgia, serif; --accent: #d9c7a0; --tk-bg: #f2eee6; --tk-stub: #d6ccb9; }
.g-seventies { --bg: #2a140a; --fg: #fff1d6; --hf: "Shrikhand", "Cooper Black", Georgia, serif; --bf: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --accent: var(--p1); --tk-bg: #fff1d6; --tk-stub: var(--p1); --tk-btn: #2a140a; --tk-btn-fg: #fff1d6; }
.g-swiss { --bg: #f1efe9; --fg: #111; --hf: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --bf: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --accent: #e3241b; --tk-bg: #fff; --tk-fg: #111; --tk-stub: #e3241b; --tk-stub-fg: #fff; --tk-btn: #111; --tk-btn-fg: #fff; }
.g-silent { --bg: #0b0a08; --fg: #ece3cc; --hf: "IM Fell English", Georgia, serif; --bf: "IM Fell English", Georgia, serif; --accent: #ece3cc; --tk-bg: #e9dfc6; --tk-stub: #cbbd99; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #000; }
body { margin: 0; background: #000; color: var(--fg); font-family: var(--bf); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, figure { margin: 0; }
:focus-visible { outline: 3px solid #ffc94d; outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- film effects ---------- */

.fx, .fx-grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.fx-grain { z-index: 61; mix-blend-mode: overlay; }
.grain {
  position: absolute;
  inset: -80px;
  background-image: var(--noise);
  background-size: 180px 180px;
  opacity: .2;
  animation: grain .6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-24px, 16px); }
  33% { transform: translate(20px, -32px); }
  50% { transform: translate(-38px, -10px); }
  67% { transform: translate(30px, 28px); }
  83% { transform: translate(-12px, 38px); }
  100% { transform: translate(0, 0); }
}
.flicker { position: absolute; inset: 0; background: #fff; opacity: 0; animation: flick 4.4s steps(1) infinite; }
@keyframes flick {
  0% { opacity: 0; } 6% { opacity: .03; } 8% { opacity: 0; } 21% { opacity: .045; } 23% { opacity: .01; }
  46% { opacity: .03; } 48% { opacity: 0; } 62% { opacity: .05; } 63% { opacity: 0; } 80% { opacity: .02; } 100% { opacity: 0; }
}
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .5) 100%); }
.scratch { position: absolute; top: 0; bottom: 0; left: 30%; width: 1px; background: rgba(255, 255, 255, .22); opacity: 0; animation: scratch 9s steps(1) infinite; }
@keyframes scratch {
  0% { opacity: 0; } 12% { opacity: 1; left: 22%; } 13% { left: 23%; } 15% { opacity: 0; }
  48% { opacity: 1; left: 71%; } 49% { left: 70.6%; } 51% { opacity: 0; }
  77% { opacity: .7; left: 44%; } 78% { opacity: 0; } 100% { opacity: 0; }
}
.dust {
  position: absolute;
  inset: 0;
  opacity: .8;
  background:
    radial-gradient(circle at 18% 32%, rgba(255, 255, 255, .55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 72% 64%, rgba(0, 0, 0, .7) 0 2px, transparent 2.8px),
    radial-gradient(circle at 41% 81%, rgba(255, 255, 255, .45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 21%, rgba(0, 0, 0, .55) 0 1.6px, transparent 2.4px);
  animation: dust 1.3s steps(1) infinite;
}
@keyframes dust {
  0% { transform: translate(0, 0); } 25% { transform: translate(-31vw, 12vh); opacity: .4; }
  50% { transform: translate(14vw, -38vh); opacity: .8; } 75% { transform: translate(-6vw, 22vh); opacity: 0; } 100% { transform: translate(0, 0); }
}
.fx-foyer .flicker, .fx-foyer .scratch { display: none; }
.fx-grain.fx-foyer .grain { opacity: .12; }

/* ---------- letterbox and HUD ---------- */

.bar {
  position: fixed;
  left: 0; right: 0;
  height: var(--bar);
  z-index: 50;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(12px, 3vw, 40px);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 236, 224, .72);
}
.bar > * { min-width: 0; }
.bar-top { top: 0; }
.bar-bot { bottom: 0; }
.bar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; text-decoration: none; white-space: nowrap; }
.bar a:hover, .bar a:focus-visible { color: #fff; }
.hud-t { flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .basket-count { white-space: nowrap; }
.tc { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dots { display: flex; gap: 8px; flex: 1 1 auto; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s, transform .3s; }
.dots i.on { background: #fff; transform: scale(1.3); }
@media (max-width: 600px) { .hud-t { display: none; } }
@media (max-width: 520px) { .dots { display: none; } .bar { letter-spacing: .1em; font-size: 11px; } }

/* ---------- scenes ---------- */

#reel { overflow-x: clip; }
.scene { position: relative; height: calc(var(--len, 2.4) * 100vh); height: calc(var(--len, 2.4) * 100svh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.frame {
  position: absolute;
  left: 0; right: 0;
  top: var(--bar);
  bottom: var(--bar);
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  animation: weave 2.6s steps(13) infinite;
}
@keyframes weave {
  0% { transform: translate(0, 0); } 15% { transform: translate(.5px, -.6px); } 31% { transform: translate(-.4px, .4px); }
  46% { transform: translate(.3px, .7px); } 62% { transform: translate(-.6px, -.3px); } 78% { transform: translate(.2px, -.5px); } 100% { transform: translate(0, 0); }
}
.bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.comp {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(16px, 3.4vh, 44px) var(--pad);
}
.inner { width: 100%; max-width: 1180px; font-size: var(--fs, 24px); }
.w { display: inline-block; }
.measuring .inner, .measuring .inner * { transform: none !important; rotate: none !important; translate: none !important; scale: none !important; }

/* title card */
.sc-title .comp { padding-bottom: max(60px, 3.4vh); }
.title-in { text-align: center; }
.presents { font-family: var(--bf); font-size: clamp(11px, calc(var(--fs) * .085), 16px); letter-spacing: .34em; text-transform: uppercase; margin-bottom: 1.6em; opacity: .9; }
.ttl { font-family: var(--hf); font-size: 1em; font-weight: 400; line-height: .92; }
.ttl .lw { display: inline-block; white-space: nowrap; }
.ttl .ch { display: inline-block; }
.tagline { font-family: var(--bf); font-size: clamp(15px, calc(var(--fs) * .15), 30px); line-height: 1.32; margin: 1.1em auto 0; max-width: 32em; }
.chapno { font-family: var(--mono); font-size: clamp(11px, calc(var(--fs) * .08), 14px); letter-spacing: .32em; text-transform: uppercase; margin-top: 1.8em; opacity: .75; }
.ld { display: inline-block; }
.cue { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .4em; text-transform: uppercase; opacity: .75; color: var(--fg); }
.cue .ld::after { content: ""; display: block; width: 6px; height: 6px; margin: 8px auto 0; border-radius: 50%; background: currentColor; }

/* countdown leader */
.leader {
  position: fixed;
  left: 0; right: 0; top: var(--bar); bottom: var(--bar);
  z-index: 40;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #b9b3a6 0, #8e887c 70%, #6d685f 100%);
  color: #141210;
  pointer-events: none;
  animation: leaderOut .45s ease 2s both;
}
.ld-ring { position: absolute; left: 50%; top: 50%; width: min(62vmin, 80%); aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(20, 18, 16, .75); transform: translate(-50%, -50%); }
.ld-ring2 { width: min(48vmin, 64%); border-width: 2px; }
.ld-cross { position: absolute; background: rgba(20, 18, 16, .55); }
.ld-h { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.ld-v { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.ld-sweep {
  position: absolute; left: 50%; top: 50%;
  width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(20, 18, 16, .34) 0deg, rgba(20, 18, 16, .34) 6deg, rgba(20, 18, 16, 0) 6deg);
  animation: sweep .66s linear 3;
}
.ld-n { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: min(40vmin, 300px); line-height: 1; opacity: 0; }
.n3 { animation: ldn .66s steps(1) 0s forwards; }
.n2 { animation: ldn .66s steps(1) .66s forwards; }
.n1 { animation: ldn .66s steps(1) 1.32s forwards; }
@keyframes ldn { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sweep { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes leaderOut { to { opacity: 0; visibility: hidden; } }
.has-leader { --lead: 2.1s; }

.go .ttl .ch { animation: chIn 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms + 300ms + var(--lead, 0s)); }
.go.g-cut .ttl .ch { animation-name: chDrop; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); animation-duration: .8s; }
.go.g-seventies .ttl .ch { animation-name: chPop; animation-duration: .9s; }
.go.g-swiss .ttl .ch { animation-name: chSlide; animation-duration: .55s; animation-delay: calc(var(--i) * 28ms + 200ms + var(--lead, 0s)); }
.go.g-silent .ttl .ch { animation-name: chFlick; animation-duration: 1.8s; animation-delay: calc(400ms + var(--lead, 0s)); }
.go.g-noir .ttl .ch { animation-duration: 1.5s; animation-delay: calc(var(--i) * 70ms + 400ms + var(--lead, 0s)); }
.go .ld { animation: fadeUp 1s ease both; }
.go .presents .ld { animation-delay: calc(.1s + var(--lead, 0s)); }
.go .tagline .ld { animation-delay: calc(1.2s + var(--lead, 0s)); }
.go .chapno .ld { animation-delay: calc(1.5s + var(--lead, 0s)); }
.go .cue .ld { animation: fadeUp 1s calc(2s + var(--lead, 0s)) ease both, bob 2.4s calc(3s + var(--lead, 0s)) ease-in-out infinite; }
@keyframes chIn { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
@keyframes chDrop { from { opacity: 0; transform: translateY(-1.3em) rotate(-26deg); } to { opacity: 1; transform: none; } }
@keyframes chPop { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 70% { opacity: 1; transform: scale(1.18) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes chSlide { from { opacity: 0; transform: translateX(-.6em); } to { opacity: 1; transform: none; } }
@keyframes chFlick { 0% { opacity: 0; } 30% { opacity: .6; } 34% { opacity: .2; } 60% { opacity: .9; } 64% { opacity: .5; } 100% { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* story scenes */
.story-in { max-width: min(100%, 24em); text-align: center; }
.kick { font-family: var(--mono); font-size: max(11px, .3em); letter-spacing: .32em; text-transform: uppercase; margin-bottom: 1.2em; opacity: .7; }
.sh { font-family: var(--hf); font-size: 2.05em; font-weight: 400; line-height: .98; margin-bottom: .45em; }
.stx { font-family: var(--bf); font-size: 1em; line-height: 1.3; }

/* intermission */
.inter-in { text-align: center; max-width: min(100%, 9em); }
.inter-h { font-family: var(--hf); font-size: 1em; line-height: .92; }
.inter-t { font-family: var(--bf); font-size: clamp(16px, calc(var(--fs) * .19), 32px); line-height: 1.34; margin: 1.1em auto 0; max-width: 26em; }

/* still */
.still-comp, .posters-comp, .spot-comp, .smoke-comp, .credits-comp { padding: 0; }
.still-wrap { position: absolute; overflow: hidden; transform-origin: 50% 50%; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.still-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still-cap { position: absolute; font-family: var(--bf); font-size: clamp(13.5px, 1.4vw, 17px); line-height: 1.35; text-align: center; opacity: 0; }
.iris { position: absolute; left: 50%; top: 50%; z-index: 3; width: 160vmax; height: 160vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(0, 0, 0, 0) 0 31%, #000 32.5%); transform: translate(-50%, -50%) scale(.03); }

/* lobby strip of posters */
.lobby-k { position: absolute; left: var(--pad); top: 16px; margin: 0; z-index: 2; }
.strip { position: absolute; left: 0; top: 60px; display: flex; gap: clamp(14px, 2.4vw, 34px); width: max-content; }
.pcard { flex: 0 0 auto; }
.pcard img { height: var(--ph, 300px); width: auto; aspect-ratio: auto 290 / 507; object-fit: cover; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.pcard figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 12px; font-family: var(--bf); font-size: 14px; max-width: calc(var(--ph, 300px) * .58); }
.pcard b { font-family: var(--hf); font-weight: 400; font-size: 18px; }
.pprice { font-weight: 800; }
.pblank { display: block; height: var(--ph, 300px); aspect-ratio: 290 / 507; background: rgba(255, 255, 255, .1); }

/* text-only scenes */
.q-in { text-align: center; }
.qmark { display: inline-block; font-family: var(--hf); font-size: 1em; line-height: .82; font-style: italic; }
.q-t { font-family: var(--hf); font-size: clamp(22px, calc(var(--fs) * .14), 60px); margin-top: .3em; }

.m-in { max-width: min(100%, 15em); }
.m-box { position: relative; }
.m-back, .m-fwd { font-family: var(--hf); font-weight: 800; font-size: 1em; line-height: 1.06; letter-spacing: -.03em; padding: .35em .5em; }
.m-back { transform: scaleX(-1); color: rgba(17, 17, 17, .45); }
.m-glass { position: absolute; inset: 0; overflow: hidden; transform: translate3d(-100%, 0, 0); }
.m-glass-in {
  position: absolute;
  inset: 0;
  transform: translate3d(100%, 0, 0);
  background: linear-gradient(112deg, #c9d1d7 0%, #f8fafb 30%, #b4bec6 52%, #eef2f4 72%, #c4cdd3 100%);
  box-shadow: inset 0 0 0 4px #111;
}
.m-fwd { position: absolute; inset: 0; color: #111; }
.measuring .m-back { transform: none !important; }

.st-in { max-width: 100%; }
.st-board { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: clamp(14px, 2.6vw, 34px); max-width: 1100px; margin: 0 auto; }
.stk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 24vw, 290px);
  aspect-ratio: 3 / 2;
  padding: .7em;
  background: #fbfaf4;
  color: #121212;
  border: 3px solid #121212;
  border-radius: 6px;
  font-family: var(--marker);
  font-size: clamp(17px, 2.3vw, 32px);
  line-height: 1.05;
  text-align: center;
  box-shadow: 5px 7px 0 rgba(0, 0, 0, .4);
  opacity: 0;
}
.stk.k1 { background: #ffe24a; }
.stk.k3 { background: #121212; color: #fbfaf4; border-color: #fbfaf4; }

.num-in { text-align: center; }
.bigno { font-family: var(--hf); font-size: 1em; line-height: .8; }

/* 30 coins */
.coins-in { display: grid; justify-items: center; gap: clamp(14px, 3vh, 32px); }
.coin-count { font-family: var(--hf); font-weight: 800; font-size: clamp(64px, 17vh, 200px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.coin-grid { display: grid; grid-template-columns: repeat(10, auto); gap: clamp(8px, 1.3vw, 18px); }
.coin {
  display: block;
  width: clamp(26px, min(5vw, 6.5vh), 66px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 8%, #dde1e5 22%, #a1a9b1 58%, #6b737a 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), 0 3px 0 rgba(0, 0, 0, .15);
  opacity: .14;
}
@media (max-aspect-ratio: 4/3) {
  .coin-grid { grid-template-columns: repeat(5, auto); }
  .coin { width: clamp(34px, min(11vw, 6.6vh), 64px); }
}

/* twenty plates */
.grow-in { position: absolute; inset: 0; }
.plant { position: absolute; left: 58%; bottom: 3%; height: 86%; width: 0; }
.stem { position: absolute; left: -.8vmin; bottom: 0; width: 1.6vmin; height: 100%; border-radius: 1vmin; background: var(--p2); transform-origin: 50% 100%; transform: scaleY(0); }
.leaf { position: absolute; left: 0; aspect-ratio: 1; height: auto; translate: -50% 0; transform-origin: 50% 96%; transform: scale(0); filter: drop-shadow(.4vmin .6vmin 0 rgba(0, 0, 0, .15)); }
.plate-no { position: absolute; left: var(--pad); bottom: 7%; font-family: var(--hf); line-height: .82; }
.plate-k { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; margin-bottom: .6em; }
.plate-n { font-size: clamp(56px, 16vmin, 170px); font-variant-numeric: tabular-nums; }

/* one brick in the light */
.wall { position: absolute; inset: 0; width: 100%; height: 100%; }
.the-brick { position: absolute; z-index: 2; width: 92px; height: 28px; border-radius: 2px; background: linear-gradient(#c0603f, #8e3b26); box-shadow: 0 12px 20px rgba(0, 0, 0, .65); opacity: 0; }
.beam {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 3;
  width: 220vmax; height: 220vmax;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 232, 196, .14) 0 4.5%, rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, .94) 12%);
  transform: translate(-50%, -50%);
}
.spot-cap { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); bottom: 8%; text-align: center; font-family: var(--hf); font-style: italic; font-size: clamp(19px, 3vw, 38px); line-height: 1.25; opacity: 0; }

/* butt and gold */
.sm-stage { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
.sm-block {
  position: absolute;
  left: -26vmin; top: -15vmin;
  width: 52vmin; height: 30vmin;
  border-radius: 3vmin;
  background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .04) 42%, rgba(255, 255, 255, .13));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38), inset 0 0 6vmin rgba(255, 255, 255, .12), 0 30px 60px rgba(0, 0, 0, .6);
  opacity: 0;
}
.sm-butt { position: absolute; left: -15vmin; top: -2.5vmin; width: 17vmin; height: 5vmin; }
.sm-paper { position: absolute; left: 0; top: 0; width: 58%; height: 100%; border-radius: .9vmin .2vmin .2vmin .9vmin; background: linear-gradient(#f6f3ec, #cbc5b9); transform: rotate(-9deg); transform-origin: 100% 50%; }
.sm-paper::before { content: ""; position: absolute; left: -6%; top: -6%; width: 22%; height: 112%; border-radius: 50%; background: radial-gradient(circle at 40% 50%, #5a5550, #2b2825 70%); }
.sm-tip { position: absolute; left: 56%; top: 0; width: 44%; height: 100%; border-radius: .3vmin 1.2vmin 1.2vmin .3vmin; background: linear-gradient(#e7ad62, #b5742d); }
.sm-gold {
  position: absolute;
  left: 6vmin; top: -5vmin;
  width: 9vmin; height: 9vmin;
  border-radius: .6vmin;
  background: linear-gradient(135deg, #fff4b8, #e3b53c 38%, #a8771b 68%, #f5d77a);
  box-shadow: 0 0 5vmin rgba(240, 190, 70, .45);
}
.plume { position: absolute; left: -17vmin; top: -9vmin; width: 10vmin; height: 10vmin; border-radius: 50%; background: radial-gradient(circle, rgba(235, 235, 235, .55), rgba(235, 235, 235, 0) 70%); opacity: 0; }
.sm-cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 9%; text-align: center; font-family: var(--hf); font-style: italic; font-size: clamp(18px, 2.8vw, 34px); line-height: 1.3; opacity: 0; }

/* end credits */
.credits-comp {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.roll { position: absolute; left: 0; right: 0; top: 0; padding: 0 var(--pad); text-align: center; transform: translate3d(0, 100vh, 0); }
.cr-big { font-family: var(--hf); font-size: clamp(36px, 7vw, 104px); line-height: .95; margin-bottom: .3em; overflow-wrap: break-word; }
.cr-line { font-family: var(--bf); font-size: clamp(16px, 1.8vw, 22px); line-height: 1.4; max-width: 30em; margin: 0 auto; }
.cr-block { margin-top: clamp(44px, 9vh, 96px); }
.cr-h { font-family: var(--mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .65; margin-bottom: 1em; }
.cr-v { font-family: var(--bf); font-size: clamp(18px, 2vw, 26px); line-height: 1.5; }
.cr-end { margin: clamp(70px, 16vh, 170px) 0 clamp(30px, 6vh, 60px); font-family: var(--hf); font-size: clamp(30px, 5vw, 64px); }

/* after the credits */
.after {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--bar) + clamp(26px, 5vh, 56px)) var(--pad) calc(var(--bar) + clamp(30px, 6vh, 64px));
  background: var(--bg);
  color: var(--fg);
  display: grid;
  align-content: center;
}
.after-in { width: min(1100px, 100%); margin: 0 auto; display: grid; gap: clamp(22px, 4vw, 44px); min-width: 0; }
.after-in > * { min-width: 0; }
.after-k, .after-h { font-family: var(--mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .75; }
.after-h { margin-bottom: 14px; }

.ticket {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--tk-bg);
  color: var(--tk-fg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
}
@media (min-width: 720px) { .ticket { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.tk-main { padding: clamp(20px, 3.4vw, 40px); min-width: 0; }
.tk-k { font-family: var(--mono); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; opacity: .7; margin-bottom: 14px; }
.tk-t { font-family: var(--hf); font-weight: 400; font-size: clamp(32px, 5vw, 66px); line-height: .98; overflow-wrap: break-word; }
.g-swiss .tk-t { font-weight: 800; letter-spacing: -.04em; }
.tk-e { font-family: var(--bf); font-size: clamp(18px, 2vw, 24px); margin-top: 12px; font-style: italic; }
.tk-d { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.tk-d li::before { content: "\2022"; margin-right: 8px; opacity: .6; }
.tk-stub {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: center;
  justify-items: start;
  padding: clamp(20px, 3.4vw, 40px);
  background: var(--tk-stub);
  color: var(--tk-stub-fg);
  border-top: 3px dotted rgba(0, 0, 0, .35);
  min-width: 0;
}
.tk-stub::before, .tk-stub::after { content: ""; position: absolute; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.tk-stub::before { left: -14px; top: -15px; }
.tk-stub::after { right: -14px; top: -15px; }
@media (min-width: 720px) {
  .tk-stub { border-top: 0; border-left: 3px dotted rgba(0, 0, 0, .35); }
  .tk-stub::before { left: -15px; top: -14px; }
  .tk-stub::after { left: -15px; right: auto; top: auto; bottom: -14px; }
}
.tk-no { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
.tk-p { font-family: var(--hf); font-size: clamp(46px, 7vw, 92px); line-height: .9; }
.g-swiss .tk-p { font-weight: 800; letter-spacing: -.05em; }
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--tk-btn);
  color: var(--tk-btn-fg);
  font-family: "Inter Tight", system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.tk-btn:hover, .tk-btn:focus-visible { box-shadow: 0 0 0 3px var(--tk-btn-fg), 0 0 0 6px var(--tk-btn); }
.tk-btn:active { transform: scale(.97); }
.tk-btn.is-in { background: #1f7a43; color: #fff; }
.tk-s { min-height: 44px; font-size: 13px; padding: 0 18px; justify-self: start; }
.basket-count { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.tk-stub .basket-count { opacity: .8; }
.ticket.is-in .tk-stub { animation: punch .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes punch { 0% { transform: scale(1); } 40% { transform: scale(.96) rotate(-1deg); } 100% { transform: none; } }

.lobby-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 44%), 1fr)); gap: clamp(14px, 2vw, 26px); }
.lcard { min-width: 0; }
.lcard img { width: 100%; height: auto; box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.lcard figcaption { display: grid; gap: 4px; margin-top: 10px; font-family: var(--bf); font-size: 14.5px; line-height: 1.3; }
.lcard b { font-family: var(--hf); font-weight: 400; font-size: 19px; }
.lprice { font-family: var(--hf); font-size: 24px; }

.trailer { display: grid; gap: 12px; padding: clamp(22px, 5vw, 60px); border: 2px solid currentColor; border-radius: 10px; text-decoration: none; color: inherit; transition: background .25s, color .25s; }
.tr-k, .ft-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; opacity: .75; }
.tr-t { font-family: var(--hf); font-size: clamp(38px, 8vw, 112px); line-height: .95; overflow-wrap: break-word; }
.tr-l { font-family: var(--bf); font-size: clamp(17px, 2vw, 24px); line-height: 1.35; max-width: 32em; }
.trailer:hover, .trailer:focus-visible { background: var(--fg); color: var(--bg); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.features a { display: flex; flex-direction: column; gap: 6px; min-height: 76px; padding: 16px 18px; border: 1px solid currentColor; border-radius: 10px; text-decoration: none; min-width: 0; transition: background .2s, color .2s; }
.ft-t { font-family: var(--hf); font-size: clamp(17px, 1.8vw, 24px); line-height: 1.12; overflow-wrap: break-word; }
.ft-home { text-align: center; align-items: center; }
.ft-next { text-align: right; align-items: flex-end; }
.features a:hover, .features a:focus-visible { background: var(--fg); color: var(--bg); }
@media (max-width: 640px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .ft-home, .ft-next { text-align: left; align-items: flex-start; }
}

/* ---------- genre: cut paper ---------- */

.g-cut .ttl { text-transform: uppercase; line-height: 1.04; letter-spacing: -.01em; }
.g-cut .ttl .lw, .g-cut .sh .hw { padding: .05em .16em .03em; margin: .05em .03em; box-shadow: .06em .08em 0 rgba(0, 0, 0, .2); }
.g-cut .ttl .lw:nth-child(4n+1), .g-cut .sh .hw:nth-child(4n+1) { background: var(--p0); color: #fff; rotate: -2deg; }
.g-cut .ttl .lw:nth-child(4n+2), .g-cut .sh .hw:nth-child(4n+2) { background: var(--p1); color: #16130f; rotate: 1.5deg; }
.g-cut .ttl .lw:nth-child(4n+3), .g-cut .sh .hw:nth-child(4n+3) { background: var(--p3); color: var(--p4); rotate: -1deg; }
.g-cut .ttl .lw:nth-child(4n+4), .g-cut .sh .hw:nth-child(4n+4) { background: var(--p2); color: #fff; rotate: 2.5deg; }
.g-cut .sh { text-transform: uppercase; line-height: 1.12; font-size: 1.7em; }
.g-cut .stx { display: inline-block; background: #fffaf0; color: #16130f; padding: .55em .8em .6em; box-shadow: .25em .3em 0 rgba(0, 0, 0, .16); rotate: -.6deg; font-weight: 600; text-align: left; }
.g-cut .presents, .g-cut .kick { font-family: "Archivo Black", sans-serif; letter-spacing: .2em; }
.g-cut .tagline { font-weight: 600; }
.g-cut .inter-h { text-transform: uppercase; }
.shape { position: absolute; aspect-ratio: 1; height: auto; filter: drop-shadow(.5vmin .8vmin 0 rgba(0, 0, 0, .16)); }
.g-cut .still-wrap {
  clip-path: polygon(0% 2%, 6% 0%, 14% 1.5%, 22% 0%, 31% 1.2%, 40% 0%, 52% 1.8%, 61% .3%, 70% 1.6%, 81% 0%, 90% 1.4%, 100% .4%, 99% 12%, 100% 26%, 98.8% 41%, 100% 55%, 99% 70%, 100% 86%, 99.2% 100%, 88% 98.6%, 77% 100%, 66% 98.4%, 54% 100%, 43% 98.7%, 31% 100%, 20% 98.5%, 9% 100%, 0% 98.2%, 1% 84%, 0% 70%, .8% 55%, 0% 40%, 1.2% 26%, 0% 12%);
  box-shadow: none;
}
.g-cut .still-cap { font-weight: 600; }

/* ---------- genre: noir ---------- */

.g-noir .ttl { font-style: italic; font-weight: 500; letter-spacing: -.012em; text-shadow: 0 0 .08em rgba(255, 238, 210, .25); }
.g-noir .presents { font-style: italic; letter-spacing: .26em; }
.g-noir .sh { font-style: italic; font-weight: 500; }
.g-noir .stx { font-weight: 400; }
.g-noir .inter-h { font-style: italic; }
.spot { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 62% 38%, rgba(255, 236, 205, .14), rgba(255, 236, 205, 0) 70%); }
.smoke { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .075), rgba(255, 255, 255, 0) 66%); }
.smoke.s1 { left: 6%; top: 34%; }
.smoke.s2 { right: 2%; top: 4%; }
.blinds {
  position: absolute;
  top: -30%; bottom: -30%; left: -40%; right: -40%;
  background: repeating-linear-gradient(-24deg, rgba(255, 246, 226, 0) 0 46px, rgba(255, 246, 226, .085) 46px 92px);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 60% 42%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 50% 60% at 60% 42%, #000 18%, transparent 76%);
}
.g-noir .still-wrap { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px rgba(0, 0, 0, .8); }
.still-mono { filter: grayscale(1) contrast(1.3) brightness(.85); }

/* ---------- genre: seventies ---------- */

.g-seventies .ttl { color: var(--p4); line-height: 1.02; text-shadow: .035em .035em 0 var(--p1), .07em .07em 0 var(--p0), .105em .105em 0 var(--p2); }
.g-seventies .sh { color: var(--p4); text-shadow: .03em .03em 0 var(--p1), .06em .06em 0 var(--p0), .09em .09em 0 var(--p2); line-height: 1.04; }
.g-seventies .stx { font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.g-seventies .inter-h { text-shadow: .035em .035em 0 var(--p1), .07em .07em 0 var(--p0); }
.g-seventies .presents, .g-seventies .kick { color: var(--p1); }
.sun { position: absolute; left: 50%; top: 58%; width: 170vmax; height: 170vmax; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 150, 60, .11) 0deg 6deg, rgba(0, 0, 0, 0) 6deg 12deg); transform: translate(-50%, -50%); }
.disc { position: absolute; left: 50%; top: 100%; width: 92vmin; height: 92vmin; border-radius: 50%; background: radial-gradient(circle at 50% 38%, var(--p1), var(--p0) 72%); transform: translate(-50%, -62%); opacity: .9; }
.bands { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(to bottom, var(--p0) 0 33.3%, var(--p1) 33.3% 66.6%, var(--p2) 66.6% 100%); }
.g-seventies .still-wrap { border: 10px solid var(--p4); border-radius: 22px; box-shadow: 0 0 0 4px var(--p0), 0 30px 70px rgba(0, 0, 0, .6); }
.g-seventies .still-img { filter: sepia(.22) saturate(1.25) contrast(1.05); }
.g-seventies .pcard img { border: 6px solid var(--p4); border-radius: 10px; }

/* ---------- genre: swiss ---------- */

.g-swiss .comp { align-items: flex-start; }
.g-swiss .title-in, .g-swiss .story-in, .g-swiss .inter-in, .g-swiss .q-in, .g-swiss .num-in { text-align: left; }
.g-swiss .ttl { font-weight: 800; letter-spacing: -.055em; line-height: .86; }
.g-swiss .presents { font-weight: 600; letter-spacing: .22em; }
.g-swiss .tagline { margin-left: 0; font-weight: 500; }
.g-swiss .sh { font-weight: 800; letter-spacing: -.045em; line-height: .9; }
.g-swiss .stx { font-weight: 500; letter-spacing: -.012em; }
.g-swiss .kick, .g-swiss .chapno { color: var(--accent); opacity: 1; font-weight: 600; }
.g-swiss .inter-h { font-weight: 800; letter-spacing: -.05em; }
.g-swiss .inter-t { margin-left: 0; }
.g-swiss .coins-in { justify-items: start; }
.g-swiss .coin-count { color: var(--accent); }
.grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, .07) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.dot { position: absolute; right: 7%; top: 10%; width: 38vmin; height: 38vmin; border-radius: 50%; background: var(--accent); }
.bignum { position: absolute; right: 3%; bottom: -8%; font-family: "Inter Tight", sans-serif; font-weight: 800; font-size: 44vmin; line-height: .8; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px rgba(0, 0, 0, .12); }
.g-swiss .still-wrap { box-shadow: 1.4vmin 1.4vmin 0 var(--accent); }
.g-swiss .still-cap { text-align: left; font-weight: 500; }
.g-swiss .roll { text-align: left; }
.g-swiss .cr-big { font-weight: 800; letter-spacing: -.05em; }
.g-swiss .cr-line { margin-left: 0; }

/* ---------- genre: silent ---------- */

.g-silent .comp { padding: clamp(36px, 8vmin, 76px) clamp(32px, 8vw, 110px); }
.g-silent .still-comp, .g-silent .credits-comp { padding: 0; }
.g-silent .sc-title .comp { padding-bottom: max(64px, 8vmin); }
.g-silent .ttl { letter-spacing: .01em; line-height: 1; }
.g-silent .presents, .g-silent .kick { font-style: italic; letter-spacing: .24em; }
.g-silent .sh { font-style: italic; }
.g-silent .stx { line-height: 1.34; }
.ornate {
  position: absolute;
  inset: clamp(10px, 3.2vmin, 34px);
  border: 2px solid rgba(236, 227, 204, .6);
  border-radius: 3px;
  box-shadow: inset 0 0 0 7px var(--bg), inset 0 0 0 8px rgba(236, 227, 204, .35);
}
.orn {
  position: absolute;
  width: clamp(24px, 5vmin, 54px);
  height: clamp(24px, 5vmin, 54px);
  border: 2px solid rgba(236, 227, 204, .6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 227, 204, .75) 0 3px, rgba(236, 227, 204, 0) 4px);
}
.o1 { left: 0; top: 0; transform: translate(-50%, -50%); }
.o2 { right: 0; top: 0; transform: translate(50%, -50%); }
.o3 { left: 0; bottom: 0; transform: translate(-50%, 50%); }
.o4 { right: 0; bottom: 0; transform: translate(50%, 50%); }
.g-silent .still-img { filter: sepia(.75) contrast(1.1) brightness(.92); }
.g-silent .still-wrap { box-shadow: 0 0 0 2px rgba(236, 227, 204, .4); }
.g-silent .grain { opacity: .28; }
.g-silent .flicker { animation-duration: 2.2s; }

/* ---------- the foyer: letter board ---------- */

.foyer {
  min-height: 100vh;
  padding-bottom: clamp(50px, 8vw, 110px);
  background: radial-gradient(120% 70% at 50% 0%, #4a2414 0%, #1b0e09 45%, #0a0605 100%) #0a0605;
  color: #f6ead0;
  font-family: "Inter Tight", system-ui, sans-serif;
  overflow-x: hidden;
}
.sign { position: relative; text-align: center; padding: 14px 16px clamp(20px, 3vw, 38px); }
.sign-basket { text-align: right; margin: 0 auto clamp(14px, 3vw, 40px); max-width: 1120px; color: rgba(246, 234, 208, .75); }
.sign-name {
  font-family: var(--sign);
  font-size: clamp(36px, 9.4vw, 148px);
  line-height: .95;
  color: #ffe7b0;
  text-shadow: 0 0 6px rgba(255, 214, 140, .9), 0 0 24px rgba(255, 170, 70, .6), 0 0 60px rgba(255, 120, 30, .35);
  animation: neon 7s steps(1) infinite;
}
@keyframes neon { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 44% { opacity: .7; } 45% { opacity: 1; } }
.sign-line { margin-top: .9em; font-size: clamp(12px, 1.4vw, 17px); letter-spacing: .3em; text-transform: uppercase; color: rgba(246, 234, 208, .7); }

.marquee {
  position: relative;
  display: block;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 14px;
  background: linear-gradient(#2c1b12, #1a100b);
  box-shadow: 0 0 0 2px #40291b, 0 30px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(255, 170, 80, .12);
}
.bulbs {
  --b: radial-gradient(circle, #fff6d8 0 2.5px, #ffcf6a 3.5px, rgba(255, 190, 80, .35) 5px, rgba(255, 190, 80, 0) 6.5px);
  position: absolute;
  inset: 6px;
  border-radius: 10px;
  pointer-events: none;
  background: var(--b) 0 0 / 22px 14px repeat-x, var(--b) 0 100% / 22px 14px repeat-x, var(--b) 0 0 / 14px 22px repeat-y, var(--b) 100% 0 / 14px 22px repeat-y;
}
.bulbs-b { background-position: 11px 0, 11px 100%, 0 11px, 100% 11px; }
.bulbs-a { animation: chase 1s steps(1) infinite; }
.bulbs-b { animation: chase 1s steps(1) infinite .5s; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: .15; } }

.board {
  position: relative;
  display: block;
  padding: clamp(14px, 2.4vw, 32px) clamp(8px, 2.4vw, 34px);
  border-radius: 4px;
  background: linear-gradient(180deg, #fcf8ee, #f1e8d4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), inset 0 0 40px rgba(255, 222, 160, .55), 0 0 50px rgba(255, 210, 140, .28);
}
.row {
  --L: clamp(36px, 6.2vw, 66px);
  display: block;
  padding: 0 4px;
  border-radius: 3px;
  color: #15120f;
  text-decoration: none;
  transition: background .25s;
  -webkit-tap-highlight-color: transparent;
}
.tiles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: calc(var(--L) * .3);
  row-gap: 0;
  background: repeating-linear-gradient(to bottom, rgba(70, 48, 24, 0) 0, rgba(70, 48, 24, 0) calc(var(--L) - 5px), rgba(70, 48, 24, .17) calc(var(--L) - 5px), rgba(70, 48, 24, .17) calc(var(--L) - 2px), rgba(70, 48, 24, 0) calc(var(--L) - 2px), rgba(70, 48, 24, 0) var(--L));
}

.tw { display: inline-flex; align-items: flex-end; height: var(--L); padding-bottom: 5px; }
.t {
  display: inline-block;
  margin-right: .035em;
  font-family: var(--board);
  font-weight: 800;
  font-size: calc(var(--L) * .7);
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(var(--y)) rotate(var(--r));
  text-shadow: 0 1px 0 #000, 0 2px 3px rgba(0, 0, 0, .25);
  transition: transform .65s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
  transition-delay: calc(var(--row, 0) * 90ms + var(--i) * 14ms);
}
.tw.num .t, .tw.red .t, .tw.kind .t { color: #c3261b; }
.tw.kind .t { font-size: calc(var(--L) * .4); }
.row-head .t { letter-spacing: .04em; }
.row:not(.is-up) .t { opacity: 0; transform: translateY(calc(var(--L) * -.8)) rotate(calc(var(--r) * 8)); }
a.row:hover, a.row:focus-visible, a.row:active, a.row.is-near { background: rgba(255, 196, 110, .24); }
a.row:hover .t, a.row:active .t { animation: jiggle .5s ease both; animation-delay: calc(var(--i) * 14ms); }
@keyframes jiggle { 0% { transform: translateY(var(--y)) rotate(var(--r)); } 40% { transform: translateY(-3px) rotate(calc(var(--r) * -2 + 3deg)); } 100% { transform: translateY(var(--y)) rotate(var(--r)); } }
.row-open .hang .t { color: #15120f; transform-origin: 18% 8%; transform: rotate(32deg) translateY(4px); animation: sway 3.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(28deg) translateY(4px); } 50% { transform: rotate(38deg) translateY(4px); } }
.row-open { opacity: .92; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .leader { display: none; }
  .grain, .flicker, .scratch, .dust, .frame, .bulbs-a, .bulbs-b, .sign-name, .row-open .hang .t, a.row:hover .t, a.row:active .t { animation: none !important; }
  .flicker, .scratch, .dust { display: none; }
  .t { transition: none !important; }
  .row:not(.is-up) .t { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); }
  .row-open .hang .t { transform: rotate(32deg) translateY(4px); }
}
.rm .scene { height: 100vh !important; height: 100svh !important; }
.rm .sc-credits, .rm .sc-posters { height: auto !important; }
.rm .sc-credits .stage, .rm .sc-posters .stage { position: relative; height: auto; }
.rm .sc-credits .frame, .rm .sc-posters .frame { position: relative; top: auto; bottom: auto; margin: var(--bar) 0; }
.rm .credits-comp, .rm .posters-comp { position: relative; padding: 40px var(--pad); -webkit-mask-image: none; mask-image: none; }
.rm .roll { position: static; transform: none !important; }
.rm .strip { position: static; flex-wrap: wrap; justify-content: center; width: auto; transform: none !important; }
.rm .lobby-k { position: static; margin-bottom: 20px; }
.rm .pcard { opacity: 1 !important; transform: none !important; }
.rm .cue { display: none; }