/* ══════════════════════════════════════════════════════════════
   ASTROLOGY BACKGROUND  v6 — CANVAS EDITION
   CSS is now MINIMAL: just the static gradient bg + canvas rule
   + section theme overlays. All animation is done in canvas JS.
══════════════════════════════════════════════════════════════ */

/* ── Base ── */
html {
  background: #080810;
  overflow-x: hidden;
  margin: 0; padding: 0;
}
body {
  background: transparent !important;
  margin: 0; padding: 0;
  overflow-x: hidden;
}

/* ── Section backgrounds: semi-transparent so canvas shows through ── */
.section-dark,
section.section-dark        { background: rgba(8,8,20,0.72)  !important; }
.section-alt,
section.section-alt         { background: rgba(14,10,32,0.68) !important; }
.mandala-bg                 { background: rgba(8,8,20,0.65)  !important; }
.page-hero                  { background: rgba(8,8,20,0.75)  !important; }
.cta-band                   { background: rgba(10,6,28,0.78)  !important; }
.footer                     { background: rgba(5,5,14,0.92)  !important; }
.hero                       { background: transparent         !important; }
.nav                        { background: rgba(8,8,20,0.88)  !important; }
.nav.scrolled               { background: rgba(8,8,20,0.97)  !important; }

/* ── #astro-bg: fixed, full-screen, CSS nebula gradients (static, free) ── */
#astro-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(ellipse 160% 100% at 10%  0%,  rgba(120,20,220,0.70) 0%, transparent 52%),
    radial-gradient(ellipse 120%  90% at 90% 100%, rgba(15,40,200,0.65)  0%, transparent 52%),
    radial-gradient(ellipse 130%  75% at  0%  85%, rgba(180,20,20,0.40)  0%, transparent 48%),
    radial-gradient(ellipse 100%  60% at 100% 12%, rgba(80,20,180,0.45)  0%, transparent 48%),
    radial-gradient(ellipse  80%  70% at 50%  50%, rgba(40,10,100,0.50)  0%, transparent 60%),
    radial-gradient(ellipse  60%  50% at 30%  60%, rgba(180,80,0,0.20)   0%, transparent 55%),
    #060612;
}

/* ── Canvas particle layer ── */
#astro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
  contain: strict; /* isolate canvas repaints from page layout */
}

/* ── Stacking order ── */
body > header,
body > main,
body > section,
body > footer,
body > nav {
  position: relative;
  z-index: 1;
}
.nav        { z-index: 100 !important; }
.nav-mobile { z-index: 100 !important; }

/* ── Ghost spacing fix ── */
html, body { padding-bottom: 0 !important; margin-bottom: 0 !important; }
footer, footer.footer { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   SCROLL SECTION THEME OVERLAYS
   Opacity transitions = GPU composited, zero repaint cost.
   One overlay active at a time via IntersectionObserver class toggle.
══════════════════════════════════════════════════════════════ */
.astro-theme-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity;
}
.astro-theme-overlay.active { opacity: 1; }

/* Hero — deep violet/cosmic (default) */
.atmo-hero {
  background:
    radial-gradient(ellipse 65% 55% at 12% 18%, rgba(130,15,240,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 88% 82%, rgba(60,10,200,0.38)  0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(201,168,76,0.08) 0%, transparent 60%);
}

/* Services — golden temple / amber */
.atmo-services {
  background:
    radial-gradient(ellipse 65% 55% at 15% 25%, rgba(220,130,5,0.42) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(180,90,0,0.35)  0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(201,168,76,0.10) 0%, transparent 60%);
}

/* Why Choose Us — royal blue / celestial authority */
.atmo-wisdom {
  background:
    radial-gradient(ellipse 65% 55% at 10% 20%, rgba(10,55,220,0.45)  0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 90% 80%, rgba(20,80,240,0.35)  0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(80,120,255,0.08) 0%, transparent 60%);
}

/* Testimonials — rose / emotional warmth */
.atmo-testimonials {
  background:
    radial-gradient(ellipse 65% 55% at 15% 30%, rgba(200,15,80,0.42)  0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 70%, rgba(150,10,55,0.35)  0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(220,80,120,0.08) 0%, transparent 60%);
}

/* CTA — fire orange / action */
.atmo-cta {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(220,90,5,0.45) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(180,40,5,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 20%, rgba(201,168,76,0.12) 0%, transparent 55%);
}

/* ── Respect prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  #astro-canvas { display: none; }
  .astro-theme-overlay { transition: none !important; }
}