/* ==========================================================================
   v-hero-media  —  the hero play/pause + sound cluster, shared by every hero
   --------------------------------------------------------------------------
   Behaviour, markup, class names, POSITION and hit areas live here and in
   hero-media.js. Appearance does not. Every colour, opacity, backdrop, border,
   shadow and scrim resolves from a scoped custom property, with the Qvinto
   values as the defaults. A page restyles its controls by setting those
   properties on its own hero wrapper. It never edits or forks this file.

     --v-hero-control-fg             icon colour
     --v-hero-control-fg-hover       icon colour on hover
     --v-hero-control-bg             button fill
     --v-hero-control-bg-hover       button fill on hover
     --v-hero-control-border         button hairline
     --v-hero-control-border-hover   button hairline on hover
     --v-hero-control-blur           backdrop blur radius
     --v-hero-control-shadow         button shadow
     --v-hero-control-focus          focus ring colour
     --v-hero-control-scrim          any background value, painted behind the
                                     cluster and feathered by the page
     --v-hero-control-scrim-inset    how far the scrim bleeds past the buttons

   Position is shared, not themeable: bottom-right, Qvinto's inset and hit area.

   Two optional states, driven by hero-media.js:
     [hidden] / [disabled]     the control is built but has nothing to drive
                               (a film with no bed yet for the sound toggle)
     .is-ended on the hero     a once-through film has finished; the play
                               control becomes a replay control
   ========================================================================== */
.v-hero-media{position:absolute;right:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,44px);z-index:4;display:flex;gap:10px}
.v-hero-media[hidden]{display:none}
.v-hero-media::before{content:"";position:absolute;inset:var(--v-hero-control-scrim-inset,-26px);z-index:-1;border-radius:999px;background:var(--v-hero-control-scrim,transparent);pointer-events:none}
.v-hero-media__btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--v-hero-control-bg,rgba(255,255,255,0.05));border:1px solid var(--v-hero-control-border,rgba(246,239,222,0.28));color:var(--v-hero-control-fg,#F6EFDE);box-shadow:var(--v-hero-control-shadow,none);backdrop-filter:blur(var(--v-hero-control-blur,2px));-webkit-backdrop-filter:blur(var(--v-hero-control-blur,2px));transition:background 240ms ease,border-color 240ms ease,transform 240ms ease}
.v-hero-media__btn:hover{background:var(--v-hero-control-bg-hover,rgba(255,255,255,0.14));border-color:var(--v-hero-control-border-hover,rgba(246,239,222,0.6));color:var(--v-hero-control-fg-hover,var(--v-hero-control-fg,#F6EFDE))}
.v-hero-media__btn:active{transform:scale(0.94)}
.v-hero-media__btn:focus-visible{outline:2px solid var(--v-hero-control-focus,var(--text));outline-offset:3px}
.v-hero-media__ic{width:15px;height:15px;fill:currentColor}
.v-hero-media__ic--play,.v-hero-media__ic--muted{display:none}
.v-hero-media__btn[aria-pressed="false"][data-video-play] .v-hero-media__ic--pause{display:none}
.v-hero-media__btn[aria-pressed="false"][data-video-play] .v-hero-media__ic--play{display:block}
.v-hero-media__btn[aria-pressed="false"][data-video-mute] .v-hero-media__ic--sound{display:none}
.v-hero-media__btn[aria-pressed="false"][data-video-mute] .v-hero-media__ic--muted{display:block}
.v-hero-media__btn[hidden]{display:none}
.v-hero-media__btn:disabled{cursor:default;opacity:0.42}
.v-hero-media__btn:disabled:hover{background:var(--v-hero-control-bg,rgba(255,255,255,0.05));border-color:var(--v-hero-control-border,rgba(246,239,222,0.28));color:var(--v-hero-control-fg,#F6EFDE)}
.v-hero-media__btn:disabled:active{transform:none}
.v-hero-media__ic--replay{display:none}
[data-hero-media].is-ended .v-hero-media__btn[data-video-play] .v-hero-media__ic--pause,[data-hero-media].is-ended .v-hero-media__btn[data-video-play] .v-hero-media__ic--play{display:none}
[data-hero-media].is-ended .v-hero-media__btn[data-video-play] .v-hero-media__ic--replay{display:block}