/* ========================================= */
/* --- GLITCH (CYBERPUNK) CARD STYLES ---    */
/* ========================================= */

/* Fondos y Bordes Base para la rareza Glitch */
[data-rarity="Glitch"] .card-root {
    border-color: #00ffff; /* Cyan base */
    background: linear-gradient(135deg, #050510, #1a0b2e, #050510);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 20px rgba(255, 0, 255, 0.2);
    /* Animación constante del borde exterior base */
    animation: root-border-glitch 4s infinite alternate;
}

@keyframes root-border-glitch {
    0% {
        border-color: #00ffff;
        box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 20px rgba(255, 0, 255, 0.2);
    }

    50% {
        border-color: #ff00ff;
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.4), 0 0 20px rgba(255, 255, 0, 0.2);
    }

    100% {
        border-color: #ffff00;
        box-shadow: 0 0 20px rgba(255, 255, 0, 0.4), 0 0 20px rgba(0, 255, 255, 0.2);
    }
}

/* Fondo con patrón de cuadrícula de datos corruptos */
[data-rarity="Glitch"] .card-bg {
/*    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.05) 2px, rgba(0,255,255,0.05) 4px);
    background-size: cover;
    filter: brightness(0.8) contrast(1.5);
    opacity: 0.9;*/
}

[data-rarity="Glitch"] .card-overlay {
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

/* ========================================= */
/* ABERRACIÓN CROMÁTICA EN EL ARTE           */
/* ========================================= */

/* Separación RGB en la imagen del jugador */
[data-rarity="Glitch"] .card-art img {
    filter: drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.7)) drop-shadow(2px 0 0 rgba(255, 0, 255, 0.7));
    transition: filter 0.1s, transform 0.1s;
}

/* Vibración intensa al pasar el cursor */
[data-rarity="Glitch"]:hover .card-art img {
    animation: glitch-img-split 0.2s infinite;
}

@keyframes glitch-img-split {
    0% {
        filter: drop-shadow(-4px 0 0 rgba(0, 255, 255, 0.9)) drop-shadow(4px 0 0 rgba(255, 0, 255, 0.9));
        transform: translate(1px, 0);
    }

    25% {
        filter: drop-shadow(3px 0 0 rgba(0, 255, 255, 0.9)) drop-shadow(-3px 0 0 rgba(255, 0, 255, 0.9));
        transform: translate(-1px, 1px);
    }

    50% {
        filter: drop-shadow(-2px 2px 0 rgba(0, 255, 255, 0.9)) drop-shadow(2px -2px 0 rgba(255, 0, 255, 0.9));
        transform: translate(0, -1px);
    }

    75% {
        filter: drop-shadow(4px -1px 0 rgba(0, 255, 255, 0.9)) drop-shadow(-4px 1px 0 rgba(255, 0, 255, 0.9));
        transform: translate(-1px, 0);
    }

    100% {
        filter: drop-shadow(-1px 0 0 rgba(0, 255, 255, 0.9)) drop-shadow(1px 0 0 rgba(255, 0, 255, 0.9));
        transform: translate(1px, -1px);
    }
}

/* Etiqueta Inferior (Flujo de datos neón) */
.rarity-pill.Glitch, [data-rarity="Glitch"] .badge-rarity {
    color: #000;
    border-color: #00ffff;
    background: linear-gradient(90deg, #00ffff, #ff00ff, #ffff00, #00ffff);
    background-size: 300% 100%;
    animation: glitch-pill 1.5s linear infinite;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
    font-weight: bold;
}

@keyframes glitch-pill {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* ========================================= */
/* SHINE LAYERS (Efecto Glitch & Partículas) */
/* ========================================= */

[data-rarity="Glitch"] .fx-glitch {
    display: block;
    overflow: hidden;
    /* Flash dinámico de 3 colores RGB y Partículas digitales (píxeles muertos flotantes) */
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(0, 255, 255, 0.4) 0%, rgba(255, 0, 255, 0.3) 20%, rgba(255, 255, 0, 0.1) 40%, transparent 60% ), radial-gradient(circle at 20% 30%, #00ffff 1.5px, transparent 2px), radial-gradient(circle at 80% 40%, #ff00ff 1.5px, transparent 2px), radial-gradient(circle at 40% 70%, #ffff00 1.5px, transparent 2px), radial-gradient(circle at 70% 90%, #00ffff 2px, transparent 2.5px), radial-gradient(circle at 10% 60%, #ff00ff 2px, transparent 2.5px), radial-gradient(circle at 90% 20%, #ffff00 1.5px, transparent 2px), radial-gradient(circle at 50% 10%, #00ffff 1.5px, transparent 2px);
    background-size: cover, 120% 120%, 90% 90%, 110% 110%, 130% 130%, 85% 85%, 105% 105%, 115% 115%;
    background-position: center center, calc(var(--pointer-num-x) * 1.5px) calc(var(--pointer-num-y) * -2px), calc(var(--pointer-num-x) * -2.5px) calc(var(--pointer-num-y) * 3px), calc(var(--pointer-num-x) * 3px) calc(var(--pointer-num-y) * -1.5px), calc(var(--pointer-num-x) * -1.5px) calc(var(--pointer-num-y) * 2.5px), calc(var(--pointer-num-x) * 2px) calc(var(--pointer-num-y) * -3px), calc(var(--pointer-num-x) * -3px) calc(var(--pointer-num-y) * 1.5px), calc(var(--pointer-num-x) * 1px) calc(var(--pointer-num-y) * -2.5px);
    mix-blend-mode: screen;
    filter: brightness(calc(1 + (var(--hyp) * 0.4))) contrast(1.3);
    opacity: var(--opacity);
    transition: opacity 0.2s ease-out;
    z-index: 10;
}

    /* Sub-capa BEFORE: Scanlines y efecto CRT (TV Antigua) */
    [data-rarity="Glitch"] .fx-glitch:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3) 50%), /* Rayas horizontales negras */
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04)); /* Píxeles RGB verticales */
        background-size: 100% 4px, 3px 100%;
        mix-blend-mode: overlay;
        opacity: calc(var(--opacity) * 0.9 + 0.1);
        pointer-events: none;
        z-index: 11;
    }

    /* Sub-capa AFTER: Artifacts y bloques digitales corruptos */
    [data-rarity="Glitch"] .fx-glitch:after {
        content: "";
        position: absolute;
        inset: -10%;
        /* Bloques duros de color puro para simular la corrupción de video */
        background-image: linear-gradient(transparent 20%, rgba(0, 255, 255, 0.6) 21%, transparent 22%), linear-gradient(transparent 50%, rgba(255, 0, 255, 0.6) 52%, transparent 54%), linear-gradient(transparent 80%, rgba(255, 255, 0, 0.5) 81%, transparent 82%), linear-gradient(90deg, transparent 30%, rgba(0, 255, 255, 0.4) 31%, transparent 32%), linear-gradient(90deg, transparent 70%, rgba(255, 0, 255, 0.4) 71%, transparent 72%);
        background-size: 100% 100%;
        mix-blend-mode: color-dodge;
        /* El parallax controla la posición, pero la animación causará los "saltos" */
        background-position: calc(var(--pointer-num-x) * 2px) calc(var(--pointer-num-y) * -5px), calc(var(--pointer-num-x) * -3px) calc(var(--pointer-num-y) * 4px), calc(var(--pointer-num-x) * 1px) calc(var(--pointer-num-y) * -2px), calc(var(--pointer-num-x) * -2px) calc(var(--pointer-num-y) * 1px), calc(var(--pointer-num-x) * 3px) calc(var(--pointer-num-y) * -3px);
        filter: brightness(calc(1 + (var(--hyp) * 1.5))) contrast(2);
        opacity: calc(var(--opacity) * var(--hyp) * 1.5);
        z-index: 12;
    }

/* Animación de "Rasgado de Pantalla" (Screen Tearing) activada al mover el ratón */
[data-rarity="Glitch"]:hover .fx-glitch:after {
    animation: glitch-artifacts 0.15s infinite linear alternate-reverse;
}

@keyframes glitch-artifacts {
    /* Corta franjas horizontales de la capa de colores para simular el error de renderizado */
    0% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-3px, 2px);
    }

    20% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(3px, -2px);
    }

    40% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-3px, -2px);
    }

    60% {
        clip-path: inset(5% 0 80% 0);
        transform: translate(3px, 2px);
    }

    80% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(-2px, 1px);
    }

    100% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(2px, -1px);
    }
}

/* ========================================= */
/* GLARE LAYERS (Luz del Scanner)            */
/* ========================================= */

[data-rarity="Glitch"] .card__glare {
    /* Haz de luz de escáner RGB */
    background-image: linear-gradient( 90deg, transparent 0%, rgba(0, 255, 255, 0.2) 45%, rgba(255, 0, 255, 0.3) 50%, rgba(255, 255, 0, 0.2) 55%, transparent 100% );
    filter: brightness(1.3) contrast(1.5);
    opacity: calc( var(--hyp) * 0.8 * var(--opacity) );
    mix-blend-mode: hard-light;
    z-index: 20;
}

/* Borde Resplandeciente Inestable Animado en Reposo */
[data-rarity="Glitch"] .card-border {
    border-color: #00ffff;
    opacity: calc(var(--opacity) * 0.9 + 0.1);
    z-index: 25;
    animation: border-flicker-idle 3s infinite;
}

/* Oscilación de color más lenta en reposo */
@keyframes border-flicker-idle {
    0%, 100% {
        border-color: #00ffff;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 0, 255, 0.5);
    }

    33% {
        border-color: #ff00ff;
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.6), inset 0 0 10px rgba(255, 255, 0, 0.5);
    }

    66% {
        border-color: #ffff00;
        box-shadow: 0 0 15px rgba(255, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.5);
    }
}

/* El borde parpadea rápidamente cambiando de colores RGB bruscamente al mover el ratón */
[data-rarity="Glitch"]:hover .card-border {
    animation: border-flicker-fast 0.15s infinite;
}

@keyframes border-flicker-fast {
    0% {
        border-color: #00ffff;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 0, 255, 0.5);
    }

    33% {
        border-color: #ff00ff;
        box-shadow: 0 0 20px rgba(255, 0, 255, 0.8), inset 0 0 15px rgba(0, 255, 255, 0.5);
    }

    66% {
        border-color: #ffff00;
        box-shadow: 0 0 15px rgba(255, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 255, 0.5);
    }

    100% {
        border-color: #00ffff;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 0, 255, 0.5);
    }
}