/* ============================================================
   INDIVIDUATION — atmosphere
   A decorative layer BEHIND all content. Keeps the brutalist bones of
   "Carbon & Flame" and adds depth: starfield, slow aurora, constellation,
   film grain. Night = observatory; Dawn = warm paper.
   Rules: never intercepts pointer events, animates only transform/opacity,
   freezes under prefers-reduced-motion.
   ============================================================ */

.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Content sits above the atmosphere. (.site-header is already z-index 100.) */
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ---- Starfield (night only) ---- */
.atmos-stars {
  position: absolute;
  inset: -6%;
  background-image:
    radial-gradient(1.2px 1.2px at 18px 26px, rgba(255, 255, 255, 0.42), transparent 60%),
    radial-gradient(1px 1px at 132px 88px, rgba(255, 255, 255, 0.28), transparent 60%),
    radial-gradient(1.6px 1.6px at 76px 158px, rgba(255, 255, 255, 0.20), transparent 60%),
    radial-gradient(1.3px 1.3px at 210px 40px, rgba(241, 80, 37, 0.30), transparent 60%);
  background-size: 240px 240px, 310px 310px, 420px 420px, 560px 560px;
  /* alternate + short distance = perpetual drift with no seam jump */
  animation: atmosStars 180s ease-in-out infinite alternate;
  transition: opacity 0.6s var(--ease-out);
}

@keyframes atmosStars {
  to { transform: translate3d(-58px, -38px, 0); }
}

/* ---- Aurora ---- */
.atmos-aurora {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.atmos-aurora-a {
  width: 78vmax; height: 78vmax;
  left: -24vmax; top: -28vmax;
  background: radial-gradient(circle at 50% 50%, rgba(241, 80, 37, 0.11), rgba(241, 80, 37, 0) 62%);
  animation: atmosDriftA 58s ease-in-out infinite alternate;
}

.atmos-aurora-b {
  width: 66vmax; height: 66vmax;
  right: -22vmax; bottom: -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(96, 116, 214, 0.13), rgba(96, 116, 214, 0) 62%);
  animation: atmosDriftB 74s ease-in-out infinite alternate;
}

@keyframes atmosDriftA {
  to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}
@keyframes atmosDriftB {
  to { transform: translate3d(-5vmax, -3vmax, 0) scale(1.08); }
}

/* ---- Constellation ---- */
.atmos-constellation {
  position: absolute;
  top: 14vh;
  right: 3vw;
  width: min(30vw, 330px);
  height: auto;
  color: var(--text);
  opacity: 0.10;
  transition: opacity 0.6s var(--ease-out);
}

/* ---- Film grain (both themes — this is what makes it feel photographed) ---- */
.atmos-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Dawn: paper, not night ---- */
[data-theme="dawn"] .atmos-stars { opacity: 0; }
[data-theme="dawn"] .atmos-aurora-a {
  background: radial-gradient(circle at 50% 50%, rgba(241, 80, 37, 0.08), rgba(241, 80, 37, 0) 62%);
}
[data-theme="dawn"] .atmos-aurora-b {
  background: radial-gradient(circle at 50% 50%, rgba(192, 152, 120, 0.16), rgba(192, 152, 120, 0) 62%);
}
[data-theme="dawn"] .atmos-constellation { opacity: 0.07; }
[data-theme="dawn"] .atmos-grain { opacity: 0.022; }

/* The Reading Room is a dense app surface — keep it maximally legible.
   (MotionProvider also skips that route entirely; this covers the frame
   during a client-side transition.) */
.reading-body .atmos { display: none; }

/* ---- The one place glow is allowed: a faint halo alongside the hard shadow ---- */
.btn:hover { box-shadow: 5px 5px 0 var(--text), 0 0 26px rgba(241, 80, 37, 0.20); }
.btn.solid:hover { box-shadow: 5px 5px 0 var(--accent), 0 0 26px rgba(241, 80, 37, 0.20); }
.card:hover { box-shadow: 6px 6px 0 var(--accent), 0 0 30px rgba(241, 80, 37, 0.13); }

/* ---- Moon-phase divider ---- */
.moon-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 2rem;
  color: var(--muted);
}
.moon-divider::before,
.moon-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: var(--line);
}
.moon-phase {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  flex-shrink: 0;
}
.moon-phase.full { background: var(--accent); }
.moon-phase.half {
  background: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%);
}

@media (prefers-reduced-motion: reduce) {
  .atmos-stars,
  .atmos-aurora { animation: none !important; }
}