/* ============================================================
   Pagina About

   Riusa tutto quello che può da style.css — token, logo, headline
   a macchina da scrivere, bottoni, puntatori — e aggiunge solo
   quello che qui è diverso: il sottotitolo, la fila delle tre
   schede e la loro navigazione.

   Gli oggetti (figurina e moneta) stanno nello stesso `#stage`
   della homepage e si comportano allo stesso modo: la differenza
   è che qui non si aprono, si prendono e basta.
   ============================================================ */

.is-about .hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 4.4vh;
}

/* La colonna del testo tiene poco più della metà, ma non può stringersi
   oltre una certa misura: su una finestra piccola di uno schermo grande il
   62% diventavano trecento pixel, e le schede erano illeggibili. Sotto quella
   soglia il testo si prende quasi tutta la larghezza e gli oggetti passano
   dietro — che è quello che succede già su telefono. */
.hero--about > * { max-width: min(900px, max(62%, 520px)); }

@media (max-width: 1100px) {
  .hero--about > * { max-width: min(900px, max(78%, 520px)); }
}

/* Stesso corpo della home — cambia solo la larghezza concessa: la headline
   può sfondare la colonna del testo (che resta stretta per le schede), o
   "Not so long ago, in a galaxy" andrebbe a capo. */
.headline--about {
  margin-top: 2.4vh;
  max-width: 94%;
}

/* Finita la scrittura la headline si mette a respirare come quella della
   home: `breathe` sul blocco (non sulle righe, o sembra un difetto di
   rendering) e `wiggle` sulle righe, sfasato. Le due animazioni stanno in
   style.css, qui si limita ad accenderle. */
.is-typed .headline--about {
  animation: breathe 9s cubic-bezier(.45, 0, .55, 1) infinite;
}

.is-typed .headline--about .line {
  animation: wiggle 10s ease-in-out infinite;
}

.is-typed .headline--about .line:nth-child(2) { animation-delay: -4.2s; }

/* ---- la fila delle tre schede ---- */

.about-cards {
  width: 100%;
  margin-top: 3.2vh;
  overflow: hidden;
  border-radius: 18px;
  background: var(--cream);
  color: var(--black);
  /* stessa ombra delle schede progetto: serve a staccarlo quando figurina
     e moneta ci passano dietro */
  box-shadow: 0 28px 80px -24px rgba(0, 0, 0, .85);

  /* l'altezza la imposta il JS sulla scheda di turno: le tre hanno
     lunghezze diverse e senza transizione il salto si vedrebbe */
  transition: height .5s cubic-bezier(.32, .72, .2, 1);

  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: height .5s cubic-bezier(.32, .72, .2, 1),
              opacity .55s ease .1s,
              transform .55s cubic-bezier(.2, .8, .25, 1) .1s;
}

.is-typed .about-cards { opacity: 1; transform: none; }

.about-track {
  display: flex;
  align-items: stretch;          /* tutte alte quanto il box */
  transition: transform .55s cubic-bezier(.32, .72, .2, 1);
}

.about-card {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(1.1rem, 2vw, 2rem) clamp(1.2rem, 2.2vw, 2.2rem) clamp(1.1rem, 1.9vw, 1.9rem);
}

.about-card__kicker {
  margin: 0 0 .15rem;
  font-size: clamp(10px, .82vw, 14px);
  font-weight: 400;
  font-variation-settings: "wght" 700;
  letter-spacing: .005em;
}

.about-card__title {
  margin: 0 0 .9rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(19px, 2.15vw, 40px);
  line-height: 1.12;
}

.about-card__text {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  font-size: clamp(12px, 1.05vw, 19px);
  line-height: 1.4;
}

.about-card__text p { margin: 0; }
.about-card__text b,
.about-row__what { font-weight: 400; font-variation-settings: "wght" 700; }

/* La seconda scheda è un elenco: anni sopra, ruolo sotto, e una linea a
   dividere ogni blocco dal precedente. Occupa tutta l'altezza del box —
   le tre voci si distribuiscono invece di ammucchiarsi in alto lasciando
   un vuoto sotto. */
.about-card__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
}

.about-row {
  padding-top: .62rem;
  border-top: 1px solid rgba(9, 9, 9, .22);
}

.about-row p { margin: 0; }

.about-row__when {
  font-size: clamp(10px, .82vw, 14px);
  line-height: 1.3;
}

.about-row__what {
  font-size: clamp(13px, 1.15vw, 21px);
  line-height: 1.25;
}

/* ---- bottone e navigazione ---- */

.about-foot {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: 2.6vh;
  width: 100%;
}

.about-foot .btn { margin-top: 0; }

/* in home i bottoni entrano con .is-typing, messa da main.js: qui il
   segnale è .is-typed, che arriva quando la scrittura è finita */
.is-typed .btn { opacity: 1; transform: translateY(0) scale(1); }

.about-nav {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-left: auto;

  opacity: 0;
  transition: opacity .5s ease .2s;
}

.is-typed .about-nav { opacity: 1; }

/* stessi cerchietti della scheda progetto, ribaltati per il fondo nero */
/* Il fondo scuro non è un vezzo: dietro può esserci la figurina, che è
   chiara, e senza un fondo proprio le frecce sparivano dentro la foto. */
.about-nav__btn {
  width: var(--nav-btn);
  height: var(--nav-btn);
  padding: 0;
  display: grid;
  place-items: center;
  border: 1.6px solid var(--cream);
  border-radius: 999px;
  background: rgba(9, 9, 9, .55);
  backdrop-filter: blur(6px);
  color: var(--cream);
  cursor: var(--cur-manina);
  pointer-events: auto;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.about-nav__btn svg { width: 62%; height: 62%; stroke: currentColor; stroke-width: 2.2; fill: none; }
.about-nav__btn:hover { background: var(--cream); color: var(--black); }
.about-nav__btn:active { transform: scale(.94); }
.about-nav__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.about-nav__count {
  margin: 0;
  min-width: 3.4em;
  padding: .34em .2em;
  border-radius: 999px;
  background: rgba(9, 9, 9, .55);
  backdrop-filter: blur(6px);
  text-align: center;
  font-size: clamp(11px, .95vw, 15px);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--cream);
}

/* ---- schermi stretti: una colonna, gli oggetti restano sotto ---- */

@media (max-width: 900px) {
  .hero--about > * { max-width: 100%; }

  .about-cards { margin-top: 2.4vh; }

  .about-card__title { font-size: clamp(18px, 5.4vw, 30px); }
  .about-card__text { font-size: clamp(12px, 3.5vw, 16px); }
  .about-row__what { font-size: clamp(12px, 3.8vw, 17px); }
  .about-row__when { font-size: clamp(10px, 2.9vw, 13px); }

  .about-foot { margin-top: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  .about-cards, .about-nav { opacity: 1; transform: none; transition: none; }
  .about-track { transition: none; }
  .is-typed .headline--about,
  .is-typed .headline--about .line { animation: none; }
}

/* I nomi citati nella terza scheda portano fuori: sottolineatura sottile
   che si accende al passaggio, senza spezzare la lettura del paragrafo. */
.about-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(9, 9, 9, .35);
  cursor: var(--cur-manina);
  transition: text-decoration-color .18s ease, background-color .18s ease;
  border-radius: 3px;
}

.about-link:hover {
  text-decoration-color: var(--black);
  background: rgba(9, 9, 9, .07);
  box-shadow: 0 0 0 3px rgba(9, 9, 9, .07);
}

.about-link:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }