/* Safety - The Musical: the built-in trailer (trailer-1008, 2026-10-08; the player round the same afternoon).
   The frame in #trailer (the poster and the muted preview loop) and the player.
   Loaded after site.css, which keeps the frame's base look (.trailer-frame, .play, .trailer-tag, .dlg-video).
   js/app.js drives it: .is-self = the built-in trailer, .is-live = the preview loop is playing, .is-title = the
   loop is on its title card; it builds the loop's pause button (.trailer-ctrl), and in the player the cover
   (.tp-cover: a spinner, or one "Tap to play" button) and the end card (.trailer-end). */

/* the nav and footer "Trailer" links: the jump lands with the kicker 12 px under the top bar (69 px tall), so the
   whole frame fits below it on a 1440x900 screen (it ended 66 px below it). The kicker starts at the section's top
   padding, the same clamp as .section in site.css: 69 + 12 = 81. */
#trailer { scroll-margin-top: calc(81px - clamp(72px, 10vw, 140px)); }

/* ---------- the frame: wide on landscape screens, square on portrait screens ----------
   (the same query as the frame's <picture> in index.nvx and FRAME_SQUARE in js/app.js) */
.trailer-frame.is-self {
  cursor: pointer;
  /* the whole frame fits under the top bar on a short landscape screen (a phone held sideways) */
  max-width: calc((100vh - 88px) * 16 / 9);
  max-width: calc((100svh - 88px) * 16 / 9);
  margin-left: auto;
  margin-right: auto;
}
@media (max-aspect-ratio: 1/1) {
  .trailer-frame.is-self {
    aspect-ratio: 1 / 1;
    max-width: 78vh;
    max-width: 78svh;
  }
  /* the square frame: the play button sits below the singer's masked face (centred, it covered the face on phones) */
  .trailer-frame.is-self .play { top: 64%; }
}

.trailer-frame.is-self .play,
.trailer-frame.is-self .trailer-hint {
  transition: opacity 0.45s ease, transform 0.4s var(--ease-out), background-color 0.3s, border-color 0.3s, color 0.3s;
}
/* While the muted loop plays, the moving film is the invitation: the big arrow steps aside (a film that plays with a
   play arrow in its middle reads as "not playing") and the pill, now lit, says what a tap does. The arrow is back
   on the still poster, under a mouse pointer and with keyboard focus. */
.trailer-frame.is-self.is-live .play { opacity: 0; }
@media (hover: hover) {
  .trailer-frame.is-self.is-live:hover .play { opacity: 1; }
}
.trailer-frame.is-self.is-live:focus-visible .play { opacity: 1; }
.trailer-frame.is-self.is-live .trailer-hint {
  background: rgba(224, 164, 88, 0.92);
  border-color: rgba(242, 201, 135, 0.95);
  color: var(--navy);
}
.trailer-frame.is-self.is-live .trailer-len { color: var(--navy); border-left-color: rgba(6, 11, 23, 0.35); }
/* the pill steps aside while the loop shows the title card (it covered "Safety, The Musical") */
.trailer-frame.is-title:not(:focus-visible) .trailer-hint { opacity: 0; }
@media (hover: hover) {
  .trailer-frame.is-title:hover .trailer-hint { opacity: 1; }
}

/* the loop's pause / play button: beside the frame's <button> in the page (a button cannot hold a button), laid over
   the frame's top right corner. The row has the frame's width and takes over its top margin. */
.trailer-ctrl {
  position: relative;
  z-index: 3;
  height: 0;
  margin: 34px auto 0;
  max-width: calc((100vh - 88px) * 16 / 9);
  max-width: calc((100svh - 88px) * 16 / 9);
}
.trailer-ctrl + .trailer-frame { margin-top: 0; }
@media (max-aspect-ratio: 1/1) {
  .trailer-ctrl { max-width: 78vh; max-width: 78svh; }
}
.trailer-pause {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(243, 233, 210, 0.4);
  background: rgba(6, 11, 23, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s, background-color 0.25s, color 0.25s;
}
.trailer-ctrl.is-on .trailer-pause {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, background-color 0.25s, color 0.25s;
}
.trailer-pause:hover { background: var(--cream); color: var(--navy); }
.trailer-pause:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 2px; }
.trailer-pause svg { width: 15px; height: 15px; fill: currentColor; }

/* the preview loop sits over the poster (its first frame is the poster) and fades in once it plays */
.trailer-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.02);
  filter: saturate(0.95) brightness(0.92);
  transition: opacity 0.6s ease, transform 1.6s var(--ease-out), filter 1s;
}
.trailer-frame.is-live .trailer-preview { opacity: 1; }
.trailer-frame.is-self:hover .trailer-preview { transform: scale(1.06); filter: saturate(1.05) brightness(1); }

/* "Play with sound": the loop is silent, the trailer is not (owner 2026-10-09: no running time in the pill) */
.trailer-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(14px, 4.5%, 30px);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  background: rgba(6, 11, 23, 0.55);
  border: 1px solid rgba(243, 233, 210, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trailer-hint[hidden] { display: none; }
.trailer-hint svg {
  flex: none;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trailer-len { display: none; }
@media (max-width: 380px) {
  .trailer-hint { gap: 6px; padding: 7px 12px 7px 10px; font-size: 11px; letter-spacing: 0.12em; }
}

/* ---------- the player ----------
   The open dialog covers the screen (its empty area is the dark backdrop: a tap there closes it) and centres the
   picture with the close button just above its right corner, both inside the visible screen and its safe areas
   (the notch, the home bar). The picture keeps the cut's shape (--tw / --th = 16/9, 1/1 or 9/16, set by js/app.js)
   and is never taller than the screen: on a phone held upright the vertical cut, e.g. 324x576 under Safari's bars.
   On a short landscape screen (a phone held sideways) the close button stands beside the picture instead. */
.dlg-video.is-self[open] {
  --tw: 16;
  --th: 9;
  --g: 12px;            /* the gutter */
  --xs: 52px;           /* the close button */
  --vh: 100vh;
  --st: env(safe-area-inset-top, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --ah: calc(var(--vh) - var(--xs) - 3 * var(--g) - var(--st) - var(--sb));   /* the picture's room in height */
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: var(--vh);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(var(--g) + var(--st)) calc(var(--g) + var(--sr)) calc(var(--g) + var(--sb)) calc(var(--g) + var(--sl));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: min(1100px, 100%, calc(var(--ah) * var(--tw) / var(--th)));
  grid-template-rows: var(--xs) auto;
  row-gap: var(--g);
  place-content: center;
}
@supports (height: 100dvh) {
  .dlg-video.is-self[open] { --vh: 100dvh; }
}
.dlg-video.is-self .video-box,
.dlg-video.is-self .video-msg { grid-row: 2; grid-column: 1; }
.dlg-video.is-self .video-box {
  width: 100%;
  aspect-ratio: var(--tw) / var(--th);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(243, 233, 210, 0.08);
}
.dlg-video.is-self .video-box video { object-fit: contain; background: #000; }

/* the close button: 52 px, a cream disc with a navy cross, on the dark backdrop just above the picture's right
   corner, so it shows on any frame of the film; its name for screen readers is the X's aria-label in index.nvx */
.dlg-video.is-self .dlg-x {
  position: relative;
  top: auto;
  right: auto;
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  align-self: end;
  width: var(--xs);
  height: var(--xs);
  padding: 0;
  border: 2px solid rgba(6, 11, 23, 0.35);
  border-radius: 50%;
  background: var(--cream);
  color: var(--navy);
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
  transition: background-color 0.2s, transform 0.2s var(--ease-out);
}
.dlg-video.is-self .dlg-x::before,
.dlg-video.is-self .dlg-x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 3px;
  margin: -1.5px 0 0 -12px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
.dlg-video.is-self .dlg-x::after { transform: rotate(-45deg); }
.dlg-video.is-self .dlg-x:hover { background: var(--amber-hi); color: var(--navy); transform: scale(1.06); }
.dlg-video.is-self .dlg-x:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 3px; }

@media (orientation: landscape) and (max-height: 560px) {
  .dlg-video.is-self[open] {
    --ah: calc(var(--vh) - 2 * var(--g) - var(--st) - var(--sb));
    grid-template-columns: var(--xs) min(1100px, calc(100% - 2 * var(--xs) - 2 * var(--g)), calc(var(--ah) * var(--tw) / var(--th))) var(--xs);
    grid-template-rows: auto;
    column-gap: var(--g);
    row-gap: 0;
  }
  .dlg-video.is-self .video-box,
  .dlg-video.is-self .video-msg { grid-row: 1; grid-column: 2; }
  .dlg-video.is-self .dlg-x { grid-row: 1; grid-column: 3; justify-self: start; align-self: start; }
}

/* a swipe up or down moves the picture with the finger (js/app.js sets --drag); let go past 70 px and it closes */
.dlg-video.is-self > .dlg-x,
.dlg-video.is-self > .video-box,
.dlg-video.is-self > .video-msg {
  translate: 0 var(--drag, 0px);
  opacity: var(--drag-o, 1);
  transition: translate 0.3s var(--ease-out), opacity 0.3s ease, background-color 0.2s, transform 0.2s var(--ease-out);
}
.dlg-video.is-self.is-drag > * { transition: none; }

/* the cover over the picture until the film moves: a spinner while it starts, or one big "Tap to play" button when
   the browser would not start it; gone (display: none) once it plays, so the browser's own controls are all there is */
.tp-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  pointer-events: none;
}
.video-box[data-tp="loading"] .tp-cover,
.video-box[data-tp="tap"] .tp-cover { display: grid; }
.tp-spin {
  grid-area: 1 / 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(243, 233, 210, 0.22);
  border-top-color: var(--cream);
  opacity: 0;
  animation: tpSpin 0.9s linear infinite;
}
.video-box[data-tp="loading"] .tp-spin { opacity: 1; transition: opacity 0.3s ease 0.35s; }
@keyframes tpSpin { to { transform: rotate(360deg); } }
.tp-go {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: rgba(3, 6, 14, 0.38);
  color: var(--cream);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}
.video-box[data-tp="tap"] .tp-go { display: flex; }
.tp-go svg {
  width: 96px;
  height: 96px;
  padding: 27px 24px 27px 32px;
  border-radius: 50%;
  background: var(--cream);
  fill: var(--navy);
  box-shadow: 0 0 0 10px rgba(243, 233, 210, 0.12), 0 10px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s var(--ease-out), background-color 0.2s;
}
.tp-go:hover svg { background: var(--amber-hi); transform: scale(1.05); }
.tp-go:focus-visible svg { outline: 3px solid var(--amber-hi); outline-offset: 6px; }

/* "The trailer could not load": inside the picture, along its bottom edge (below it, it was cut off on phones) */
.video-msg {
  margin: 0;
  padding: 12px 56px 14px 18px;
  background: #000;
  color: var(--amber-hi);
  font-size: 14px;
  text-align: center;
}
.dlg-video.is-self .video-msg {
  position: relative;
  z-index: 4;
  align-self: end;
  padding: 12px 18px 14px;
  border-radius: 0 0 14px 14px;
  background: rgba(0, 0, 0, 0.84);
}
.video-msg[hidden] { display: none; }

/* the end card: when the film ends, the next step (Get tickets) and Watch again, over its last frame */
.trailer-end {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 12px 14px;
  padding: 24px;
  /* dark enough that the film's own last title ("Tickets Available Now") stays a faint glow behind the buttons */
  background: radial-gradient(75% 60% at 50% 50%, rgba(3, 6, 14, 0.8) 0%, rgba(3, 6, 14, 0.9) 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.trailer-end.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s ease; }
.trailer-end .btn { min-width: 190px; }
.trailer-end .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* while the trailer plays, the page behind it stands still (the film grain, fog and glows would otherwise be
   redrawn under the backdrop on every frame, which delayed the trailer's start on slow devices) and the backdrop is
   a plain dark veil (no blur) */
.dlg-video::backdrop {
  background: rgba(3, 6, 14, 0.9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.is-trailer-open body > :not(dialog),
html.is-trailer-open body > :not(dialog)::before,
html.is-trailer-open body > :not(dialog)::after,
html.is-trailer-open body > :not(dialog) *,
html.is-trailer-open body > :not(dialog) *::before,
html.is-trailer-open body > :not(dialog) *::after { animation-play-state: paused !important; }   /* video-stall-1009 F7: pseudo-elements too */

/* ---------- reduced motion: the poster alone (js/app.js never fetches the loop then), a still spinner ---------- */
@media (prefers-reduced-motion: reduce) {
  .trailer-preview { display: none; }
  .tp-spin { animation: none; border-color: rgba(243, 233, 210, 0.5); }
  .dlg-video.is-self > .dlg-x,
  .dlg-video.is-self > .video-box,
  .dlg-video.is-self > .video-msg { transition: none; }
}