/* ============================================================
   Constellation – full-page background canvas
   ============================================================ */

/* Page background matches the sky so there is never a flash of white */
body:has(#constellation-canvas) {
  background: #0b0c0f !important;
}

/* Canvas is a fixed viewport-filling background layer */
#constellation-canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Hero container: zero-height pass-through; canvas no longer lives inside it */
.constellation-hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  background: transparent !important;
  overflow: visible;
  margin-top: 0;
}

/* Hero overlay: text + buttons pinned to the bottom-left of the viewport */
.hero-overlay {
  position: fixed !important;
  bottom: 3rem;
  left: 3rem;
  z-index: 2;
  text-align: left;
  padding: 0;
  margin: 0;
  max-width: 560px;
}

/* Constellation name label: fixed to the viewport bottom-centre */
.constellation-label {
  position: fixed !important;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--md-text-font, "Inter", sans-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 220, 255, 0.9);
  text-shadow:
    0 0 12px rgba(140, 180, 255, 0.6),
    0 0 30px rgba(100, 150, 255, 0.3);
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: none; /* driven entirely by JS */
}

/* Content areas: transparent so the starfield shows through.
   Note: do NOT set z-index here. The sidebar (.md-sidebar--primary) lives inside
   .md-main__inner; giving .md-main__inner an explicit z-index creates a stacking
   context that traps the sidebar below the header (z-index: 4), breaking the
   mobile hamburger drawer. */
body:has(#constellation-canvas) .md-main,
body:has(#constellation-canvas) .md-main__inner,
body:has(#constellation-canvas) .md-content,
body:has(#constellation-canvas) .md-content__inner {
  background: transparent !important;
}

/* Header: dark translucent glass so the starfield peeks through */
body:has(#constellation-canvas) .md-header {
  background: rgba(2, 6, 16, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(100, 150, 255, 0.12);
}

/* Optional centered variant */
.buy-button--center {
  text-align: center;
}

.buy-button--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

/* Mobile: shrink hero text so it doesn't consume too much of the screen */
@media (max-width: 600px) {
  .hero-overlay {
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: none;
  }

  .hero-overlay p:first-of-type {
    font-size: 1.7rem !important;
  }

  .hero-overlay p:nth-of-type(2) {
    font-size: 0.95rem !important;
  }
}