/* Light Rays Effect - CSS Based */
.light-rays-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.4;
}

.light-rays {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    rgba(177, 158, 239, 0.15) 10deg,
    transparent 20deg,
    transparent 30deg,
    rgba(82, 39, 255, 0.1) 40deg,
    transparent 50deg,
    transparent 70deg,
    rgba(177, 158, 239, 0.12) 80deg,
    transparent 90deg,
    transparent 110deg,
    rgba(82, 39, 255, 0.08) 120deg,
    transparent 130deg,
    transparent 150deg,
    rgba(177, 158, 239, 0.15) 160deg,
    transparent 170deg,
    transparent 190deg,
    rgba(82, 39, 255, 0.1) 200deg,
    transparent 210deg,
    transparent 230deg,
    rgba(177, 158, 239, 0.12) 240deg,
    transparent 250deg,
    transparent 270deg,
    rgba(82, 39, 255, 0.08) 280deg,
    transparent 290deg,
    transparent 310deg,
    rgba(177, 158, 239, 0.1) 320deg,
    transparent 330deg,
    transparent 350deg,
    rgba(82, 39, 255, 0.12) 360deg
  );
  animation: rotateRays 60s linear infinite;
  filter: blur(30px);
}

.light-rays::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(177, 158, 239, 0.3) 0%,
    rgba(82, 39, 255, 0.15) 20%,
    transparent 60%
  );
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes rotateRays {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .light-rays {
    animation: none;
  }
  .light-rays::after {
    animation: none;
  }
}