/* ============================================
   IRON EMPIRE GYM - LIGHT RAYS EFFECT
   CSS-based animated light rays
   ============================================ */

.light-rays-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

.light-rays {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translateX(-50%);
    background: conic-gradient(from 0deg at 50% 0%,
            transparent 0deg,
            rgba(255, 59, 59, 0.15) 10deg,
            transparent 20deg,
            transparent 40deg,
            rgba(255, 59, 59, 0.1) 50deg,
            transparent 60deg,
            transparent 80deg,
            rgba(255, 59, 59, 0.12) 90deg,
            transparent 100deg,
            transparent 120deg,
            rgba(255, 59, 59, 0.08) 130deg,
            transparent 140deg,
            transparent 160deg,
            rgba(255, 59, 59, 0.15) 170deg,
            transparent 180deg,
            transparent 200deg,
            rgba(255, 59, 59, 0.1) 210deg,
            transparent 220deg,
            transparent 240deg,
            rgba(255, 59, 59, 0.12) 250deg,
            transparent 260deg,
            transparent 280deg,
            rgba(255, 59, 59, 0.08) 290deg,
            transparent 300deg,
            transparent 320deg,
            rgba(255, 59, 59, 0.15) 330deg,
            transparent 340deg,
            transparent 360deg);
    animation: rotateRays 60s linear infinite;
    mix-blend-mode: screen;
}

/* Secondary layer for depth */
.light-rays-secondary {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translateX(-50%);
    background: conic-gradient(from 45deg at 50% 0%,
            transparent 0deg,
            rgba(255, 82, 82, 0.08) 15deg,
            transparent 30deg,
            transparent 60deg,
            rgba(255, 82, 82, 0.12) 75deg,
            transparent 90deg,
            transparent 120deg,
            rgba(255, 82, 82, 0.06) 135deg,
            transparent 150deg,
            transparent 180deg,
            rgba(255, 82, 82, 0.1) 195deg,
            transparent 210deg,
            transparent 240deg,
            rgba(255, 82, 82, 0.08) 255deg,
            transparent 270deg,
            transparent 300deg,
            rgba(255, 82, 82, 0.12) 315deg,
            transparent 330deg,
            transparent 360deg);
    animation: rotateRays 80s linear infinite reverse;
    mix-blend-mode: screen;
    opacity: 0.6;
}

/* Glow effect at origin */
.light-rays-glow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
            rgba(255, 59, 59, 0.3) 0%,
            rgba(255, 59, 59, 0.15) 30%,
            transparent 70%);
    animation: pulse 4s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Dust particles in the light */
.light-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: floatParticle 8s linear infinite;
    mix-blend-mode: screen;
}

.light-particle:nth-child(1) {
    left: 45%;
    animation-delay: 0s;
    animation-duration: 10s;
}

.light-particle:nth-child(2) {
    left: 50%;
    animation-delay: 2s;
    animation-duration: 12s;
}

.light-particle:nth-child(3) {
    left: 55%;
    animation-delay: 4s;
    animation-duration: 9s;
}

.light-particle:nth-child(4) {
    left: 48%;
    animation-delay: 1s;
    animation-duration: 11s;
}

.light-particle:nth-child(5) {
    left: 52%;
    animation-delay: 3s;
    animation-duration: 10s;
}

/* Animations */
@keyframes rotateRays {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        transform: translateX(-50%) rotate(360deg);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes floatParticle {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .light-rays-container {
        opacity: 0.3;
    }

    .light-rays-glow {
        width: 200px;
        height: 200px;
    }
}

/* Performance optimization */
@media (prefers-reduced-motion: reduce) {

    .light-rays,
    .light-rays-secondary {
        animation: none;
    }

    .light-particle {
        display: none;
    }

    .light-rays-glow {
        animation: none;
    }
}