:where([data-hero-scene]) {
  position: relative;
  width: 100%;
  min-height: 380px;
  aspect-ratio: 1.36;
  isolation: isolate;
  contain: layout paint;
}
.hero-scene__canvas,
.hero-scene__fallback {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
}
.hero-scene__canvas { opacity: 0; transition: opacity .35s ease; }
[data-scene-state="ready"] .hero-scene__canvas { opacity: 1; }
[data-scene-state="ready"] .hero-scene__fallback { opacity: 0; }
.hero-scene__fallback { transition: opacity .35s ease; pointer-events: none; }
[data-motion-toggle] { cursor: pointer; }
[data-motion-toggle]:disabled { cursor: default; }
@media (max-width: 600px) {
  [data-hero-scene] { min-height: 290px; aspect-ratio: 1.18; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene__canvas, .hero-scene__fallback { transition: none; }
}