/* ==========================================================================
   Skeleton: el hueco de lo que todavia esta llegando.

   El HTML del listado y de la ficha llega entero del servidor en unas
   decimas. Lo que tarda es lo que el navegador pide despues a Google: las
   fotos de los centros, el mapa y los avatares de las opiniones. Mientras
   llegan, su hueco reluce en vez de quedarse vacio o en blanco.

   La clase va en la propia <img> o <iframe>, no en un envoltorio: el brillo es
   su fondo, y el contenido, al cargar, lo tapa. Por eso funciona sin
   JavaScript. assets/js/skeleton.js solo lo apaga cuando ya ha llegado (para
   no dejar la animacion corriendo debajo de la foto) y esconde la imagen rota
   si Google no la sirve.

   Con movimiento reducido no reluce: base.css corta todas las animaciones y
   queda el hueco en gris, que es lo que tiene que quedar.
   ========================================================================== */

.skeleton {
    background-color: var(--teal-tint);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 70%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: skeleton-shine 1.4s ease-in-out infinite;
}

.skeleton[data-loaded] {
    background-image: none;
    animation: none;
}

/* Si Google no la sirve, mejor el hueco liso que el icono de imagen rota. */
.skeleton[data-failed] {
    visibility: hidden;
}

@keyframes skeleton-shine {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

/* ==========================================================================
   Skeleton de pagina.

   Las tarjetas de centro y la ficha entera ([data-skeleton]) se pintan como
   skeleton hasta que ha llegado lo que se ve: las fotos y el mapa a la vista y
   las tipografias. Lo pone html.is-loading, que se añade en linea en
   base.html.twig antes del primer pintado y quita assets/js/skeleton.js
   (revealWhenReady). Si el JavaScript no llega, el mismo script en linea lo
   quita a los tres segundos: la pagina nunca se queda en skeleton.

   El texto sigue en el HTML y solo se vuelve transparente, asi que buscadores
   y lectores de pantalla lo leen igual.
   ========================================================================== */

html.is-loading [data-skeleton] * {
    color: transparent !important;
}

/* Los bloques de texto: una barra del ancho de su contenido. */
html.is-loading [data-skeleton] :is(h1, h2, h3, h4, p, dt, dd, li, summary, .tag, .btn),
html.is-loading [data-skeleton] img,
html.is-loading [data-skeleton] [data-skeleton-block] {
    border-color: transparent;
    background-color: var(--teal-tint);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.75) 50%,
        transparent 70%
    );
    background-repeat: no-repeat;
    background-size: 200% 100%;
    box-shadow: none;
    animation: skeleton-shine 1.4s ease-in-out infinite;
}

html.is-loading [data-skeleton] :is(h1, h2, h3, h4, p, dt, dd, summary) {
    width: fit-content;
    max-width: 100%;
    border-radius: var(--r-sm);
}

/* Las fotos: se aparta la imagen de su caja y queda su fondo, que reluce. Con
   opacity se iria tambien el brillo, y con display: none las diferidas
   (loading="lazy") ni empezarian a cargar. */
html.is-loading [data-skeleton] img {
    object-position: -200vw 0;
}

/* El mapa no se deja apartar: se esconde y reluce su caja. */
html.is-loading [data-skeleton] iframe {
    opacity: 0;
}

/* Sobre fondo oscuro (la cabecera de la ficha), las barras en blanco. La foto
   no: su caja ya es clara y un blanco translucido encima no se veria. */
html.is-loading .on-dark[data-skeleton] :is(h1, h2, h3, h4, p, dt, dd, li, summary, .tag, .btn) {
    background-color: rgba(255, 255, 255, 0.12);
    background-image: linear-gradient(
        100deg,
        transparent 30%,
        rgba(255, 255, 255, 0.16) 50%,
        transparent 70%
    );
}