/* ═══════════════════════════════════════════════════════════════════
   COSMIC ANIMATED BACKGROUND — Start My Numbers
   Premium numerology/astrology full-page background system.

   CUSTOMIZATION GUIDE (search for these tags):
   [COLOR]     — palette & opacity tweaks
   [SPEED]     — animation duration / timing
   [DENSITY]   — number of particles, numbers, etc.
   [INTENSITY] — glow strength, blur radius
   ═══════════════════════════════════════════════════════════════════ */

/* ── Global background wrapper ────────────────────────────────────
   Covers the full page behind all content. */
#cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Canvas layers inside #cosmic-bg */
#cosmic-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Section-specific atmospheric overlays ─────────────────────── */

/* Shared base for all section overlays */
.cosmic-overlay {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 1;
}

/* Hero — strongest glow, warm gold radiance  [INTENSITY] */
#hero {
  position: relative;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* [COLOR] Hero warm glow */
  background:
    radial-gradient(ellipse 60% 50% at 75% 40%,
      rgba(212, 175, 55, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 60%,
      rgba(212, 175, 55, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Features — subtle gold shimmer  [INTENSITY] */
#features::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 40% at 80% 30%,
      rgba(212, 175, 55, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* Screenshots — slightly richer glow near showcase */
#screenshots::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(212, 175, 55, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Contact & Footer — calm, minimal  [INTENSITY] */
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 40% at 50% 80%,
      rgba(212, 175, 55, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* ── Vignette overlay — full-page depth  [INTENSITY] ──────────── */
#cosmic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* [COLOR] Vignette darkness — increase stops for darker edges */
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 50%,
    rgba(12, 18, 10, 0.4) 100%
  );
  pointer-events: none;
}

/* ── Sacred geometry ring (CSS-only, decorative) ──────────────── */
.cosmic-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* [COLOR] Ring color */
  border: 1px solid rgba(212, 175, 55, 0.07);
}

.cosmic-ring--1 {
  width: 700px;
  height: 700px;
  top: 15%;
  right: -100px;
  /* [SPEED] Ring rotation speed */
  animation: cosmicSpin 120s linear infinite;
}

.cosmic-ring--2 {
  width: 480px;
  height: 480px;
  top: 20%;
  right: 0px;
  border-style: dashed;
  border-color: rgba(212, 175, 55, 0.05);
  animation: cosmicSpin 90s linear infinite reverse;
}

.cosmic-ring--3 {
  width: 900px;
  height: 900px;
  bottom: 10%;
  left: -200px;
  border-color: rgba(212, 175, 55, 0.045);
  animation: cosmicSpin 150s linear infinite;
}

@keyframes cosmicSpin {
  to { transform: rotate(360deg); }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cosmic-ring {
    animation: none !important;
  }
  #cosmic-bg canvas {
    /* JS also checks this — belt-and-suspenders */
    display: none;
  }
  #hero::before,
  #features::before,
  #screenshots::before,
  #contact::before {
    /* Keep static gradients for atmosphere even without motion */
    animation: none !important;
  }
}

/* ── Mobile performance  ──────────────────────────────────────── */
@media (max-width: 768px) {
  .cosmic-ring--3 {
    display: none;
  }
  .cosmic-ring--1 {
    width: 350px;
    height: 350px;
  }
  .cosmic-ring--2 {
    width: 250px;
    height: 250px;
  }
}