/**
 * Scroll infinito de los archivos (portfolio, arte, interiorismo).
 *
 * CSS plano a propósito: esta copia del tema no incluye el proyecto de
 * desarrollo, así que los .scss no se compilan. Se encola desde
 * inc/staticAssets.php.
 *
 * Usa las variables de color del tema (assets/styles/_variables.scss), que ya
 * están en el CSS compilado, para no duplicar la paleta.
 */

.infiniteScroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-block-start: calc(var(--component-spacing, 4rem) / 2);
  min-block-size: 2.5rem;
  position: relative;
  text-align: center;
}

/* El centinela va por encima del botón: dispara la carga antes de que el
   usuario llegue al final, de modo que la retícula parece continua. */
.infiniteScroll-sentinel {
  block-size: 1px;
  inline-size: 100%;
  pointer-events: none;
}

/*
 * El aviso de estado no se ve, pero sigue en el DOM.
 *
 * Su función es que los lectores de pantalla anuncien por aria-live que han
 * entrado elementos nuevos: sin eso, para alguien que navega sin ver la pantalla
 * el contenido aparecería de la nada y en silencio. Visualmente sobra, porque el
 * propio contenido apareciendo ya es la señal, así que se oculta igual que
 * cualquier otro texto sólo-para-lectores del tema.
 */
.infiniteScroll-status {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

/*
 * El botón sólo se oculta cuando el scroll automático está realmente activo
 * (clase puesta por el JS al crear el IntersectionObserver). Si el navegador no
 * lo soporta, o si se agotan los reintentos tras varios fallos de red, el botón
 * permanece o vuelve a aparecer y sigue siendo la vía de escape.
 *
 * Se oculta visualmente, no con display:none, para que siga siendo accesible.
 */
.infiniteScroll--auto .infiniteScroll-button {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.infiniteScroll--manual .infiniteScroll-button {
  block-size: auto;
  clip-path: none;
  inline-size: auto;
  margin: initial;
  overflow: visible;
  padding: initial;
  position: static;
  white-space: normal;
}

/* Estado final: ya no quedan elementos. El contenedor se queda vacío pero no
   se elimina, para no romper el anuncio del aria-live. */
.infiniteScroll--done {
  gap: 0;
  margin-block-start: 0;
  min-block-size: 0;
}

/* Indicador de carga */
.infiniteScroll.is-loading::before {
  animation: infiniteScrollSpin 0.8s linear infinite;
  block-size: 1.5rem;
  border: 2px solid var(--color-border, #e5e5e5);
  border-block-start-color: var(--color-text, #303030);
  border-radius: 50%;
  content: '';
  display: block;
  inline-size: 1.5rem;
}

@keyframes infiniteScrollSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .infiniteScroll.is-loading::before {
    animation: none;
    opacity: 0.5;
  }
}