/* ==========================================================================
   ESTILOS DE RANKING CON IMAGEN
   --------------------------------------------------------------------------
   Los 37 estilos que ya existian se dibujan solo con gradientes. Estos cuatro
   son los primeros que usan una foto.

   LA IMAGEN VA EN ::before, NO EN background-image DE LA CLASE.
   Dos razones, las dos verificadas en el codigo:
     1. El interruptor de "Luces y Fuego" hace display:none sobre
        [class*="estilo-"]::before y ::after (css/style.css, bloque
        .sin-animaciones-ranking). Puesta en el pseudo, la foto se apaga con el
        interruptor; puesta como background de la clase, no habria forma de
        sacarla.
     2. El texto queda SIEMPRE por encima: el pseudo se manda al fondo con
        z-index:0 y el contenido de la fila va en su propia capa. Sin eso, una
        foto clara dejaria el nombre ilegible.

   El velo oscuro encima de la foto no es decorativo: es lo que garantiza el
   contraste del texto sea cual sea la imagen.

   PARA CAMBIAR LA FOTO por un GIF propio, alcanza con reemplazar la url de
   --pcFoto: cualquier formato que entienda el navegador (gif, webp animado,
   png, jpg) funciona sin tocar nada mas.
   ========================================================================== */
.estilo-r_foto_champions,
.estilo-r_foto_torneo,
.estilo-r_foto_copero,
.estilo-r_foto_totw {
    position: relative;
    isolation: isolate;                 /* el pseudo no se escapa de la fila */
    overflow: hidden;
    border: 1px solid var(--pc-borde-fuerte);
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

.estilo-r_foto_champions::before,
.estilo-r_foto_torneo::before,
.estilo-r_foto_copero::before,
.estilo-r_foto_totw::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .78) 100%),
        var(--pcFoto);
    background-size: cover, cover;
    background-position: center, center;
    /* Un desplazamiento lento y continuo: da vida sin distraer de los datos.
       Se apaga solo con el interruptor global y con prefers-reduced-motion. */
    animation: pcFotoDeriva 18s ease-in-out infinite alternate;
}

/* El contenido de la fila siempre por encima de la foto. */
.estilo-r_foto_champions > *,
.estilo-r_foto_torneo > *,
.estilo-r_foto_copero > *,
.estilo-r_foto_totw > * {
    position: relative;
    z-index: 1;
}

@keyframes pcFotoDeriva {
    from { background-position: center, 45% center; }
    to   { background-position: center, 55% center; }
}

.estilo-r_foto_champions { --pcFoto: url("../assets/images/hero_champions.jpg"); }
.estilo-r_foto_torneo    { --pcFoto: url("../assets/images/hero_torneo.jpg"); }
.estilo-r_foto_copero    { --pcFoto: url("../assets/images/hero_copero.jpg"); }
.estilo-r_foto_totw      { --pcFoto: url("../assets/images/hero_totw.jpg"); }

/* Con movimiento reducido la foto se queda quieta, pero NO desaparece: el
   usuario la compro y sigue siendo su estilo. Quien quiera sacarla del todo
   tiene el interruptor de "Luces y Fuego". */
@media (prefers-reduced-motion: reduce) {
    .estilo-r_foto_champions::before,
    .estilo-r_foto_torneo::before,
    .estilo-r_foto_copero::before,
    .estilo-r_foto_totw::before {
        animation: none;
    }
}

/* La vista previa de la tienda recorta a 86px de alto con overflow:hidden
   (css/prime-pantallas.css), asi que la foto tiene que entrar sin deformarse. */
.tiendaPreviewBox .estilo-r_foto_champions::before,
.tiendaPreviewBox .estilo-r_foto_torneo::before,
.tiendaPreviewBox .estilo-r_foto_copero::before,
.tiendaPreviewBox .estilo-r_foto_totw::before {
    background-size: cover, cover;
}