/* Shared video lightbox — the ONE canonical full-screen video player for the site.
   Any element carrying [data-video] (a button or a .filmframe poster) opens the
   overlay defined by #videoModal and plays that MP4 full-screen. Include this
   stylesheet + assets/lightbox.js + the #videoModal markup on any page with video. */

.vmodal { position: fixed; inset: 0; z-index: 100; display: none; }
.vmodal.open { display: block; }
.vmodal-backdrop { position: absolute; inset: 0; background: rgba(6,6,8,0.86); backdrop-filter: blur(6px); }
.vmodal-box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(1100px, 92vw); }
.vmodal-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border: 1px solid var(--line, rgba(243,156,18,0.16)); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 60px rgba(211,84,0,0.12); }
.vmodal-frame iframe, .vmodal-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vmodal-x { position: absolute; top: -46px; right: 0; background: none; border: 0; color: var(--bronze, #B08D57); font-size: 2rem; line-height: 1; cursor: pointer; }
.vmodal-x:hover { color: var(--glow, #F39C12); }

/* Inline film frames become click-to-open poster thumbnails. Per-page .filmframe
   rules still set the frame's size/margins/border; these only add the trigger UI. */
.filmframe[data-video] { position: relative; cursor: pointer; }
.filmframe[data-video] img { display: block; width: 100%; height: auto; }
.filmframe[data-video] .film-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(6,6,8,0.55); border: 1px solid var(--line, rgba(243,156,18,0.16));
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: background .15s ease, transform .15s ease;
}
.filmframe[data-video] .film-play::before {
  content: ""; margin-left: 6px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--bronze, #B08D57);
  transition: border-left-color .15s ease;
}
.filmframe[data-video]:hover .film-play,
.filmframe[data-video]:focus-visible .film-play { background: rgba(211,84,0,0.85); transform: translate(-50%,-50%) scale(1.06); }
.filmframe[data-video]:hover .film-play::before,
.filmframe[data-video]:focus-visible .film-play::before { border-left-color: #fff; }
.filmframe[data-video]:focus-visible { outline: 2px solid var(--glow, #F39C12); outline-offset: 3px; }