/* Stage B. Scoped to the hero; Stage A remains available as a restoration point. */
.hero-webgl { background: #000; z-index: 1001; }
/* Place only this section above the existing page-wide noise overlay. */
body:has(.hero-webgl) .site-header { z-index: 1003; }
body:has(.hero-webgl) .nav-mobile-panel { z-index: 1002; }
.hero-webgl h1 { text-shadow: none; }
.hero-webgl .hero-inner { width: 54%; }
.hero-webgl .hero-art { z-index: 0; }
.hero-webgl .hero-stage { pointer-events: none; }
.hero-webgl .hero-inner, .hero-webgl .hero-caption { pointer-events: auto; }
.hero-webgl .hero-art::after { display: none; }
.hero-webgl .hero-3d-viewport,
.hero-webgl .hero-metal,
.hero-webgl .hero-3d-poster {
  position: absolute;
  width: min(44vw, 600px);
  height: min(44vw, 600px);
  inset: 50% max(16px, calc((100vw - 1320px) / 2)) auto auto;
  transform: translateY(-50%);
}
.hero-3d-viewport { visibility: hidden; }
.hero-3d-viewport canvas { display: block; width: 100%; height: 100%; }
.hero-webgl .hero-metal { opacity: 1; }
.hero-webgl .hero-3d-poster { object-fit: contain; }
.hero-webgl[data-hero-state="running"] .hero-3d-viewport,
.hero-webgl[data-hero-state="paused"] .hero-3d-viewport { visibility: visible; }
.hero-webgl[data-hero-state="running"] :is(.hero-metal, .hero-3d-poster),
.hero-webgl[data-hero-state="paused"] :is(.hero-metal, .hero-3d-poster) { visibility: hidden; }
.hero-webgl .hero-motion-toggle { background: #000; }
@media (min-width: 900px) {
  .hero-webgl h1 { font-size: clamp(54px, 5.35vw, 80px); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero-webgl .hero-inner { width: 55%; }
  .hero-webgl h1 { font-size: clamp(42px, 6.3vw, 56px); }
  .hero-webgl .hero-3d-viewport,
  .hero-webgl .hero-metal,
  .hero-webgl .hero-3d-poster { width: 43vw; height: 43vw; right: 0; }
}
@media (max-width: 599px) {
  .hero-webgl .hero-stage {
    min-height: 0;
    padding-top: clamp(96px, 18svh, 150px);
    padding-bottom: 84px;
    justify-content: flex-start;
  }
  .hero-webgl .hero-inner { width: 100%; }
  .hero-webgl .hero-stage { z-index: 2; }
  .hero-webgl h1 { text-shadow: 0 2px 18px #0009; }
  .hero-webgl .hero-3d-viewport,
  .hero-webgl .hero-metal,
  .hero-webgl .hero-3d-poster {
    width: clamp(320px, 100vw, 430px);
    height: clamp(320px, 100vw, 430px);
    top: 8px;
    right: 50%;
    transform: translateX(50%);
  }
  .hero-webgl .hero-art::after {
    display: block;
    z-index: 1;
    background:
      linear-gradient(180deg, transparent 0, #0000001f 140px, #000000b8 290px, #000 380px),
      linear-gradient(90deg, #000000a6, #00000047 46%, transparent 86%);
  }
  .hero-webgl .hero-mobile-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 16px;
    align-items: center;
    margin-top: 20px;
  }
  .hero-webgl .hero-mobile-support:has(.hero-motion-toggle[hidden]) { grid-template-columns: 1fr; }
  .hero-webgl .hero-mobile-support .hero-sub { margin: 0; }
  .hero-webgl .hero-motion-toggle {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #666;
    border-radius: 50%;
    background: #000c;
    color: #ccc;
    font-size: 0;
    flex-shrink: 0;
  }
  .hero-webgl .hero-motion-toggle::before {
    content: '';
    width: 10px;
    height: 12px;
    border-inline: 2px solid currentColor;
  }
  .hero-webgl .hero-motion-toggle[data-playback="paused"]::before {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-left: 9px solid currentColor;
    border-right: 0;
    margin-left: 2px;
  }
  .hero-webgl .hero-caption { padding-right: 64px; }
}