/* ═══════════════════════════════════════════════════════════════════════
   ART STYLE — a film in 38 pieces
   Black theatre, neon ink, hand-drawn energy under glass.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --black: #050505;
  --ink: #0b0b0d;
  --paper: #efe6d2;
  --white: #f7f4ec;
  --dim: rgba(247, 244, 236, 0.44);
  --dimmer: rgba(247, 244, 236, 0.2);
  --rule: rgba(247, 244, 236, 0.14);

  --pink: #ff2e88;
  --green: #7cff3f;
  --cyan: #20e0ff;
  --orange: #ff6a1f;
  --yellow: #ffd400;
  --violet: #a35cff;

  --accent: var(--green);

  --bar: clamp(18px, 3.4vh, 42px);

  /* How long a scene stays parked on its last frame before the pin lets go and
     the next piece comes up, in viewports of scroll. This is the only place it
     is written down: the scene heights below add it on, and film.js reads it
     back out to know when to stop advancing the stills. Turn it up and the
     films hang longer; the page gets taller by the same amount. */
  --hold: 80;

  /* A drawn hand for everything that speaks, a machine face for everything
     that measures — so the type looks like it came from the same marker as
     the art, and the HUD stays plainly the equipment. */
  --display: "Shantell Sans", "Comic Sans MS", "Segoe Print", cursive, sans-serif;
  --body: "Shantell Sans", "Comic Sans MS", "Segoe Print", cursive, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  background: var(--black);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-weight: 400;
  overflow-x: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, video, canvas { display: block; max-width: 100%; }

/* the rule above outranks the UA sheet, so [hidden] needs saying twice */
[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection { background: var(--pink); color: #000; }

/* ── letterbox, vignette, grain ─────────────────────────────────────── */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--bar);
  background: #000;
  z-index: 60;
  pointer-events: none;
}
.bar--top { top: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07); }
.bar--bottom { bottom: 0; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.07); }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  width: 100%;
  height: 100%;
}

/* ── HUD ────────────────────────────────────────────────────────────── */
.hud {
  position: fixed;
  z-index: 62;
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity 0.5s var(--ease);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 26px rgba(0, 0, 0, 0.85);
}
.hud--tl { top: calc(var(--bar) + 14px); left: 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
.hud--tr { top: calc(var(--bar) + 14px); right: 18px; }
.hud--bl { bottom: calc(var(--bar) + 14px); left: 18px; flex-direction: column; align-items: flex-start; gap: 4px; }
.hud--br { bottom: calc(var(--bar) + 14px); right: 18px; flex-direction: column; align-items: flex-end; gap: 6px; }

body.gate-up .hud { opacity: 0; pointer-events: none; }

.wordmark {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--white);
  line-height: 1;
  display: flex;
  gap: 6px;
}
.wordmark__b { color: var(--accent); transition: color 0.6s var(--ease); }

.hud__sub { color: var(--dim); font-size: 9px; }

.tc {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color 0.6s var(--ease);
}

.prog {
  width: 132px;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}
.prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: background 0.6s var(--ease);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  transition: 0.28s var(--ease);
}
.btn:hover { color: var(--white); border-color: var(--white); }
.btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--dimmer);
  transition: 0.28s var(--ease);
}
.btn[aria-pressed="true"] { color: var(--white); border-color: var(--accent); }
.btn[aria-pressed="true"] .btn__dot {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.btn--key { color: var(--white); border-color: rgba(247,244,236,.4); }
.btn--key:hover { background: var(--white); color: #000; }
.btn--big { padding: 14px 26px; font-size: 12px; }

/* ── gate / film leader ─────────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4vw;
  padding: clamp(24px, 6vw, 90px);
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.gate.is-gone { opacity: 0; visibility: hidden; }

.leader { position: relative; justify-self: center; width: min(38vh, 300px); aspect-ratio: 1; }
.leader__svg { width: 100%; height: 100%; }
.leader__svg circle,
.leader__svg line {
  fill: none;
  stroke: rgba(247, 244, 236, 0.22);
  stroke-width: 1.5;
}
.leader__sweep { fill: rgba(124, 255, 63, 0.1); transform-origin: 100px 100px; }
.leader__n {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: min(19vh, 150px);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.gate__k, .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 18px;
}
.gate__title {
  font-family: var(--display);
  font-size: clamp(38px, 5.8vw, 92px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 30px;
}
.gate__load {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim);
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px;
  max-width: 420px;
}
.gate__load b { color: var(--accent); font-weight: 400; }
.gate__bar { max-width: 420px; height: 2px; background: var(--rule); }
.gate__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s linear; }

.gate__enter {
  margin-top: 30px;
  padding: 16px 34px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  transition: 0.3s var(--ease);
  animation: pulse 2.4s infinite;
}
.gate__enter:hover { background: var(--accent); color: #000; animation: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(124, 255, 63, 0.07); } }

.gate__hint { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--dimmer); margin-top: 22px; text-transform: uppercase; }

/* ── scroll-scrubbed opening ────────────────────────────────────────── */
.scrub { height: 560vh; position: relative; }
.scrub__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
#scrubCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrub__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 50%, transparent 30%, rgba(5, 5, 5, 0.66) 100%),
    linear-gradient(180deg, rgba(5,5,5,.55) 0%, transparent 26%, transparent 70%, rgba(5,5,5,.72) 100%);
}

.beat {
  position: absolute;
  text-align: center;
  padding: 0 6vw;
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
  pointer-events: none;
}
.beat.is-on { opacity: 1; transform: none; }
.beat::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(5, 5, 5, 0.72), transparent 72%);
}
.beat__title {
  font-family: var(--display);
  font-size: clamp(38px, 7.6vw, 130px);
  font-weight: 800;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}
.beat__title em { font-style: italic; font-weight: 600; color: var(--green); }
.beat__title--sm { font-size: clamp(32px, 6vw, 100px); }
.beat__k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(247, 244, 236, 0.78);
  text-transform: uppercase;
  margin: 0 0 20px;
  text-shadow: 0 1px 10px #000, 0 0 24px rgba(0, 0, 0, 0.9);
}
.beat__title + .beat__k { margin: 20px 0 0; }
.beat__line {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 46px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  letter-spacing: 0;
  text-shadow: 0 0 50px rgba(0,0,0,.9);
}
.beat__line em { font-style: italic; color: var(--pink); }

.scrub__cue {
  position: absolute;
  bottom: calc(var(--bar) + 46px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--dim);
  transition: opacity 0.5s;
}
.scrub__cue i {
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--dim), transparent);
  animation: drop 1.9s infinite;
}
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.scrub__cue.is-gone { opacity: 0; }

/* ── acts ───────────────────────────────────────────────────────────── */
.act { position: relative; }

.act__card {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18vh 6vw;
  position: relative;
}
.act__card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12vh;
  width: 1px;
  height: 8vh;
  background: linear-gradient(transparent, var(--act, var(--green)));
}
.act__numeral {
  font-family: var(--display);
  font-size: clamp(38px, 8.4vw, 116px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0.06em;
  /* no outlining a drawn hand — hollowing these glyphs exposes every
     construction stroke and the numeral reads as scribble */
  color: var(--act, var(--green));
  margin: 0;
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: 1s var(--ease);
}
.act__title {
  font-family: var(--display);
  font-size: clamp(30px, 5.2vw, 78px);
  font-weight: 800;
  line-height: 1.04;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
  opacity: 0;
  transform: translateY(30px);
  transition: 1s var(--ease) 0.1s;
}
.act__blurb {
  max-width: 46ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.74;
  color: var(--dim);
  opacity: 0;
  transform: translateY(24px);
  transition: 1s var(--ease) 0.2s;
}
.act__count {
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--act, var(--green));
  opacity: 0;
  transition: 1s var(--ease) 0.3s;
}
.act.is-on .act__numeral,
.act.is-on .act__title,
.act.is-on .act__blurb,
.act.is-on .act__count { opacity: 1; transform: none; }

/* a pinned scene: scroll scrubs the stills, the card floats over them.
   All thirty-eight run this way — the act headliners just get a longer pin
   and a bigger card, so the reel still has a rhythm to it. */
/* The first number is what the scrub itself needs; --hold is the tail it hangs
   on the last frame for. Only --hold is meant to be tuned. */
.scene { height: calc(168vh + var(--hold) * 1vh); position: relative; }
.scene--key { height: calc(214vh + var(--hold) * 1vh); }
.scene__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.scene__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* the thumbnail holds the frame until the sequence has something to draw */
.scene__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: opacity 0.7s var(--ease);
}
.scene__poster.is-gone { opacity: 0; }
.scene__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.8) 0%, rgba(5,5,5,.34) 30%, rgba(5,5,5,.4) 62%, rgba(5,5,5,.9) 100%);
}
/* the art is loud — the type needs its own pool of dark to sit in */
.scene__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(58% 42% at 50% 50%, rgba(5, 5, 5, 0.78), transparent 72%);
}
/* the card rides the pin — it is faded in and out by scrub position, not by
   an observer, so it breathes with the scroll like the opening beats do */
.scene__body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 7vw;
  max-width: 1100px;
  opacity: 0;
  transform: translateY(34px);
  transition: 0.9s var(--ease);
}
.scene__body.is-on { opacity: 1; transform: none; }
.scene__no {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--white);
  display: inline-block;
  margin-bottom: 20px;
  padding: 6px 12px;
  border: 1px solid var(--act, var(--green));
  background: rgba(0, 0, 0, 0.55);
}
.scene__title {
  font-family: var(--display);
  font-size: clamp(27px, 4.1vw, 60px);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
  text-shadow: 0 6px 50px rgba(0, 0, 0, 0.85);
}
.scene--key .scene__title {
  font-size: clamp(31px, 5.2vw, 82px);
  font-weight: 800;
}
.scene__line {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.72;
  font-style: italic;
  color: rgba(247, 244, 236, 0.78);
  max-width: 40ch;
  margin: 0 auto;
}
.scene__open {
  margin-top: 30px;
  padding: 12px 24px;
  border: 1px solid rgba(247,244,236,.34);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  transition: 0.3s var(--ease);
}
.scene__open:hover { background: var(--white); color: #000; }
/* the headliners announce themselves; the rest keep it to a whisper */
.scene:not(.scene--key) .scene__no { margin-bottom: 16px; font-size: 9px; }
.scene:not(.scene--key) .scene__open {
  margin-top: 22px;
  padding: 9px 18px;
  font-size: 9px;
  border-color: rgba(247, 244, 236, 0.2);
  color: var(--dim);
}
.scene:not(.scene--key) .scene__open:hover { color: #000; border-color: var(--white); }

/* ── the reel ───────────────────────────────────────────────────────── */
.reel { padding: 16vh 5vw 12vh; position: relative; }
.reel__head { max-width: 1500px; margin: 0 auto 56px; }
.reel__title {
  font-family: var(--display);
  font-size: clamp(35px, 6vw, 96px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 24px;
}
.reel__note { max-width: 52ch; color: var(--dim); line-height: 1.74; font-size: 15px; margin: 0; }

.reel__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.chip {
  padding: 8px 15px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-transform: uppercase;
  transition: 0.26s var(--ease);
}
.chip:hover { color: var(--white); border-color: var(--white); }
.chip.is-on { color: #000; background: var(--white); border-color: var(--white); }

.grid {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 3px;
}

.tile {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0c0c0e;
  text-align: left;
  padding: 0;
  transition: 0.5s var(--ease);
}
.tile.is-hidden { display: none; }
.tile img,
.tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s var(--ease);
}
.tile video { opacity: 0; }
.tile.is-live video { opacity: 1; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,5,.68) 0%, transparent 38%, rgba(5,5,5,.92) 100%);
  transition: 0.5s var(--ease);
}
.tile:hover img { transform: scale(1.05); }
.tile:hover::after { background: linear-gradient(180deg, rgba(5,5,5,.3) 0%, transparent 45%, rgba(5,5,5,.94) 100%); }

.tile__meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 16px 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.tile__no {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(247,244,236,.82);
  text-shadow: 0 1px 6px #000, 0 0 16px rgba(0,0,0,.9);
}
.tile__act {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--act, var(--green));
  text-shadow: 0 1px 6px #000, 0 0 16px rgba(0,0,0,.9);
}
.tile__title { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.tile__title {
  font-family: var(--display);
  font-size: clamp(16px, 1.35vw, 21px);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
  letter-spacing: 0;
  transform: translateY(6px);
  transition: 0.45s var(--ease);
}
.tile:hover .tile__title { transform: none; }
.tile__play {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--dimmer);
  white-space: nowrap;
  opacity: 0;
  transition: 0.45s var(--ease);
}
.tile:hover .tile__play { opacity: 1; color: var(--white); }

/* ── end credits ────────────────────────────────────────────────────── */
.end { min-height: 100vh; display: grid; place-items: center; padding: 18vh 6vw; text-align: center; }
.end__title {
  font-family: var(--display);
  font-size: clamp(62px, 14vw, 200px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  margin: 0 0 8vh;
  color: var(--white);      /* solid, for the same reason as the act numerals */
}
.credits {
  display: grid;
  gap: 26px;
  margin: 0 auto 7vh;
  max-width: 620px;
}
.credits div { display: grid; gap: 6px; }
.credits dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  color: var(--dimmer);
  text-transform: uppercase;
}
.credits dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(15px, 1.55vw, 21px);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.end__stamp {
  margin-top: 6vh;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--dimmer);
}

/* ── cinema / projector ─────────────────────────────────────────────── */
.cinema {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.cinema.is-on { opacity: 1; }

.cinema__stage { position: absolute; inset: 0; display: grid; place-items: center; }
#cinemaVid { width: 100%; height: 100%; object-fit: contain; }
.cinema__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(110% 80% at 50% 50%, transparent 45%, rgba(0,0,0,.6) 100%);
}

.cinema__ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--bar) + 16px) 22px calc(var(--bar) + 16px);
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.cinema__ui > * { pointer-events: auto; }
.cinema.is-idle .cinema__ui { opacity: 0; }

/* the clips run bright — the controls need dark to sit on */
.cinema__ui::before,
.cinema__ui::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 210px;
  pointer-events: none;
}
.cinema__ui::before { top: 0; background: linear-gradient(rgba(0,0,0,.88), transparent); }
.cinema__ui::after { bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.92)); }

/* ::after follows .cinema__bottom in tree order, so the controls need to
   out-rank it explicitly or the scrim washes over them */
.cinema__top,
.cinema__bottom { position: relative; z-index: 1; }

.cinema__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.cinema__id { display: flex; gap: 16px; align-items: baseline; text-shadow: 0 2px 24px #000; }
.cinema__no { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent); }
.cinema__id h3 { font-family: var(--display); font-size: clamp(19px, 2.1vw, 30px); font-weight: 700; margin: 0 0 5px; letter-spacing: 0; }
.cinema__id p { margin: 0; font-size: 13px; font-style: italic; color: var(--dim); max-width: 44ch; }

.cinema__bottom { display: grid; gap: 14px; }
.cinema__id h3, .cinema__id p, .cinema__ctrl { text-shadow: 0 2px 14px rgba(0,0,0,.95); }
.cinema__ctrl { display: flex; align-items: center; gap: 10px; }
.ibtn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  font-size: 11px;
  color: var(--dim);
  transition: 0.26s var(--ease);
  background: rgba(0,0,0,.5);
}
.ibtn:hover { color: #000; background: var(--white); border-color: var(--white); }
.ibtn--main { width: 52px; height: 52px; font-size: 14px; color: var(--white); border-color: rgba(247,244,236,.4); }
.tc--sm { margin-left: 8px; font-size: 11px; color: var(--dim); }

.strip { display: flex; gap: 2px; height: 34px; }
.seg {
  flex: 1;
  position: relative;
  background: rgba(247, 244, 236, 0.12);
  overflow: hidden;
  transition: 0.3s var(--ease);
}
.seg:hover { background: rgba(247, 244, 236, 0.34); }
.seg i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
}
.seg.is-done i { width: 100%; opacity: 0.5; }
.seg.is-now { background: rgba(247, 244, 236, 0.22); }
.cinema__keys { margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(247, 244, 236, 0.5); }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --bar: 14px; }
  .gate { grid-template-columns: 1fr; text-align: center; align-content: center; gap: 6vh; }
  .leader { width: min(26vh, 190px); }
  .gate__load, .gate__bar { max-width: none; margin-inline: auto; }
  .hud--tr { gap: 8px; }
  .hud--bl { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .scrub { height: 420vh; }
  .scene { height: calc(148vh + var(--hold) * 1vh); }
  .scene--key { height: calc(180vh + var(--hold) * 1vh); }
  .cinema__keys { display: none; }
  .cinema__no { font-size: 26px; }
}

@media (max-width: 560px) {
  .hud--tr .btn span:not(.btn__dot) { display: none; }
  .hud--tr .btn { padding: 9px; }
  .hud--tr #playAllBtn { padding: 9px 12px; }
  .hud--tr #playAllBtn span { display: inline; }
  .grid { grid-template-columns: 1fr; }
  .strip { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.06s !important; }
  .scrub { height: 200vh; }
  .scene, .scene--key { height: 120vh; }
}