/*!
 * GWS HScroll 1.1 — sezione che resta ferma mentre i box scorrono da destra a sinistra con lo scroll.
 * Quando un box arriva, poco dopo compaiono in sequenza: titolo (lettera per lettera), filetto, frase, punti.
 * Prefisso "gwsh-": nessun selettore globale.
 * Personalizzazione (su [data-gwsh]): --gwsh-bg, --gwsh-box, --gwsh-ink, --gwsh-muted, --gwsh-ghost, --gwsh-accent,
 *   --gwsh-panel-w, --gwsh-panel-h, --gwsh-font (carattere dei testi), --gwsh-delay (attesa prima del titolo)
 */
.gwsh {
  position: relative;
  --gwsh-bg: #ffffff;
  --gwsh-box: #ffffff;
  --gwsh-ink: #171717;
  --gwsh-muted: #55554f;
  --gwsh-ghost: #f0f0ee;
  --gwsh-accent: #e91e8c;
  --gwsh-panel-w: min(980px, 88vw);
  --gwsh-panel-h: min(78vh, 560px);
  --gwsh-font: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gwsh-delay: .1s;
  background: var(--gwsh-bg);
  color: var(--gwsh-ink);
}
.gwsh__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1rem, 4vh, 2.4rem) 0 clamp(1rem, 3vh, 2rem);
}
.gwsh__head { flex: none; padding: 0 5vw; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; font-family: var(--gwsh-font); }
.gwsh__eyebrow { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gwsh-accent); font-weight: 600; }
.gwsh__count { flex: none; font-size: .9rem; letter-spacing: .1em; color: var(--gwsh-muted); font-variant-numeric: tabular-nums; }
.gwsh__count b { color: var(--gwsh-ink); font-weight: 700; }

.gwsh__view { flex: 1; min-height: 0; display: flex; align-items: center; }
.gwsh__track { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); padding: 0 6vw; will-change: transform; }

/* schermata iniziale: sta ferma al centro e sfuma lentamente quando si comincia a scorrere */
.gwsh__intro {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6vw;
  text-align: center;
  font-family: var(--gwsh-font);
  pointer-events: none;
  will-change: opacity, transform;
}
.gwsh__intro-eyebrow { font-size: clamp(.65rem, .9vw, .8rem); letter-spacing: .32em; text-transform: uppercase; margin-bottom: clamp(1rem, 3vh, 2rem); }
.gwsh__intro-title { margin: 0 0 clamp(1.2rem, 4vh, 2.6rem); font-size: min(10.5vw, 8.6rem); line-height: 1; font-weight: 800; letter-spacing: -.05em; }
.gwsh__intro-text { margin: 0 0 clamp(1.2rem, 3.5vh, 2.2rem); max-width: 52ch; font-size: clamp(.85rem, 1.25vw, 1.1rem); line-height: 1.75; }
.gwsh__intro-list { font-size: clamp(.7rem, 1vw, .9rem); letter-spacing: .16em; text-transform: uppercase; }
.gwsh__intro-list b { font-weight: 400; color: var(--gwsh-accent); }
.gwsh__view, .gwsh__head { position: relative; z-index: 1; }
.gwsh__sticky > .gwsh__view { /* il box passa sopra la schermata iniziale, sulla stessa linea */ }

/* il box */
.gwsh__panel {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: var(--gwsh-panel-w);
  height: var(--gwsh-panel-h);
  padding: clamp(1.4rem, 4vw, 3.6rem);
  border-radius: 26px;
  background: var(--gwsh-box);
  border: 1px solid #ebebe8;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.3);
  overflow: hidden;
  font-family: var(--gwsh-font);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* numero gigante sullo sfondo */
.gwsh__ghost {
  position: absolute;
  left: -.04em;
  bottom: -.2em;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 800;
  font-size: min(52vw, calc(var(--gwsh-panel-h) * 1.05));
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--gwsh-ghost);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateX(6%);
  transition: opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.gwsh__panel > :not(.gwsh__ghost) { position: relative; }

.gwsh__name {
  margin: 0;
  font-size: min(12vw, 7rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.gwsh__ch { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.gwsh__rule { width: clamp(90px, 14vw, 150px); height: 1px; margin: clamp(1rem, 3vh, 1.8rem) 0; background: rgba(0,0,0,.18); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease; }
.gwsh__tag { margin: 0 0 clamp(1rem, 3vh, 2rem); font-size: clamp(.95rem, 1.5vw, 1.25rem); line-height: 1.4; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s ease; }
.gwsh__list { margin: 0; padding: 0; list-style: none; font-size: clamp(.78rem, 1.05vw, .95rem); line-height: 1.5; color: var(--gwsh-muted); }
.gwsh__list li { position: relative; padding: .5rem 0 .5rem 2.2em; opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .3s ease; }
.gwsh__list li::before { content: "—"; position: absolute; left: 0; opacity: .5; }

/* entrata: tutto parte un attimo dopo che il box è arrivato */
.gwsh__panel.is-in .gwsh__ghost { opacity: 1; transform: none; transition-delay: var(--gwsh-delay); }
.gwsh__panel.is-in .gwsh__ch { opacity: 1; transform: none; transition-delay: calc(var(--gwsh-delay) + var(--i, 0) * 22ms); }
.gwsh__panel.is-in .gwsh__rule { transform: none; transition-delay: calc(var(--gwsh-delay) + .22s); }
.gwsh__panel.is-in .gwsh__tag { opacity: 1; transform: none; transition-delay: calc(var(--gwsh-delay) + .3s); }
.gwsh__panel.is-in .gwsh__list li { opacity: 1; transform: none; transition-delay: calc(var(--gwsh-delay) + .4s + var(--k, 0) * 70ms); }

.gwsh__bar { flex: none; margin: clamp(.6rem, 2vh, 1.2rem) 6vw 0; height: 2px; background: rgba(0, 0, 0, .1); }
.gwsh__bar i { display: block; height: 100%; width: 100%; background: var(--gwsh-ink); transform-origin: 0 50%; transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  .gwsh__intro { position: static; padding: 8vh 6vw; }
  .gwsh { height: auto !important; }
  .gwsh__sticky { position: static; height: auto; }
  .gwsh__view { overflow-x: auto; }
  .gwsh__ghost, .gwsh__ch, .gwsh__rule, .gwsh__tag, .gwsh__list li { opacity: 1 !important; transform: none !important; transition: none !important; }
}