/*
 * Slider de fotos de SociWeb.
 *
 * Los colores salen de las variables de la paleta que ya emite el
 * componente, con un valor de respaldo en cada uso: si el módulo se pone en
 * una web sin esa paleta se ve igual de bien en vez de quedarse sin color.
 *
 * La altura la manda --magon-slider-alto, que la pinta el PHP desde el
 * parámetro del módulo.
 */

.magon-slider {
    position: relative;
    width: 100%;
    height: var(--magon-slider-alto, 380px);
    overflow: hidden;
    border-radius: 10px;
    background: #0F172A;
    isolation: isolate;
}

.magon-slider-pista {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.magon-slider-foto {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    /* visibility además de opacity: con opacity 0 a secas, el texto de las
       diapositivas ocultas sigue siendo alcanzable con el tabulador y por el
       lector de pantalla. */
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s;
}

.magon-slider-foto.es-activa {
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease, visibility 0s;
    z-index: 1;
}

.magon-slider-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /*
     * ESTO ES LO QUE QUITA EL TEMBLOR.
     *
     * Animar un scale sin avisar al navegador lo deja recalculando la
     * imagen en cada fotograma por la CPU, y se ve dar saltitos. Con
     * will-change y translateZ(0) la capa se compone en la GPU y el
     * movimiento sale liso. backface-visibility remata el redondeo de
     * subpíxel, que es de donde viene el resto del tembleque.
     */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ------------------------------------------------------------------ */
/* TRANSICIONES entre una foto y la siguiente                         */
/* ------------------------------------------------------------------ */

/* Corte: sin fundido, cambio seco. */
.magon-slider-tr-corte .magon-slider-foto {
    transition: none;
}

/* Deslizar: la nueva entra por la derecha y la vieja se va por la izquierda. */
.magon-slider-tr-desliza .magon-slider-foto {
    transform: translateX(12%);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1),
                visibility 0s linear .7s;
}

.magon-slider-tr-desliza .magon-slider-foto.es-activa {
    transform: translateX(0);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1),
                visibility 0s;
}

/* ------------------------------------------------------------------ */
/* EFECTOS de movimiento mientras la foto está en pantalla            */
/*                                                                    */
/* Se aplican SOLO a la que se ve: diez animaciones a la vez es tirar */
/* batería para nada. La duración la marca --magon-efecto, que la     */
/* pone el JavaScript a partir del intervalo configurado: el          */
/* movimiento tiene que durar lo que dura la foto, no un valor fijo.  */
/* ------------------------------------------------------------------ */

.magon-slider-foto.es-activa img {
    animation-duration: var(--magon-efecto, 6s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

/* --- Zoom: se acerca. El clásico Ken Burns. --- */
.magon-slider-ef-zoom .magon-slider-foto.es-activa img,
.magon-slider-ef-al-zoom .magon-slider-foto.es-activa img {
    animation-name: magon-acercar;
    animation-timing-function: ease-out;
}

@keyframes magon-acercar {
    from { transform: translateZ(0) scale(1); }
    to   { transform: translateZ(0) scale(1.12); }
}

/* --- Zoom suave: se aleja. Menos agresivo, entra ya con detalle. --- */
.magon-slider-ef-zoomsuave .magon-slider-foto.es-activa img,
.magon-slider-ef-al-zoomsuave .magon-slider-foto.es-activa img {
    animation-name: magon-alejar;
    animation-timing-function: ease-out;
}

@keyframes magon-alejar {
    from { transform: translateZ(0) scale(1.12); }
    to   { transform: translateZ(0) scale(1); }
}

/* --- Deriva: acerca y desplaza en diagonal. --- */
.magon-slider-ef-deriva .magon-slider-foto.es-activa img,
.magon-slider-ef-al-deriva .magon-slider-foto.es-activa img {
    animation-name: magon-derivar;
    animation-timing-function: ease-in-out;
}

@keyframes magon-derivar {
    from { transform: translateZ(0) scale(1.14) translate(-2.5%, -1.5%); }
    to   { transform: translateZ(0) scale(1.14) translate(2.5%, 1.5%); }
}

/*
 * --- PANEO: recorre la foto para que se vea ENTERA. ---
 *
 * Es el que resuelve el problema de verdad. Con object-fit: cover, una foto
 * vertical en un marco apaisado se queda recortada por arriba y por abajo, y
 * una apaisada en un marco estrecho por los lados: se ve un trozo y nunca el
 * resto.
 *
 * Aquí la imagen NO se recorta: se deja crecer por el lado que sobra y se
 * recorre ese lado de punta a punta. Cuánto hay que recorrer depende de las
 * proporciones REALES de cada foto, que en CSS no se conocen: lo mide el
 * JavaScript al cargarla y lo deja en --magon-recorrido. Por eso la clase de
 * orientación la pone el script, no el PHP.
 */
.magon-slider-ef-paneo .magon-slider-foto img,
.magon-slider-ef-al-paneo .magon-slider-foto img {
    object-fit: fill;
}

/* Foto VERTICAL: ocupa todo el ancho, sobra por arriba y por abajo.
   Se recorre de arriba abajo. */
.magon-slider-foto.es-vertical img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.magon-slider-foto.es-vertical.es-activa img {
    animation-name: magon-panear-vertical;
}

@keyframes magon-panear-vertical {
    from { transform: translateZ(0) translateY(0); }
    to   { transform: translateZ(0) translateY(var(--magon-recorrido, 0px)); }
}

/* Foto HORIZONTAL: ocupa todo el alto, sobra por los lados.
   Se recorre de izquierda a derecha. */
.magon-slider-foto.es-horizontal img {
    height: 100%;
    width: auto;
    min-width: 100%;
    max-width: none;
}

.magon-slider-foto.es-horizontal.es-activa img {
    animation-name: magon-panear-horizontal;
}

@keyframes magon-panear-horizontal {
    from { transform: translateZ(0) translateX(0); }
    to   { transform: translateZ(0) translateX(var(--magon-recorrido, 0px)); }
}

/* Una foto que cabe justa -cuadrada en marco cuadrado- no tiene nada que
   recorrer: se le deja el zoom suave para que no parezca congelada. */
.magon-slider-foto.es-justa.es-activa img {
    animation-name: magon-acercar;
    animation-timing-function: ease-out;
}

/* --- Ninguno: quieta. --- */
.magon-slider-ef-ninguno .magon-slider-foto.es-activa img {
    animation: none;
}

/* ---------------------------------------------------------------- pie */

.magon-slider-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.5rem 1rem .9rem;
    color: #fff;
    /* Sobre la foto y no sobre un fondo liso: una foto clara se come el
       texto blanco. */
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    z-index: 2;
}

.magon-slider-titulo {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.magon-slider-meta {
    display: block;
    font-size: .82rem;
    opacity: .85;
    margin-top: .15rem;
}

/* ---------------------------------------------------------------- mandos */

.magon-slider-flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 2.6rem;
    height: 2.6rem;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.magon-slider:hover .magon-slider-flecha,
.magon-slider-flecha:focus-visible {
    opacity: 1;
}

.magon-slider-flecha:hover {
    background: var(--magon-dorado, #B8860B);
}

.magon-slider-flecha:focus-visible {
    outline: 3px solid var(--magon-dorado-claro, #D4A017);
    outline-offset: 2px;
}

.magon-slider-antes   { left: .6rem; }
.magon-slider-despues { right: .6rem; }

.magon-slider-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: .55rem;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .4rem;
}

.magon-slider-punto {
    width: .55rem;
    height: .55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.magon-slider-punto.es-activa {
    background: var(--magon-dorado-claro, #D4A017);
    transform: scale(1.35);
}

.magon-slider-punto:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.magon-slider-progreso {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 3;
    background: rgba(255, 255, 255, .18);
}

.magon-slider-progreso span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--magon-dorado, #B8860B);
}

.magon-slider-ver-todas {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 3;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: .8rem;
    text-decoration: none;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease;
}

.magon-slider:hover .magon-slider-ver-todas,
.magon-slider-ver-todas:focus-visible {
    opacity: 1;
}

.magon-slider-ver-todas:hover {
    background: var(--magon-dorado, #B8860B);
    color: #fff;
}

/* ----------------------------------------------------------------- móvil */

/*
 * Apagarlo en el móvil es una opción del módulo, y se hace con display:none
 * y no dejando de imprimir el HTML: el ancho de pantalla no se conoce en el
 * servidor, decidirlo en PHP obligaría a mirar el navegador -que miente- y
 * rompería cualquier caché de página.
 */
@media (max-width: 575.98px) {
    .magon-slider-sin-movil {
        display: none;
    }

    /* En táctil no hay "pasar el ratón": los mandos se quedan puestos. */
    .magon-slider-flecha,
    .magon-slider-ver-todas {
        opacity: 1;
    }

    .magon-slider {
        height: min(var(--magon-slider-alto, 380px), 56vw);
    }
}

/* Quien ha pedido menos movimiento en su sistema no quiere un paneo lento ni
   una foto cambiando cada cinco segundos. El JavaScript lee lo mismo y
   tampoco las pasa solo. */
@media (prefers-reduced-motion: reduce) {
    .magon-slider-foto.es-activa img {
        animation: none !important;
    }

    .magon-slider-foto {
        transition: none;
    }
}