/* ============================================================
   THE PREMIERE — a cinema that opens over the homepage

   WHY THIS IS NOT JUQTUBE'S THEATER. That one is a PAGE MODE, not a component:
   `#jqDetail[data-theater]` works by hiding `.jd-head`, `.jd-nowbar` and
   `.jd-runs` BY NAME, sizing the stage against page-level custom properties,
   and coordinating with an episodes panel and a now-playing bar that only exist
   on that page. Lifting it here would mean pulling the whole of juqtube.css
   onto the homepage - the page that should stay lightest - for one video, or
   refactoring a working feature for the benefit of a different one.

   SO THE MECHANISM IS NEW AND THE DESIGN IS COPIED. Every value below that has
   a counterpart over there is that value, taken from the file rather than
   eyeballed: the 0.52s and its easing curve, the `0 0 90px rgba(0,0,0,0.9)`
   stage shadow, the exit buttons that stay dimmed until you reach for them.
   Retyping a design is how a design drifts.

   THE DIFFERENCE IN SHAPE: JuqTube's theater is a mode of a page you already
   navigated to, so it can hide that page's furniture. This is a layer OVER a
   page nobody has left, so it brings its own black rather than hiding anybody
   else's markup, and closing it puts you back exactly where you were, at the
   same scroll position, with nothing reloaded.
   ============================================================ */

.pr {
  /* Same curve and duration as the theater: two rooms opening differently is
     the sort of thing you feel before you can name it. */
  --pr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pr-t: 0.52s;
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--pr-t) var(--pr-ease);
}
/* AN EXPLICIT RULE, because `.pr` sets `display: grid` and any class setting
   display beats the browser's own `[hidden] { display: none }`. This has now
   bitten this site six times, and swapping remove() for hidden is exactly when
   it bites. */
.pr[hidden] { display: none; }
.pr.pr-on { opacity: 1; }

/* The dark: one layer, one property, under the player and over the site. The
   room goes black around the picture rather than the picture appearing on
   black. */
.pr-dim {
  position: absolute; inset: 0; z-index: 1;
  background: #000;
  /* Not fully opaque on purpose. The site is still there underneath, and a hint
     of it is what says "this is over the page" rather than "you navigated". */
  opacity: 0.94;
}

.pr-stage {
  position: relative; z-index: 3;
  aspect-ratio: 16 / 9;
  width: min(88vw, calc(88vh * 16 / 9));
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 90px rgba(0, 0, 0, 0.9);
  /* Arrives rather than appearing: a hair of scale under the fade, which is
     what makes it read as a thing opening instead of a picture cutting in. */
  transform: scale(0.97);
  transition: transform var(--pr-t) var(--pr-ease);
}
.pr.pr-on .pr-stage { transform: scale(1); }
.pr-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* THE POSTER IS A BACKDROP, NOT A GATE. It used to be the whole of what the
   layer showed until somebody pressed a play button drawn on top of it, and
   that button is gone: you had already said you wanted to watch by pressing
   Watch, and a still frame with another play button on it reads as the video
   having failed to start.

   It stays because the player takes a moment to arrive and the alternative for
   that moment is a black rectangle. It sits behind and is covered.

   THE BUTTON ALSO HAD A REAL BUG, worth recording since it explains how it
   looked: it was display:grid with place-items:center and TWO children, and
   two grid children make two full-height rows. So the icon centred in the top
   half and the title centred in the bottom half, which is why the icon sat high
   up the frame with the title stranded near the floor rather than the two
   sitting together in the middle. */
/* AT FULL STRENGTH NOW. It was dimmed to 0.55 so a play button drawn on top of
   it would read; with the button gone, dimming only makes the half-second
   before the player arrives look washed out. It is the video's own first frame,
   so it should look like the video. */
.pr-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* The way out floats over the black rather than sitting in a bar, and stays
   dimmed until you reach for it so it does not compete with the picture.
   Copied from .jd-exit. */
.pr-ctl {
  position: absolute; z-index: 5; top: var(--s-6); right: var(--s-6);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
}
.pr-exit {
  display: inline-flex; align-items: center; gap: var(--s-3); white-space: nowrap;
  font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5); cursor: pointer;
  border: var(--bw) solid #2a2a30; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.6); color: #8c8c93;
  opacity: 0.45; transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pr-exit:hover,
.pr-exit:focus-visible { opacity: 1; border-color: #f3f1eb; color: #f3f1eb; }

/* The title caption lived here, under the picture. It went with the overlay
   for the same reason: a video filling the screen does not need a label saying
   which video it is. The title is still the dialog's accessible name, which is
   for the one reader who cannot see the picture. */

/* THE BUTTON THAT OPENS IT, on the spotlight card. Sits beside the ordinary
   CTA and reads as a play control rather than as a link, because it does not
   navigate and a link that does not navigate is a lie told by a cursor. */
.spot-actions .pr-btn { display: inline-flex; align-items: center; gap: var(--s-3); }
.spot-actions .pr-btn::before { content: '\25B6'; font-size: 0.85em; }

@media (max-width: 720px) {
  .pr-stage { width: 96vw; }
  .pr-ctl { top: var(--s-4); right: var(--s-4); }
}

/* The fade IS the effect, so it degrades to an instant swap rather than being
   removed: a transition that half happens reads as a bug. */
@media (prefers-reduced-motion: reduce) {
  .pr, .pr-stage { transition: none; }
  .pr-stage { transform: none; }
}