/* A single viewport-sized world layer survives every hash route. */
body { isolation: isolate; background-color: #090909; transition: background-color 1.5s ease-in-out; }
.stellar-background { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; background: #000; opacity: var(--stellar-opacity, 0); }
.stellar-background[hidden] { display: none; }
body.stellar-enabled { background-color: #000; }
/* Fade the physical page surface back to its original dark charcoal DURING restore,
   rather than snapping when the stellar-enabled class is removed. */
body.stellar-enabled.stellar-restoring { background-color: #090909; }
.stellar-enabled #particles { opacity: var(--original-opacity, 0); }
/* The site's original hero gradient remains the base ::after layer. Crossfade
   a distinct stellar gradient in ::before; never swap gradients in a single frame. */
.hero::after { opacity: 1; transition: opacity 1.5s ease-in-out; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.5s ease-in-out;
  background: linear-gradient(90deg, #000a 0%, #0004 40%, transparent 80%);
}
body.stellar-enabled .hero::before { opacity: 1; }
body.stellar-enabled .hero::after { opacity: 0; }
body.stellar-enabled.stellar-restoring .hero::before { opacity: 0; }
body.stellar-enabled.stellar-restoring .hero::after { opacity: 1; }
.stellar-cinematic > header, .stellar-cinematic > #app, .stellar-cinematic > footer { opacity: var(--stellar-ui-opacity, 1); pointer-events: none; }
/* The route veil still owns normal transitions, but cannot cover a cinematic
   after browser Back/Forward. Its existing timing and handlers stay intact. */
.stellar-cinematic > #page-transition { opacity: 0 !important; pointer-events: none !important; }
.stellar-cinematic { touch-action: none; }
.stellar-control { position: absolute; z-index: 3; left: 70%; bottom: 48px; transform: translateX(-50%); max-width: calc(100% - 48px); }
.stellar-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 13px; position: relative; overflow: hidden; min-height: 49px; max-width: 100%; padding: 14px 24px; color: #e1b969; background: #100e0bf0; border: 1px solid #a1844c; border-radius: 2px; box-shadow: 0 0 26px #e1b96915, inset 0 0 18px #e1b96906; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: .045em; text-align: center; transition: box-shadow .25s, border-color .25s; }
.stellar-toggle span { position: relative; z-index: 1; }
.stellar-toggle-mark { font-size: 20px; line-height: 1; font-weight: 400; flex-shrink: 0; }
.stellar-toggle::before { content: ''; position: absolute; top: -80%; left: -45%; width: 28%; height: 270%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, #e1b96966, transparent); opacity: 0; pointer-events: none; }
.stellar-toggle:hover, .stellar-toggle:focus-visible { border-color: #e1b969; box-shadow: 0 0 32px #e1b96930, inset 0 0 20px #e1b9690a; }
.stellar-toggle:hover::before, .stellar-toggle:focus-visible::before { opacity: 1; animation: eldorado-scan .8s ease-out; }
.stellar-toggle:disabled { cursor: default; }
@media (max-width: 1000px) {
  .hero:has(.stellar-control) { padding-bottom: 70px; }
  .stellar-control { left: auto; right: 24px; bottom: 28px; transform: none; }
}
@media (max-width: 750px) {
  .hero:has(.stellar-control) { padding-bottom: 50px; }
  .stellar-control { left: 24px; right: auto; bottom: 25px; }
  .stellar-toggle { padding: 12px 18px; letter-spacing: .025em; }
}
@media (prefers-reduced-motion: reduce) {
  body, .hero::before, .hero::after, .stellar-toggle { transition: none !important; }
  .stellar-toggle::before { animation: none !important; }
}