/* The screening room: always an ink stage, whatever the device theme, with the cobalt
   field cut in behind the title and the picture. */
.page-video {
  --paper: #0b0c10; --sheet: #161a22; --ink: #eceff6; --muted: #a5adc0;
  --line: rgb(236 239 246 / .12); --line-strong: rgb(236 239 246 / .3); --focus: var(--active);
  --lift: 0 26px 50px -24px rgb(0 0 0 / .85), 0 3px 10px -4px rgb(0 0 0 / .5);
  color-scheme: dark; background: var(--paper); color: var(--ink);
  overflow-x: clip; /* the cobalt band deliberately runs past both edges; clip (not hidden) so nothing can scroll sideways */
}
.stage-head { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 48px); }
.player-page { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 72px; }

/* Password gate: the title sits on a cut cobalt band; a paper sheet overlaps its lower cut. */
.gate-stage { position: relative; padding: clamp(16px, 4vh, 40px) 0 48px; }
.gate-stage:has(> #gate[hidden]):has(> #missing[hidden]) { display: none; }
#gate { position: relative; max-width: 460px; margin: 0 auto; }
#gate::before {
  content: ""; position: absolute; z-index: 0; top: -24px; bottom: 34%; left: -100vw; right: -100vw;
  background: var(--field); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  animation: band-in 1s var(--ease-out) both;
}
@keyframes band-in { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
.gate-title { position: relative; color: var(--on-field); font-size: clamp(3.4rem, 12vw, 5.6rem); padding: 28px 0 36px; }
.gate-sheet {
  /* paper inside the ink stage */
  --paper: #eef0f4; --sheet: #ffffff; --ink: #0f1115; --muted: #4b5266; --line: rgb(15 17 21 / .13);
  --line-strong: rgb(15 17 21 / .32); --focus: var(--field);
  color-scheme: light; position: relative; background: var(--sheet); color: var(--ink);
  padding: clamp(22px, 4vw, 30px);
}
.gate-sheet p { margin: 0 0 12px; color: var(--muted); }
.gate-sheet button { margin-top: 14px; width: 100%; padding: 14px; }
.gate-sheet .error { color: var(--danger); }
.notice { max-width: 460px; margin: 40px auto 0; }

/* Player: title card above, the picture with a cobalt plane offset behind it. */
#player h1 { font-size: clamp(1.8rem, 6vw, 4.4rem); margin: 8px 0 26px; overflow-wrap: break-word; }
.frame { position: relative; isolation: isolate; }
.frame::before {
  content: ""; position: absolute; z-index: -1; inset: 22px -22px -22px 22px; background: var(--field);
  clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  animation: plane-in 1.1s var(--ease-out) .1s both;
}
@keyframes plane-in { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
.frame video { display: block; width: 100%; max-height: 78vh; background: #000; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9); }
#play-error { margin-top: 34px; color: #ff7a63; }
@media (max-width: 640px) {
  .frame::before { inset: 12px -10px -12px 10px; }
  #gate::before { bottom: 40%; }
}
@media (prefers-reduced-motion: reduce) {
  #gate::before, .frame::before { animation: none; }
}
html:has(> body.page-video) { overflow-x: clip; }