/* Non-destructive cover for the mark embedded in the source's empty corner.
   Source mark bounds: approximately (54,50)–(220,217) in the 1600×900 frame.
   The opaque core contains those bounds; soft margins blend into the black
   stage. The source video, face, body mask and hand coordinates are untouched. */
.muse-hero .hero__brand-shade {
  /* Poster fallback before the first decoded frame, including no-JS/reduced motion. */
  --brand-frame-width: max(100vw, 177.777778svh, 995.555556px);
  --brand-frame-height: calc(var(--brand-frame-width) * .5625);
  --brand-frame-x: calc((100vw - var(--brand-frame-width)) * .5);
  --brand-frame-y: calc((max(100svh, 560px) - var(--brand-frame-height)) * .5);
  display: block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: calc(var(--brand-frame-x) - var(--brand-frame-width) * .025);
  top: calc(var(--brand-frame-y) - var(--brand-frame-height) * .025);
  width: calc(var(--brand-frame-width) * .26);
  height: calc(var(--brand-frame-height) * .37);
  background: #050507;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 15%, #000 68%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 77%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 15%, #000 68%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 77%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .muse-hero .hero__brand-shade {
    --brand-frame-width: 100vw;
    --brand-frame-height: 56.25vw;
    --brand-frame-x: 0px;
    --brand-frame-y: calc((100svh - 56.25vw) * .47);
  }
}
/* Only live frames consume JS geometry. Loading/set changes instantly use the
   poster's CSS geometry instead of leaving a cover at the old orientation. */
.muse-hero.is-live .hero__brand-shade {
  --brand-frame-width: var(--hero-frame-width);
  --brand-frame-height: var(--hero-frame-height);
  --brand-frame-x: var(--hero-frame-x);
  --brand-frame-y: var(--hero-frame-y);
}
/* Static story stills use the same cover, scaled with their natural 16:9 image. */
.muse-hero .hero__stills figure { position: relative; }
.muse-hero .hero__stills figure::after {
  content: '';
  position: absolute;
  pointer-events: none;
  top: 0;
  left: -2.5%;
  width: 26%;
  aspect-ratio: 416 / 333;
  background: #050507;
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 15%, #000 68%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 77%, transparent);
  mask-image:
    linear-gradient(90deg, transparent, #000 15%, #000 68%, transparent),
    linear-gradient(180deg, transparent, #000 10%, #000 77%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}