/* ==========================================================================
   ESTILOS DE RAREZA LEGEND (AGUA Y HUMO - AZUL Y DORADO)
   ========================================================================== */

/* --- Estructura y Fondo --- */
[data-rarity="Legend"] .card-root {
    border-color: #fbbf24; /* Dorado intenso */
    background: linear-gradient(135deg, #020617, #0f172a, #1e3a8a); /* Océano profundo oscuro */
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.8);
}

[data-rarity="Legend"] .card-bg {
    background-image: url('../images/Cards/legend.png');
    background-size: cover;
    opacity: 0.85; /* Ligera transparencia para que respire con el fondo */
}

[data-rarity="Legend"] .card-overlay {
    background: linear-gradient(to top, rgba(2, 6, 23, 0.8) 0%, rgba(0,0,0,0) 50%);
}

/* --- Etiquetas y Bordes --- */
[data-rarity="Legend"] .badge-rarity, [data-rarity="Legend"] .badge-pos {
    color: #0f172a; /* Azul marino oscuro para el texto, alto contraste */
    border-color: #fde68a;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    text-shadow: none;
    font-weight: 900;
}

[data-rarity="Legend"] .card-border {
    border: 2px solid #fde68a;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.4), inset 0 0 15px rgba(59, 130, 246, 0.3);
    opacity: calc(var(--opacity, 0) * 0.8 + 0.2);
}

/* --- ANIMACIONES Y CAPAS FX (Agua y Humo) --- */
[data-rarity="Legend"] .fx-layer {
    display: block;
    inset: 0;
    overflow: hidden;
    /* Corrientes de agua suaves (Ondas azules marinas) */
    background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.15) 0%, transparent 60%), repeating-radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.15) 5%, transparent 10%);
    background-size: 150% 150%;
    /* soft-light oscurece las sombras y aclara los brillos sutilmente, jamás quema a blanco */
    mix-blend-mode: soft-light;
    opacity: calc(var(--opacity, 0) * 0.8 + 0.2);
    animation: legend-water-flow 6s infinite alternate ease-in-out;
    z-index: 1;
}

    /* Humo Dorado (Fondo difuminado que gira y se balancea suavemente) */
    [data-rarity="Legend"] .fx-layer::before {
        content: "";
        position: absolute;
        inset: -30%; /* Inset grande para que no se corten los bordes del difuminado al girar */
        background: radial-gradient(circle at 30% 70%, rgba(251, 191, 36, 0.3) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(245, 158, 11, 0.2) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.2) 0%, transparent 60%);
        filter: blur(20px);
        /* Screen añade luminosidad pero está controlado por la opacidad general de la capa padre */
        mix-blend-mode: screen;
        animation: legend-smoke-drift 10s infinite alternate ease-in-out;
        z-index: 2;
    }

    /* Destello sutil interactivo (Sigue el ratón para dar volumen bajo el agua) */
    [data-rarity="Legend"] .fx-layer::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle 150px at var(--pointer-x) var(--pointer-y), rgba(253, 230, 138, 0.3) 0%, rgba(56, 189, 248, 0.15) 40%, transparent 70% );
        mix-blend-mode: soft-light;
        z-index: 3;
    }

/* ==========================================================================
   KEYFRAMES DE ANIMACIÓN LEGEND
   ========================================================================== */

/* Animación del agua fluida */
@keyframes legend-water-flow {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* Animación del humo dorado rotando y balanceándose */
@keyframes legend-smoke-drift {
    0% {
        transform: rotate(0deg) scale(1) translate(0, 0);
    }

    50% {
        transform: rotate(15deg) scale(1.05) translate(2%, -2%);
    }

    100% {
        transform: rotate(-5deg) scale(1.1) translate(-2%, 2%);
    }
}