/* ═══════════════════════════════════════════════════════════════════════
   Vivai Sassetti · Sezione 5 «Come nasce una pianta ad Avane»
   LA FIRMA — «La talea che diventa pianta», impaginata come una TAVOLA BOTANICA
   (direzione editoriale elegante, 26/09/2026 · sistema dei dettagli: Strumenti/PIANO-CURA.md §5.5)

   · la pianta (pittorica) cresce dentro una tavola d'erbario: cornice da 1 px, due tralci orn-angolo
     agli angoli, serra e terra disegnate al tratto;
   · i quattro passaggi sono i nodi di un fusto: numeri Playfair 400 spenti al 35%, filo verticale salvia
     che li unisce; il passaggio attivo si accende in fucsia (sola opacità), il tratto di fusto sotto un
     passaggio fatto diventa verde (sola opacità).

   Questo file basta da solo (lo usa anche Strumenti/firma-prova.html): i colori leggono i token del sito
   se ci sono (--verde, --bosco, --salvia, --crema, --carta, --fucsia…) e hanno il loro valore di riserva.
   Regola: senza JS tutto è visibile e la pianta è già cresciuta.
   Gli stati «spenti» li mette firma.js (classe .is-anim), mai il CSS da solo.
   ═══════════════════════════════════════════════════════════════════════ */

.nasce {
  --n-verde: var(--verde, #008430);
  --n-bosco: var(--bosco, #1F3D2B);
  --n-salvia: var(--salvia, #9CC0A8);
  --n-crema: var(--crema, #F8F6F0);
  --n-carta: var(--carta, #FDFCF8);
  --n-fucsia: var(--fucsia, #C8246B);
  --n-testo: var(--testo-2, #4A5F52);
  --n-filetto: var(--filetto, rgba(31, 61, 43, .14));
  --n-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --n-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --n-ease: cubic-bezier(.2, .7, .2, 1);
  --n-num: 2.5rem;                         /* numero del passaggio: 40 px da telefono, 56 da computer */
  --n-num-col: calc(var(--n-num) * .56);   /* colonna dei numeri = la cifra più larga: il filo passa al centro */
  --n-num-spento: rgba(31, 61, 43, .55);   /* numero a riposo: 55% di bosco (3,15:1 su carta, AA per testo grande) */
  --n-nodo: 16px;                          /* dal numero al testo */
  --n-passo-aria: 28px;                    /* fra un passaggio e l'altro */
  --n-tavola-pad: 20px;                    /* aria fra la cornice e il disegno */
  --n-tavola-r: 14px;                      /* raggio della tavola (= --r-pannello del sito) */
  --n-angolo: 72px;                        /* i due tralci agli angoli (orn-angolo: 72 telefono · 80 tablet · 96 computer) */
  position: relative;
  background: var(--n-carta);
  color: var(--n-bosco);
  padding: 80px 16px;
}

.nasce__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "testa" "scena" "passi";
}

/* ── testa di sezione: occhiello → titolo → rametto (il sistema del sito) ── */
.nasce__testa,
.nasce__inner > .nasce__titolo { grid-area: testa; }
.nasce__testa { margin-bottom: 40px; }
.nasce__titolo {
  margin: 0;
  font-family: var(--n-serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.55rem + 2.1vw, 3.25rem);   /* = --t-h2 */
  line-height: 1.06;
  letter-spacing: -.018em;
  color: var(--n-bosco);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.nasce__rametto { margin-top: 16px; }

/* ── i quattro passaggi: nodi di un fusto ── */
.nasce__passi {
  grid-area: passi;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nasce__passo {
  position: relative;
  display: grid;
  grid-template-columns: var(--n-num-col) minmax(0, 1fr);
  column-gap: var(--n-nodo);
  align-items: start;
  padding: 0 0 var(--n-passo-aria);
}
.nasce__passo:last-child { padding-bottom: 0; }

/* il fusto: un filo da 1 px dal piede di un numero alla testa del successivo (staccato di ~.12em da entrambi).
   ::before è il filo salvia; ::after, sopra, è lo stesso tratto in verde che si accende quando il passaggio è fatto. */
.nasce__passo:not(:last-child)::before,
.nasce__passo:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--n-num-col) / 2 - .5px);
  top: calc(var(--n-num) * 1.06);
  bottom: calc(var(--n-num) * -.065);
  width: 1px;
  background: var(--n-salvia);
  pointer-events: none;
}
.nasce__passo:not(:last-child)::after {
  background: var(--n-verde);
  opacity: 0;
  transition: opacity .5s var(--n-ease);
}

.nasce__num {
  position: relative;
  display: block;
  width: var(--n-num-col);
  font-family: var(--n-serif);
  font-weight: 400;
  font-size: var(--n-num);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--n-num-spento);
}
/* il fucsia si accende sopra il numero con la sola opacità */
.nasce__num::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  color: var(--n-fucsia);
  opacity: 0;
  transition: opacity .45s var(--n-ease);
}

/* il nome parte all'altezza della testa del numero (occhio delle maiuscole allineato) */
.nasce__nome {
  margin: 0 0 6px;
  padding-top: calc(var(--n-num) * .2075 - .29em);
  font-family: var(--n-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + .45vw, 1.5rem);      /* = --t-h3 */
  line-height: 1.22;
  letter-spacing: -.006em;
  color: var(--n-bosco);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

.nasce__testo p {
  margin: 0;
  max-width: 30em;
  font-family: var(--n-sans);
  font-size: 1.0625rem;                                    /* = --t-testo */
  line-height: 1.6;
  color: var(--n-testo);
  text-wrap: wrap;
}
/* a capo solo alla virgola o prima del complemento: il complemento resta intero
   («Direttamente dal vivaio, / a chi la sceglie.» · «Lo stesso clima / in cui poi si vende.») */
.nasce__legato { white-space: nowrap; }

/* stati messi dal JS (senza JS la classe .is-anim non c'è: tutto pieno, numeri spenti, fusto salvia) */
.nasce__testo { transition: opacity .5s var(--n-ease); }
/* rifinitura 1: il passaggio «ancora da venire» resta leggibile (AA: testo 4,67:1, nome 7,4:1); lo stato lo dicono il numero
   fucsia e il filo verde, non lo spegnimento del testo */
.nasce.is-anim .nasce__testo { opacity: .86; }                         /* ancora da venire */
.nasce.is-anim .nasce__passo.is-fatto .nasce__testo { opacity: 1; }    /* già letto */
.nasce.is-anim .nasce__passo.is-attivo .nasce__testo,
.nasce.is-auto .nasce__testo { opacity: 1; }                           /* telefono: i testi restano pieni */
.nasce__passo.is-attivo .nasce__num::after { opacity: 1; }
.nasce.is-anim .nasce__passo.is-fatto::after { opacity: 1; }

/* ── la tavola: cornice da 1 px, due tralci agli angoli, il disegno dentro ── */
.nasce__scena {
  grid-area: scena;
  position: relative;
  justify-self: start;
  width: min(100%, 360px);
  margin-bottom: 40px;
  padding: var(--n-tavola-pad);
  border: 1px solid var(--n-filetto);
  border-radius: var(--n-tavola-r);
  background: var(--n-crema);
}
/* «.nasce .» per vincere sulle misure di .orn--angolo del sito (style.css arriva dopo questo file) */
.nasce .nasce__angolo {
  position: absolute;
  z-index: 1;
  width: var(--n-angolo);
  height: var(--n-angolo);
  color: var(--n-salvia);
}
.nasce__angolo--su { top: 5px; left: 5px; }
.nasce__angolo--giu { right: 5px; bottom: 5px; }

.fi-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Ogni parte che si muove ha il suo perno sul proprio riquadro (fill-box).
   Il JS muove solo le variabili: la trasformazione e il perno li decide il CSS. */
.fi-m {
  --x: 0px;
  --y: 0px;
  --r: 0deg;
  --sx: 1;
  --sy: 1;
  transform-box: fill-box;
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--sx), var(--sy));
}
.fi-ombra               { opacity: .16; transform-origin: 50% 50%; }
.fi-tutto               { transform-origin: 50% 100%; }
.fi-cartellino          { transform-origin: 50% 100%; }   /* spunta dalla punta nella terra */
.fi-talea               { transform-origin: 50% 100%; }   /* ruota sul taglio obliquo */
.fi-mucchio             { transform-origin: 50% 100%; }
.fi-fusto               { transform-origin: 50% 100%; }   /* si allunga dalla base */
.fi-ramo--d             { transform-origin: 0% 100%; }
.fi-ramo--s             { transform-origin: 100% 100%; }
.fi-foglia              { transform-origin: 0% 50%; }     /* il picciolo */
.fi-bocciolo            { transform-origin: 50% 100%; }
.fi-fiore               { transform-origin: 50% 100%; }
.fi-sepalo--s           { transform-origin: 100% 0%; }
.fi-sepalo--d           { transform-origin: 0% 0%; }
.fi-petalo--dietro-s,
.fi-petalo--lato-s      { transform-origin: 100% 100%; }  /* la base del petalo, al centro del fiore */
.fi-petalo--dietro-d,
.fi-petalo--lato-d      { transform-origin: 0% 100%; }
.fi-petalo--davanti-s   { transform-origin: 84% 100%; }
.fi-petalo--davanti-d   { transform-origin: 16% 100%; }
.fi-cuore               { transform-origin: 50% 100%; }

/* telefoni grandi e tablet piccoli: la tavola cresce un poco, sempre a filo del testo */
@media (min-width: 560px) and (max-width: 767.98px) {
  .nasce__scena { width: min(100%, 420px); }
}

/* ── tablet (768–899): titolo sopra, passaggi a sinistra e tavola a destra; niente pin ── */
@media (min-width: 768px) {
  .nasce {
    --n-num: 3rem;
    --n-nodo: 20px;
    --n-passo-aria: 32px;
    --n-tavola-pad: 24px;
    --n-tavola-r: 18px;
    --n-angolo: 80px;
  }
  .nasce__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "testa testa" "passi scena";
    column-gap: 40px;
  }
  .nasce__testa { margin-bottom: 48px; }
  .nasce__passi { align-self: center; }
  .nasce__scena {
    justify-self: end;
    width: min(100%, 380px);
    margin: 0;
  }
}

/* ── computer: testo a sinistra (5 colonne), una colonna d'aria, la tavola a destra (6 colonne).
   La testa sta in alto e i passaggi in basso, a filo della cornice; la sezione si ferma (1 pin, dal JS) ── */
@media (min-width: 900px) {
  .nasce {
    --n-aria: clamp(32px, 7vh, 72px);        /* rifinitura 1: più respiro sopra e sotto mentre la sezione è ferma */
    --n-num: 3.5rem;
    --n-nodo: 24px;
    --n-passo-aria: clamp(20px, 3.6vh, 36px);
    --n-angolo: 96px;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: var(--n-aria);
  }
  .nasce__inner {
    width: 100%;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: clamp(16px, 2.2vw, 32px);
  }
  /* allineamenti ottici con la cornice: la testa del titolo sul filo alto, l'ultima linea di base sul filo basso */
  .nasce__testa,
  .nasce__inner > .nasce__titolo { grid-column: 1 / 6; grid-row: 1; align-self: start; margin: calc(-.2375 * clamp(2.125rem, 1.55rem + 2.1vw, 3.25rem)) 0 0; }   /* la testa delle maiuscole sul filo alto */
  .nasce__passi { grid-column: 1 / 6; grid-row: 2; align-self: end; margin: 32px 0 -6px; }
  .nasce__scena {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    justify-self: end;
    align-self: center;
    /* la tavola sta sempre intera nello schermo: altezza = disegno (480:540) + aria + cornice */
    width: min(100%, 608px, calc((100svh - 2 * var(--n-aria) - 2 * var(--n-tavola-pad) - 2px) * .8889 + 2 * var(--n-tavola-pad) + 2px));
  }
}

/* computer stretti (900–1199): il testo prende anche la colonna d'aria, così i passaggi non vanno a capo due volte */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .nasce__testa,
  .nasce__inner > .nasce__titolo,
  .nasce__passi { grid-column: 1 / 7; }
}

/* schermi da computer bassi (portatili 1280×720, 1366×768): tutto un po' più raccolto, stessa impaginazione */
@media (min-width: 900px) and (max-height: 780px) {
  .nasce {
    --n-num: 3rem;
    --n-passo-aria: clamp(14px, 2.6vh, 24px);
  }
  .nasce__nome { font-size: 1.25rem; margin-bottom: 4px; }
  .nasce__testo p { font-size: 1rem; line-height: 1.5; }
  .nasce__rametto { margin-top: 12px; }
}
@media (min-width: 900px) and (max-height: 640px) {
  .nasce { --n-aria: clamp(16px, 4vh, 28px); --n-num: 2.5rem; --n-passo-aria: 10px; }
  .nasce .nasce__titolo { font-size: clamp(2rem, 1.2rem + 1.6vw, 2.5rem); }   /* «.nasce .» vince su .titolo */
  .nasce .nasce__rametto { display: none; }
  .nasce__passi { margin-top: 20px; }
  .nasce__nome { font-size: 1.125rem; }
  .nasce__testo p { font-size: .9375rem; line-height: 1.45; }
}

/* ── telefono (< 768 px, rifinitura 1): la tavola resta ferma sotto la testata, i passaggi le scorrono sotto e la pianta
   cresce con loro (scrub in firma.js). L'ultimo passaggio resta leggibile quando la tavola riparte: il margine negativo
   (--sotto) viene restituito al padding della sezione. Solo con JS (.is-anim) e senza «riduci animazioni»; nessun pin.
   Da 768 a 899 resta la tavola accanto ai passaggi. Le variabili del sito hanno un valore di riserva (firma-prova.html). ── */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .nasce { --n-passo-aria: 22px; }
  .nasce.is-anim {
    --scena-h: min(40svh, 380px);
    --sotto: max(0px, calc(100svh - var(--testata, 0px) - 10px - var(--scena-h) - var(--barra, 0px) - 24px));
    padding-bottom: calc(var(--sezione-y, 80px) + var(--sotto));
  }
  .nasce.is-anim .nasce__inner { grid-template-areas: "testa" "corpo"; }
  .nasce.is-anim .nasce__scena {
    grid-area: corpo;
    align-self: start;
    justify-self: stretch;
    position: sticky;
    top: calc(var(--testata, 0px) + 10px);
    z-index: 2;
    width: auto;
    height: var(--scena-h);
    margin: 0;
  }
  /* sotto la tavola una sfumatura di carta: i passaggi ci scivolano dentro, non vanno a sbattere sul bordo */
  .nasce.is-anim .nasce__scena::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 1px);
    height: 20px;
    background: linear-gradient(var(--n-carta), rgba(253, 252, 248, 0));
    pointer-events: none;
  }
  .nasce.is-anim .fi-svg { width: auto; height: 100%; margin-inline: auto; }
  .nasce.is-anim .nasce__passi {
    grid-area: corpo;
    position: relative;
    z-index: 1;
    margin-top: calc(var(--scena-h) + 28px);
    margin-bottom: calc(-1 * var(--sotto));
  }
}