/* ========================================= */
/* --- TOPACIO (BLUE & GOLD HOLO) STYLES --- */
/* ========================================= */

/* Fondos y Bordes Base para la rareza Topacio */
[data-rarity="Topacio"] .card-root {
    border-color: #38bdf8; /* Azul/Cian característico */
    background: linear-gradient(to bottom, #0f172a, #0c4a6e); /* Tonos navy y azul profundo */
}

[data-rarity="Topacio"] .card-bg {
    /*background-image: url("/img/geometric.png");
    background-size: cover;*/
    /* Aumentamos el brillo a 1.4 y la opacidad a 1 para quitar lo opaco */
    /*filter: sepia(0.2) hue-rotate(190deg) saturate(2) brightness(1.4);
    opacity: 1;*/
}

[data-rarity="Topacio"] .card-overlay {
    /* Sombra reducida al mínimo para mantener la claridad de la carta */
    background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%);
}

/* Arte de la Carta */
[data-rarity="Topacio"] .card-art {
    border-color: rgba(56, 189, 248, 0.6);
}

/* Etiqueta Inferior e Insignias */
.rarity-pill.Topacio, [data-rarity="Topacio"] .badge-rarity {
    color: #0f172a;
    border-color: #fbbf24;
    background: linear-gradient(90deg, #38bdf8, #fbbf24); /* Transición de cian a oro */
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
    text-shadow: none;
    font-weight: bold;
}

/* ========================================= */
/* SHINE LAYERS (Efecto Principal)           */
/* ========================================= */

[data-rarity="Topacio"] .fx-topacio {
    display: block;
    --space: 5%;
    --angle: -22deg;
    --imgsize: 300% 400%;
    /* Banda de colores: Azul Marino, Cian, Oro, Plata/Azul, Oro Brillante, Azul Rey */
    background-image: repeating-linear-gradient( var(--angle), hsla(210, 100%, 20%, 0.75) calc(var(--space)*1), hsla(190, 100%, 50%, 0.75) calc(var(--space)*2), hsla(45, 100%, 50%, 0.75) calc(var(--space)*3), hsla(210, 50%, 80%, 0.75) calc(var(--space)*4), hsla(35, 100%, 60%, 0.75) calc(var(--space)*5), hsla(220, 100%, 30%, 0.75) calc(var(--space)*6), hsla(210, 100%, 20%, 0.75) calc(var(--space)*7) );
    background-blend-mode: color-dodge;
    background-size: var(--imgsize);
    /* Movimiento atado al desplazamiento del cursor */
    background-position: 0% var(--pointer-y), var(--pointer-x) var(--pointer-y);
    filter: brightness(calc((var(--hyp)*0.3) + 0.5)) contrast(2.3) saturate(1);
    mix-blend-mode: color-dodge;
    /* Se mantiene un 20% del efecto visible en reposo para darle el brillo metálico continuo */
    opacity: calc(var(--opacity) * 0.8 + 0.2);
}

/* ========================================= */
/* ANIMACIÓN: Ondas Expansivas (Ripples)     */
/* ========================================= */

@keyframes topacio-waves {
    0% {
        background-size: 100% 100%;
        opacity: 0.3;
    }

    50% {
        background-size: 150% 150%;
        opacity: 0.7;
    }

    100% {
        background-size: 100% 100%;
        opacity: 0.3;
    }
}

/* Sub-capa BEFORE: Efecto de Ondas (Ripples) */
[data-rarity="Topacio"] .fx-topacio:before {
    content: "";
    position: absolute;
    inset: -20%;
    /* Ondas concéntricas que siguen el cursor combinando cian y oro */
    background-image: repeating-radial-gradient( circle at var(--pointer-x) var(--pointer-y), transparent 0%, rgba(56, 189, 248, 0.15) 2%, rgba(251, 191, 36, 0.1) 4%, transparent 6% );
    mix-blend-mode: color-dodge;
    opacity: calc(var(--opacity) * 0.8);
    animation: topacio-waves 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Sub-capa AFTER: Resplandor Central + Brillitos */
[data-rarity="Topacio"] .fx-topacio:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
    /* Brillitos (Sparkles) - Capas múltiples para efecto 3D */
    radial-gradient(circle at 15% 25%, #ffffff 1px, transparent 2px), radial-gradient(circle at 75% 65%, #fbbf24 1.5px, transparent 3px), radial-gradient(circle at 45% 85%, #38bdf8 1px, transparent 2px), radial-gradient(circle at 85% 15%, #ffffff 2px, transparent 3px), radial-gradient(circle at 25% 75%, #fbbf24 1.5px, transparent 2px), radial-gradient(circle at 60% 35%, #38bdf8 2px, transparent 3px), radial-gradient(circle at 90% 90%, #ffffff 1px, transparent 2px), radial-gradient(circle at 10% 90%, #fbbf24 1.5px, transparent 2px), radial-gradient(circle at 50% 10%, #38bdf8 1.5px, transparent 2px), radial-gradient(circle at 5% 45%, #ffffff 1px, transparent 2px),
    /* Resplandor Central Original que viaja con el cursor */
    radial-gradient( farthest-corner ellipse at calc( ((var(--pointer-num-x)) * 0.5%) + 25% ) calc( ((var(--pointer-num-y)) * 0.5%) + 25% ), hsl(0, 0%, 100%) 5%, hsla(210, 100%, 20%, 0.6) 40%, hsl(45, 100%, 20%) 120% );
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 400% 500%; /* El último es el tamaño del resplandor central */

    background-position: calc(var(--pointer-num-x) * 1.5px) calc(var(--pointer-num-y) * -1.5px), calc(var(--pointer-num-x) * -2px) calc(var(--pointer-num-y) * 2.5px), calc(var(--pointer-num-x) * 3px) calc(var(--pointer-num-y) * -2.5px), calc(var(--pointer-num-x) * -1.5px) calc(var(--pointer-num-y) * 1.5px), calc(var(--pointer-num-x) * 2px) calc(var(--pointer-num-y) * -2px), calc(var(--pointer-num-x) * -1px) calc(var(--pointer-num-y) * 3px), calc(var(--pointer-num-x) * 2.5px) calc(var(--pointer-num-y) * -1.5px), calc(var(--pointer-num-x) * -3px) calc(var(--pointer-num-y) * 2.5px), calc(var(--pointer-num-x) * 1.5px) calc(var(--pointer-num-y) * 1.5px), calc(var(--pointer-num-x) * -2.5px) calc(var(--pointer-num-y) * -1.5px), center center; /* Posición del resplandor central */
    /* Agregamos drop-shadow sutil para que los brillos destaquen más */
    filter: brightness(calc((var(--hyp)*0.2) + 0.5)) contrast(.9) saturate(1.1) drop-shadow(0 0 2px rgba(255,255,255,0.6));
    mix-blend-mode: hard-light;
    z-index: 2;
}

/* ========================================= */
/* GLARE LAYERS                              */
/* ========================================= */

[data-rarity="Topacio"] .card__glare {
    /* Destello directo, tintado sutilmente de azul hielo */
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 10%, hsla(0, 0%, 100%, 0.6) 35%, hsla(210, 100%, 35%, 1) 60% );
    mix-blend-mode: soft-light;
    opacity: calc( (0.2 * var(--opacity)) + var(--opacity) * var(--hyp) * 0.8 );
}

/* Borde Resplandeciente Reactivo */
[data-rarity="Topacio"] .card-border {
    border-color: #38bdf8;
    /* Resplandor exterior azul cian, resplandor interior dorado */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.6);
    opacity: calc(var(--opacity) * 0.8 + 0.2);
}