/* Estilos para el efecto de luces naranjas */
.orange-lights-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

/* Fondo con gradiente */
.lights-gradient-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,2,0,0.95) 50%, rgba(30,10,0,0.9) 100%);
}

/* Grid tecnológico */
.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 106, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 106, 0, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Luces circulares */
.light-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,106,0,0.3) 0%, rgba(255,106,0,0.1) 40%, rgba(255,106,0,0) 70%);
    filter: blur(10px);
    animation: pulse 8s infinite alternate;
}

.light-lg {
    width: 300px;
    height: 300px;
    opacity: 0.7;
}

.light-md {
    width: 200px;
    height: 200px;
    opacity: 0.6;
    animation-delay: 2s;
}

.light-sm {
    width: 100px;
    height: 100px;
    opacity: 0.5;
    animation-delay: 4s;
}

/* Destellos */
.light-flare {
    position: absolute;
    background: #FF6A00;
    border-radius: 50%;
    filter: blur(5px);
    box-shadow: 0 0 20px 5px rgba(255, 106, 0, 0.7);
    animation: flare 3s infinite alternate;
}

.flare-md {
    width: 8px;
    height: 8px;
    opacity: 0.8;
}

.flare-sm {
    width: 4px;
    height: 4px;
    opacity: 0.7;
    animation-delay: 1s;
}

.flare-xs {
    width: 2px;
    height: 2px;
    opacity: 0.6;
    animation-delay: 2s;
}

/* Haces de luz */
.light-beam {
    position: absolute;
    background: linear-gradient(90deg, rgba(255,106,0,0) 0%, rgba(255,106,0,0.05) 50%, rgba(255,106,0,0) 100%);
    opacity: 0.3;
    animation: beam-fade 10s infinite alternate;
}

.beam-horizontal {
    height: 1px;
}

.beam-vertical {
    width: 1px;
}

/* Efecto de lente */
.lens-flare {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,165,0,0.7) 0%, rgba(255,106,0,0.3) 30%, rgba(255,69,0,0) 70%);
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.7;
    mix-blend-mode: screen;
    animation: lens-move 20s infinite;
    pointer-events: none;
}

/* Contenedor de partículas */
.particles-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Partícula individual (se generará con JS) */
.light-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #FF6A00;
    border-radius: 50%;
    filter: blur(1px);
}

/* Animaciones */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes flare {
    0% {
        opacity: 0.7;
        filter: blur(5px) brightness(1);
    }
    50% {
        opacity: 0.9;
        filter: blur(7px) brightness(1.3);
    }
    100% {
        opacity: 0.7;
        filter: blur(5px) brightness(1);
    }
}

@keyframes beam-fade {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.1;
    }
}

@keyframes lens-move {
    0% {
        top: 25%;
        left: 25%;
        transform: scale(1);
    }
    25% {
        top: 15%;
        left: 65%;
        transform: scale(1.2);
    }
    50% {
        top: 65%;
        left: 70%;
        transform: scale(0.8);
    }
    75% {
        top: 75%;
        left: 30%;
        transform: scale(1.1);
    }
    100% {
        top: 25%;
        left: 25%;
        transform: scale(1);
    }
}

/* Animación para partículas (se aplicará con JS) */
@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(var(--move-y)) translateX(var(--move-x));
        opacity: 0;
    }
}

/* Media queries */
@media (max-width: 768px) {
    .light-lg {
        width: 150px;
        height: 150px;
    }
    
    .light-md {
        width: 100px;
        height: 100px;
    }
    
    .light-sm {
        width: 50px;
        height: 50px;
    }
    
    .lens-flare {
        width: 120px;
        height: 120px;
    }
}