/* ---------------------------------------------------------------------------
   Showreel.

   In the hero it stands in for the builder's background-video container and
   its hosted video, and it deliberately carries both of those classes so it
   takes exactly the box the owner approved: absolute in the panel, the video
   shown whole inside the panel's own black (object-fit: contain, from
   components.css). The poster is drawn by the same element, so it is framed
   the same way - uncropped, letterboxed in black.

   The container's pointer-events: none is what lets the hero's text remain
   the thing you interact with; the one control here switches them back on for
   itself only. Square corners and hairline radii, as everything else on the
   site; no gradients.
   --------------------------------------------------------------------------- */

.mf-showreel{--mf-sr-r:3px;--mf-sr-t:.16s cubic-bezier(.2,.6,.3,1)}

/* On its own (a page with no hero panel) the reel is a plain 16:9 block. */
.mf-showreel--block{position:relative;aspect-ratio:16/9;background:var(--mf-black,#000);overflow:hidden}
.mf-showreel--block .mf-showreel__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;background:#000;display:block}

/* One accessible control, always drawn - never hover-only. While the reel is
   idle (before it can autoplay, when autoplay is refused, or under
   reduced-motion) it is a large centred play button over the poster; while
   the reel plays it is a small pause control in the corner, out of the
   picture's way. */
.mf-showreel__toggle{pointer-events:auto;position:absolute;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:1px solid rgba(255,255,255,.55);border-radius:var(--mf-sr-r);
  background:rgba(0,0,0,.72);color:#fff;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);
  transition:background-color var(--mf-sr-t),border-color var(--mf-sr-t),
    width var(--mf-sr-t),height var(--mf-sr-t)}
/* The theme's reset paints any focused or hovered button in its own accent;
   this control keeps the site's black steel in every state. */
.mf-showreel__toggle:focus{background:rgba(0,0,0,.72);color:#fff;border-color:rgba(255,255,255,.55);
  text-decoration:none}
.mf-showreel__toggle:hover,.mf-showreel__toggle:focus-visible{background:#000;color:#fff;
  border-color:var(--mf-gold,#a28114)}
.mf-showreel__toggle:focus-visible{outline:2px solid var(--mf-gold,#a28114);outline-offset:2px}
.mf-showreel__icon{display:block;width:28px;height:28px;fill:currentColor}
.mf-showreel__icon--pause{display:none}

/* Playing: small control, bottom right of the panel. */
.mf-showreel.is-playing .mf-showreel__toggle{left:auto;top:auto;right:14px;bottom:14px;
  width:44px;height:44px;transform:none}
.mf-showreel.is-playing .mf-showreel__icon{width:22px;height:22px}
.mf-showreel.is-playing .mf-showreel__icon--play{display:none}
.mf-showreel.is-playing .mf-showreel__icon--pause{display:block}

/* Until the script has decided whether the reel can autoplay, the control is
   not drawn: it would otherwise flash in the middle of the poster for a
   moment on every visit where the reel simply starts. */
.mf-showreel--pending .mf-showreel__toggle{visibility:hidden}

@media (prefers-reduced-motion:reduce){
  .mf-showreel__toggle{transition:none}
}