/* ==========================================================================
   Barilotto — sito mobile
   Le animazioni toccano solo transform e opacity: sono le due proprietà che
   l'iPhone anima con la scheda grafica, senza ricalcolare la pagina → fluide.
   ========================================================================== */

/* --- Font dei titoli in locale. Il font dei testi è quello di sistema: non si scarica niente --- */
@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one.woff2") format("woff2"); font-display: swap; }

:root {
  --rosso: #F40009;          /* scelto da Marco il 10/11/2026. Testo nero sopra: contrasto 4,85:1 (minimo 4,5) */
  --nero: #111;
  --bianco: #fff;
  --font-titoli: "Bowlby One", system-ui, sans-serif;
  /* SF Pro non si può mettere sul sito (licenza Apple), ma su iPhone e Mac "il font di sistema"
     È SF Pro: -apple-system lo chiama. Su Android esce Roboto. */
  --font-testo: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;

  /* margini sicuri dell'iPhone (notch, Dynamic Island, barra in basso) */
  --sicuro-su: env(safe-area-inset-top, 0px);
  --sicuro-giu: env(safe-area-inset-bottom, 0px);
  --sicuro-sx: env(safe-area-inset-left, 0px);
  --sicuro-dx: env(safe-area-inset-right, 0px);

  /* curva "elastica": va oltre il punto d'arrivo e torna indietro, come un cartone */
  --elastico: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* "hidden" vince sempre, anche sugli elementi a cui il CSS dà un display */

/* --- Scorrimento a schermate ---
   Non scorre la pagina ma <main>, alto quanto lo schermo. Su iPhone, quando scorre la pagina,
   la barra di Safari si ritira, l'altezza dello schermo cambia e l'aggancio delle schermate
   riparte da solo (la prima pagina "scappava"). Con la pagina ferma non succede. */
html, body { height: 100%; overflow: hidden; }
html {
  background: var(--rosso);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
main {
  position: relative;        /* la mascotte si posiziona rispetto a main e scorre con lui */
  height: 100vh;
  height: 100dvh;
  overflow: hidden auto;
  scroll-snap-type: y mandatory;   /* ogni swipe "aggancia" la schermata successiva */
  scroll-behavior: smooth;
  overscroll-behavior: none;       /* niente rimbalzo elastico in cima e in fondo */
}

body {
  margin: 0;
  background: var(--rosso);
  color: var(--nero);        /* sul rosso le scritte sono sempre nere */
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 600;          /* SF Pro sempre semibold (600) o medium (500): più sottile non si legge sul rosso */
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

.schermata {
  position: relative;
  /* 100vh per i browser vecchi; 100dvh = altezza reale visibile, tiene conto della barra di Safari */
  min-height: 100vh;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;     /* uno swipe = una schermata, senza saltarne due */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding:
    calc(var(--sicuro-su) + 7.25rem)   /* in alto a sinistra sta il Barilotto */
    calc(var(--sicuro-dx) + 3.75rem)   /* spazio per l'indicatore a destra */
    calc(var(--sicuro-giu) + 3rem)
    calc(var(--sicuro-sx) + 1.5rem);
  overflow: hidden;
}

/* Dove si mette il Barilotto in ogni schermata: un segnaposto vuoto, alto quanto lui (proporzione 3:4).
   Di base: piccolo, in alto a sinistra. */
.posto {
  position: absolute;
  top: calc(var(--sicuro-su) + .4rem);
  left: calc(var(--sicuro-sx) + .6rem);
  height: 7rem;
  aspect-ratio: 3 / 4;
  pointer-events: none;
}
.posto.grande {
  position: static;
  flex: none;
  align-self: center;
  height: min(20rem, 40dvh);
}

/* --- Tipografia: Bowlby One solo per titoli e sottotitoli, il resto nel font di testo --- */
h1, h2, .titolo, .frase, .etichetta, .tre, .salti, .frasi-perche p:not(.lunga), .bottone, .lingue button {
  font-family: var(--font-titoli);
  font-weight: 400;      /* Bowlby One è già "bold" di natura */
  letter-spacing: .01em;
}
/* <strong> pesa di più solo nei testi in SF Pro (medium 500 + grassetto 800); nei titoli in Bowlby One resta com'è */
strong { font-weight: inherit; }
.testo strong, .testi strong, .lunga strong, .regole strong { font-weight: 800; }
h1, h2, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }

.etichetta {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.titolo { font-size: clamp(2rem, 1.3rem + 4vw, 3rem); line-height: 1.02; }
.frase  { font-size: clamp(1.15rem, .95rem + 1.4vw, 1.5rem); line-height: 1.15; }
.testo, .testi p, .lunga { font-family: var(--font-testo); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; }

/* --- Apertura --- */
.apertura {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: calc(var(--sicuro-su) + 9vh);
  padding-left: calc(var(--sicuro-sx) + 3.75rem);   /* stesso margine sui due lati: tutto resta al centro */
}
.apertura h1 {
  font-size: clamp(1.9rem, 1.2rem + 4vw, 2.75rem);
  line-height: 1.05;
  max-width: 14ch;
}
.apertura h1 .numero { display: inline-block; white-space: nowrap; }
.scorri {
  margin-top: auto;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  color: var(--nero);
  animation: rimbalzo 1.2s ease-in-out infinite;
}
.scorri svg { width: 2.5rem; height: 2.5rem; }
body.scorso .scorri { animation: none; }

/* --- Come si usa --- */
.tre {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .6rem;
  font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.1rem);
  line-height: 1.1;
}
/* "Personalizzalo." è la parola che conta: adesivo bianco, un po' storto */
.tre li:last-child {
  --r: -3deg;
  padding: .1em .45em .15em;
  border: 3px solid var(--nero);
  border-radius: 999px;
  background: var(--bianco);
  box-shadow: 4px 4px 0 var(--nero);
}
.regole {
  display: grid;
  gap: .3rem;
  font-size: .95rem;
  font-weight: 500;
}
/* niente flex qui: con il grassetto dentro, ogni pezzo della frase diventerebbe una colonna a sé */
.regole li { position: relative; padding-left: 1.05rem; }
.regole li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: currentColor;
}
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Bottoni: sempre bianchi, bordo spesso e ombra piena, da fumetto --- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 2.75rem;          /* 44 px: misura minima per il pollice */
  padding: .55rem 1.1rem;
  border: 3px solid var(--nero);
  border-radius: 999px;
  background: var(--bianco);
  color: var(--nero);
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--nero);
  transition: transform .12s, box-shadow .12s;
}
.bottone:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--nero); }

/* --- Personalizzalo: il Barilotto grande al centro, da toccare --- */
.personalizza {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: .75rem;
  padding-top: calc(var(--sicuro-su) + 4.25rem);
  padding-left: calc(var(--sicuro-sx) + 3.75rem);   /* stesso margine sui due lati: il fusto resta al centro */
}
.personalizza .posto.grande { height: min(19rem, 38dvh); margin-top: 2.5rem; }   /* sopra la testa c'è la vignetta */
.personalizza .titolo, .scheda .titolo { font-size: min(2.2rem, 7vw); }   /* una parola lunga: deve stare su una riga */

/* In queste schermate il dito in orizzontale fa qualcosa (apre la scheda, sfoglia il manifesto):
   pan-y = il browser gestisce solo lo scorrimento verticale, il resto lo passa a mascotte.js. */
.personalizza, .manifesto, .scheda { touch-action: pan-y; }

/* --- La scheda "Personalizzami": bianca, a tutto schermo, sotto la mascotte.
       Entra da destra (la sposta mascotte.js). Dentro si disegna sul Barilotto. --- */
.scheda {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: calc(var(--sicuro-su) + 1.1rem) 1rem calc(var(--sicuro-giu) + 1rem);
  --b-ink: var(--nero);      /* il nero dei campioni di colore, come quello del disegno */
  background: var(--bianco);
  color: var(--nero);
  text-align: center;
}
.scheda .posto.grande { height: min(22rem, 40dvh); margin: auto 0; }
.scheda .bottone { align-self: center; }
.attrezzi { display: grid; gap: .6rem; justify-items: center; width: 100%; }
.riga { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.attrezzi .bottone { min-height: 2.75rem; padding: .4rem .9rem; font-size: .95rem; }
/* lo strumento / colore / sticker scelto: il bottone resta bianco ma "premuto", con un anello rosso */
.scheda [aria-pressed="true"] { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--nero); outline: 3px solid var(--rosso); outline-offset: 2px; }
.aiuto, .scrivi, .adesivi { min-height: 2.75rem; }   /* le tre righe "di strumento" sono alte uguali: cambiando strumento niente salta */
.aiuto { display: grid; place-items: center; font-size: .95rem; }
.scrivi {
  width: min(18rem, 100%);
  padding: .4rem .9rem;
  border: 3px solid var(--nero);
  border-radius: 999px;
  background: var(--bianco);
  color: var(--nero);
  font: 600 1rem var(--font-testo);   /* almeno 16 px: sotto, l'iPhone ingrandisce la pagina quando tocchi il campo */
  text-align: center;
}
.adesivi { flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; padding: 0 .25rem .4rem; overflow-x: auto; touch-action: pan-x; }
.adesivi .bottone { flex: none; width: 2.75rem; padding: .2rem; }
.adesivi svg { width: 100%; height: 100%; }
.colore {
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 3px solid var(--nero);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--nero);
}
.chiudi {
  position: absolute;
  top: calc(var(--sicuro-su) + .75rem);
  right: calc(var(--sicuro-dx) + .75rem);
  width: 2.75rem;
  padding: 0;
}
.chiudi svg { width: 1.2rem; height: 1.2rem; }
/* con la scheda aperta lingua e indicatore spariscono: lì dentro c'è solo lui */
.scheda-aperta .lingue, .scheda-aperta .indice { visibility: hidden; }

/* --- Vignetta: il fumetto con cui il Barilotto parla --- */
.vignetta {
  position: absolute;
  bottom: 74%;
  left: 62%;
  width: max-content;
  max-width: 11rem;
  padding: .35rem .7rem .45rem;
  border: 3px solid var(--nero);
  border-radius: 1rem;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  box-shadow: 3px 3px 0 var(--nero);
  transform-origin: 0 100%;
  animation: sbuca .35s var(--elastico) both;
}
.vignetta[hidden] { display: none; }
.vignetta::after {          /* la codina, verso di lui */
  content: "";
  position: absolute;
  left: .7rem; bottom: -.5rem;
  width: .7rem; height: .7rem;
  background: var(--bianco);
  border: solid var(--nero);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) skew(12deg, 12deg);
}
.vignetta.a-sinistra { left: auto; right: 62%; transform-origin: 100% 100%; }
.vignetta.a-sinistra::after { left: auto; right: .7rem; }
.vignetta.bassa { bottom: 30%; left: 82%; }
.vignetta.bassa.a-sinistra { left: auto; right: 82%; }
.vignetta.bassa::after { display: none; }
@keyframes sbuca { from { opacity: 0; transform: scale(.3) rotate(-8deg); } to { opacity: 1; transform: none; } }
.testi { display: grid; gap: .9rem; }

/* --- Perché esiste: il Barilotto si sporge dal bordo in basso a sinistra --- */
.perche { padding-bottom: calc(var(--sicuro-giu) + 9.5rem); }
.perche .posto { top: auto; bottom: calc(var(--sicuro-giu) - .5rem); left: -1.4rem; height: 11rem; }
.frasi-perche { display: grid; gap: 1rem; }
.frasi-perche p:first-child { font-size: clamp(1.8rem, 1.2rem + 3.2vw, 2.6rem); line-height: 1.05; }
.frasi-perche p:nth-child(2) { font-size: clamp(1.15rem, .95rem + 1vw, 1.4rem); line-height: 1.2; }

/* --- Frasi "a salti" (manifesto, richieste): il Barilotto ci atterra sopra una alla volta.
       Sopra ogni frase resta lo spazio per lui: così non sono più una addosso all'altra. --- */
.salti {
  display: grid;
  font-size: clamp(1.5rem, 1.05rem + 2.6vw, 2.3rem);
  line-height: 1.05;
}
.salti > * { margin-top: 4.4rem; opacity: 0; }
/* --r è la pendenza della frase. È applicata sempre, non solo durante l'animazione:
   mascotte.js la legge per sapere da che parte rotolare e quanto veloce. */
.pop, .salti > * { rotate: var(--r, 0deg); }
.salti > .vista { animation: sbatti .6s var(--elastico) both; }

/* --- Manifesto: sfondo nero, la parte più forte. Qui (e solo qui) le scritte sono bianche --- */
.manifesto {
  background: var(--nero);
  color: var(--bianco);
  justify-content: flex-start;
  gap: 0;
  padding-top: calc(var(--sicuro-su) + 4.25rem);
}
.manifesto .salti > * { text-shadow: .18rem .18rem 0 var(--rosso); }
/* Le pagine stanno tutte nella stessa casella, una sopra l'altra: mascotte.js ne mostra una e le fa scorrere di lato */
.pagine { flex: 1; display: grid; }
.pagina { grid-area: 1 / 1; align-content: start; visibility: hidden; }
.pagina > :first-child { margin-top: 6.4rem; }   /* sopra la prima frase lui sta in piedi: non deve coprire la scritta "Manifesto" */
.pagina > * { justify-self: start; }   /* la frase è larga quanto il suo testo: il bordo su cui rotola finisce dove finiscono le parole */
/* la frase lunga: stesso carattere e stessa ombra delle altre, solo più piccola (prima era nel font di testo: stonava) */
.manifesto .salti > .lunga {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-size: clamp(1.2rem, .9rem + 1.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .01em;
  text-shadow: .12rem .12rem 0 var(--rosso);
}
/* Pista delle biglie: pendenze alterne (positiva = scende verso destra) e diverse, così il Barilotto
   va a zig-zag e cambia velocità. Si conta DALLA FINE (nth-last-child): l'ultima frase di ogni pagina
   scende sempre a destra, perché da lì lui cade sul suo posto in basso a destra.
   Una frase che scende a destra è allineata a sinistra, e viceversa. */
.pagina > :nth-last-child(odd) { --r: 3deg; }
.pagina > :nth-last-child(even) { --r: -5deg; justify-self: end; text-align: right; }
.pagina > :nth-child(3):nth-last-child(odd) { --r: 2.5deg; }
.pagina:nth-child(even) > :nth-last-child(odd) { --r: 4deg; }
.pagina:nth-child(even) > :nth-last-child(even) { --r: -3.5deg; }
.pagina > :only-child { --r: 2deg; }
.manifesto .pagina:nth-child(2) > :nth-child(2) { color: var(--rosso); text-shadow: .18rem .18rem 0 var(--bianco); font-size: 1.25em; }
/* movimento ridotto: niente pagine che scorrono, tutto il manifesto in fila */
.tutto .pagine { display: block; }
.tutto .pagina { visibility: visible !important; opacity: 1 !important; transform: none !important; }

/* --- Richieste --- */
.richieste { justify-content: flex-start; gap: 0; padding-top: calc(var(--sicuro-su) + 4.25rem); }
.richieste .pagine { flex: none; }   /* qui sotto le frasi ci sono i bottoni: le pagine non si allargano */
.richieste .azioni { margin-top: 2rem; }
/* finito il manifesto il Barilotto va in fondo alla schermata e lì parla, senza coprire il testo */
.manifesto .posto { height: 9rem; top: auto; left: auto; right: calc(var(--sicuro-dx) + 3.5rem); bottom: calc(var(--sicuro-giu) + .2rem); }
.chiusura {
  position: absolute;
  left: calc(var(--sicuro-sx) + 1.5rem);
  right: calc(var(--sicuro-dx) + 1.5rem);
  bottom: calc(var(--sicuro-giu) + .9rem);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
}

/* --- Selettore di lingua --- */
.lingue {
  position: fixed;
  z-index: 20;
  top: calc(var(--sicuro-su) + .75rem);
  right: calc(var(--sicuro-dx) + .75rem);
  display: flex;
  border: 3px solid var(--nero);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bianco);
}
.lingue button {
  min-width: 2.75rem; min-height: 2.75rem;
  border: 0;
  background: var(--bianco);
  color: #767676;                 /* la lingua non scelta: grigio (4,5:1 sul bianco) */
  font-size: .95rem;
  cursor: pointer;
}
.lingue button[aria-pressed="true"] { color: var(--nero); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .2em; }

/* --- Indicatore laterale --- */
.indice {
  position: fixed;
  z-index: 15;
  right: calc(var(--sicuro-dx) + .25rem);
  top: 50%;
  translate: 0 -50%;
}
.indice { touch-action: none; }   /* il dito sulla colonna scorre le schede, non la pagina */
.indice ol { margin: 0; }
.indice a {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
}
.indice img {
  height: 2.1rem;
  opacity: .75;
  transform: scale(.85);
  pointer-events: none;
  transition: transform .4s var(--elastico), opacity .3s;
}
.indice a[aria-current="true"] img { opacity: 1; transform: scale(1.45) rotate(-10deg); }
[data-attiva="manifesto"] .indice img { filter: invert(1); }   /* sul nero i mini-fusti vanno in negativo: invertire nero e bianco è esattamente quello */

.vh {   /* visibile solo ai lettori di schermo */
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- La mascotte ---
   Posizione e grandezza le decide mascotte.js (GSAP) leggendo i segnaposto .posto. */
.guida {
  position: absolute;
  z-index: 10;
  left: 0; top: 0;
  width: 6rem;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  visibility: hidden;            /* compare quando mascotte.js l'ha messa al suo posto */
  touch-action: none;            /* su di lui il dito non scorre la pagina: ogni movimento è per lui (si piega, si schiaccia, si allunga) */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  /* I colori del disegno. Sul nero si usa il negativo: nero e bianco scambiati, ombra chiara. */
  --b-ink: var(--nero);
  --b-carta: var(--bianco);
  --b-ombra: .4;
}
[data-attiva="manifesto"] .guida { --b-ink: var(--bianco); --b-carta: var(--nero); --b-ombra: .28; }
/* la zona sensibile è più grande del disegno: così è facile prenderlo col dito */
.guida::before { content: ""; position: absolute; inset: -1.5rem; }
.guida-corpo, .guida svg { display: block; width: 100%; height: 100%; }
.guida svg { overflow: visible; }
.f-ink   { fill: var(--b-ink); }
.s-ink   { stroke: var(--b-ink); }
.f-carta { fill: var(--b-carta); }
.s-carta { stroke: var(--b-carta); }
.f-ink, .s-ink, .f-carta, .s-carta { transition: fill .3s, stroke .3s; }
.b-ombra { opacity: var(--b-ombra); }
.g-numero { font-family: var(--font-titoli); font-size: 46px; stroke: none; transition: opacity .3s; }
body:not([data-attiva="apertura"]) .g-numero { opacity: 0; }

/* Quando rotola si vede dall'alto: spariscono fusto, ombre e lineette, compare l'ottagono della base seduta */
.b-ruota, .b-ombra-ruota { opacity: 0; }
.guida.ruota .b-ruota, .guida.ruota .b-ombra-ruota { opacity: 1; }
.guida.ruota .b-respiro, .guida.ruota .b-ombra > :not(.b-ombra-ruota), .guida.ruota .b-segni { opacity: 0 !important; }

/* trema (paura, rabbia): scatti piccoli e veloci; se sbuffa, il vapore sale */
.guida.trema .guida-corpo { animation: trema .12s steps(2) infinite; }
.guida.trema .b-segni { animation: sbuffo .5s ease-in-out infinite alternate; }
@keyframes trema  { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@keyframes sbuffo { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* le scritte lasciate in Personalizzami */
.b-scritta { font-family: var(--font-titoli); font-size: 34px; stroke: none; text-anchor: middle; dominant-baseline: middle; }

/* dorme: le tre "z" salgono una dopo l'altra */
.b-z { font-family: var(--font-titoli); fill: var(--b-carta); stroke: var(--b-ink); stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; opacity: 0; }
.guida.zzz .b-z { animation: zeta 2.4s ease-in-out infinite; }
.guida.zzz .b-z:nth-of-type(2) { animation-delay: .5s; }
.guida.zzz .b-z:nth-of-type(3) { animation-delay: 1s; }
@keyframes zeta { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }

/* --- Testi che "sbattono" in scena ---
   Nascosti finché la sezione non entra in vista (i testi li inserisce comunque JavaScript). */
.pop { opacity: 0; }
.entra .pop {
  animation: sbatti .6s var(--elastico) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes sbatti {
  0%   { opacity: 0; transform: scale(2.1) rotate(-8deg); }
  45%  { opacity: 1; transform: scale(.92); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
/* testi lunghi, regole e bottoni: rimbalzo più leggero, dal basso */
.entra .regole .pop, .entra .testi .pop, .entra .testo.pop, .entra .lunga.pop, .entra .azioni.pop, .entra .bottone.pop { animation-name: salta; }
@keyframes salta {
  0%   { opacity: 0; transform: translateY(1.5rem) scale(.9); }
  60%  { opacity: 1; transform: translateY(-.3rem) scale(1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes rimbalzo {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(.6rem); }
}

/* --- Movimento ridotto: tutto diventa dissolvenza (le pose della mascotte le ferma mascotte.js) --- */
@media (prefers-reduced-motion: reduce) {
  .entra .pop, .entra .regole .pop, .entra .testi .pop, .entra .testo.pop, .entra .lunga.pop, .entra .azioni.pop, .entra .bottone.pop, .salti > .vista {
    animation: dissolvi .4s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
  .scorri, .guida.trema .guida-corpo, .guida.trema .b-segni, .vignetta { animation: none; }
  main { scroll-behavior: auto; }
  .guida.zzz .b-z { animation: none; opacity: 1; }
  .indice img { transition: opacity .3s; }
}
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }

/* Schermi bassi (iPhone SE con le barre di Safari) */
@media (max-height: 620px) {
  .schermata { gap: .6rem; padding-top: calc(var(--sicuro-su) + 6.25rem); padding-bottom: calc(var(--sicuro-giu) + 2rem); }
  .posto { height: 6rem; }
  .titolo { font-size: 1.8rem; }
  .frase { font-size: 1.1rem; }
  .regole { font-size: .875rem; gap: .15rem; }
  .testo, .testi p, .lunga { font-size: .95rem; }
  .manifesto .salti > .lunga { font-size: 1.1rem; }
  .scheda .posto.grande { height: 34dvh; }
  .attrezzi, .riga { gap: .4rem; }
  .salti { font-size: 1.4rem; }
  .salti > * { margin-top: 3.9rem; }
  .pagina > :first-child { margin-top: 5.6rem; }
  .manifesto, .personalizza, .richieste { padding-top: calc(var(--sicuro-su) + 3.75rem); }
  .bottone { font-size: .9rem; padding: .45rem .9rem; }
}