/* ==========================================================================
   2 · Who We Are (chiaro) — la "dichiarazione" in stile Until
   Etichetta · titolo · paragrafo grande che si accende parola per parola
   durante lo scroll · link · fascia di immagini che entra da destra.
   ========================================================================== */

.who {
  /* Grigio delle parole "spente": 3.2:1 su Ricepaper, valido solo per testo
     grande (il paragrafo è sempre ≥ 24px) */
  --who-dim: #8A8780;
  overflow: hidden;
}

.who-inner {
  position: relative;
}

.who-title {
  display: block;
  max-width: 16ch;
  margin-top: clamp(1.25rem, 0.8rem + 1.2vw, 2rem);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--hard-grey);
}

/* --------------------------------------------------------------------------
   Paragrafo-dichiarazione
   -------------------------------------------------------------------------- */

.who-statement {
  max-width: 28ch;
  margin-top: var(--title-gap);
  margin-left: auto;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
  color: var(--hard-grey);
}

.who-statement strong {
  font-weight: 500;
}

.who-statement .accent {
  color: var(--ocean);
}

/* Parole: spente finché lo scroll non le raggiunge (solo con JS attivo) */
.who-word {
  transition: color 0.45s var(--ease-out);
}

.who-statement.is-ready .who-word {
  color: var(--who-dim);
}

.who-statement.is-ready .who-word.is-lit {
  color: var(--hard-grey);
}

.who-statement.is-ready .accent .who-word.is-lit {
  color: var(--ocean);
}

/* --------------------------------------------------------------------------
   Link
   -------------------------------------------------------------------------- */

.who-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 28ch;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  margin-left: auto;
  font-size: clamp(1.625rem, 1rem + 2.4vw, 3.25rem); /* allinea alla colonna del paragrafo */
}

.who-actions .btn {
  font-size: var(--fs-small);
}

.who-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--dur-ui) var(--ease-out);
}

.who-actions .btn:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Fascia di immagini: entra da destra verso sinistra con lo scroll
   -------------------------------------------------------------------------- */

.who-gallery {
  margin-top: var(--section-y);
}

.who-track {
  display: flex;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  width: max-content;
  padding-left: var(--gutter);
  will-change: transform;
}

.who-shot {
  flex: none;
  width: clamp(240px, 16rem + 18vw, 560px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-card);
  background-color: var(--line);
}

.who-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Senza animazione (Stop animation, reduced-motion o senza JS):
   la fascia si può scorrere a mano */
.who-gallery {
  overflow-x: auto;
  scrollbar-width: none;
}

.who-gallery::-webkit-scrollbar {
  display: none;
}

.js:not(.motion-paused) .who-gallery {
  overflow: visible;
}