/* ========================================
   INVOX - Efectos Parallax Profesionales
   ======================================== */

/* Contenedor de Partículas */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Capas de Fondo Parallax */
.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

/* Capa 1 - Fondo Base */
.layer-1 {
    background: radial-gradient(circle at 20% 50%, rgba(107, 44, 107, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(74, 26, 74, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(139, 58, 139, 0.1) 0%, transparent 50%);
    transform: translateZ(0);
}

/* Capa 2 - Elementos Geométricos */
.layer-2 {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(171, 74, 171, 0.05) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(107, 44, 107, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(74, 26, 74, 0.03) 3px, transparent 3px);
    background-size: 100px 100px, 150px 150px, 200px 200px;
    transform: translateZ(-1px);
}

/* Capa 3 - Patrones Avanzados */
.layer-3 {
    background-image: 
        linear-gradient(45deg, rgba(107, 44, 107, 0.02) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(74, 26, 74, 0.02) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(139, 58, 139, 0.02) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(171, 74, 171, 0.02) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    transform: translateZ(-2px);
}

/* Efectos de Luz Dinámicos */
.light-effect {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(171, 74, 171, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: lightMove 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes lightMove {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(100px, -50px) scale(1.2);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50px, 100px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(150px, 50px) scale(1.1);
        opacity: 0.6;
    }
}

/* Efectos de Partículas */
.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--color-purple-bright);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat 6s linear infinite;
}

.particle:nth-child(odd) {
    background: var(--color-purple-medium);
    animation-duration: 8s;
}

.particle:nth-child(3n) {
    background: var(--color-purple-light);
    animation-duration: 10s;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* Efectos de Distorsión */
.distortion-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(107, 44, 107, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(74, 26, 74, 0.1) 0%, transparent 50%);
    filter: blur(1px);
    animation: distortion 12s ease-in-out infinite;
}

@keyframes distortion {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: blur(1px);
    }
    33% {
        transform: scale(1.05) rotate(1deg);
        filter: blur(2px);
    }
    66% {
        transform: scale(0.95) rotate(-1deg);
        filter: blur(1.5px);
    }
}

/* Efectos de Hover en Secciones */
.section:hover .bg-layer {
    transform: scale(1.1);
    transition: transform 0.8s ease;
}

.section:hover .layer-1 {
    transform: translateZ(0) scale(1.05);
}

.section:hover .layer-2 {
    transform: translateZ(-1px) scale(1.1);
}

.section:hover .layer-3 {
    transform: translateZ(-2px) scale(1.15);
}

/* Efectos de Transición entre Secciones */
.section-transition {
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section-transition.slide-left {
    transform: translateX(-100%);
}

.section-transition.slide-right {
    transform: translateX(100%);
}

.section-transition.fade-out {
    opacity: 0;
    transform: scale(0.9);
}

.section-transition.fade-in {
    opacity: 1;
    transform: scale(1);
}

/* Efectos de Blur Dinámico */
.blur-effect {
    filter: blur(0px);
    transition: filter 0.3s ease;
}

.blur-effect.active {
    filter: blur(5px);
}

/* Efectos de Gradiente Animado */
.animated-gradient {
    background: linear-gradient(-45deg, 
        var(--color-purple-dark), 
        var(--color-purple-medium), 
        var(--color-purple-light), 
        var(--color-purple-bright)
    );
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

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

/* Efectos de Cursor */
.cursor-glow {
    position: fixed;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, var(--color-purple-bright) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: screen;
    transition: transform 0.1s ease;
}

/* Efectos de Scroll */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 1001;
    transition: transform 0.1s ease;
}

/* Efectos de Texto */
.text-glow {
    text-shadow: 
        0 0 5px var(--color-purple-bright),
        0 0 10px var(--color-purple-bright),
        0 0 15px var(--color-purple-bright),
        0 0 20px var(--color-purple-bright);
    animation: textGlow 2s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from {
        text-shadow: 
            0 0 5px var(--color-purple-bright),
            0 0 10px var(--color-purple-bright),
            0 0 15px var(--color-purple-bright);
    }
    to {
        text-shadow: 
            0 0 10px var(--color-purple-bright),
            0 0 20px var(--color-purple-bright),
            0 0 30px var(--color-purple-bright),
            0 0 40px var(--color-purple-bright);
    }
}

/* Efectos de Morphing */
.morphing-shape {
    position: absolute;
    width: 100px;
    height: 100px;
    background: var(--gradient-accent);
    border-radius: 50%;
    animation: morphing 10s ease-in-out infinite;
    opacity: 0.1;
}

@keyframes morphing {
    0%, 100% {
        border-radius: 50%;
        transform: rotate(0deg) scale(1);
    }
    25% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
        transform: rotate(90deg) scale(1.2);
    }
    50% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
        transform: rotate(180deg) scale(0.8);
    }
    75% {
        border-radius: 30% 70% 70% 30% / 70% 30% 30% 70%;
        transform: rotate(270deg) scale(1.1);
    }
}

/* Efectos de Profundidad */
.depth-layer {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.depth-element {
    transform: translateZ(0);
    transition: transform 0.3s ease;
}

.depth-element:hover {
    transform: translateZ(20px);
}

/* Efectos de Partículas Avanzadas */
.particle-system {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle-trail {
    position: absolute;
    width: 1px;
    height: 1px;
    background: var(--color-purple-bright);
    border-radius: 50%;
    animation: particleTrail 4s linear infinite;
}

@keyframes particleTrail {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px) scale(0);
        opacity: 0;
    }
}

/* Optimizaciones de Rendimiento */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Efectos de Transición Suave */
.smooth-transition {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Efectos de Resplandor */
.glow-effect {
    box-shadow: 
        0 0 20px var(--color-purple-bright),
        0 0 40px var(--color-purple-bright),
        0 0 60px var(--color-purple-bright);
    animation: glowPulse 2s ease-in-out infinite alternate;
}

@keyframes glowPulse {
    from {
        box-shadow: 
            0 0 20px var(--color-purple-bright),
            0 0 40px var(--color-purple-bright);
    }
    to {
        box-shadow: 
            0 0 30px var(--color-purple-bright),
            0 0 60px var(--color-purple-bright),
            0 0 80px var(--color-purple-bright);
    }
}