/* Reference artwork lives in its own full-bleed layer; hero content keeps its layout. */
.title-page { position: relative; isolation: isolate; }
.hero-background {
  --ring-left: 7.7798%;
  --ring-top: 10.0956%;
  --ring-width: 14.3627vw;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(to bottom, #010101 0%, #010101 38%, var(--bg) 100%);
  transition: background .5s ease;
  contain: layout paint;
}
.hero-background.is-active { overflow: visible; contain: layout; }
.hero-object { position: absolute; }
.hero-arrival, .hero-float { width: 100%; height: 100%; }
.hero-object img { width: 100%; height: auto; max-width: none; }
.hero-background.is-loading .hero-arrival { opacity: 0; }
.hero-background.is-active .hero-object { will-change: transform, opacity; }

/* Reference-derived artwork stays positioned in its original composition. */
.hero-ring { left: var(--ring-left); top: var(--ring-top); width: var(--ring-width); }
.hero-sphere-top { right: 0; top: 0; width: 19.2101%; }
.hero-sphere-bottom { left: -6.5%; bottom: 0; width: 19%; aspect-ratio: 500 / 321; }
.hero-sphere-bottom img { position: absolute; left: 0; bottom: 0; width: 122.684%; }
.title-page > .tp-word,
.title-page > .tp-foot { position: relative; z-index: 1; }
.hero-star { left: 80.1915%; top: 58.9798%; width: 13.465%; }
.hero-orbit-top {
  left: calc(var(--ring-left) - var(--ring-width) * .5);
  top: calc(var(--ring-top) + var(--ring-width) * .104167);
  width: calc(var(--ring-width) * 2.0625);
}
.hero-orbit-bottom { left: 62.5374%; top: 47.8215%; width: 23.3393%; }
.hero-orbit-top, .hero-orbit-bottom { z-index: -1; }

/* Dark metal stays dark in the light theme, with no rectangular matte. */
[data-theme="light"] .hero-background { background: transparent; }
[data-theme="light"] .hero-orbit-top img,
[data-theme="light"] .hero-orbit-bottom img { filter: brightness(.35); opacity: .65; }

@media (max-width: 900px) {
  .hero-background { --ring-left: 5%; --ring-top: max(30%, calc(88px + 29vw)); --ring-width: 22vw; }
  .hero-sphere-top { width: 28%; }
  .hero-sphere-bottom { left: -21%; width: 42%; }
  .hero-star { left: 77%; top: 62%; width: 19%; }
  .hero-orbit-bottom { left: 55%; top: 48%; width: 35%; }
}
@media (max-width: 520px) {
  .hero-background { --ring-top: 25%; --ring-width: 29vw; }
  .hero-sphere-top { width: 27%; }
  .hero-sphere-bottom { left: -21.5%; width: 43%; }
  .hero-star { left: 75%; top: 61%; width: 22%; }
  .hero-orbit-bottom { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-background { transition: none; }
  .hero-background .hero-object,
  .hero-background .hero-arrival { transform: none !important; opacity: 1 !important; will-change: auto !important; }
}