/**
 * horizontal-scroll.css — Componente genérico de scroll horizontal
 * (replica de horizontal-scroll-carrousel.component.tsx).
 *
 * Patrón sticky: una sección alta (height inline, p.ej. 300vh) con un wrapper
 * pegado al viewport; assets/js/horizontal-scroll.js publica el progreso del
 * scroll como --p (0→1) y aquí se traduce a translateX del track.
 *
 * API (por instancia, vía atributos/estilos inline en el markup):
 *   data-lm-hscroll        activa el JS de progreso
 *   style="height: 300vh"  duración del efecto (más alto = más lento)
 *   --hs-range             desplazamiento total del track (default -75%)
 *
 * Reutilizable: el contenido del track y del overlay lo aporta cada sección
 * (p.ej. components/about.css) sin tocar este archivo.
 */

.lm-hscroll {
  position: relative;
  width: 100%;
  --p: 0; /* progreso, lo actualiza horizontal-scroll.js */
  --hs-range: -75%;
}

/* Wrapper pegado: pantalla completa mientras la sección "pasa" */
.lm-hscroll__sticky {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  overflow: hidden;
}

/* Contenido fijo superpuesto (texto, botones). No captura clics;
   los elementos interactivos lo reactivan puntualmente. */
.lm-hscroll__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Pista horizontal: se desplaza según el progreso del scroll vertical.
   El % de translateX es relativo al ancho del propio track (igual que
   el x en % de Framer Motion). */
.lm-hscroll__track {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  align-items: center;
  min-width: max-content;
  will-change: transform;
  transform: translateX(calc(var(--hs-range) * var(--p)));
}

/* Accesibilidad: sin movimiento, el carrusel queda en su posición inicial */
@media (prefers-reduced-motion: reduce) {
  .lm-hscroll__track {
    transform: none;
  }
}