﻿/* ========================================= */
/* --- SECRET RARE (GOLD) CARD STYLES ---    */
/* ========================================= */

/* Fondos y Bordes Base para la rareza Secret Rare */
[data-rarity="SecretRare"] .card-root {
    border-color: #fbbf24; /* Dorado fuerte */
    background: linear-gradient(to bottom, #1a1d24, #422006);
}

[data-rarity="SecretRare"] .card-bg {
    background-image: url("/img/geometric.png"); /* Foil geométrico */
    background-size: 33%;
}

[data-rarity="SecretRare"] .card-overlay {
    background: rgba(0,0,0,0.15);
}

/* Arte de la Carta */
[data-rarity="SecretRare"] .card-art {
    border-color: rgba(251, 191, 36, 0.8);
}

/* Etiqueta Inferior */
.rarity-pill.SecretRare {
    color: #422006;
    border-color: #fbbf24;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.9));
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

/* ========================================= */
/* SHINE LAYERS (Efecto Principal)           */
/* ========================================= */

[data-rarity="SecretRare"] .fx-secret-rare {
    display: block;
    --shift: 1px;
    --imgsize: cover;
    /* Colores del resplandor cónico para el estilo Oro */
    --sunpillar-clr-1: hsl(46, 95%, 50%);
    --sunpillar-clr-4: hsl(46, 95%, 70%);
    --sunpillar-clr-5: hsl(46, 95%, 40%);
    --sunpillar-clr-6: hsl(46, 95%, 60%);
    background-image: var(--glitter), var(--glitter), conic-gradient( var(--sunpillar-clr-4), var(--sunpillar-clr-5), var(--sunpillar-clr-6), var(--sunpillar-clr-1), var(--sunpillar-clr-4) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(150, 00%, 0%, .98) 10%, hsla(0, 0%, 95%, .15) 90% );
    background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover;
    background-position: 45% 45%, 55% 55%, center center, center center;
    background-blend-mode: soft-light, hard-light, overlay;
    mix-blend-mode: color-dodge;
    /* Adaptamos --pointer-from-center a --hyp */
    filter: brightness(calc( 0.4 + (var(--hyp) * 0.2) )) contrast(1) saturate(2.7);
    opacity: var(--opacity);
}

    /* Sub-capa BEFORE: Foil Geométrico Base */
    [data-rarity="SecretRare"] .fx-secret-rare:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("/img/geometric.png"), linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ), radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(10, 20%, 90%, 0.95) 10%, hsl(0, 0%, 0%) 70% );
        background-size: 33%, cover, cover;
        background-position: center center, center center, center center;
        background-blend-mode: hard-light, multiply;
        mix-blend-mode: lighten;
        filter: brightness(1.25) contrast(1.25) saturate(0.35);
        opacity: 0.8;
    }

    /* Sub-capa AFTER: Segundo Glitter reactivo al movimiento */
    [data-rarity="SecretRare"] .fx-secret-rare:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--glitter);
        background-size: var(--glittersize) var(--glittersize);
        /* Transformamos pointer-from-left/top dividiendo pointer-num entre 100 para obtener valor 0-1 */
        background-position: calc(50% - ((var(--shift)*2) * (var(--pointer-num-x) / 100)) + var(--shift)) calc(50% - ((var(--shift)*2) * (var(--pointer-num-y) / 100)) + var(--shift));
        filter: brightness(calc((var(--hyp)*0.6) + 0.6)) contrast(1.5);
        mix-blend-mode: overlay;
    }

/* ========================================= */
/* GLARE LAYERS                              */
/* ========================================= */

[data-rarity="SecretRare"] .card__glare {
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(45, 8%, 80%, 0.3) 0%, hsl(22, 15%, 12%) 180% );
    filter: brightness(1.3) contrast(1.5);
    mix-blend-mode: hard-light;
    background-color: transparent;
    opacity: calc( (0.2 * var(--opacity)) + var(--opacity) * var(--hyp) * 0.8 );
}

/* Borde Resplandeciente Reactivo */
[data-rarity="SecretRare"] .card-border {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(251, 191, 36, 0.4);
    opacity: calc(var(--opacity) * 0.8);
}
