/* The panorama fills the viewport without cropping the character's hood. */
@media (min-width: 1101px) {
  .hero {
    height: clamp(700px, 74vh, 820px);
    min-height: 700px;
    background: radial-gradient(ellipse at 72% 48%, #18263066, transparent 65%), linear-gradient(#0b0d0f66, #0b0d0fcc), url('assets/stars.svg') center / 1400px 900px, #0b0d0f;
  }
  .hero-art {
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 78% 30%;
    transform-origin: 75% 50%;
  }
  .hero-art:not(.hero-cloak) {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .hero-cloak picture { display: contents; }
  .hero-cloak img { object-fit: cover; object-position: 78% 30%; }
  .hero-content { padding-top: clamp(105px, 12vh, 150px); }
  .hero h1 { max-width: 790px; font-size: clamp(60px, 4.6vw, 78px); }
  .hero-shade {
    background: linear-gradient(90deg, #080d15c4, #080d1580 34%, transparent 62%), linear-gradient(0deg, #0b0d0f, transparent 22%);
  }
}

/* Fade the transparent WebGL canvas itself so its boundary never reads as a panel. */
.scene-canvas {
  mask-image: linear-gradient(180deg, transparent, #000 6%, #000 73%, #000000b3 84%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 73%, #000000b3 84%, transparent);
}
.scene-halo {
  filter: blur(22px);
  mask-image: linear-gradient(transparent, #000 18%, #000 58%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 58%, transparent);
}

/* The opening scene is deliberately static, including global effects above it. */
.hero .hero-art { transform: none; will-change: auto; }
.hero .status-dot, .motion-active .hero .status-dot { animation: none; }
body.hero-in-view #force-field,
body.hero-in-view #nebula-field,
body.hero-in-view #starship-pass { visibility: hidden; }