/* Shared canvas and existing hero mask preserve alignment of all three assets. */
.hero .hero-art {
  /* Clean layers no longer need the old text-shaped cutout over the player. */
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 42%, #000 52%);
  pointer-events: none;
  overflow: hidden;
  /* The matching static backing prevents gaps at the moving background's edges. */
  background-image: url('../images/hero-background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hero .hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  transform: translate(var(--hero-layer-x, 0px), var(--hero-layer-y, 0px))
             rotate(var(--hero-layer-angle, 0deg));
}

.hero .hero-layer-background { z-index: 0; }
.hero .hero-layer-player { z-index: 1; }
.hero .hero-layer-foreground {
  z-index: 2;
  transform-origin: 70% 65%;
}

@media (max-width: 991.98px), (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero .hero-layer { transform: none; }
}

@media print {
  .hero .hero-layer { transform: none; }
}