/* --- Nexacore Astrology celestial background (homepage only) --- */
.celestial-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
  content-visibility: auto;
}

.celestial-bg--paused,
.celestial-bg--paused * {
  animation-play-state: paused !important;
}

.celestial-bg__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 110% 80% at 50% -20%, rgba(16, 185, 129, 0.22), transparent 58%),
    radial-gradient(ellipse 75% 55% at 95% 35%, rgba(6, 95, 70, 0.35), transparent 52%),
    radial-gradient(ellipse 65% 50% at 5% 80%, rgba(140, 80, 180, 0.14), transparent 48%),
    radial-gradient(ellipse 50% 40% at 70% 75%, rgba(220, 100, 140, 0.1), transparent 45%),
    linear-gradient(165deg, #020a07 0%, #120608 28%, #1a0a12 52%, #150810 78%, #04130e 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 200% 200%;
  animation: celestialGradientShift 50s ease-in-out infinite;
}

.celestial-bg__aurora {
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(20, 184, 166, 0.06) 22%,
      rgba(140, 80, 180, 0.09) 48%,
      rgba(6, 95, 70, 0.08) 72%,
      rgba(20, 184, 166, 0.05) 88%,
      transparent 100%
    );
  background-size: 300% 100%;
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: celestialAuroraSweep 38s ease-in-out infinite;
}

.celestial-bg__luminaries {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.celestial-bg__sun {
  position: absolute;
  top: clamp(2rem, 5vh, 4.5rem);
  right: clamp(1.25rem, 4vw, 3.5rem);
  width: clamp(52px, 8vmin, 76px);
  height: clamp(52px, 8vmin, 76px);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, #ecfdf5 0%, #6ee7b7 22%, #34d399 48%, #10b981 78%, #047857 100%);
  box-shadow:
    0 0 48px rgba(16, 185, 129, 0.55),
    0 0 100px rgba(20, 184, 166, 0.35),
    0 0 160px rgba(16, 185, 129, 0.15);
  animation: celestialSunPulse 9s ease-in-out infinite;
}

.celestial-bg__sun::before {
  content: '';
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 12deg,
    rgba(255, 220, 140, 0.35) 12deg 18deg,
    transparent 18deg 42deg,
    rgba(255, 200, 100, 0.28) 42deg 48deg,
    transparent 48deg 72deg,
    rgba(255, 220, 140, 0.32) 72deg 78deg,
    transparent 78deg 102deg,
    rgba(255, 200, 100, 0.28) 102deg 108deg,
    transparent 108deg 132deg,
    rgba(255, 220, 140, 0.35) 132deg 138deg,
    transparent 138deg 162deg,
    rgba(255, 200, 100, 0.28) 162deg 168deg,
    transparent 168deg 192deg,
    rgba(255, 220, 140, 0.32) 192deg 198deg,
    transparent 198deg 222deg,
    rgba(255, 200, 100, 0.28) 222deg 228deg,
    transparent 228deg 252deg,
    rgba(255, 220, 140, 0.35) 252deg 258deg,
    transparent 258deg 282deg,
    rgba(255, 200, 100, 0.28) 282deg 288deg,
    transparent 288deg 312deg,
    rgba(255, 220, 140, 0.32) 312deg 318deg,
    transparent 318deg 360deg
  );
  opacity: 0.7;
  animation: celestialSunRotate 140s linear infinite;
}

.celestial-bg__moon {
  position: absolute;
  top: clamp(2.5rem, 6vh, 5rem);
  left: clamp(1.25rem, 4vw, 3.5rem);
  width: clamp(44px, 6.5vmin, 62px);
  height: clamp(44px, 6.5vmin, 62px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 38% 38%, #fffef8 0%, #e8e4dc 55%, #c8c4bc 100%);
  box-shadow:
    0 0 36px rgba(245, 247, 255, 0.28),
    0 0 72px rgba(180, 200, 255, 0.12),
    inset -4px -4px 12px rgba(255, 255, 255, 0.15);
  animation: celestialMoonFloat 16s ease-in-out infinite;
}

.celestial-bg__moon::after {
  content: '';
  position: absolute;
  top: -6%;
  right: -22%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: #120608;
  box-shadow: inset 8px 0 16px rgba(0, 0, 0, 0.35);
}

.celestial-bg__zodiac-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(90vmin, 720px);
  height: min(90vmin, 720px);
  margin: calc(min(90vmin, 720px) / -2) 0 0 calc(min(90vmin, 720px) / -2);
}

.celestial-bg__zodiac {
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.celestial-bg__stars-parallax {
  position: absolute;
  inset: 0;
}

.celestial-bg__stars-parallax[data-parallax-layer] {
  will-change: transform;
}

.celestial-zodiac__ring {
  width: 100%;
  height: 100%;
  animation: celestialZodiacSpin 240s linear infinite;
}

.celestial-zodiac__symbols {
  transform-origin: 100px 100px;
  animation: celestialZodiacSpin 240s linear infinite reverse;
}

.celestial-bg__constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

.celestial-bg__stars {
  position: absolute;
  inset: 0;
}

.celestial-bg__stars--far {
  animation: celestialStarDriftFar 180s linear infinite;
}

.celestial-bg__stars--mid {
  animation: celestialStarDriftMid 140s linear infinite;
}

.celestial-bg__stars--near {
  animation: celestialStarDriftNear 100s linear infinite;
}

.celestial-star {
  position: absolute;
  left: var(--star-left);
  top: var(--star-top);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(var(--star-size) * 2.5) rgba(245, 247, 255, 0.4);
  opacity: var(--star-opacity);
  animation: celestialTwinkle var(--twinkle-duration) ease-in-out infinite;
  animation-delay: var(--twinkle-delay);
}

.celestial-bg__stars--far .celestial-star {
  animation-name: celestialTwinkleFar;
  animation-timing-function: ease-in-out;
}

.celestial-bg__stars--mid .celestial-star {
  animation-name: celestialTwinkleMid;
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

.celestial-bg__stars--near .celestial-star {
  animation-name: celestialTwinkleNear;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.celestial-bg__stars--far .celestial-star:nth-child(4n+2) {
  animation-delay: calc(var(--twinkle-delay) + 0.55s);
}

.celestial-bg__stars--far .celestial-star:nth-child(5n+3) {
  animation-duration: calc(var(--twinkle-duration) * 1.12);
}

.celestial-bg__stars--mid .celestial-star:nth-child(3n+1) {
  animation-delay: calc(var(--twinkle-delay) + 0.35s);
}

.celestial-bg__stars--mid .celestial-star:nth-child(7n) {
  animation-duration: calc(var(--twinkle-duration) * 0.92);
}

.celestial-bg__stars--near .celestial-star:nth-child(2n) {
  animation-delay: calc(var(--twinkle-delay) + 0.2s);
}

.celestial-bg__stars--near .celestial-star:nth-child(6n+4) {
  animation-duration: calc(var(--twinkle-duration) * 0.85);
}

.celestial-star:nth-child(3n) {
  background: var(--gold-light);
  box-shadow: 0 0 5px rgba(20, 184, 166, 0.55);
}

.celestial-star:nth-child(5n) {
  background: rgba(255, 200, 220, 0.9);
}

.celestial-star:nth-child(7n) {
  background: rgba(180, 160, 255, 0.85);
}

.celestial-star--bright {
  box-shadow:
    0 0 calc(var(--star-size) * 4) rgba(245, 247, 255, 0.65),
    0 0 8px rgba(20, 184, 166, 0.7);
}

.celestial-bg__stars--far .celestial-star--bright {
  animation-name: celestialTwinkleBrightFar;
}

.celestial-bg__stars--mid .celestial-star--bright {
  animation-name: celestialTwinkleBrightMid;
}

.celestial-bg__stars--near .celestial-star--bright {
  animation-name: celestialTwinkleBrightNear;
}

.celestial-bg__shooters {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.celestial-shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(245, 247, 255, 0.15) 30%, rgba(245, 247, 255, 0.95) 55%, transparent 100%);
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.5);
  opacity: 0;
  transform: rotate(-38deg);
  pointer-events: none;
}

.celestial-shooting-star--1 {
  top: 12%;
  left: -10%;
  animation: celestialShoot1 28s ease-in-out infinite;
}

.celestial-shooting-star--2 {
  top: 38%;
  left: 60%;
  animation: celestialShoot2 42s ease-in-out infinite;
  animation-delay: 14s;
}

.celestial-shooting-star--3 {
  top: 62%;
  left: 20%;
  animation: celestialShoot3 36s ease-in-out infinite;
  animation-delay: 26s;
}

.celestial-bg__particles {
  position: absolute;
  inset: 0;
}

.celestial-particle {
  position: absolute;
  left: var(--p-left);
  bottom: -8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(245, 247, 255, 0.35);
  opacity: 0;
  animation: celestialParticleDrift var(--p-duration) linear infinite;
  animation-delay: var(--p-delay);
}

.celestial-bg__bokeh {
  position: absolute;
  inset: 0;
}

.celestial-bg__bokeh[data-parallax-layer] {
  will-change: transform;
}

.celestial-bokeh {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.58;
  animation: celestialBokehPulse 6s ease-in-out infinite;
}

.celestial-bokeh--path-a {
  animation:
    celestialBokehPulse 6s ease-in-out infinite,
    celestialFloatPathA 22s ease-in-out infinite;
}

.celestial-bokeh--path-b {
  animation:
    celestialBokehPulse 7s ease-in-out infinite,
    celestialFloatPathB 26s ease-in-out infinite;
}

.celestial-bokeh--path-c {
  animation:
    celestialBokehPulse 5.5s ease-in-out infinite,
    celestialFloatPathC 20s ease-in-out infinite;
}

.celestial-bokeh--halo::after {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px solid rgba(20, 184, 166, 0.22);
  box-shadow:
    0 0 48px rgba(20, 184, 166, 0.12),
    inset 0 0 32px rgba(20, 184, 166, 0.06);
  animation: celestialHaloPulse 5s ease-in-out infinite;
  pointer-events: none;
}

.celestial-bokeh--gold {
  background: radial-gradient(circle, rgba(20, 184, 166, 0.52) 0%, rgba(20, 184, 166, 0.12) 45%, transparent 72%);
}

.celestial-bokeh--purple {
  background: radial-gradient(circle, rgba(140, 80, 180, 0.42) 0%, transparent 72%);
}

.celestial-bokeh--pink {
  background: radial-gradient(circle, rgba(220, 100, 140, 0.36) 0%, transparent 72%);
}

.celestial-bokeh--muted {
  background: radial-gradient(circle, rgba(180, 160, 200, 0.28) 0%, transparent 72%);
}

.celestial-bokeh--maroon {
  background: radial-gradient(circle, rgba(6, 95, 70, 0.48) 0%, transparent 72%);
}

.celestial-bokeh--1 { width: 480px; height: 480px; top: -10%; right: -8%; }
.celestial-bokeh--2 { width: 400px; height: 400px; bottom: 8%; left: -10%; animation-delay: -6s, -4s; }
.celestial-bokeh--3 { width: 320px; height: 320px; top: 32%; left: 20%; opacity: 0.48; animation-delay: -9s, -7s; }
.celestial-bokeh--4 { width: 240px; height: 240px; top: 58%; right: 16%; animation-delay: -2s, -11s; }
.celestial-bokeh--5 { width: 360px; height: 360px; bottom: -6%; right: 28%; animation-delay: -12s, -9s; }
.celestial-bokeh--6 { width: 520px; height: 520px; top: 12%; left: -14%; opacity: 0.5; animation-delay: -14s, -13s; }
.celestial-bokeh--7 { width: 280px; height: 280px; top: 6%; right: 32%; animation-delay: -5s, -5s; }
.celestial-bokeh--8 { width: 220px; height: 220px; bottom: 22%; left: 42%; opacity: 0.4; animation-delay: -16s, -15s; }

/* Hero legibility over celestial backdrop */
body.has-celestial-bg .hero h1 {
  text-shadow:
    0 2px 48px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(20, 184, 166, 0.1);
}

body.has-celestial-bg .hero h1 .gradient-text {
  filter: drop-shadow(0 0 24px rgba(20, 184, 166, 0.28));
}

body.has-celestial-bg .hero-sub,
body.has-celestial-bg .hero-trust p {
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.65);
}

body.has-celestial-bg .hero-badge {
  box-shadow: 0 0 32px rgba(16, 185, 129, 0.12);
}

body.has-celestial-bg .hero .btn-primary {
  box-shadow:
    0 4px 32px rgba(20, 184, 166, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.has-celestial-bg .hero .btn-ghost {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

@keyframes celestialGradientShift {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 50%; }
  50% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 100% 50%; }
}

@keyframes celestialAuroraSweep {
  0%, 100% { background-position: 0% 50%; opacity: 0.7; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes celestialZodiacSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes celestialTwinkle {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); filter: brightness(1); }
  50% { opacity: calc(var(--star-opacity) + 0.25); transform: scale(1.2); filter: brightness(1.15); }
}

@keyframes celestialTwinkleFar {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); filter: brightness(0.95); }
  35% { opacity: calc(var(--star-opacity) * 0.82); transform: scale(0.92); }
  68% { opacity: calc(var(--star-opacity) + 0.12); transform: scale(1.08); filter: brightness(1.1); }
}

@keyframes celestialTwinkleMid {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
  28% { opacity: calc(var(--star-opacity) * 0.75); transform: scale(0.88); }
  52% { opacity: calc(var(--star-opacity) + 0.22); transform: scale(1.22); filter: brightness(1.2); }
  78% { opacity: calc(var(--star-opacity) + 0.08); transform: scale(1.05); }
}

@keyframes celestialTwinkleNear {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
  22% { opacity: calc(var(--star-opacity) * 0.7); transform: scale(0.85); }
  48% { opacity: calc(var(--star-opacity) + 0.35); transform: scale(1.35); filter: brightness(1.35); }
  62% { opacity: 1; transform: scale(1.42); filter: brightness(1.5); }
  82% { opacity: calc(var(--star-opacity) + 0.15); transform: scale(1.1); }
}

@keyframes celestialTwinkleBright {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
  40% { opacity: 1; transform: scale(1.5); }
  55% { opacity: 0.95; transform: scale(1.65); box-shadow: 0 0 14px rgba(20, 184, 166, 0.85); }
}

@keyframes celestialTwinkleBrightFar {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); filter: brightness(1); }
  45% { opacity: 0.92; transform: scale(1.35); box-shadow: 0 0 10px rgba(20, 184, 166, 0.65); }
  58% { opacity: 1; transform: scale(1.45); box-shadow: 0 0 12px rgba(20, 184, 166, 0.75); }
}

@keyframes celestialTwinkleBrightMid {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
  38% { opacity: 0.88; transform: scale(1.42); }
  52% { opacity: 1; transform: scale(1.58); box-shadow: 0 0 14px rgba(20, 184, 166, 0.8); filter: brightness(1.4); }
  64% { opacity: 0.96; transform: scale(1.62); box-shadow: 0 0 18px rgba(245, 247, 255, 0.5); }
}

@keyframes celestialTwinkleBrightNear {
  0%, 100% { opacity: var(--star-opacity); transform: scale(1); }
  32% { opacity: 0.85; transform: scale(1.38); }
  50% { opacity: 1; transform: scale(1.72); box-shadow: 0 0 16px rgba(20, 184, 166, 0.9), 0 0 28px rgba(245, 247, 255, 0.45); filter: brightness(1.6); }
  58% { opacity: 1; transform: scale(1.8); box-shadow: 0 0 20px rgba(20, 184, 166, 0.95); }
  72% { opacity: 0.94; transform: scale(1.55); }
}

@keyframes celestialSunPulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow:
      0 0 48px rgba(16, 185, 129, 0.5),
      0 0 100px rgba(20, 184, 166, 0.3),
      0 0 160px rgba(16, 185, 129, 0.12);
  }
  50% {
    filter: brightness(1.12);
    box-shadow:
      0 0 64px rgba(16, 185, 129, 0.65),
      0 0 120px rgba(20, 184, 166, 0.42),
      0 0 200px rgba(16, 185, 129, 0.2);
  }
}

@keyframes celestialSunRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes celestialMoonFloat {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  33% { transform: translate(6px, -10px) rotate(1deg); }
  66% { transform: translate(-4px, 6px) rotate(-1deg); }
}

@keyframes celestialStarDriftFar {
  from { transform: translateY(0); }
  to { transform: translateY(-24px); }
}

@keyframes celestialStarDriftMid {
  from { transform: translateY(0); }
  to { transform: translateY(-48px); }
}

@keyframes celestialStarDriftNear {
  from { transform: translateY(0); }
  to { transform: translateY(-72px); }
}

@keyframes celestialShoot1 {
  0%, 94%, 100% { opacity: 0; transform: translate(-120px, 0) rotate(-38deg); }
  95% { opacity: 1; }
  98% { opacity: 0.6; transform: translate(55vw, 28vh) rotate(-38deg); }
}

@keyframes celestialShoot2 {
  0%, 96%, 100% { opacity: 0; transform: translate(0, 0) rotate(-42deg) scaleX(0.8); }
  97% { opacity: 0.9; }
  99% { opacity: 0; transform: translate(42vw, 22vh) rotate(-42deg) scaleX(1.1); }
}

@keyframes celestialShoot3 {
  0%, 95%, 100% { opacity: 0; transform: translate(-80px, 40px) rotate(-35deg); }
  96% { opacity: 1; }
  99% { opacity: 0; transform: translate(38vw, 18vh) rotate(-35deg); }
}

@keyframes celestialParticleDrift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.5; }
  92% { opacity: 0.35; }
  100% { transform: translateY(-110vh) translateX(30px); opacity: 0; }
}

@keyframes celestialBokehPulse {
  0%, 100% { opacity: 0.48; filter: blur(88px); }
  50% { opacity: 0.68; filter: blur(96px); }
}

@keyframes celestialHaloPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

@keyframes celestialFloatPathA {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(36px, -28px); }
  50% { transform: translate(8px, -52px); }
  75% { transform: translate(-32px, -18px); }
}

@keyframes celestialFloatPathB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-28px, 24px) scale(1.05); }
  66% { transform: translate(32px, -16px) scale(0.97); }
}

@keyframes celestialFloatPathC {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(22px, 18px); }
  40% { transform: translate(-18px, 32px); }
  60% { transform: translate(-34px, -12px); }
  80% { transform: translate(16px, -28px); }
}

@media (max-width: 767.98px) {
  .celestial-bg__aurora,
  .celestial-bg__shooters {
    display: none !important;
  }

  .celestial-bg__stars--far .celestial-star:nth-child(n+4),
  .celestial-bg__stars--mid .celestial-star:nth-child(n+4),
  .celestial-bg__stars--near .celestial-star:nth-child(n+3) {
    display: none;
  }

  .celestial-bg__particles {
    display: none;
  }

  .celestial-bokeh--3,
  .celestial-bokeh--4,
  .celestial-bokeh--5,
  .celestial-bokeh--6,
  .celestial-bokeh--7,
  .celestial-bokeh--8 {
    display: none;
  }

  .celestial-bg__zodiac-wrap,
  .celestial-bg__constellation {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celestial-bg__gradient,
  .celestial-bg__aurora,
  .celestial-bg__sun,
  .celestial-bg__sun::before,
  .celestial-bg__moon,
  .celestial-zodiac__ring,
  .celestial-zodiac__symbols,
  .celestial-bg__stars,
  .celestial-star,
  .celestial-shooting-star,
  .celestial-particle,
  .celestial-bokeh,
  .celestial-bokeh--halo::after {
    animation: none !important;
  }

  .celestial-bg__stars-parallax,
  .celestial-bg__bokeh,
  .celestial-bg__zodiac-wrap,
  .celestial-bg__sun,
  .celestial-bg__moon {
    transform: none !important;
  }

  .celestial-shooting-star,
  .celestial-particle {
    display: none;
  }
}