/* Additive light, registered to the unchanged 2041x770 showroom plate.
   The existing cinematicV239 clock supplies --light; this layer has no clock
   of its own and never changes the normal/matrix/lights image registration. */
#device-shell .hero > .hero-visual::after {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/hero/mauto-hero-light-polish-v376.svg") center center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: clamp(0, calc(var(--light, 0) * .68), .68);
  pointer-events: none;
  transform: none;
  animation: none !important;
  transition: none !important;
}

/* The tablet's existing bitmaps and masks use contain; phone and desktop use
   centered cover. Match that registration instead of moving the Porsche. */
#device-shell[data-device="tablet"] .hero > .hero-visual::after {
  background-size: contain;
}

/* The live phone bitmap uses cover. The inherited contain mask used to place
   the light apertures on a different scale from their headlamps. */
#device-shell[data-device="mobile"] .hero > .hero-visual > .scene-layer.lights {
  -webkit-mask-size: cover !important;
  mask-size: cover !important;
}

/* The parent scene clock already pauses offscreen. Avoid keeping an additive
   compositing surface alive while that scene is outside the viewport. */
#device-shell .hero.is-offscreen > .hero-visual::after {
  display: none;
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #device-shell .hero > .hero-visual::after {
    display: none;
  }
}