/* Filò — sistema di design condiviso (telefono del bambino e app dei genitori)
   Colori presi dal concept del 4/10: scocca panna, cornetta pomodoro, pannello ardesia chiara,
   tasti sole / prato / cielo / confetto, tasto verde menta per chiamare. */

/* Nunito, variabile, ospitata qui (niente richieste a Google, funziona anche senza rete) */
@font-face {
  font-family: 'Nunito';
  src: url('font/nunito.ttf') format('truetype-variations'), url('font/nunito.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* Grandstander (0.9.15): i titoli e le scritte grandi. Licenza SIL Open Font License 1.1 (font/OFL-grandstander.txt);
   ridotto ai caratteri italiani e ai pesi 600–900 */
@font-face {
  font-family: 'Grandstander';
  src: url('font/grandstander.ttf') format('truetype-variations'), url('font/grandstander.ttf') format('truetype');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* materiali */
  --panna: #F3ECDF;          /* scocca e sfondo */
  --panna-scura: #E6DCCB;    /* bordo inferiore della scocca */
  --latte: #FBF7F0;          /* schede, fogli */
  --ardesia: #ADB9C4;        /* pannello della tastiera */
  --ardesia-scura: #8D9BA8;
  --pomodoro: #DA4F39;       /* cornetta, riaggancia, azione principale */
  --pomodoro-scuro: #B63D2A;
  --inchiostro: #2B2F33;     /* testo */
  --grafite: #5B6168;        /* testo secondario */
  --nebbia: #9AA1A8;         /* testo terziario, bordi */
  /* tasti */
  --sole: #D8B069;  --sole-scuro: #B89150;
  --prato: #569F85; --prato-scuro: #3F826B;
  --cielo: #3A80C8; --cielo-scuro: #3A6696;   /* anche il corpo del marchio */
  --confetto: #DC96A8; --confetto-scuro: #C0788B;
  --menta: #85BEA6; --menta-scura: #69A48B;
  --sasso: #D9D1C6; --sasso-scuro: #BBB0A3;
  /* luce */
  --luce: #FFFFFF;
  --luce-verde: #5FC9A0;
  --luce-gialla: #E4C379;
  --luce-rossa: #CE7363;
  /* misure */
  --raggio-scocca: 36px;
  --raggio-pannello: 24px;
  --raggio-tasto: 18px;
  --raggio-scheda: 20px;
  --ombra-scheda: 0 1px 2px rgba(43,47,51,.06), 0 8px 24px -12px rgba(43,47,51,.18);
  --font: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-titoli: 'Grandstander', 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: pan-x pan-y; }
/* tra una pagina e l'altra (scelta → app dei grandi → telefono) una dissolvenza, dove il browser la sa fare */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
/* niente selezione del testo né menu «copia» tenendo premuto: i tasti e le schede sono comandi, non testo */
button, a, label, .scheda, .riga, .schede, .barra, .foglio h3, .foglio p, .tasto, .cornetta { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }   /* niente zoom con due dita né con il doppio tocco: è un'app, non una pagina */
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--panna);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--cielo); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nascosto { display: none !important; }
[hidden] { display: none !important; }   /* vince anche su display:grid/flex degli elementi */

/* pulsanti condivisi */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px; border-radius: 999px;
  font-weight: 800; font-size: 18px; letter-spacing: .01em;
  color: var(--luce); background: var(--pomodoro);
  box-shadow: 0 4px 0 var(--pomodoro-scuro);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.bottone:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pomodoro-scuro); }
.bottone:disabled { filter: saturate(.2) opacity(.5); transform: none; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.bottone.menta { background: var(--menta); box-shadow: 0 4px 0 var(--menta-scura); color: var(--inchiostro); }
.bottone.menta:active { box-shadow: 0 1px 0 var(--menta-scura); }
.bottone.sasso { background: var(--sasso); box-shadow: 0 4px 0 var(--sasso-scuro); color: var(--inchiostro); }
.bottone.sasso:active { box-shadow: 0 1px 0 var(--sasso-scuro); }
.bottone.piatto { background: transparent; box-shadow: none; color: var(--grafite); min-height: 44px; padding: 0 12px; }
.bottone.piatto:active { transform: none; }
.bottone.piccolo { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* ---------- la faccia disegnata (avatar.js, 0.9.23) ---------- */
.avatar-svg { display: block; width: 100%; height: 100%; }

/* ---------- le facce di Filò (faccine.js, 0.9.23): le parti e i movimenti della recita ---------- */
.fp-o { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 2px 1px rgba(43,47,51,.35)); }
.fp-ol { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,255,255,.9)); }
.fp-t { fill: var(--tinta-recita, #2FA376); stroke: var(--tinta-recita, #2FA376); stroke-width: 11; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 9px var(--alone-recita, rgba(95,201,160,.95))) drop-shadow(0 2px 1px rgba(43,47,51,.3)); }
.fp-tl { fill: none; stroke: var(--tinta-recita, #2FA376); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px var(--alone-recita, rgba(95,201,160,.95))); }
.fp-rosa { fill: #CB7084; filter: drop-shadow(0 0 7px rgba(235,159,178,.95)); }
.fp-azzurro { fill: #8CC0E2; }
.fp-lingua { fill: #DE93A6; }
.fp-zz { fill: #fff; font-family: var(--font); font-weight: 900; opacity: .85; }
.faccina-mini { display: block; width: 100%; height: auto; overflow: visible; }
.faccia-recita { transform-box: view-box; transform-origin: 120px 56px; }
[data-moto="saluta"] .faccia-recita { animation: fm-saluta 1.1s ease-in-out 2; }
[data-moto="stringe"] .faccia-recita { animation: fm-stringe .9s ease-in-out 2; }
[data-moto="trema"] .faccia-recita { animation: fm-trema .24s linear 8; }
[data-moto="pulsa"] .faccia-recita { animation: fm-pulsa 1s ease-in-out 2; }
[data-moto="salto"] .faccia-recita { animation: fm-salto .8s cubic-bezier(.2,.9,.3,1.2) 1; }
[data-moto="spegni"] .faccia-recita { animation: fm-spegni 3s ease-in-out forwards; }
[data-moto="schiocco"] .faccia-recita { animation: fm-schiocco .7s ease-in-out 2; }
[data-moto="dondola"] .faccia-recita { animation: fm-dondola .6s ease-in-out 3; }
@keyframes fm-saluta { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes fm-stringe { 0%, 100% { transform: scale(1); } 30% { transform: scale(.84, .9); } 55% { transform: scale(1.08); } 75% { transform: scale(.95); } }
@keyframes fm-trema { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-4px, 1px) rotate(-2deg); } 50% { transform: translate(4px, -1px) rotate(2deg); } 75% { transform: translate(-2px, 1px) rotate(-1deg); } }
@keyframes fm-pulsa { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.13); } 26% { transform: scale(1.05); } 34% { transform: scale(1.1); } }
@keyframes fm-salto { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-16px) scale(1.06); } 62% { transform: translateY(3px) scale(1.04, .96); } }
@keyframes fm-spegni { 0% { opacity: 1; transform: rotate(0); } 50% { opacity: .6; transform: rotate(-4deg); } 100% { opacity: .35; transform: rotate(0); } }
@keyframes fm-schiocco { 0%, 100% { transform: scale(1); } 30% { transform: scale(.9); } 45% { transform: scale(1.17); } 65% { transform: scale(1); } }
@keyframes fm-dondola { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-11deg); } 75% { transform: rotate(11deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- il simbolo che si muove (0.9.4): accesso, prima schermata, percorso guidato ---------- */
/* All'apertura Filò «si sveglia»: il pannello compare, la cornetta si posa, gli occhi si aprono e il sorriso si
   disegna. Poi sbatte le ciglia, ogni tanto si guarda intorno e la cornetta fa un piccolo squillo. */
.marchio-vivo { display: block; height: auto; overflow: visible; filter: drop-shadow(0 16px 18px rgba(43,47,51,.16)); }
.marchio-vivo .mv-pannello { fill: var(--cielo); transform-box: fill-box; transform-origin: 50% 50%; animation: mv-entra .5s cubic-bezier(.2,.8,.2,1.15) both; }
.marchio-vivo .mv-cornetta { fill: var(--pomodoro); transform-box: fill-box; transform-origin: 50% 100%;
  animation: mv-posa .5s .15s cubic-bezier(.2,.9,.3,1.25) both, mv-squillo 13s 1.6s ease-in-out infinite; }
.marchio-vivo .mv-onde path { fill: none; stroke: var(--pomodoro); stroke-width: 5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
  animation: mv-onda 13s 1.6s ease-out infinite; }
.marchio-vivo .mv-onde path:nth-child(2), .marchio-vivo .mv-onde path:nth-child(4) { animation-delay: 1.72s; stroke-width: 4; }
.marchio-vivo .mv-sguardo { animation: mv-guarda 11s 3.4s ease-in-out infinite; }
.marchio-vivo .mv-palpebre { fill: var(--luce); transform-box: fill-box; transform-origin: 50% 50%;
  animation: mv-apri .32s .42s cubic-bezier(.3,.8,.3,1.3) both, mv-battito 5.6s 2.1s infinite; }
.marchio-vivo .mv-sorriso { fill: none; stroke: var(--luce-verde); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: mv-sorridi .6s .58s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes mv-entra { from { opacity: 0; transform: scale(.88); } }
@keyframes mv-posa { from { opacity: 0; transform: translateY(-16px); } }
@keyframes mv-apri { from { transform: scaleY(.08); } }
@keyframes mv-sorridi { to { stroke-dashoffset: 0; } }
@keyframes mv-battito { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }
@keyframes mv-guarda {
  0%, 28%, 100% { transform: translate(0, 0); }
  32%, 44% { transform: translate(-6px, -1px); }
  49%, 61% { transform: translate(6px, -1px); }
  66% { transform: translate(0, 0); }
}
/* lo squillo: la cornetta si alza un poco e trema, due onde per parte */
@keyframes mv-squillo {
  0%, 7.5%, 100% { transform: translateY(0) rotate(0); }
  1% { transform: translateY(-6px) rotate(-3deg); }
  2% { transform: translateY(-6px) rotate(3deg); }
  3% { transform: translateY(-6px) rotate(-3deg); }
  4% { transform: translateY(-6px) rotate(3deg); }
  5% { transform: translateY(-5px) rotate(-1.5deg); }
  6.2% { transform: translateY(0) rotate(0); }
}
@keyframes mv-onda { 0%, 100% { opacity: 0; transform: scale(.85); } 1.2% { opacity: .85; } 4.6% { opacity: 0; transform: scale(1.12); } }

/* ---------- 0.9.11: il sipario, la pagina con lo stemma che copre i caricamenti (sipario.js) ---------- */
/* Lo stemma è al centro e della stessa misura di quello che iOS mostra all'apertura dell'app, così il passaggio non
   si vede: poi la cornetta squilla piano finché la pagina non è pronta. */
.sipario {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: radial-gradient(ellipse 72% 46% at 50% 46%, #F4DFB3 0, rgba(244,223,179,.5) 45%, rgba(244,223,179,0) 74%), var(--panna);
  transition: opacity .28s ease, visibility 0s linear 0s;
}
.sipario.via { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility 0s linear .28s; }
.sipario-stemma { display: block; width: clamp(150px, 23.1vmax, 330px); height: auto; overflow: visible; filter: drop-shadow(0 16px 18px rgba(43,47,51,.16)); }
.sipario-stemma.piccolo { width: 72px; filter: drop-shadow(0 6px 8px rgba(43,47,51,.14)); }
.sipario-stemma .sp-pannello { fill: var(--cielo); }
.sipario-stemma .sp-cornetta { fill: var(--pomodoro); transform-box: fill-box; transform-origin: 50% 100%; animation: sp-squillo 1.8s .25s ease-in-out infinite; }
.sipario-stemma .sp-onde path { fill: none; stroke: var(--pomodoro); stroke-width: 5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: sp-onda 1.8s .25s ease-out infinite; }
.sipario-stemma .sp-onde path:nth-child(2), .sipario-stemma .sp-onde path:nth-child(4) { animation-delay: .37s; stroke-width: 4; }
.sipario-stemma .sp-occhi { fill: var(--luce); transform-box: fill-box; transform-origin: 50% 50%; animation: sp-battito 3.6s 1.1s infinite; }
.sipario-stemma .sp-sorriso { fill: none; stroke: var(--luce-verde); stroke-width: 10; stroke-linecap: round; }
@keyframes sp-squillo {
  0%, 44%, 100% { transform: translateY(0) rotate(0); }
  5% { transform: translateY(-6px) rotate(-3deg); }
  11% { transform: translateY(-6px) rotate(3deg); }
  17% { transform: translateY(-6px) rotate(-3deg); }
  23% { transform: translateY(-6px) rotate(3deg); }
  29% { transform: translateY(-5px) rotate(-1.5deg); }
  36% { transform: translateY(0) rotate(0); }
}
@keyframes sp-onda { 0%, 100% { opacity: 0; transform: scale(.85); } 8% { opacity: .85; } 30% { opacity: 0; transform: scale(1.12); } }
@keyframes sp-battito { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ---------- 0.9.45: lo stemma vestito a festa (il sipario, il marchio dell'accesso e della prima schermata) ----------
   Nelle feste del calendario (html[data-tema], lo mette tema-subito.js prima che la pagina si veda) lo stemma si veste
   come il Filò del bambino (costumi.js: vesteStemma): la cornetta di lana con il pon pon (Natale), arancione con la
   fascia della notte e il pannello di sera con il fantasmino (Halloween), viola con i rombi di Arlecchino e la
   maschera (Carnevale), dipinta come un uovo (Pasqua). 0.9.47: sul Filò del bambino anche con il suo vestito: la
   cresta e le impronte (T-Rex), l'antenna, i pianeti e il casco (astronauta), il corno e l'arcobaleno (unicorno).
   Le vesti arrivano con un piccolo salto. Occhi e sorriso restano sempre quelli di Filò. L'icona dell'app non cambia mai. */
.v-natale, .v-halloween, .v-carnevale, .v-pasqua, .v-dinosauri, .v-spazio, .v-unicorno { display: none; }
[data-tema="natale"] .v-natale, [data-tema="halloween"] .v-halloween, [data-tema="carnevale"] .v-carnevale, [data-tema="pasqua"] .v-pasqua,
[data-tema="dinosauri"] .v-dinosauri, [data-tema="spazio"] .v-spazio, [data-tema="unicorno"] .v-unicorno {
  display: inline; animation: veste-entra .5s .2s cubic-bezier(.2,.9,.3,1.25) both;
}
@keyframes veste-entra { from { opacity: 0; transform: translateY(-7px); } }
[data-tema="halloween"] :is(.sp-cornetta, .mv-cornetta) { fill: #DE6C1E; }
[data-tema="halloween"] :is(.sp-onde, .mv-onde) path { stroke: #DE6C1E; }
[data-tema="halloween"] :is(.sp-pannello, .mv-pannello) { fill: #2A2D4F; }
[data-tema="halloween"] :is(.sp-sorriso, .mv-sorriso) { stroke: #F08A24; }
[data-tema="carnevale"] :is(.sp-cornetta, .mv-cornetta) { fill: #7B3FC4; }
[data-tema="carnevale"] :is(.sp-onde, .mv-onde) path { stroke: #7B3FC4; }
[data-tema="carnevale"] :is(.sp-sorriso, .mv-sorriso) { stroke: #D63AAF; }
[data-tema="pasqua"] :is(.sp-cornetta, .mv-cornetta) { fill: #FBF5E8; }
[data-tema="pasqua"] :is(.sp-onde, .mv-onde) path { stroke: #3A80C8; }
[data-tema="pasqua"] :is(.sp-sorriso, .mv-sorriso) { stroke: #E8578A; }
[data-tema="dinosauri"] :is(.sp-cornetta, .mv-cornetta) { fill: #4FA865; }
[data-tema="dinosauri"] :is(.sp-onde, .mv-onde) path { stroke: #4FA865; }
[data-tema="dinosauri"] :is(.sp-sorriso, .mv-sorriso) { stroke: #F5A23D; }
[data-tema="spazio"] :is(.sp-cornetta, .mv-cornetta) { fill: #2B3380; }
[data-tema="spazio"] :is(.sp-onde, .mv-onde) path { stroke: #2B3380; }
[data-tema="spazio"] :is(.sp-pannello, .mv-pannello) { fill: #1B2058; }
[data-tema="spazio"] :is(.sp-sorriso, .mv-sorriso) { stroke: #3FD3A0; }
[data-tema="unicorno"] :is(.sp-cornetta, .mv-cornetta) { fill: #A386E4; }
[data-tema="unicorno"] :is(.sp-onde, .mv-onde) path { stroke: #A386E4; }
[data-tema="unicorno"] :is(.sp-pannello, .mv-pannello) { fill: #7E62C9; }
[data-tema="unicorno"] :is(.sp-sorriso, .mv-sorriso) { stroke: #FF8CC4; }
/* il sipario: la luce dietro lo stemma prende il colore della festa (il fondo resta panna, come all'apertura dell'app) */
@media (prefers-reduced-motion: reduce) { .v-natale, .v-halloween, .v-carnevale, .v-pasqua, .v-dinosauri, .v-spazio, .v-unicorno { animation: none !important; } }

/* ---------- 0.9.54: lo stemma nuovo, Filò sul suo cielo (costumi.js: stemmaFilo) ----------
   Il cielo è quello del Filò del bambino (scene.js), anche nelle feste e con i vestiti; la faccia è la sua: occhi di
   luce, sorriso verde (del colore della festa quando è vestito). Nel sipario Filò galleggia piano e sbatte gli occhi;
   come marchio (accesso, prima schermata, percorso) si sveglia: apre gli occhi, sorride, poi si guarda intorno. */
:root { --cielo-filo: linear-gradient(180deg, #64A4DF 0%, #3F86CC 55%, #3373B9 100%); --sorriso-filo: #5FC9A0; --alone-sorriso: rgba(95,201,160,.95); }
[data-tema="halloween"] { --cielo-filo: linear-gradient(180deg, #202F48 0%, #273C5F 62%, #355076 100%); --sorriso-filo: #E09353; --alone-sorriso: rgba(243,181,121,.95); }
[data-tema="natale"] { --cielo-filo: linear-gradient(180deg, #213350 0%, #284066 60%, #3B5C84 100%); --sorriso-filo: #2FA376; }
[data-tema="carnevale"] { --cielo-filo: linear-gradient(180deg, #363367 0%, #574684 58%, #8366A5 100%); --sorriso-filo: #BB619F; --alone-sorriso: rgba(241,162,216,.95); }
[data-tema="pasqua"] { --cielo-filo: linear-gradient(180deg, #9AC5DC 0%, #BCDBE8 55%, #D7E7C7 100%); --sorriso-filo: #D56C8C; --alone-sorriso: rgba(247,175,199,.95); }
[data-tema="dinosauri"] { --cielo-filo: linear-gradient(180deg, #9ACCD9 0%, #C9E6E3 55%, #DFEAD0 100%); --sorriso-filo: #E7A863; --alone-sorriso: rgba(247,199,138,.95); }
[data-tema="spazio"] { --cielo-filo: linear-gradient(180deg, #242A49 0%, #2A3054 60%, #313661 100%); --sorriso-filo: #6BCDA5; --alone-sorriso: rgba(154,240,207,.95); }
[data-tema="unicorno"] { --cielo-filo: linear-gradient(180deg, #CFC1E4 0%, #E9CCDD 45%, #EAD5E0 100%); --sorriso-filo: #DE7CA5; --alone-sorriso: rgba(244,168,206,.95); }
.sipario { background: var(--cielo-filo); }
.stemma-filo { display: block; height: auto; overflow: visible; }
.stemma-filo .sf-occhi { fill: #FFFFFF; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 2px 1px rgba(24,41,71,.35)); }
.stemma-filo .sf-occhi circle { transform-box: fill-box; transform-origin: center; }
.stemma-filo .sf-sorriso { fill: none; stroke: var(--sorriso-filo); stroke-width: 16; stroke-linecap: round; filter: drop-shadow(0 0 9px var(--alone-sorriso)) drop-shadow(0 2px 1px rgba(24,41,71,.3)); }
.stemma-filo .sf-corpo { transform-box: view-box; transform-origin: 120px 52px; }
/* nel sipario: galleggia e sbatte gli occhi */
.sipario-stemma.stemma-filo { width: clamp(230px, 36vmax, 440px); filter: none; }
.sipario-stemma .sf-corpo { animation: sf-galleggia 3.4s ease-in-out infinite; animation-delay: var(--sf-ritardo, 0s); }
.sipario-stemma .sf-occhi circle { animation: sf-battito 3.6s 1.1s infinite; }
.sipario-stemma .sf-alone { animation: sf-respira 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
/* piccolo (i «momento…» dentro le pagine): un tondo di cielo */
.stemma-filo.piccolo { width: 84px; border-radius: 50%; background: var(--cielo-filo); box-shadow: 0 8px 16px -8px rgba(23,41,77,.45); }
/* il marchio: si sveglia, poi si guarda intorno */
.marchio-vivo.stemma-filo { filter: none; }
.marchio-vivo .sf-alone { animation: mv-entra .6s cubic-bezier(.2,.8,.2,1) both; transform-box: fill-box; transform-origin: center; }
.marchio-vivo .sf-sguardo { animation: sf-guarda 9s 2.6s ease-in-out infinite; }
.marchio-vivo .sf-occhi circle { animation: mv-apri .32s .3s cubic-bezier(.3,.8,.3,1.3) both, sf-battito 5.6s 2.1s infinite; }
.marchio-vivo .sf-sorriso { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mv-sorridi .6s .5s cubic-bezier(.3,.7,.2,1) forwards; }
.marchio-vivo .sf-corpo { animation: sf-galleggia 4.2s 1.2s ease-in-out infinite; }
@keyframes sf-galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sf-respira { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes sf-battito { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes sf-guarda { 0%, 40%, 100% { transform: translateX(0); } 48%, 60% { transform: translateX(-8px); } 68%, 80% { transform: translateX(7px); } }
@media (prefers-reduced-motion: reduce) {
  .stemma-filo .sf-corpo, .stemma-filo .sf-sguardo, .stemma-filo .sf-alone, .stemma-filo .sf-occhi circle { animation: none !important; }
  .marchio-vivo .sf-sorriso { stroke-dashoffset: 0; animation: none; }
}

/* ---------- 0.9.63: Filò sempre in mezzo (sipario.js) ----------
   Il cielo del sipario sta in ::before, così sfuma da solo mentre Filò vola al suo posto nella pagina (e il contrario
   quando il sipario scende): non si vedono più due Filò insieme. Il sipario tiene la sua festa (html[data-sipario]:
   tema-subito.js e sipario.js) finché è giù, anche se la pagina sotto intanto cambia festa. */
.sipario { background: transparent; }
.sipario::before { content: ""; position: absolute; inset: 0; background: var(--cielo-filo); transition: opacity .32s cubic-bezier(.2,.9,.3,1); }
.sipario > * { position: relative; }
/* salendo il cielo resta quasi pieno finché Filò è in viaggio, poi se ne va mentre atterra */
.sipario.vola::before { opacity: 0; transition: opacity .42s cubic-bezier(.55,0,.8,.3) .08s; }
.sipario.vola .sf-alone { animation: none; opacity: 0; transition: opacity .3s ease; }
.sipario .sipario-stemma { transition: opacity .18s ease; }
.sipario.consegna .sipario-stemma { opacity: 0; }
.sipario.subito, .sipario.subito::before, .sipario.subito * { transition: none !important; }
/* 0.9.65: il cielo e Filò del sipario su livelli loro: il telefono li anima da sé (anche se intanto la pagina lavora),
   senza ridisegnare tutto lo schermo a ogni fotogramma. Solo mentre il sipario c'è */
.sipario { will-change: opacity; }
.sipario:not(.via)::before { will-change: opacity; }
.sipario:not(.via) .sipario-stemma { will-change: transform; }
.filo-via { opacity: 0 !important; transition: none !important; }
.filo-arriva { animation: filoArriva .24s ease both; }
@keyframes filoArriva { from { opacity: 0; } }
.sipario.consegna .sipario-stemma { transition: opacity .22s ease; }
/* il marchio su cui atterra Filò è già sveglio: occhi aperti, sorriso intero (non «si sveglia» una seconda volta) */
.marchio-vivo.sveglio .sf-alone { animation: none; }
.marchio-vivo.sveglio .sf-occhi circle { animation: sf-battito 5.6s 2.1s infinite; }
.marchio-vivo.sveglio .sf-sorriso { stroke-dashoffset: 0; animation: none; }
/* la festa del sipario: la sua, non quella della pagina sotto */
html[data-sipario] .sipario :is(.v-natale, .v-halloween, .v-carnevale, .v-pasqua, .v-dinosauri, .v-spazio, .v-unicorno) { display: none; }
html[data-sipario="natale"] .sipario .v-natale, html[data-sipario="halloween"] .sipario .v-halloween,
html[data-sipario="carnevale"] .sipario .v-carnevale, html[data-sipario="pasqua"] .sipario .v-pasqua,
html[data-sipario="dinosauri"] .sipario .v-dinosauri, html[data-sipario="spazio"] .sipario .v-spazio,
html[data-sipario="unicorno"] .sipario .v-unicorno { display: inline; }
html.sipario-continua .sipario :is(.v-natale, .v-halloween, .v-carnevale, .v-pasqua, .v-dinosauri, .v-spazio, .v-unicorno) { animation: none !important; }
html[data-sipario=""] .sipario { --cielo-filo: linear-gradient(180deg, #64A4DF 0%, #3F86CC 55%, #3373B9 100%); --sorriso-filo: #5FC9A0; --alone-sorriso: rgba(95,201,160,.95); }
html[data-sipario="halloween"] .sipario { --cielo-filo: linear-gradient(180deg, #202F48 0%, #273C5F 62%, #355076 100%); --sorriso-filo: #E09353; --alone-sorriso: rgba(243,181,121,.95); }
html[data-sipario="natale"] .sipario { --cielo-filo: linear-gradient(180deg, #213350 0%, #284066 60%, #3B5C84 100%); --sorriso-filo: #2FA376; --alone-sorriso: rgba(95,201,160,.95); }
html[data-sipario="carnevale"] .sipario { --cielo-filo: linear-gradient(180deg, #363367 0%, #574684 58%, #8366A5 100%); --sorriso-filo: #BB619F; --alone-sorriso: rgba(241,162,216,.95); }
html[data-sipario="pasqua"] .sipario { --cielo-filo: linear-gradient(180deg, #9AC5DC 0%, #BCDBE8 55%, #D7E7C7 100%); --sorriso-filo: #D56C8C; --alone-sorriso: rgba(247,175,199,.95); }
html[data-sipario="dinosauri"] .sipario { --cielo-filo: linear-gradient(180deg, #9ACCD9 0%, #C9E6E3 55%, #DFEAD0 100%); --sorriso-filo: #E7A863; --alone-sorriso: rgba(247,199,138,.95); }
html[data-sipario="spazio"] .sipario { --cielo-filo: linear-gradient(180deg, #242A49 0%, #2A3054 60%, #313661 100%); --sorriso-filo: #6BCDA5; --alone-sorriso: rgba(154,240,207,.95); }
html[data-sipario="unicorno"] .sipario { --cielo-filo: linear-gradient(180deg, #CFC1E4 0%, #E9CCDD 45%, #EAD5E0 100%); --sorriso-filo: #DE7CA5; --alone-sorriso: rgba(244,168,206,.95); }
@media (prefers-reduced-motion: reduce) { .sipario::before { transition: none; } }