/* The film theatre. One overlay for every film on the site; the film's own
   <video> is lifted into it (see js/theatre.mjs). Dark by design in both
   themes: the film is the light source. */

.theatre {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(14 14 14 / .97); color: #fff; cursor: default;
  --theatre-ink: #fff; --theatre-quiet: rgba(255 255 255 / .62); --theatre-rule: rgba(255 255 255 / .16);
  --theatre-accent: var(--edition-palette-indigo);
}
.theatre[hidden] { display: none; }
body.theatre-open { overflow: hidden; }

.theatre-stage { display: grid; place-items: center; min-height: 0; padding: clamp(16px, 3vh, 40px) clamp(16px, 4vw, 64px) 0; }
.theatre-stage video {
  display: block; width: 100%; height: auto; max-width: min(1440px, 100%);
  max-height: calc(100dvh - 148px); object-fit: contain; border-radius: 8px; background: #000;
  box-shadow: 0 30px 90px -30px rgba(0 0 0 / .8);
}

.theatre-panel { max-width: min(1440px, calc(100% - 2 * clamp(16px, 4vw, 64px))); width: 100%; margin: 0 auto; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); }
.theatre-title { display: flex; gap: 4px; align-items: baseline; min-height: 24px; padding: 0 2px 6px; font-size: .875rem; color: var(--theatre-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theatre-name { color: var(--theatre-ink); font-weight: 600; letter-spacing: -.01em; }

.theatre-bar { display: flex; align-items: center; gap: 6px; }
.theatre-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 8px;
  color: var(--theatre-ink); background: transparent; transition: background-color var(--d-hover) ease, color var(--d-hover) ease;
}
.theatre-btn svg { width: 22px; height: 22px; }
.theatre-btn[hidden] { display: none; }
.theatre-btn[aria-pressed="true"] { color: var(--theatre-accent); background: rgba(255 255 255 / .08); }
@media (hover: hover) and (pointer: fine) { .theatre-btn:hover { background: rgba(255 255 255 / .1); } }
.theatre-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theatre-play { color: #111; background: #fff; }
@media (hover: hover) and (pointer: fine) { .theatre-play:hover { background: #fff; color: var(--theatre-accent); } }
.theatre-time { flex: none; font-family: var(--mono); font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--theatre-quiet); padding-inline: 8px 12px; white-space: nowrap; }
.theatre-now { color: var(--theatre-ink); }

/* the scrubber: a native range, drawn as a hairline with the film's chapters ticked on it */
.theatre-scrub { position: relative; flex: 1; min-width: 0; height: 44px; display: grid; align-items: center; }
.theatre-range {
  --fill: 0%; width: 100%; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.theatre-range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px;
  background: linear-gradient(to right, #fff var(--fill), var(--theatre-rule) var(--fill)); }
.theatre-range::-moz-range-track { height: 3px; border-radius: 2px; background: var(--theatre-rule); }
.theatre-range::-moz-range-progress { height: 3px; border-radius: 2px; background: #fff; }
.theatre-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(14 14 14 / .9); transition: transform var(--d-press) var(--ease-out); }
.theatre-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(14 14 14 / .9); }
.theatre-range:hover::-webkit-slider-thumb, .theatre-range:active::-webkit-slider-thumb { transform: scale(1.25); }
.theatre-range:focus-visible { outline: none; }
.theatre-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(14 14 14 / .9), 0 0 0 5px #fff; }
.theatre-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(14 14 14 / .9), 0 0 0 5px #fff; }
.theatre-ticks { position: absolute; inset: 0; pointer-events: none; }
.theatre-tick {
  position: absolute; left: var(--at); top: 50%; width: 14px; height: 24px; transform: translate(-50%, -50%);
  pointer-events: auto; cursor: pointer; background: transparent;
}
.theatre-tick::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 9px; transform: translate(-50%, -50%);
  border-radius: 1px; background: var(--theatre-ink); opacity: .55; }
@media (hover: hover) and (pointer: fine) { .theatre-tick:hover::before { opacity: 1; height: 13px; background: var(--theatre-accent); } }

/* while the film plays untouched the chrome recedes; a movement brings it back */
.theatre-panel { transition: opacity var(--d-arrive) var(--ease-out); }
.theatre.is-idle { cursor: none; }
.theatre.is-idle .theatre-panel { opacity: 0; }
.theatre.is-idle .theatre-panel:focus-within { opacity: 1; }

/* one entrance, then nothing moves that does not have to */
.theatre { opacity: 1; transition: opacity var(--d-arrive) var(--ease-out); }
.theatre.is-entering { opacity: 0; }
.theatre.is-entering .theatre-stage video { transform: scale(.985); }
.theatre-stage video { transition: transform var(--d-arrive) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .theatre, .theatre-panel, .theatre-stage video, .theatre-range::-webkit-slider-thumb { transition: none; }
  .theatre.is-entering { opacity: 1; }
  .theatre.is-entering .theatre-stage video { transform: none; }
}

@media (max-width: 760px) {
  .theatre-stage { padding: 8px 0 0; }
  .theatre-stage video { border-radius: 0; max-height: calc(100dvh - 132px); }
  .theatre-panel { max-width: none; padding: 8px 12px max(14px, env(safe-area-inset-bottom)); }
  .theatre-title { font-size: .8125rem; }
  .theatre-bar { flex-wrap: wrap; row-gap: 2px; }
  .theatre-scrub { order: -1; flex-basis: 100%; height: 40px; }
  .theatre-time { margin-right: auto; }
  .theatre-full { display: none; }
}