/* --------------------------------------------------------------------------
   Kosmos-Ebene — lebendiger Sternenhimmel hinter Brief & Szene
   Die Canvas füllt den Viewport (fixed) und liegt hinter dem Seiteninhalt.
   -------------------------------------------------------------------------- */
.cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* hinter .page (z-index 1) und dem Brief, aber über dem Body-Verlauf */
  z-index: 0;
}

/* Tieferes, kühleres All als Grund unter dem warmen Body-Verlauf */
body::before {
  background:
    radial-gradient(42% 30% at 50% 18%, rgba(233, 200, 126, 0.09), transparent 70%),
    radial-gradient(60% 50% at 78% 82%, rgba(120, 70, 170, 0.1), transparent 70%);
}

/* Der Brief wirkt vom Sternenlicht beleuchtet, sobald er auftaucht */
.scene--letter-visible .letter-card[data-letter] {
  box-shadow:
    var(--shadow-paper),
    0 0 60px rgba(233, 200, 126, 0.18),
    0 0 130px rgba(150, 182, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  /* Statischer Himmel — die Canvas zeichnet nur ein Einzelbild */
  .cosmos {
    opacity: 0.9;
  }
}