/* ========================================= */
/* --- RAINBOW (SECRET) HOLO CARD STYLES --- */
/* ========================================= */

/* Fondos y Bordes Base para la rareza Rainbow */
[data-rarity="Rainbow"] .card-root {
    border-color: #f472b6; /* Rosa pastel/arcoíris */
    background: linear-gradient(to bottom, #1a1d24, #4a044e);
}

[data-rarity="Rainbow"] .card-bg {
    background-image: url("/img/illusion-mask.png"); /* Foil base (ilusión) */
    background-size: 33%;
}

[data-rarity="Rainbow"] .card-overlay {
    background: rgba(0,0,0,0.1);
}

/* Arte de la Carta */
[data-rarity="Rainbow"] .card-art {
    border-color: rgba(244, 114, 182, 0.8);
}

/* Etiqueta Inferior */
.rarity-pill.Rainbow {
    color: #4a044e;
    border-color: #f472b6;
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 20%, #a18cd1 40%, #fbc2eb 60%, #8fd3f4 80%, #ff9a9e 100%);
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.6);
}

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

[data-rarity="Rainbow"] .fx-rainbow-holo {
    display: block;
    --r-clr-1: hsl(0, 57%, 37%);
    --r-clr-2: hsl(40, 53%, 39%);
    --r-clr-3: hsl(90, 60%, 35%);
    --r-clr-4: hsl(180, 60%, 35%);
    --r-clr-5: hsl(180, 60%, 35%);
    --r-clr-6: hsl(210, 57%, 39%);
    --r-clr-7: hsl(280, 55%, 31%);
    background-image: linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)), var(--glitter), linear-gradient( -30deg, var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1) );
    background-blend-mode: luminosity, soft-light;
    background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%;
    /* Transformamos pointer-from-left/top dividiendo pointer-num entre 100 para obtener valor 0-1 */
    background-position: calc( 25% + (50% * (var(--pointer-num-x) / 100) )) calc( 25% + (50% * (var(--pointer-num-y) / 100) )), center center, calc( 25% + (var(--pointer-num-x) * 0.5%) ) calc( 25% + (var(--pointer-num-y) * 0.5%) );
    filter: brightness(calc((var(--hyp)*0.25) + 0.6)) contrast(2.2) saturate(0.75);
    opacity: var(--opacity);
}

    /* Sub-capa AFTER: Gradiente arcoíris opuesto reactivo */
    [data-rarity="Rainbow"] .fx-rainbow-holo:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--glitter), linear-gradient( -60deg, var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), var(--r-clr-1) );
        background-blend-mode: soft-light;
        background-size: var(--glittersize) var(--glittersize), 400% 400%;
        background-position: center center, var(--pointer-x) var(--pointer-y);
        filter: brightness(calc((var(--hyp)*0.3) + 0.55)) contrast(2) saturate(1);
        mix-blend-mode: color-dodge;
    }

    /* Sub-capa BEFORE: Textura Oscurecedora Illusion */
    [data-rarity="Rainbow"] .fx-rainbow-holo:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("/img/illusion-mask.png");
        background-size: 33%;
        background-position: center center;
        filter: brightness(2.5) contrast(1);
        /* Mantenemos el opacity dinámico multiplicándolo por la opacidad global */
        opacity: calc((var(--hyp) + 0.4 ) * 0.6 * var(--opacity));
        background-blend-mode: difference;
        mix-blend-mode: darken;
    }

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

[data-rarity="Rainbow"] .card__glare {
    background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0,0%,80%), hsla(187, 10%, 85%, 0.25) 30%, hsl(197, 6%, 25%) 120% );
    filter: brightness(.9) contrast(1.75);
    opacity: calc( var(--hyp) * 0.9 * var(--opacity) );
    mix-blend-mode: hard-light;
    background-color: transparent;
}

/* Borde Resplandeciente Reactivo */
[data-rarity="Rainbow"] .card-border {
    border-color: #fbc2eb;
    box-shadow: 0 0 15px rgba(251, 194, 235, 0.6), inset 0 0 10px rgba(251, 194, 235, 0.4);
    opacity: calc(var(--opacity) * 0.8);
}