/* ========================================= */
/* --- ZAFIRO (LIQUID WATER & PULSE) ------- */
/* ========================================= */

/* Fondos y Bordes Base - Profundidad líquida morada y rosa */
[data-rarity="Zafiro"] .card-root {
    border-color: #d946ef; /* Rosa rojizo / Magenta vibrante */
    background: radial-gradient(circle at 50% 50%, #4c1d95 0%, #9d174d 50%, #170533 100%);
    box-shadow: 0 0 25px rgba(217, 70, 239, 0.6);
}

/* Base geométrica - Tono fucsia/violeta profundo */
[data-rarity="Zafiro"] .card-bg {
    /*background-image: url("/img/geometric.png");
    background-size: 35%;*/
    /* Brillo aumentado y opacidad casi al máximo para quitar lo opaco en reposo */
    /*filter: brightness(1.2) sepia(0.3) hue-rotate(290deg) saturate(2.5) contrast(1.1);
    opacity: 0.95;*/
}

/* Sombra en los bordes para enmarcar la profundidad del agua */
[data-rarity="Zafiro"] .card-overlay {
    /* Sombra reducida de 0.6 a 0.3 para iluminar la carta */
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
}

/* Arte de la Carta - Sombra interna magenta/violeta */
[data-rarity="Zafiro"] .card-art {
    border-color: rgba(219, 39, 119, 0.8);
    /* Sombra negra interior reducida de 0.7 a 0.3 */
    box-shadow: inset 0 -15px 30px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(147, 51, 234, 0.6);
}

/* Etiqueta Inferior e Insignias */
.rarity-pill.Zafiro, [data-rarity="Zafiro"] .badge-rarity {
    color: #ffffff;
    border-color: #fbcfe8;
    background: linear-gradient(135deg, #db2777 0%, #7e22ce 100%);
    box-shadow: 0 0 15px rgba(219, 39, 119, 0.8);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}

/* ========================================= */
/* SHINE LAYERS (Ondas de Agua Base)         */
/* ========================================= */

[data-rarity="Zafiro"] .fx-zafiro {
    display: block;
    /* Efecto de ondas líquidas superpuestas usando gradientes radiales repetitivos */
    background-image: repeating-radial-gradient(circle at calc(var(--pointer-x) - 10%) calc(var(--pointer-y) - 10%), rgba(225, 29, 72, 0.15) 0%, rgba(147, 51, 234, 0.2) 10%, transparent 20%, rgba(225, 29, 72, 0.05) 30%), repeating-radial-gradient(circle at calc(var(--pointer-x) + 20%) calc(var(--pointer-y) + 20%), rgba(219, 39, 119, 0.1) 0%, transparent 15%, rgba(168, 85, 247, 0.15) 25%), radial-gradient(ellipse 80% 120% at var(--pointer-x) var(--pointer-y), rgba(192, 132, 252, 0.4) 0%, transparent 60%);
    background-blend-mode: screen, screen, normal;
    mix-blend-mode: overlay;
    filter: brightness(calc(1 + (var(--hyp) * 0.3))) contrast(1.2) saturate(1.4);
    opacity: calc(var(--opacity) * 0.85 + 0.15);
    transition: opacity 0.2s ease-out;
}

/* ========================================= */
/* ANIMACIÓN: Pulso y Reflejos Líquidos      */
/* ========================================= */

@keyframes zafiro-liquid-pulse {
    0% {
        opacity: 0.6;
        filter: brightness(1.1) drop-shadow(0 0 8px rgba(219, 39, 119, 0.4));
        transform: scale(1);
    }

    25% {
        opacity: 0.9;
        filter: brightness(1.6) drop-shadow(0 0 15px rgba(232, 121, 249, 0.6));
        transform: scale(1.02);
    }

    50% {
        opacity: 0.7;
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(147, 51, 234, 0.5));
        transform: scale(0.99);
    }

    75% {
        opacity: 1;
        filter: brightness(1.9) drop-shadow(0 0 20px rgba(244, 114, 182, 0.8));
        transform: scale(1.03);
    }

    100% {
        opacity: 0.6;
        filter: brightness(1.1) drop-shadow(0 0 8px rgba(219, 39, 119, 0.4));
        transform: scale(1);
    }
}

/* Sub-capa BEFORE: Reflejos de luz en el agua (Solo activo al pasar el cursor) */
[data-rarity="Zafiro"]:hover .fx-zafiro:before {
    animation: zafiro-liquid-pulse 3s infinite ease-in-out;
}

[data-rarity="Zafiro"] .fx-zafiro:before {
    content: "";
    position: absolute;
    inset: -10%;
    background-image:
    /* Trazos curvos que simulan la luz refractándose en la superficie del agua */
    radial-gradient(ellipse 40% 100% at calc(var(--pointer-x) - 15%) calc(var(--pointer-y) - 10%), rgba(253, 164, 175, 0.5) 0%, rgba(219, 39, 119, 0.3) 40%, transparent 60%), radial-gradient(ellipse 100% 40% at calc(var(--pointer-x) + 15%) calc(var(--pointer-y) + 15%), rgba(233, 213, 255, 0.5) 0%, rgba(147, 51, 234, 0.3) 40%, transparent 60%), radial-gradient(ellipse 60% 80% at var(--pointer-x) calc(var(--pointer-y) - 20%), rgba(225, 29, 72, 0.4) 0%, transparent 50%),
    /* Olas de agua suave en el fondo */
    radial-gradient(circle at calc(var(--pointer-x) - 20%) calc(var(--pointer-y) + 30%), rgba(192, 132, 252, 0.5) 0%, transparent 60%), radial-gradient(circle at calc(var(--pointer-x) + 30%) calc(var(--pointer-y) - 10%), rgba(219, 39, 119, 0.5) 0%, transparent 60%),
    /* Núcleo luminoso del agua */
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.7) 0%, rgba(244, 114, 182, 0.5) 15%, rgba(147, 51, 234, 0.3) 45%, transparent 75%);
    background-size: 100% 100%;
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Sub-capa AFTER: Densidad Máxima de Burbujas y Magia Acuática */
[data-rarity="Zafiro"] .fx-zafiro:after {
    content: "";
    position: absolute;
    inset: -10%;
    /* Partículas: Burbujas magenta, rosas, púrpuras y blancas de varios tamaños */
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 1) 2px, transparent 3px), radial-gradient(circle at 40% 60%, rgba(244, 114, 182, 0.9) 3px, transparent 5px), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 1) 1.5px, transparent 2.5px), radial-gradient(circle at 70% 80%, rgba(219, 39, 119, 0.9) 4px, transparent 6px), radial-gradient(circle at 30% 90%, rgba(216, 180, 254, 1) 2px, transparent 3px), radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.9) 3.5px, transparent 5px), radial-gradient(circle at 90% 60%, rgba(147, 51, 234, 0.8) 1.5px, transparent 2.5px), radial-gradient(circle at 15% 75%, rgba(244, 114, 182, 1) 3px, transparent 4px), radial-gradient(circle at 60% 40%, rgba(192, 132, 252, 0.9) 1px, transparent 2px), radial-gradient(circle at 85% 90%, rgba(255, 255, 255, 0.8) 2.5px, transparent 4px), radial-gradient(circle at 25% 15%, rgba(225, 29, 72, 1) 2px, transparent 3px), radial-gradient(circle at 75% 25%, rgba(216, 180, 254, 0.9) 3.5px, transparent 5px), radial-gradient(circle at 5% 50%, rgba(255, 255, 255, 0.7) 1px, transparent 2px), radial-gradient(circle at 95% 45%, rgba(244, 114, 182, 1) 2.5px, transparent 4px), radial-gradient(circle at 20% 85%, rgba(168, 85, 247, 0.8) 1.5px, transparent 2px), radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 1) 2px, transparent 3px), radial-gradient(circle at 65% 80%, rgba(219, 39, 119, 0.9) 1.5px, transparent 2px), radial-gradient(circle at 55% 30%, rgba(255, 255, 255, 1) 3px, transparent 4px), radial-gradient(circle at 85% 10%, rgba(216, 180, 254, 0.9) 2px, transparent 3px), radial-gradient(circle at 10% 90%, rgba(147, 51, 234, 1) 1px, transparent 2px), radial-gradient(circle at 45% 75%, rgba(255, 255, 255, 1) 2.5px, transparent 4px), radial-gradient(circle at 75% 65%, rgba(225, 29, 72, 0.9) 1px, transparent 2px), radial-gradient(circle at 25% 55%, rgba(244, 114, 182, 1) 3.5px, transparent 5px), radial-gradient(circle at 5% 35%, rgba(192, 132, 252, 0.8) 1px, transparent 2px), radial-gradient(circle at 95% 85%, rgba(255, 255, 255, 0.9) 2px, transparent 3px);
    background-size: 100% 100%, 120% 120%, 90% 90%, 110% 110%, 130% 130%, 85% 85%, 105% 105%, 115% 115%, 95% 95%, 125% 125%, 100% 100%, 120% 120%, 90% 90%, 110% 110%, 130% 130%, 85% 85%, 105% 105%, 115% 115%, 95% 95%, 125% 125%, 100% 100%, 120% 120%, 90% 90%, 110% 110%, 130% 130%;
    /* Movimientos fluidos: Mezcla de X e Y en direcciones variadas simulando corrientes de agua y burbujas flotando */
    background-position: calc(var(--pointer-num-x) * 3.5px) calc(var(--pointer-num-y) * -4.5px), calc(var(--pointer-num-x) * -4.5px) calc(var(--pointer-num-y) * -5.5px), calc(var(--pointer-num-x) * 5.5px) calc(var(--pointer-num-y) * 4.5px), calc(var(--pointer-num-x) * -3.5px) calc(var(--pointer-num-y) * -6.5px), calc(var(--pointer-num-x) * 6.5px) calc(var(--pointer-num-y) * 3.5px), calc(var(--pointer-num-x) * -5.5px) calc(var(--pointer-num-y) * -7.5px), calc(var(--pointer-num-x) * 7px) calc(var(--pointer-num-y) * 5.5px), calc(var(--pointer-num-x) * 4.8px) calc(var(--pointer-num-y) * -8px), calc(var(--pointer-num-x) * -6px) calc(var(--pointer-num-y) * 6.5px), calc(var(--pointer-num-x) * 5.8px) calc(var(--pointer-num-y) * -5.5px), calc(var(--pointer-num-x) * -4.5px) calc(var(--pointer-num-y) * 7.8px), calc(var(--pointer-num-x) * 6.8px) calc(var(--pointer-num-y) * -6.8px), calc(var(--pointer-num-x) * -5.2px) calc(var(--pointer-num-y) * 8.2px), calc(var(--pointer-num-x) * 7.5px) calc(var(--pointer-num-y) * -7.8px), calc(var(--pointer-num-x) * -6.2px) calc(var(--pointer-num-y) * 9.2px), calc(var(--pointer-num-x) * 3.2px) calc(var(--pointer-num-y) * -3.5px), calc(var(--pointer-num-x) * -4.8px) calc(var(--pointer-num-y) * 5.1px), calc(var(--pointer-num-x) * 5.1px) calc(var(--pointer-num-y) * -4.9px), calc(var(--pointer-num-x) * -6.2px) calc(var(--pointer-num-y) * 6.4px), calc(var(--pointer-num-x) * 4.9px) calc(var(--pointer-num-y) * -5.5px), calc(var(--pointer-num-x) * -5.7px) calc(var(--pointer-num-y) * 7.2px), calc(var(--pointer-num-x) * 6.5px) calc(var(--pointer-num-y) * -4.5px), calc(var(--pointer-num-x) * -4.2px) calc(var(--pointer-num-y) * 8.8px), calc(var(--pointer-num-x) * 5.8px) calc(var(--pointer-num-y) * -6.1px), calc(var(--pointer-num-x) * -7.1px) calc(var(--pointer-num-y) * 5.5px);
    mix-blend-mode: screen;
    opacity: calc(var(--opacity) * var(--hyp) * 2);
    filter: drop-shadow(0 0 5px rgba(219, 39, 119, 0.9)) drop-shadow(0 0 2px rgba(255,255,255,0.8));
}

/* ========================================= */
/* GLARE LAYERS (Destello envolvente)        */
/* ========================================= */

[data-rarity="Zafiro"] .card__glare {
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.3) 0%, rgba(244, 114, 182, 0.1) 40%, transparent 80% );
    mix-blend-mode: overlay;
    opacity: calc(var(--opacity) * var(--hyp) * 1);
}

/* Borde Resplandeciente Reactivo */
[data-rarity="Zafiro"] .card-border {
    border: 2px solid #fbcfe8;
    box-shadow: 0 0 30px rgba(219, 39, 119, 0.8), inset 0 0 20px rgba(147, 51, 234, 0.7), 0 0 10px rgba(255, 255, 255, 0.8);
    opacity: calc(var(--opacity) * 0.9 + 0.1);
}