/* ============================================================
   Cosmic / Universe layer — stars, aurora, comets
   Add-on module: include after styles.css, no overrides needed.
   Intensity is controlled by a body class: cosmic-a | cosmic-b | cosmic-c
   ============================================================ */

:root {
  --aurora-green: #3ddc97;
  --aurora-green-2: #1fb87f;
  --star-white: #eef2ff;
}

/* ---------- intensity tiers ---------- */
body.cosmic-a {
  --aurora-opacity: 0.10;
  --aurora-opacity-interlude: 0.16;
  --star-opacity-max: 0.55;
}
body.cosmic-b {
  --aurora-opacity: 0.18;
  --aurora-opacity-interlude: 0.26;
  --star-opacity-max: 0.75;
}
body.cosmic-c {
  --aurora-opacity: 0.26;
  --aurora-opacity-interlude: 0.38;
  --star-opacity-max: 0.9;
}

/* ---------- sitewide fixed layer (stars + optional aurora) ---------- */
.universe {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.universe__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* keep real content above the fixed layer */
.hero, .journey, .learn, .impact, .building, .story, .beliefs,
.interlude, .love, .writing, .connect, .footer, .ticker, .intro, .progress {
  position: relative;
  z-index: 1;
}

/* ---------- aurora blobs ---------- */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: auroraDrift var(--aurora-duration, 26s) ease-in-out infinite;
}
.universe__aurora .aurora-blob { opacity: var(--aurora-opacity, 0.14); }

.aurora-blob--1 {
  width: 55vw; height: 42vh; left: -12vw; top: -12vh;
  background: radial-gradient(circle, var(--aurora-green), transparent 70%);
  animation-delay: 0s;
}
.aurora-blob--2 {
  width: 60vw; height: 46vh; right: -16vw; top: 8vh;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  animation-duration: 32s;
  animation-delay: -9s;
}
.aurora-blob--3 {
  width: 52vw; height: 50vh; left: 18vw; bottom: -22vh;
  background: radial-gradient(circle, var(--aurora-green-2), transparent 70%);
  animation-duration: 38s;
  animation-delay: -18s;
}

@keyframes auroraDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(4vw, 3vh) scale(1.08); }
  66%      { transform: translate(-3vw, -2vh) scale(0.95); }
}

/* ---------- signature moment: aurora behind the interlude quote ---------- */
.interlude__aurora {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
}
.interlude__aurora .aurora-blob {
  opacity: var(--aurora-opacity-interlude, 0.2);
}
.interlude__aurora .aurora-blob--1 {
  width: 60%; height: 120%; left: -10%; top: -10%;
  background: radial-gradient(circle, var(--aurora-green), transparent 70%);
}
.interlude__aurora .aurora-blob--2 {
  width: 55%; height: 110%; right: -10%; top: -5%;
  background: radial-gradient(circle, var(--cyan), transparent 70%);
  animation-delay: -7s;
}
.interlude__inner, .interlude__credit, .interlude__en, .interlude__hindi {
  position: relative;
  z-index: 1;
}

/* cosmic-c: the manifesting quote pulses gently, like it's radiating outward */
body.cosmic-c .interlude__aurora {
  animation: manifestPulse 6s ease-in-out infinite;
}
@keyframes manifestPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------- shooting stars ----------
   Spawned one at a time by cosmic.js on a randomized, wide interval, so each
   one plays once and disappears — rare and unrepeated, like an actual wish,
   rather than a looping decoration. */
.comet {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--star-white);
  box-shadow: 0 0 6px 2px rgba(255,255,255,0.7);
  opacity: 0;
  top: var(--y, 8%);
  left: var(--x, -5%);
  transform: rotate(var(--angle, 32deg)) translateX(0);
  animation: cometStreak var(--dur, 1.6s) linear forwards;
  will-change: transform, opacity;
}
.comet::before {
  content: "";
  position: absolute;
  top: 50%; right: 100%;
  width: 90px; height: 1.5px;
  transform: translateY(-50%);
  transform-origin: right center;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85));
}
.comet--green::before { background: linear-gradient(90deg, transparent, rgba(61, 220, 151, 0.85)); }
.comet--amber::before { background: linear-gradient(90deg, transparent, rgba(242, 181, 61, 0.85)); }

/* classic shooting-star: a straight line at --angle, left-to-right and downward.
   rotate() is applied once, on .comet itself, combined with translateX — so the
   dot's path and the tail's (::before, unrotated, inherits this rigidly) orientation
   can never mismatch, unlike a separate translate(x,y)+independent rotate on each. */
@keyframes cometStreak {
  0%   { opacity: 0; transform: rotate(var(--angle, 32deg)) translateX(0); }
  10%  { opacity: 1; }
  70%  { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(var(--angle, 32deg)) translateX(var(--dist, 62vw)); }
}

/* ---------- hero cosmic glow ring (cosmic-b / cosmic-c) ---------- */
body.cosmic-b .hero__portrait, body.cosmic-c .hero__portrait {
  animation: haloPulse 5s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 60px rgba(61, 220, 151, 0.10); }
  50%      { box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 85px rgba(61, 220, 151, 0.22); }
}

/* ---------- deep nebula dust (cosmic-c only) ---------- */
.universe__nebula {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background:
    radial-gradient(40rem 30rem at 15% 20%, rgba(61, 220, 151, 0.5), transparent 70%),
    radial-gradient(46rem 34rem at 85% 70%, rgba(85, 214, 228, 0.4), transparent 70%),
    radial-gradient(38rem 30rem at 60% 15%, rgba(242, 181, 61, 0.3), transparent 70%);
}

/* ---------- mobile tuning ---------- */
@media (max-width: 600px) {
  .aurora-blob { filter: blur(46px); }
  .comet::before { width: 70px; }
}