/* ==========================================================================
   ESTILOS DE RAREZA EPIC (GLITCH PULSE MUY SUTIL)
   ========================================================================== */

/* --- Estructura y Fondo --- */
[data-rarity="Epic"] .card-root {
    border-color: #d946ef;
    background: #110011; /* Fondo muy oscuro para resaltar los pulsos */
    box-shadow: 0 0 20px rgba(217, 70, 239, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.8);
}

[data-rarity="Epic"] .card-bg {
    background-image: url('../images/Cards/epic.png');
    background-size: cover;
    opacity: 0.9;
}

[data-rarity="Epic"] .card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 40%);
}

/* --- Etiquetas y Bordes --- */
/* Etiquetas combinando rosa y morado profundo */
[data-rarity="Epic"] .badge-rarity, [data-rarity="Epic"] .badge-pos {
    color: #ffffff;
    border-color: #fbcfe8;
    background: linear-gradient(135deg, #d946ef 0%, #9333ea 100%);
    box-shadow: 0 0 8px rgba(217, 70, 239, 0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

[data-rarity="Epic"] .card-border {
    border: 2px solid #fbcfe8;
    box-shadow: 0 0 15px rgba(217, 70, 239, 0.4), inset 0 0 10px rgba(147, 51, 234, 0.3);
    opacity: calc(var(--opacity, 0) * 0.8 + 0.2);
}

/* --- ANIMACIONES Y CAPAS FX --- */
[data-rarity="Epic"] .fx-layer {
    display: block;
    inset: 0;
    overflow: hidden;
    /* Líneas base muy sutiles de escaneo digital para ambientar el glitch */
    background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 2px, transparent 2px, transparent 4px );
    /* Se baja la opacidad máxima a 0.6 en lugar de 1 para evitar sobresaturación general */
    opacity: calc(var(--opacity, 0) * 0.6);
    mix-blend-mode: normal;
    z-index: 1;
}

    /* Pulso Glitch Canal 1: Rojo / Rosa (Se desplaza en el eje X) - Colores apagados */
    [data-rarity="Epic"] .fx-layer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( ellipse 80% 80% at calc(var(--pointer-x) - 2%) var(--pointer-y), rgba(239, 68, 68, 0.2) 0%, rgba(236, 72, 153, 0.15) 40%, transparent 70% );
        mix-blend-mode: soft-light;
        animation: epic-pulse-glitch-red 4s infinite ease-in-out;
        z-index: 2;
    }

    /* Pulso Glitch Canal 2: Morado / Rosa (Se desplaza en el eje Y) - Colores apagados */
    [data-rarity="Epic"] .fx-layer::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( ellipse 80% 80% at calc(var(--pointer-x) + 2%) var(--pointer-y), rgba(147, 51, 234, 0.2) 0%, rgba(217, 70, 239, 0.15) 40%, transparent 70% );
        mix-blend-mode: soft-light;
        animation: epic-pulse-glitch-purple 3.5s infinite ease-in-out alternate-reverse;
        z-index: 3;
    }

/* ==========================================================================
   KEYFRAMES DE ANIMACIÓN EPIC
   ========================================================================== */

/* Animación sutil: Opacidades bajadas a la mitad y el brillo máximo pasa de 1.5 a solo 1.1 */
@keyframes epic-pulse-glitch-red {
    0% {
        opacity: 0.2;
        transform: translateX(0);
        filter: brightness(1);
    }

    48% {
        opacity: 0.4;
        transform: translateX(0);
        filter: brightness(1.05);
    }

    50% {
        opacity: 0.6;
        transform: translateX(-2px) skewX(1deg);
        filter: brightness(1.1);
    }

    52% {
        opacity: 0.4;
        transform: translateX(1px) skewX(-0.5deg);
        filter: brightness(1.05);
    }

    54% {
        opacity: 0.2;
        transform: translateX(0) skewX(0);
        filter: brightness(1);
    }

    100% {
        opacity: 0.2;
        transform: translateX(0);
        filter: brightness(1);
    }
}

/* Animación sutil de pulso morado */
@keyframes epic-pulse-glitch-purple {
    0% {
        opacity: 0.2;
        transform: translateY(0);
        filter: brightness(1);
    }

    38% {
        opacity: 0.3;
        transform: translateY(0);
        filter: brightness(1.05);
    }

    40% {
        opacity: 0.5;
        transform: translateY(2px) skewY(0.5deg);
        filter: brightness(1.1);
    }

    42% {
        opacity: 0.3;
        transform: translateY(-1px) skewY(-0.5deg);
        filter: brightness(1.05);
    }

    44% {
        opacity: 0.2;
        transform: translateY(0) skewY(0);
        filter: brightness(1);
    }

    100% {
        opacity: 0.2;
        transform: translateY(0);
        filter: brightness(1);
    }
}