/* ========================================= */
/* --- REGULAR HOLO CARD STYLES ---          */
/* ========================================= */

/* Fondos y Bordes Base para la rareza Regular Holo */
[data-rarity="RegularHolo"] .card-root {
    border-color: #93c5fd; /* Azul claro metálico */
    background: linear-gradient(to bottom, #1a1d24, #1e3a8a);
}

[data-rarity="RegularHolo"] .card-bg {
    background-image: url("/images/Cards/Fortnikdores.png");
    background-size: cover;
}

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

/* Arte de la Carta */
[data-rarity="RegularHolo"] .card-art {
    border-color: rgba(147, 197, 253, 0.6);
}

/* Etiqueta Inferior */
.rarity-pill.RegularHolo {
    color: #1e3a8a;
    border-color: #93c5fd;
    background: linear-gradient(90deg, rgba(147, 197, 253, 0.8), rgba(96, 165, 250, 0.8));
    box-shadow: 0 0 8px rgba(147, 197, 253, 0.5);
}

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

[data-rarity="RegularHolo"] .fx-regular-holo {
    display: block;
    --scanlines-space: 1px;
    --scanlines-light: #666;
    --scanlines-dark: black;
    --bars: 3%;
    --bar-color: hsla(0, 0%, 70%, 1);
    --bar-bg: hsla(0, 0%, 0%, 1);
    background-image: repeating-linear-gradient( 110deg, var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red), var(--violet), var(--blue), var(--green), var(--yellow), var(--red) ), repeating-linear-gradient( 90deg, var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4) );
    /* Calculamos la posición dinámica para el movimiento parallax */
    background-position: calc(((50 - var(--pointer-num-x)) * 2.6%) + 50%) calc(((50 - var(--pointer-num-y)) * 3.5%) + 50%), center center;
    background-size: 400% 400%, cover;
    background-blend-mode: overlay;
    filter: brightness(1.1) contrast(1.1) saturate(1.2);
    mix-blend-mode: color-dodge;
    opacity: var(--opacity);
}

    /* Sub-capa BEFORE: Barras reflectantes (glitches) */
    [data-rarity="RegularHolo"] .fx-regular-holo:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*14) ), repeating-linear-gradient( 90deg, var(--bar-bg) calc(var(--bars)*2), var(--bar-color) calc(var(--bars)*3), var(--bar-bg) calc(var(--bars)*3.5), var(--bar-color) calc(var(--bars)*4), var(--bar-bg) calc(var(--bars)*5), var(--bar-bg) calc(var(--bars)*10) );
        background-position: calc((((50 - var(--pointer-num-x)) * 1.65%) + 50% ) + (var(--pointer-num-y) * 0.5%)) var(--pointer-y), calc((((50 - var(--pointer-num-x)) * -0.9%) + 50%) - (var(--pointer-num-y) * 0.75%) ) var(--pointer-y);
        background-size: 200% 200%, 200% 200%;
        background-blend-mode: screen;
        filter: brightness( 1.15 ) contrast( 1.1 );
        mix-blend-mode: hard-light;
    }

    /* Sub-capa AFTER: Resplandor focal (Foco de Luz central) */
    [data-rarity="RegularHolo"] .fx-regular-holo:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 90%, 0.8) 0%, hsla(0, 0%, 78%, 0.1) 25%, hsl(0, 0%, 0%) 90% );
        background-position: center center;
        background-size: cover;
        mix-blend-mode: luminosity;
        filter: brightness(0.6) contrast(4);
    }

@media screen and (max-width: 900px) {
    [data-rarity="RegularHolo"] .fx-regular-holo {
        --scanlines-space: .5px;
    }
}

/* ========================================= */
/* GLARE LAYERS (Destello Base de la Carta)  */
/* ========================================= */

/* Sobrescribimos el Glare Base */
[data-rarity="RegularHolo"] .card__glare {
    opacity: calc( var(--opacity) * .8 );
    filter: brightness(0.8) contrast(1.5);
    mix-blend-mode: overlay;
    background: transparent; /* Limpiamos el default */
}

    /* Glare secundario reactivo */
    [data-rarity="RegularHolo"] .card__glare:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(180, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(0, 0%, 0%, 0.36) 110% );
        mix-blend-mode: overlay;
        filter: brightness(.6) contrast(3);
    }

/* Borde Resplandeciente Reactivo */
[data-rarity="RegularHolo"] .card-border {
    border-color: #93c5fd;
    box-shadow: 0 0 15px rgba(147, 197, 253, 0.6), inset 0 0 10px rgba(147, 197, 253, 0.4);
    opacity: calc(var(--opacity) * 0.8);
}