/* The existing portrait placement and fade belong to the stage. Mirroring
   transforms only the video pixels, so the hero's masks and text stay fixed. */
.hero-avatar-stage {
  overflow:hidden; pointer-events:none;
  --hero-edge-fade:28px;
  --hero-vertical-mask:linear-gradient(to bottom,#000 0%,#000 32%,rgba(0,0,0,.3) 52%,transparent 88%);
}
.hero-avatar-stage > video,
.hero-avatar-stage > img {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:contain; object-position:center top;
  transform-origin:center top;
  transform:translateY(var(--hero-shift,-7%)) scale(var(--hero-zoom,1.5)) scaleX(var(--hero-mirror,1));
}
.hero-avatar-stage > video { visibility:hidden; }
.hero-avatar-stage > video.is-active { visibility:visible; }
.hero-avatar-stage > img { z-index:1; }
.hero-avatar-stage > img[hidden] { display:none; }
/* Reveal the real page background rather than painting a second white layer.
   The transparent 2px guard prevents fractional-pixel clipping seams. Both
   gradients are static; the browser composites the mask when the video updates. */
html[data-direction="presence"] .clean-portrait .toda-cc-vid.hero-avatar-stage {
  -webkit-mask-image:linear-gradient(to right,transparent 2px,#000 var(--hero-edge-fade),#000 calc(100% - var(--hero-edge-fade)),transparent calc(100% - 2px)),var(--hero-vertical-mask);
  mask-image:linear-gradient(to right,transparent 2px,#000 var(--hero-edge-fade),#000 calc(100% - var(--hero-edge-fade)),transparent calc(100% - 2px)),var(--hero-vertical-mask);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
@media (max-width:600px) {
  .hero-avatar-stage {
    --hero-edge-fade:22px;
    --hero-vertical-mask:linear-gradient(to bottom,#000 0%,#000 26%,rgba(0,0,0,.25) 40%,transparent 65%);
  }
}