/* ==========================================================================
   Hero cover video — real-time green-screen reveal.

   Isolated from the general design system in css/style.css. Layout and
   sizing are pure CSS so the component is fully usable, in its correct
   look, with zero JavaScript:

   - .cover-video__fallback (the real book artwork, real alt text) is
     visible by default, sitting on top of everything else, and IS the
     no-JS/reduced-motion/autoplay-blocked experience.
   - .cover-video__source (the <video>) is never shown directly — it's
     only a decode source for the canvas below.
   - js/cover-video.js paints keyed frames onto the canvas, then fades
     the fallback image out once the first real frame is ready, so
     there's never a blank, green, or half-loaded state on screen. If
     autoplay is blocked for any reason, the fallback image is simply
     never hidden.
   ========================================================================== */

.cover-video {
  position: relative;
  width: 100%;
}

/* Reserves the exact final footprint so nothing shifts on load (CLS). */
.cover-video__frame {
  position: relative;
  width: 100%;
  max-width: 170px;
  margin: 0 auto;
  aspect-ratio: 1080 / 1706;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.35));
}

@media (min-width: 500px) {
  .cover-video__frame { max-width: 220px; }
}

@media (min-width: 900px) {
  .cover-video__frame { max-width: 100%; }
}

.cover-video__source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.cover-video__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.cover-video__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}

.cover-video__fallback.is-hidden {
  opacity: 0;
  pointer-events: none;
}