/**
 * VALIS Glitch Effects v1.0
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Efectos de "interferencia ancestral" - No neón digital, sino perturbaciones
 * orgánicas que evocan comunicación mística / oráculo / máquina viva.
 * 
 * Filosofía: 
 * - El glitch como señal de algo más grande intentando comunicarse
 * - Sutil, no intrusivo
 * - Orgánico, no mecánico
 * 
 * @version 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES DE GLITCH
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --glitch-color-1: rgba(154, 123, 60, 0.4);   /* Cielo/Yang */
    --glitch-color-2: rgba(166, 123, 91, 0.3);   /* Tierra/Yin */
    --glitch-color-3: rgba(0, 0, 0, 0.1);        /* Sombra */
    --glitch-duration: 0.3s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLASE UTILITY: APLICAR GLITCH A CUALQUIER ELEMENTO
   Uso: <div class="valis-glitch">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-glitch {
    position: relative;
}

.valis-glitch.glitch-active {
    animation: valisGlitch var(--glitch-duration) ease-out;
}



/* ═══════════════════════════════════════════════════════════════════════════
   GLITCH DE TEXTO (sutil desplazamiento de color)
   Uso: <span class="valis-text-glitch">VALIS</span>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-text-glitch {
    position: relative;
    display: inline-block;
}

.valis-text-glitch.glitch-active::before,
.valis-text-glitch.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.valis-text-glitch.glitch-active::before {
    color: var(--glitch-color-1);
    animation: textGlitch1 var(--glitch-duration) ease-out;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.valis-text-glitch.glitch-active::after {
    color: var(--glitch-color-2);
    animation: textGlitch2 var(--glitch-duration) ease-out;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}





/* ═══════════════════════════════════════════════════════════════════════════
   LÍNEA DE ESCANEO (efecto CRT/oráculo)
   Uso: <div class="valis-scanline-container">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-scanline-container {
    position: relative;
    overflow: hidden;
}

.valis-scanline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 100;
}

.valis-scanline-container.scan-active::before {
    animation: scanlineMove 2s linear infinite;
}



/* ═══════════════════════════════════════════════════════════════════════════
   RUIDO ESTÁTICO SUTIL (fondo)
   Uso: <div class="valis-noise">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-noise {
    position: relative;
}

.valis-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARPADEO ORGÁNICO (como respiración)
   Uso: <div class="valis-breathe">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-breathe {
    animation: valisBreathe 4s ease-in-out infinite;
}



/* ═══════════════════════════════════════════════════════════════════════════
   INTERFERENCIA EN BORDES (para cards/containers)
   Uso: <div class="valis-interference">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-interference {
    position: relative;
}

.valis-interference.interference-active::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(
        45deg,
        transparent 30%,
        var(--glitch-color-1) 50%,
        transparent 70%
    );
    background-size: 200% 200%;
    opacity: 0;
    pointer-events: none;
    animation: interferenceWave 0.5s ease-out;
}



/* ═══════════════════════════════════════════════════════════════════════════
   DESENFOQUE MÍSTICO (para transiciones)
   Uso: <div class="valis-mystic-blur">...</div>
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-mystic-blur.blur-active {
    animation: mysticBlur 0.6s ease-in-out;
}



/* ═══════════════════════════════════════════════════════════════════════════
   HELPER: TRIGGER GLITCH VÍA CSS (con hover)
   ═══════════════════════════════════════════════════════════════════════════ */

.valis-glitch-on-hover:hover {
    animation: valisGlitch var(--glitch-duration) ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISABLE ANIMATIONS (respeta preferencias de usuario)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .valis-glitch,
    .valis-text-glitch,
    .valis-scanline-container,
    .valis-breathe,
    .valis-interference,
    .valis-mystic-blur,
    .valis-glitch-on-hover {
        animation: none !important;
    }
    
    .valis-glitch::before,
    .valis-glitch::after,
    .valis-text-glitch::before,
    .valis-text-glitch::after,
    .valis-scanline-container::before,
    .valis-interference::before {
        animation: none !important;
        opacity: 0 !important;
    }
}