/* The hero's preview layer, shared by the home and the show page (spec 4.1; public/js/lib/hero-preview.js). The page's hero sets two custom properties: --art-h, the height of
   its art block on a phone, and --art-w, the width of its art on a wide page; the preview stands in the same box as the art. Only opacity moves. */
/* the hero's preview: a layer over the art (opacity only), under the copy; the speaker and replay button in the art block's corner */
.hero-preview { position: absolute; inset: 0; opacity: 0; transform: translateZ(0); transition: opacity var(--hero-fade-ms) ease-out; pointer-events: none; }
.hero-preview.is-on { opacity: 1; }
/* the video fills its frame, and the frame (the picture's own box, whatever shape the file is) carries the fade into the page */
.hero-stage { position: absolute; inset: 0; }
.hero-frame { position: absolute; inset: 0; -webkit-mask-image: var(--mask-bottom); mask-image: var(--mask-bottom); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); }
.hero-blur { display: none; }
.hero-controls { position: absolute; z-index: 6; right: 24px; top: calc(var(--art-h) - 24px - 40px); opacity: 0; transition: opacity var(--fade-ms) ease-out; }
.hero-controls.is-on { opacity: 1; }
.hero-sound { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 20, 22, .55); border: 1px solid rgba(255, 255, 255, .55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-sound svg { width: 22px; height: 22px; }

@container page (min-width: 700px) {
  .hero-preview { inset: 0; }
  .hero-stage { left: auto; width: var(--art-w); display: flex; justify-content: center; }
  .hero-frame { position: relative; inset: auto; height: 100%; max-width: 100%; aspect-ratio: var(--video-ratio, 9 / 16); -webkit-mask-image: var(--mask-left); mask-image: var(--mask-left); }
  .hero-blur { display: block; position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.1); opacity: .7; }
  .hero-controls { top: auto; bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-preview, .hero-controls { transition-duration: var(--fade-ms); }
}