/* home.css - la home page di Spezieria Esoterica.
 *
 * Le animazioni sono quelle della veste grafica data da Mario il 2026-08-10,
 * riscritte senza librerie: niente GSAP, niente ScrollTrigger, niente Lenis,
 * niente Three.js. Misurato: quelle quattro pesavano 340 KB in rete e 1,2 MB
 * su disco. Qui il conto e' questo file piu' un JavaScript scritto a mano.
 *
 * LA REGOLA CHE REGGE TUTTO: nessun contenuto e' nascosto in attesa di un
 * copione. Le comparse usano `animation-timeline: view()`, che e' CSS puro:
 * dove il navigatore non lo conosce, il blocco `@supports` non si applica e
 * il contenuto sta semplicemente a schermo, fermo. Nessun rettangolo vuoto,
 * nessuna rete di sicurezza a tre secondi.
 * La home precedente sbagliava proprio qui: fotografata quattro volte, tre
 * volte su quattro l'eroe era vuoto perche' a renderlo visibile era GSAP.
 */

:root {
  --oro-vivo: #E0C078;
  --oro-fondo: rgba(194, 160, 91, .10);
  --barra-h: 62px;
}

/* ========================================================================
   1. L'EROE, con il marchio vivo in primo piano
   ======================================================================== */

.eroe {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  /* `minmax(0, 1fr)` invece di lasciare la colonna `auto`: una colonna `auto`
     si dimensiona sul contenuto, e con un figlio centrato basta un `max-width`
     in `ch` piu' largo dello schermo perche' esca. Qui non stava uscendo (vedi
     sotto), ma il vincolo costa niente e chiude la strada al difetto.

     NOTA ONESTA, perche' serve a chi legge dopo. L'11 agosto ho creduto di
     avere un guasto qui: le schermate a 390 pixel mostravano il titolo
     tagliato a destra e il contenuto spostato. Non era vero. Interrogando il
     DOM dentro un iframe da 390, `html.scrollWidth` misura 390 ed e' uguale a
     `clientWidth`: non sforava niente. Chrome headless non scende sotto una
     larghezza minima di finestra, quindi disegnava a circa 500 pixel mentre la
     fotografia ne ritagliava 390: il taglio era dello strumento, non della
     pagina. E' la lezione 29: uno strumento che non e' calibrato non accusa e
     non assolve. La misura buona e' quella presa dal DOM, non dallo scatto. */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(84px, 12vh, 140px) clamp(64px, 10vh, 120px);
}

/* il cielo stellato: una tela, disegnata da home.js */
.eroe .stelle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}

/* l'alone caldo dietro al marchio, che gli da' profondita' senza coprirlo */
.eroe-alone {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: clamp(150px, 26vh, 300px);
  translate: -50% -50%;
  width: min(96vmin, 900px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(224, 192, 120, .16) 0%,
              rgba(194, 160, 91, .06) 34%, transparent 66%);
}

/* la vignettatura che scurisce i bordi e stacca il testo */
.eroe-velo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%,
              transparent 0%, transparent 46%,
              rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, .9) 100%);
}

/* --- il marchio animato, IN PRIMO PIANO --------------------------------
 * Ordine di Mario dell'11 agosto: «logo spezieria animato in primo piano
 * appena arrivi in home». Sta nel flusso, sopra il titolo, alla sua piena
 * opacita': non e' una filigrana dietro al testo.
 * La prima stesura lo metteva dietro l'H1 a opacita' .3, e il risultato era
 * che le lettere dell'anello passavano dentro le parole del titolo e lo
 * rendevano faticoso da leggere. Visto nella schermata, corretto.
 *
 * Anello e centro sono due file separati apposta: l'anello gira, il centro
 * resta fermo e si accende. Sono gli stessi due SVG che il piede usa gia'
 * come sigillo, quindi non si scarica niente di nuovo.
 */
.marchio-vivo {
  position: relative;
  width: clamp(132px, 21vmin, 216px);
  aspect-ratio: 1;
  margin: 0;
  pointer-events: none;
}
.marchio-vivo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv-anello { opacity: .82; }
.mv-centro { opacity: .96; }

/* --- il contenuto ------------------------------------------------------
 * `width: 100%` fa riempire al blocco la colonna della griglia invece di
 * restringersi sul proprio contenuto. Insieme al `minmax(0, 1fr)` di sopra
 * tiene l'eroe dentro lo schermo per costruzione, su qualunque larghezza.
 */
.eroe-int {
  position: relative; z-index: 5;
  width: 100%;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 26px);
}
/* Rete di sicurezza per tutta la home: nessun blocco esce dallo schermo.
   Costa niente e chiude in anticipo la classe di difetti piu' comune sul
   telefono. */
.eroe-int > *, .punta-int > *, .manifesto-int > * { max-width: 100%; }
.eroe-occhiello {
  display: inline-flex; align-items: center; gap: .8rem;
  margin: 0;
  font-size: .72rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--accent);
}
.eroe-occhiello::before,
.eroe-occhiello::after {
  content: ""; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.eroe-occhiello::after { background: linear-gradient(90deg, var(--accent), transparent); }

.eroe-titolo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 6.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: 15ch;
  text-wrap: balance;
  text-shadow: 0 0 42px rgba(0, 0, 0, .8), 0 2px 26px rgba(0, 0, 0, .65);
}
.eroe-sotto {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .7);
}
.eroe-azioni {
  margin: clamp(6px, 1vw, 14px) 0 0;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}

/* ========================================================================
   2. I BOTTONI (un solo sistema di forme: spigolo vivo, come il sigillo)
   ======================================================================== */

.bottone {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-viva), var(--accent) 58%, #9C7F41);
  border: 1px solid var(--accent-viva);
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease);
  box-shadow: 0 14px 40px -14px rgba(194, 160, 91, .55);
}
.bottone:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px -16px rgba(224, 192, 120, .7);
}
.bottone:active { transform: translateY(0); }

.bottone-vuoto {
  color: var(--accent);
  background: rgba(194, 160, 91, .04);
  border-color: var(--line-strong);
  box-shadow: none;
}
.bottone-vuoto:hover {
  background: rgba(194, 160, 91, .1);
  border-color: var(--accent);
  box-shadow: none;
}

/* ========================================================================
   3. IL FREGIO SCORREVOLE (uno solo in tutta la pagina)
   ======================================================================== */

.fregio {
  border-block: 1px solid var(--line);
  background: var(--srf-1);
  padding-block: 15px;
  overflow: hidden;
}
.fregio-nastro { display: flex; width: max-content; }
.fregio-gruppo {
  display: flex; align-items: center; gap: 2.6rem;
  padding-right: 2.6rem;
  padding-left: 2.6rem;
  flex-shrink: 0;
}
.fregio-voce {
  font-size: .7rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.fregio-punto { color: var(--accent); font-size: .6rem; }

/* ========================================================================
   4. L'ARTICOLO IN EVIDENZA
   ======================================================================== */

.punta { position: relative; padding-block: 0 clamp(56px, 8vw, 92px); }
.punta-banda {
  position: relative;
  height: clamp(300px, 46vw, 560px);
  overflow: hidden;
  background: var(--srf-1);
}
.punta-foto { position: absolute; inset: -8% 0; }
.punta-foto img { width: 100%; height: 100%; object-fit: cover; }
.punta-tinta {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 11, 11, .5) 0%,
              rgba(12, 11, 11, .2) 42%, var(--srf-0) 98%);
}
.runa {
  position: absolute; z-index: 2;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  color: var(--accent);
  opacity: .34;
  pointer-events: none;
}

.punta-int { margin-top: clamp(-64px, -5vw, -34px); position: relative; z-index: 3; }
.punta-eti { margin: 0 0 1rem; }
.etichetta {
  display: inline-block;
  padding: .42rem .95rem;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  background: rgba(12, 11, 11, .82);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.etichetta:hover { border-color: var(--accent); color: var(--oro-vivo); }

.punta-titolo {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.14;
  max-width: 26ch;
  text-wrap: balance;
}
.punta-titolo a { transition: color .3s var(--ease); }
.punta-titolo a:hover { color: var(--oro-vivo); }
.punta-sommario {
  margin: 0 0 1.8rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
  text-wrap: pretty;
  line-height: 1.5;
}
.punta-meta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 0; }
.punta-meta .meta { font-size: .82rem; color: var(--ink-faint); }

/* ========================================================================
   5. IL MANIFESTO, con il capolettera
   ======================================================================== */

.manifesto { padding-block: clamp(56px, 8vw, 104px); }
.manifesto-int { max-width: 74ch; }
.capolettera {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.16rem, 1.9vw, 1.42rem);
  line-height: 1.66;
  color: var(--ink);
  text-wrap: pretty;
}
.capolettera::first-letter {
  float: left;
  font-size: 4.6em;
  line-height: .82;
  padding: .06em .12em 0 0;
  color: var(--accent);
  font-weight: 600;
}
.divisore {
  display: flex; align-items: center; justify-content: center; gap: 1.3rem;
  margin: clamp(34px, 5vw, 58px) 0 0;
  color: var(--accent); font-size: .8rem;
}
.divisore span { height: 1px; width: clamp(60px, 14vw, 130px); }
.divisore span:first-child { background: linear-gradient(90deg, transparent, var(--accent)); }
.divisore span:last-child { background: linear-gradient(90deg, var(--accent), transparent); }

/* ========================================================================
   6. GLI UNDICI PERCORSI (l'ossatura del blog)
   ======================================================================== */

.percorsi {
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--srf-1);
  border-block: 1px solid var(--line);
}
.percorsi .occhiello { margin: 0 0 .7rem; color: var(--accent); }
.percorsi h2 {
  margin: 0 0 clamp(32px, 4.4vw, 54px);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.14;
}
.percorsi-griglia {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.percorso { background: var(--srf-1); }
.percorso > a {
  display: flex; flex-direction: column; gap: .6rem;
  height: 100%;
  padding: clamp(20px, 2.6vw, 30px);
  transition: background .35s var(--ease);
}
.percorso > a:hover { background: var(--oro-fondo); }
.percorso-nome {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 600;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.percorso > a:hover .percorso-nome { color: var(--oro-vivo); }
.percorso-testo {
  font-size: .92rem; line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: pretty;
}
/* il primo percorso e' piu' largo: la griglia ha un ritmo, non undici
   riquadri identici */
@media (min-width: 900px) {
  .percorso:first-child { grid-column: span 2; }
  .percorso:first-child .percorso-nome { font-size: 1.5rem; }
}

/* ========================================================================
   7. GLI ULTIMI ARTICOLI, con l'anteprima
   ======================================================================== */

.ultimi { padding-block: clamp(56px, 8vw, 104px); }
.ultimi-testa {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 1.6rem;
  margin-bottom: clamp(30px, 4vw, 46px);
}
.ultimi .occhiello { margin: 0 0 .7rem; color: var(--accent); }
.ultimi h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  line-height: 1.14;
}
.ultimi-elenco {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.ultimo { background: var(--srf-0); }
.ultimo > a {
  display: grid;
  grid-template-columns: 176px 1fr;
  align-items: center;
  gap: clamp(18px, 2.4vw, 30px);
  padding: 16px clamp(4px, 1vw, 14px);
  transition: background .35s var(--ease);
}
.ultimo > a:hover { background: var(--srf-1); }

.ultimo-foto {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--srf-2);
  border: 1px solid var(--line);
}
.ultimo-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.ultimo > a:hover .ultimo-foto img { transform: scale(1.06); }

/* il fregio disegnato che prende il posto della foto quando la foto non c'e'.
   Misurato il 2026-08-10: capita su 18 articoli visibili su 80, e sono i 18
   piu' recenti (IMMAGINI-ATTESE.md). Non e' un riquadro vuoto: e' un segno. */
.fregio-vuoto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--accent);
  opacity: .3;
  background:
    radial-gradient(circle at 50% 50%, rgba(194, 160, 91, .1), transparent 68%),
    var(--srf-2);
}
.fregio-vuoto svg { width: 44%; height: auto; }
.ultimo-foto .fregio-vuoto svg { width: 36%; }
/* Otto segnaposti identici in fila sembrano un guasto; ruotati di poco
   sembrano un motivo. La rotazione la decide la posizione nella lista, senza
   toccare il markup: quando l'immagine arriva, il segnaposto sparisce e con
   lui questa regola. */
.ultimo:nth-child(2n)   .fregio-vuoto svg { rotate: 22.5deg; }
.ultimo:nth-child(3n)   .fregio-vuoto svg { rotate: 45deg; }
.ultimo:nth-child(4n)   .fregio-vuoto svg { rotate: 11deg; }
.ultimo:nth-child(5n)   .fregio-vuoto svg { rotate: 33deg; }
.ultimo:nth-child(2n+1) .fregio-vuoto { opacity: .24; }

.ultimo-testo { display: grid; gap: .42rem; }
.ultimo-cat {
  font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.ultimo-titolo {
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 1.7vw, 1.28rem);
  font-weight: 500; line-height: 1.28;
  color: var(--ink);
  text-wrap: pretty;
  transition: color .3s var(--ease);
}
.ultimo > a:hover .ultimo-titolo { color: var(--oro-vivo); }
.ultimo-data { font-size: .78rem; color: var(--ink-faint); }

@media (max-width: 640px) {
  .ultimo > a { grid-template-columns: 1fr; gap: 14px; }
  .ultimo-foto { aspect-ratio: 16 / 9; }
}

/* ========================================================================
   8. LE DOMANDE
   ======================================================================== */

.domande {
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--srf-1);
  border-block: 1px solid var(--line);
}
.domande h2 {
  margin: 0 0 clamp(32px, 4.4vw, 54px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  max-width: 22ch;
  line-height: 1.14;
}
.domande-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 3.6vw, 48px);
}
.domanda h3 {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: 1.22rem; font-weight: 600;
  color: var(--oro-vivo);
  line-height: 1.3;
}
.domanda p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: .98rem;
             line-height: 1.55; text-wrap: pretty; }
.domanda p:last-child { margin: 0; }

/* ========================================================================
   9. LA LETTERA (newsletter) e la BARRA FISSA
   ======================================================================== */

.iscriviti {
  position: relative;
  padding-block: clamp(72px, 11vw, 150px);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.iscriviti-sigillo {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(74vmin, 620px); aspect-ratio: 1;
  z-index: 0; pointer-events: none;
}
.ls-anello { width: 100%; height: 100%; opacity: .13; }
.ls-braci { position: absolute; inset: 0; width: 100%; height: 100%; }

.iscriviti-int { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.3rem; }
.iscriviti h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  max-width: 18ch; text-wrap: balance;
  line-height: 1.12;
}
.iscriviti-testo {
  margin: 0; max-width: 46ch;
  color: var(--ink-soft); text-wrap: pretty;
  line-height: 1.55;
}
.iscriviti p { margin: 0; }

/* la barra fissa in basso: compare dopo l'eroe, sparisce sul piede */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: rgba(21, 20, 20, .94);
  border-top: 1px solid var(--line-strong);
  backdrop-filter: blur(12px) saturate(140%);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.barra.vista { transform: translateY(0); }
.barra-int {
  max-width: var(--maxw); margin-inline: auto;
  padding: 11px var(--gutter);
  min-height: var(--barra-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem;
}
.barra-testo {
  margin: 0;
  display: flex; align-items: center; gap: .7rem;
  font-size: .86rem; color: var(--ink);
}
.barra-segno { color: var(--accent); font-size: .7rem; }
.barra-bottone {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .68rem 1.35rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-accent);
  background: linear-gradient(180deg, var(--accent-viva), var(--accent));
  border: 1px solid var(--accent-viva);
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.barra-bottone:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px rgba(224, 192, 120, .6);
}
@media (max-width: 560px) {
  .barra-testo { font-size: .78rem; }
  .barra-int { padding-inline: 16px; }
}
/* la barra non copre il piede */
.piede { padding-bottom: calc(var(--barra-h) + 24px); }

/* ========================================================================
   10. LE ANIMAZIONI
   Prima quelle dell'apertura, che devono SEMPRE finire; poi quelle legate
   allo scorrimento, che sono un di piu'.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* --- apertura: il marchio e il testo entrano ------------------------
   * I RITARDI SONO CORTI APPOSTA, e questa e' la riga da non toccare senza
   * pensarci. La prima stesura scaglionava il testo fra 0,8 e 1,18 secondi
   * con riempimento `both`: bello sulla carta, e in pratica l'eroe restava
   * VUOTO per quasi un secondo. E' lo stesso guasto dell'eroe precedente,
   * quello che dipendeva da GSAP per diventare visibile, solo riscritto in
   * CSS: cambia il colpevole, non cosa vede chi arriva.
   * Adesso il titolo comincia a comparire a 0,16 secondi e tutto e' leggibile
   * entro 1,1. Il tetto e' quello: se un domani qualcuno allunga questi
   * numeri, rimette in piedi il difetto.
   */
  .mv-anello {
    animation: mv-entra 1.2s var(--ease) both, mv-gira 190s linear infinite 1.2s;
  }
  .mv-centro { animation: mv-accende 1s var(--ease) .18s both; }
  .eroe-alone { animation: mv-respira 8s ease-in-out 1s infinite; }

  .eroe-occhiello { animation: sale .7s var(--ease) .1s both; }
  .eroe-titolo    { animation: sale .8s var(--ease) .16s both; }
  .eroe-sotto     { animation: sale .8s var(--ease) .24s both; }
  .eroe-azioni    { animation: sale .8s var(--ease) .32s both; }

  @keyframes mv-entra {
    from { opacity: 0; scale: .78; rotate: -34deg; }
    to   { opacity: .82; scale: 1; rotate: 0deg; }
  }
  @keyframes mv-gira { to { rotate: 360deg; } }
  @keyframes mv-accende {
    from { opacity: 0; scale: .86; filter: blur(10px); }
    to   { opacity: .96; scale: 1; filter: blur(0); }
  }
  @keyframes mv-respira {
    0%, 100% { opacity: .6; scale: 1; }
    50%      { opacity: 1;  scale: 1.07; }
  }
  @keyframes sale {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- il fregio scorre ---------------------------------------------- */
  .fregio-nastro { animation: nastro 44s linear infinite; }
  @keyframes nastro { to { transform: translateX(-50%); } }

  /* --- comparse allo scorrimento, in CSS puro -------------------------
   * `animation-timeline: view()` non esiste su tutti i navigatori. Dove non
   * c'e', questo blocco NON si applica e il contenuto resta visibile e
   * fermo: e' il motivo per cui non serve nessuna rete di sicurezza.
   */
  @supports (animation-timeline: view()) {

    .rivela {
      animation: sale linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 62%;
    }
    .percorso, .ultimo {
      animation: sale-poco linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 46%;
    }
    @keyframes sale-poco {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: none; }
    }

    /* parallasse dell'eroe: l'alone scende piano, il contenuto sale e
       sbiadisce mentre la sezione esce dallo schermo */
    .eroe-alone {
      animation: eroe-fondo linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    .eroe-int {
      animation: eroe-testo linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes eroe-fondo { to { translate: -50% calc(-50% + 120px); } }
    @keyframes eroe-testo { to { transform: translateY(-48px); opacity: .4; } }

    /* la foto in evidenza si allarga piano mentre scorre */
    .punta-foto {
      animation: foto-respira linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes foto-respira {
      from { transform: translateY(-3%) scale(1.02); }
      to   { transform: translateY(3%)  scale(1.1); }
    }

    /* le rune galleggiano a velocita' diverse */
    .runa {
      animation: runa-sale linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes runa-sale { to { transform: translateY(var(--corsa, 34px)); } }

    /* l'anello della lettera gira mentre entra */
    .ls-anello {
      animation: ls-gira linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes ls-gira { to { rotate: 44deg; } }
  }
}

/* Chi chiede meno movimento vede la pagina ferma, e completa: nessuna
   animazione, nessuna opacita' a zero, nessun ritardo. */
@media (prefers-reduced-motion: reduce) {
  .fregio-nastro { animation: none; }
}