/* ==========================================================================
   Scroll orizzontale fissato (horizontal-scroll di Animation Addons, pista "pista-orizzontale").
   La sezione resta ferma sullo schermo e, scorrendo in giu', i pannelli scorrono in orizzontale.
   Markup:
     section.hscroll[data-hscroll][data-hscroll-distance="3744"]
       > .hscroll__viewport > .hscroll__track > .hscroll__panel (x N, larghi 100vw, alti 100vh)
   data-hscroll-distance = quanti px di scroll verticale servono per attraversare tutta la pista
   (sul vivo "horizontal_scroll_end": 3744 px, uguale a ogni larghezza).

   Stato di base (senza JS, o con "riduci movimento"): nessun pin, la sezione e' alta uno
   schermo, si vede il primo pannello e gli altri si raggiungono scorrendo di lato (swipe,
   trackpad, shift+rotella), con aggancio ai pannelli. E' anche lo stato "a riposo" che il
   confronto pixel fotografa, uguale a quello del vivo con il pin sciolto.
   Stato attivo (.is-active, lo mette hscroll.js): sezione alta 100vh + distanza, finestra
   sticky, pista spostata con transform.
   ========================================================================== */
.hscroll__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.hscroll__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

.hscroll__panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

.hscroll.is-active {
  height: calc(100vh + var(--hscroll-distance, 0px));
}

.hscroll.is-active .hscroll__viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  scroll-snap-type: none;
}

.hscroll.is-active .hscroll__track {
  transform: translate3d(var(--hscroll-x, 0px), 0, 0);
  will-change: transform;
}