/* ── Cosmic Backdrop: deep space with nebula glow layers ── */
.cosmic-backdrop {
  position: relative;
  background: var(--cosmic-void);
  overflow: hidden;
}

/* Nebula glow layer — pools of colored light that slowly breathe */
.cosmic-backdrop::before {
  content: '';
  position: absolute;
  inset: -5% -5%;
  background:
    radial-gradient(ellipse 80vw 50vh at 20% 12%, rgba(124, 58, 237, 0.14), transparent 65%),
    radial-gradient(ellipse 60vw 70vh at 85% 8%, rgba(59, 130, 246, 0.09), transparent 65%),
    radial-gradient(ellipse 50vw 40vh at 45% 50%, rgba(168, 85, 247, 0.06), transparent 60%),
    radial-gradient(ellipse 70vw 50vh at 10% 75%, rgba(59, 130, 246, 0.05), transparent 60%),
    radial-gradient(ellipse 60vw 35vh at 80% 85%, rgba(219, 39, 119, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: nebulaDrift 30s ease-in-out infinite alternate;
}

@keyframes nebulaDrift {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0.85; }
  33%  { transform: translate(0.8%, -0.4%) scale(1.015); opacity: 1; }
  66%  { transform: translate(-0.4%, 0.3%) scale(1.008); opacity: 0.92; }
  100% { transform: translate(0.3%, -0.2%) scale(1.01);  opacity: 0.95; }
}

.cosmic-backdrop > * {
  position: relative;
  z-index: 1;
}

/* ── Starfield ── */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.star--glow {
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
}

.star--accent {
  background: var(--color-accent);
  box-shadow: 0 0 8px 3px rgba(102, 220, 126, 0.35);
}

.star--blue {
  background: #93A3FF;
  box-shadow: 0 0 8px 3px rgba(147, 163, 255, 0.3);
}

.star--warm {
  background: var(--color-warm);
  box-shadow: 0 0 8px 3px rgba(251, 191, 36, 0.25);
}

.star--twinkle {
  animation: twinkle var(--twinkle-duration, 5s) ease-in-out var(--twinkle-delay, 0s) infinite alternate;
}

@keyframes twinkle {
  0% { opacity: 0.2; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* ── Shooting stars ── */
.shooting-star {
  position: absolute;
  width: 80px;
  height: 1px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.7), transparent);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}

@keyframes shoot {
  0% {
    opacity: 0;
    transform: var(--shoot-angle, rotate(30deg)) translateX(0);
  }
  8% { opacity: 1; }
  100% {
    opacity: 0;
    transform: var(--shoot-angle, rotate(30deg)) translateX(300px);
  }
}

/* ── Cosmic dust particles ── */
.cosmic-dust {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 0;
  animation: dustDrift var(--dust-dur, 20s) linear var(--dust-del, 0s) infinite;
}

@keyframes dustDrift {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% { opacity: var(--dust-o, 0.3); }
  92% { opacity: var(--dust-o, 0.3); }
  100% {
    transform: translate(var(--dust-dx, 80px), var(--dust-dy, -40px));
    opacity: 0;
  }
}

/* ── Constellation lines ── */
.constellation-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.constellation-lines line {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 0.5;
}

.constellation-group {
  animation: constellationPulse var(--c-dur, 12s) ease-in-out var(--c-del, 0s) infinite alternate;
}

@keyframes constellationPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* ── Rocket flyby ── */
.cosmic-rocket {
  position: absolute;
  width: 60px;
  height: 2px;
  pointer-events: none;
  z-index: 0;
}

/* Rocket head — bright dot with warm glow */
.cosmic-rocket::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px 2px rgba(251, 191, 36, 0.6);
}

/* Exhaust trail — warm gradient */
.cosmic-rocket::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 0;
  width: 56px;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(251, 191, 36, 0.12), rgba(255, 160, 60, 0.35));
  border-radius: 1px;
}

@keyframes rocketFly {
  0% {
    opacity: 0;
    transform: var(--rocket-angle, rotate(-10deg)) translateX(0);
  }
  4% { opacity: 1; }
  88% { opacity: 1; }
  100% {
    opacity: 0;
    transform: var(--rocket-angle, rotate(-10deg)) translateX(100vw);
  }
}

/* ── Dark section gradient ── */
.dark-section {
  background: linear-gradient(to bottom, var(--dark-start), var(--dark-end));
  position: relative;
  overflow: hidden;
}

/* ── CTA gradient with subtle shimmer ── */
.cta-gradient {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(168, 85, 247, 0.08), rgba(124, 58, 237, 0.2));
  background-size: 200% 200%;
  animation: ctaShimmer 10s ease-in-out infinite;
  border-top: 1px solid rgba(124, 58, 237, 0.12);
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
}

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

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .star--twinkle,
  .cosmic-dust,
  .constellation-group,
  .cosmic-backdrop::before,
  .cta-gradient {
    animation: none !important;
  }
  .shooting-star,
  .cosmic-rocket {
    display: none !important;
  }
}