/* ==========================================================================
   SMAGENCY · chi-siamo.css
   Lo stile che serve solo alla pagina Chi siamo (chi-siamo.html).
   Quello uguale in tutte le pagine sta in css/comune.css.
   Le due scene usano solo --p (lo scrive js/comune.js, blocco 2b):
   questa pagina non ha bisogno di uno script suo.

   1. La nostra storia: i paragrafi si "accendono" mentre si scorre
   2. Per chi lavoriamo: le tre carte arrivano dal basso una alla volta
   3. Telefono
   4. Senza JavaScript o con meno animazioni
   ========================================================================== */


/* ---------- 1. La nostra storia ----------
   Ogni paragrafo ha il suo numero --i (0, 1, 2) scritto nell'HTML.
   --t va da 0 a 1 mentre si scorre, un paragrafo dopo l'altro:
   il paragrafo passa da quasi invisibile a bianco e sale di poco.
   Si usa l'opacità e non il colore: cambiare colore costringe il browser a
   ridisegnare il testo a ogni fotogramma, l'opacità no. */
.js .storia { height: 260vh; height: 260svh; }
.storia__scena { display: flex; align-items: center; padding-top: 70px; }
.storia__griglia {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
  width: 100%;
}
.storia__sinistra .numero { margin-bottom: 18px; }
.storia__titolo {
  margin-bottom: .45em;
  font-size: clamp(3rem, 7vw, 6.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.06em;
}
.storia__citazione { max-width: 26em; margin: 0; padding: 24px 28px; }
.storia__citazione p { margin-bottom: 8px; font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.storia__citazione footer { color: var(--bianco-3); font-size: .92rem; }

.storia__testo p {
  margin-bottom: 1.1em;
  font-size: clamp(1.15rem, 1.75vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
}
.storia__testo p:last-child { margin-bottom: 0; }
.js .storia__testo p {
  --t: clamp(0, calc(var(--p, 0) * 3.6 - var(--i) * 1.1), 1);
  opacity: calc(.16 + .84 * var(--t));
  translate: 0 calc((1 - var(--t)) * 18px);
  will-change: transform, opacity;
}


/* ---------- 2. Per chi lavoriamo ----------
   Le carte arrivano dal basso una alla volta (la carta --i parte quando la
   precedente è arrivata) e si raddrizzano mentre salgono. */
.js .per-chi { height: 280vh; height: 280svh; }
.per-chi { padding: clamp(80px, 10vw, 120px) 0; }
.js .per-chi { padding: 0; }
.per-chi__scena { display: flex; align-items: center; padding-top: 60px; }
.per-chi__scena > .contenitore { width: 100%; }
.per-chi .titolo-sezione { max-width: none; }

.per-chi__pila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.per-chi__carta {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 30px;
  border-radius: 30px;
}
.js .per-chi__carta {
  --t: clamp(0, calc(var(--p, 0) * 3.6 - var(--i)), 1);
  opacity: calc(.2 + .8 * var(--t));
  transform: translateY(calc((1 - var(--t)) * 70vh)) rotate(calc((1 - var(--t)) * 6deg));
  will-change: transform, opacity;
}
.per-chi__carta .icona { width: 2.2rem; height: 2.2rem; margin-bottom: auto; color: var(--lime); }
.per-chi__carta h3 { margin: 44px 0 .4em; font-size: 1.7rem; letter-spacing: -.04em; }
.per-chi__carta p { margin: 0; color: var(--bianco-2); }

.per-chi__dove {
  display: flex;
  align-items: center;
  gap: .6em;
  max-width: 42em;
  margin: 28px 0 0;
  color: var(--bianco-2);
}
.per-chi__dove .icona { color: var(--lime); }


/* ---------- 3. Telefono ---------- */
@media (max-width: 900px) {
  .storia__griglia { grid-template-columns: 1fr; gap: 26px; }
  .storia__titolo { font-size: clamp(2.6rem, 11vw, 4rem); margin-bottom: .3em; }
  .storia__citazione { display: none; }            /* nella scena del telefono non ci sta: torna sotto */
  .storia__testo p { font-size: 1.05rem; }

  /* Le carte si impilano: ognuna copre quella prima, lasciando vedere il titolo */
  .per-chi__pila { display: block; position: relative; height: 400px; }
  .per-chi__carta { position: absolute; top: calc(var(--i) * 70px); left: 0; right: 0; min-height: 260px; padding: 24px; }
  .per-chi__carta h3 { margin-top: 20px; font-size: 1.45rem; }
  .per-chi__carta p { font-size: .98rem; }
}

/* Telefoni bassi: le scene non ci starebbero, diventano sezioni normali */
@media (max-width: 900px) and (max-height: 700px) {
  .js .storia, .js .per-chi { height: auto; }
  .js .storia__scena, .js .per-chi__scena { position: static; height: auto; padding: 110px 0 60px; }
  .js .storia__testo p { --t: 1; }
  .js .per-chi__carta { --t: 1; }
  .storia__citazione { display: block; }
}


/* ---------- 4. Senza JavaScript o con meno animazioni ---------- */
html:not(.js) .storia__scena { padding: 140px 0 80px; }
html:not(.js) .per-chi__pila { height: auto; }
html:not(.js) .per-chi__carta { position: static; margin-bottom: 12px; }

@media (prefers-reduced-motion: reduce) {
  .js .storia__scena { padding: 140px 0 80px; }
  .js .storia__testo p { --t: 1; }
  .js .per-chi { padding: clamp(80px, 10vw, 120px) 0; }
  .js .per-chi__carta { --t: 1; }
  .per-chi__pila { height: auto !important; }
  .per-chi__carta { position: static !important; margin-bottom: 12px; }
  .storia__citazione { display: block !important; }
}