/* ==========================================================================
   THE REEL
   A film player: a 16:9 stage that crossfades through the films' posters
   (the photo loop's .hero__visual__shot push-in, sprint.css), a play button
   and a caption over it, and the films' thumbnails under it as selectors.

   Built for the Event Video Production hero (video.js module 0b, which
   opens the film in the lightbox) and moved here out of video.css 3.5.3 on
   2026-10-14, unchanged, so the Event Photography and Video page's
   first-booking film player (photography.js 2.24.0, which plays the film
   in the stage itself) uses the same component and the same rules.
   Loaded by: event-video-production/ (before video.css) and
   event-photography-and-video/.
   ========================================================================== */
.reel { display: grid; gap: 0.6rem; }
.reel__stage { background: var(--ink); border-color: rgba(8, 8, 7, 0.35); }
.reel__stage::after {
  /* a soft foot so the caption reads on any frame */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.62), rgba(8, 8, 7, 0)); pointer-events: none;
}
.reel__play {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.5rem;
  background: none; border: 0; padding: 0; cursor: pointer; color: #fff; font: inherit;
}
.reel__play__ring {
  position: relative;
  width: 4.2rem; height: 4.2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.85); background: rgba(8, 8, 7, 0.35);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-size: 1.25rem; padding-left: 0.25rem; transition: transform 300ms ease, background 300ms ease;
}
.reel__play:hover .reel__play__ring, .reel__play:focus-visible .reel__play__ring { transform: scale(1.06); background: var(--accent); border-color: var(--accent); color: var(--ink); }
.reel__play:focus-visible { outline: none; }
.reel__play__label { font-size: 0.62rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.9); }
/* the caption sits in its own dark chip, so it reads on an orange-lit
   frame as well as a dark one (Trevor, 2026-09-14) */
.reel__cap { position: absolute; z-index: 3; left: 0.9rem; bottom: 0.9rem; max-width: calc(100% - 1.8rem); display: grid; gap: 0.15rem; color: #fff; pointer-events: none; padding: 0.5rem 0.7rem; background: rgba(8, 8, 7, 0.82); border-radius: 4px; }
/* white on the dark foot, with a shadow so it reads on a bright frame too
   (Trevor, 2026-09-14: the text on the reel must be easy to read) */
/* three classes: `:root .mono` is (0,2,0) and painted the title orange */
.reel .reel__cap.mono, .reel .reel__cap.mono b { color: #fff; }
.reel__cap b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.reel .reel__cap.mono span { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
.reel__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.reel__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 3px; border: 1px solid rgba(8, 8, 7, 0.18); background: var(--paper, #F9F8F4); padding: 0; cursor: pointer;
  transition: box-shadow 500ms ease;
}
/* Trevor, 2026-09-22: the resting frames must not show the dotted page through them. The
   button is solid paper and only the picture fades, so the unselected ones read pale. */
.reel__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.55; transition: opacity 500ms ease; }
/* the thumbnails are the frames alone (Trevor, 2026-09-14: no graphics on
   them): the client name stays for screen readers, the orange chip and the
   progress bar are gone; the active one is simply the bright one */
.reel__thumb .mono { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reel__thumb:hover img { opacity: 0.9; }
.reel__thumb.is-on img { opacity: 1; }
.reel__thumb.is-on { box-shadow: 0 0 0 2px var(--accent); }
.reel__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
  .reel__thumbs { gap: 0.4rem; }
  .reel__thumbs { gap: 0.4rem; }
  .reel__play__ring { width: 3.4rem; height: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__thumb.is-on::after { animation: none; width: 100%; }
  .reel__thumb, .reel__thumb img { transition: none; }
}