/* Unlock AI Value — expanded film modal.
   Loaded after site.css, so these rules win where the two overlap.

   The modal is the film: the stage is sized to the film's own aspect ratio
   (--film-ar, set from the video's metadata by js/video-modal.js) and capped
   at 90% of the viewport, so there are no black bars around the picture.
   Width and height are both stated in calc() rather than aspect-ratio, which
   keeps it identical on older Safari and Firefox. */

:root{
  --film-ar: 1.7778;      /* 16:9 until the real film reports its size */
  --film-cap-w: 90vw;
  --film-cap-h: 90vh;
}

/* ---------- the 90% window ---------- */

body.video-open:not(.case-mode) .video-layer{
  padding: 0;
  background: rgba(1, 2, 6, .97);
  -webkit-backdrop-filter: blur(20px) saturate(.75);
  backdrop-filter: blur(20px) saturate(.75);
}

body.video-open:not(.case-mode) .video-stage{
  position: relative;
  width:  min(var(--film-cap-w), calc(var(--film-cap-h) * var(--film-ar)));
  height: min(var(--film-cap-h), calc(var(--film-cap-w) / var(--film-ar)));
  max-width: var(--film-cap-w);
  max-height: var(--film-cap-h);
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .8), 0 0 0 1px rgba(160, 200, 255, .12);
}

body.video-open:not(.case-mode) .video-frame{
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 16px;
  background: #000;
  overflow: hidden;
}

body.video-open:not(.case-mode) .video-frame video{
  object-fit: contain;
  background: #000;
}

/* Caption sits inside the window, clear of the browser's control bar. */
body.video-open:not(.case-mode) .video-caption{
  bottom: clamp(56px, 8%, 96px);
  left: clamp(18px, 3%, 40px);
  right: clamp(18px, 3%, 40px);
}

body.video-open:not(.case-mode) .video-close{ z-index: 70; }

/* ---------- black play / pause control ---------- */

.video-play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 84px;
  padding: 0;
  margin: 0;
  display: none;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .65);
  z-index: 6;
  opacity: 1;
  -webkit-transition: opacity .25s ease, -webkit-transform .2s ease, background .2s ease;
  transition: opacity .25s ease, transform .2s ease, background .2s ease;
}

.video-frame.has-video .video-play{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.video-frame.has-image .video-play,
.video-frame:not(.has-video) .video-play{ display: none; }

.video-play:hover{ background: #0b0b0b; transform: translate(-50%, -50%) scale(1.06); }
.video-play:focus{ outline: none; }
.video-play:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

.video-play svg{ width: 38px; height: 38px; display: block; pointer-events: none; }
.video-play .vp-play{ margin-left: 4px; }
.video-play .vp-pause{ display: none; }

.video-frame.is-playing .video-play .vp-play{ display: none; }
.video-frame.is-playing .video-play .vp-pause{ display: block; }

/* Out of the way while it runs; back on hover, on pause, and for ~2s after a tap. */
.video-frame.is-playing .video-play{ opacity: 0; }
.video-frame.is-playing:hover .video-play,
.video-frame.is-playing.show-btn .video-play{ opacity: 1; }

/* ---------- breakpoints ---------- */

/* Large desktop: a little more room, the film is the hero. */
@media (min-width: 1600px){
  :root{ --film-cap-w: 88vw; --film-cap-h: 88vh; }
  .video-play{ width: 96px; height: 96px; }
  .video-play svg{ width: 44px; height: 44px; }
}

/* Laptop widths keep the plain 90%. */

/* Tablet: the close button moves in, the window grows into the side margins. */
@media (max-width: 1024px){
  :root{ --film-cap-w: 92vw; --film-cap-h: 86vh; }
  .video-play{ width: 76px; height: 76px; }
  .video-play svg{ width: 34px; height: 34px; }
}

/* Phone: full width, and the button is thumb-sized rather than huge. */
@media (max-width: 760px){
  :root{ --film-cap-w: 94vw; --film-cap-h: 80vh; }
  body.video-open:not(.case-mode) .video-stage,
  body.video-open:not(.case-mode) .video-frame{ border-radius: 12px; }
  .video-play{ width: 64px; height: 64px; }
  .video-play svg{ width: 28px; height: 28px; }
  /* A 16:9 film on a portrait phone is a narrow band; an overlaid caption sits
     in the middle of the picture and reads badly, and the pool title is already
     on the panel behind, so it is dropped here. */
  body.video-open:not(.case-mode) .video-caption{ display: none; }
}

/* Landscape phone: height is the scarce axis. */
@media (max-height: 460px) and (orientation: landscape){
  :root{ --film-cap-w: 94vw; --film-cap-h: 92vh; }
  .video-play{ width: 56px; height: 56px; }
  .video-play svg{ width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce){
  .video-play{ transition: none; }
}

/* Mobile browsers with a retracting toolbar: use the dynamic viewport height
   where it exists, so the window does not sit under the URL bar. */
@supports (height: 1dvh){
  :root{ --film-cap-h: 90dvh; }
  @media (max-width: 1024px){ :root{ --film-cap-h: 86dvh; } }
  @media (max-width: 760px){ :root{ --film-cap-h: 80dvh; } }
  @media (min-width: 1600px){ :root{ --film-cap-h: 88dvh; } }
  @media (max-height: 460px) and (orientation: landscape){ :root{ --film-cap-h: 92dvh; } }
}