/* Existing SVG backgrounds are always the base poster; optional media never changes geometry. */
[data-media-image], [data-media-clip] { position: relative; }
/* Preserve the scene positioning and the parallax overscan from base/glass.css. */
.hero .hero-scene { position: absolute; }
.slot-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
}
.slot-video.is-playing { opacity: 1; }
/* The ambient loop is texture, not the picture: it lays drifting motes over the approved still. */
.page-banner > .slot-video.is-playing { opacity: 0.3; mix-blend-mode: screen; }
[data-theme="barber"] .page-banner > .slot-video.is-playing { mix-blend-mode: soft-light; opacity: 0.45; }
.page-banner > .wrap { position: relative; z-index: 1; }
/* The ambient fallback is a slow light shift over paper/metal; hero fallback retains
   the pole, motes, lamps and CRT from world.js. Transition fallback remains theme.js. */
.page-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #c9a24a18 50%, transparent 70%);
  animation: ambient-light-shift 12s ease-in-out infinite alternate;
}
[data-theme='fallout'] .page-banner::after {
  background: linear-gradient(110deg, transparent 30%, #54f0790d 50%, transparent 70%);
}
@keyframes ambient-light-shift {
  from { opacity: .3; transform: translateX(-3%); }
  to { opacity: .7; transform: translateX(3%); }
}
/* Pause CSS clip stand-ins alongside their optional videos. */
.page-banner.media-paused::after { animation-play-state: paused; }
.theme-fx .slot-video { z-index: 2; }
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .slot-video { display: none; }
  .page-banner::after { animation: none; }
}
html.media-save-data .slot-video { display: none; }
html.media-save-data .page-banner::after,
html.media-save-data .scene-layer { animation: none; }