body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 40%,
    rgba(5, 8, 15, 0.4) 70%,
    rgba(5, 8, 15, 0.7) 100%
  );
  pointer-events: none;
  z-index: 1000;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 999;
}

.chakra-ambient {
  position: fixed;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vh;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 167, 38, 0.25) 0%,
    rgba(255, 167, 38, 0.15) 30%,
    transparent 60%
  );
  animation: chakra-ambient-pulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes chakra-ambient-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
}

.glow-ring {
  position: fixed;
  border: 1px solid rgba(255, 167, 38, 0.1);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  animation: glow-ring-pulse 6s ease-out infinite;
}

.glow-ring--1 {
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -50%);
  animation-delay: 0s;
}

.glow-ring--2 {
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%);
  animation-delay: 2s;
}

.glow-ring--3 {
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 1000px;
  transform: translate(-50%, -50%);
  animation-delay: 4s;
}

@keyframes glow-ring-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    border-color: rgba(255, 167, 38, 0.05);
  }
  30% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2);
    border-color: rgba(255, 167, 38, 0.02);
  }
}

.stellar-particle {
  position: fixed;
  top: -2px;
  width: 2px;
  height: 2px;
  background: radial-gradient(
    circle,
    rgba(255, 200, 100, 0.9) 0%,
    rgba(255, 167, 38, 0.6) 40%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: stellar-fall linear infinite;
  box-shadow: 0 0 4px rgba(255, 167, 38, 0.8);
}

@keyframes stellar-fall {
  0% {
    opacity: 0;
    transform: translateY(-10vh) translateX(0);
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(110vh) translateX(20px);
  }
}

.ambient-dust {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 220, 150, 0.9) 0%,
    rgba(255, 180, 80, 0.4) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: -1;
  animation: dust-twinkle ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.6);
}

@keyframes dust-twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.3);
  }
}

.twinkling-star {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 220, 180, 0.6) 40%,
    rgba(255, 180, 100, 0.3) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  animation: star-twinkle ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255, 200, 100, 0.7);
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chakra-ambient,
  .glow-ring,
  .stellar-particle,
  .twinkling-star,
  .ambient-dust,
  body::after {
    animation: none;
    opacity: 0.02;
  }
}