/* =====================================================================
   Formica Zeta Trading — ASPETTO: tema, parte alta, scena, sfondi, animazioni
   ---------------------------------------------------------------------
   LEGENDA
   Si carica dopo stile.css SOLO se in impostazioni_sito.json → "aspetto" c'è
   qualcosa di acceso (con tutto spento le pagine sono identiche a prima).
   Ogni regola vale solo se <html> ha l'attributo che scrive il generatore:
     data-colori="formicaio"      1. colori: giorno ritoccato + notte blu
     data-eroe="bilanciata"     2. parte alta a due colonne uguali
     data-scena="si"            3. il formicaio animato nel riquadro della favola
     data-deco="sfumature grana colline gallerie"                    4. sfondi e disegni
     data-anim="sentieri lettura comparsa contatori grafico chicchi lucciole rilievo respiro"   5. animazioni
     data-cambio="sfumato"      6. il cambio sole/luna sfuma
   Classi messe da aspetto.js: fz-js (lo script c'è), fz-fermo (animazioni
   ferme col tasto ⏸), fz-vivo (la scena si muove), fz-visto, fz-sfuma.
   7. Fermo e movimento ridotto   8. Tasto ⏸ in alto e voce del menu
   9. Logo «zeta» (data-logo): marchio, illustrazioni giorno/notte, Formicaio animato, timbro
   I colori del tema sono misurati dall'autotest (contrasto WCAG 4,5:1 per i
   testi, 3:1 per gli accenti grandi): se uno non passa, non si pubblica.
   ===================================================================== */

/* ---------- 1. TEMA «FORMICAIO» ---------- */
/* giorno: la carta calda di sempre, verde e oro del binario 2 più scuri (leggibili), bordi un filo più visibili,
   tasto oro più chiaro al passaggio del mouse (prima la scritta scendeva a 3,2:1) */
:root[data-colori="formicaio"][data-theme="light"] {
  --bg: #f6f1e7; --bg-2: #ede5d4; --surface: #fffdf9; --text: #1f1a14; --text-2: #5c5347; --line: #d9ccb4;
  --accent: #b7791f; --accent-strong: #c98d2e; --accent-ink: #1f1a14; --accent-2: #8a3b1e; --link: #8a3b1e;
  --ok: #25693f; --ok-bg: #e4f3ea; --ko: #b3261e; --ko-bg: #fbe7e5; --info: #2c5f8d; --info-bg: #e3eef7;
  --b1: #8a3b1e; --b1-bg: #f7e4dc; --b2: #83540f; --b2-bg: #f8ecd4; --b0: #5c5347; --b0-bg: #ece6da;
}
@media (prefers-color-scheme: light) {
  :root[data-colori="formicaio"]:not([data-theme="dark"]) {
    --bg: #f6f1e7; --bg-2: #ede5d4; --surface: #fffdf9; --text: #1f1a14; --text-2: #5c5347; --line: #d9ccb4;
    --accent: #b7791f; --accent-strong: #c98d2e; --accent-ink: #1f1a14; --accent-2: #8a3b1e; --link: #8a3b1e;
    --ok: #25693f; --ok-bg: #e4f3ea; --ko: #b3261e; --ko-bg: #fbe7e5; --info: #2c5f8d; --info-bg: #e3eef7;
    --b1: #8a3b1e; --b1-bg: #f7e4dc; --b2: #83540f; --b2-bg: #f8ecd4; --b0: #5c5347; --b0-bg: #ece6da;
  }
}
/* notte: blu notte con l'oro e la terracotta */
:root[data-colori="formicaio"][data-theme="dark"] {
  --bg: #131a26; --bg-2: #18202e; --surface: #1e2737; --text: #e9e6df; --text-2: #a9b1bf; --line: #313c4f;
  --accent: #e0a93a; --accent-strong: #f0bd55; --accent-ink: #1f1a14; --accent-2: #ef9068; --link: #f2ad8c;
  --ok: #6fcf97; --ok-bg: #173027; --ko: #f28b82; --ko-bg: #3b2227; --info: #8ab4f8; --info-bg: #1b2b44;
  --b1: #ef9068; --b1-bg: #3b2826; --b2: #e0a93a; --b2-bg: #33301f; --b0: #a9b1bf; --b0-bg: #28324a;
}
@media (prefers-color-scheme: dark) {
  :root[data-colori="formicaio"]:not([data-theme="light"]) {
    --bg: #131a26; --bg-2: #18202e; --surface: #1e2737; --text: #e9e6df; --text-2: #a9b1bf; --line: #313c4f;
    --accent: #e0a93a; --accent-strong: #f0bd55; --accent-ink: #1f1a14; --accent-2: #ef9068; --link: #f2ad8c;
    --ok: #6fcf97; --ok-bg: #173027; --ko: #f28b82; --ko-bg: #3b2227; --info: #8ab4f8; --info-bg: #1b2b44;
    --b1: #ef9068; --b1-bg: #3b2826; --b2: #e0a93a; --b2-bg: #33301f; --b0: #a9b1bf; --b0-bg: #28324a;
  }
}

/* ---------- 2. PARTE ALTA «BILANCIATA» ---------- */
/* due colonne uguali, riquadro più basso (testo della favola un filo più piccolo, scena più bassa): testo e riquadro
   alti uguali e allineati */
:root[data-eroe="bilanciata"] .eroe { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; padding-block: 2.5rem 3.25rem; }
:root[data-eroe="bilanciata"] .eroe p.sotto { font-size: 1.22rem; }
:root[data-eroe="bilanciata"] .favola { font-size: 1.02rem; line-height: 1.52; padding: 1.55rem 1.7rem 1.45rem; }
:root[data-eroe="bilanciata"] .favola::before { font-size: 3.6rem; top: .05rem; left: .85rem; }
:root[data-eroe="bilanciata"] .favola__firma { margin-top: .75rem; }
@media (max-width: 1100px) { :root[data-eroe="bilanciata"] .eroe { grid-template-columns: 1fr; } }
:root:is([data-deco], [data-anim]) .eroe { position: relative; isolation: isolate; }

/* ---------- 3. LA SCENA DEL FORMICAIO (nel riquadro della favola) ---------- */
.favola__scena { display: none; }
:root[data-scena="si"] .favola { padding-bottom: 0; overflow: hidden; }
:root[data-scena="si"] .favola__formica { display: none; }
:root[data-scena="si"] .favola__scena { display: block; position: relative; margin: .9rem -1.7rem 0; }
:root[data-scena="si"]:not([data-eroe="bilanciata"]) .favola__scena { margin: 1rem -2rem 0; }
.favola__scena > svg { display: block; width: 100%; height: auto; aspect-ratio: 480 / 134; }
@media (max-width: 600px) { :root[data-scena="si"] .favola__scena, :root[data-scena="si"]:not([data-eroe="bilanciata"]) .favola__scena { margin: 1rem -1.4rem 0; } }

/* colori della scena: di giorno un pomeriggio dorato, di notte luna, stelle e granaio che brilla */
.favola__scena {
  --fz-cielo: #f3d6a0; --fz-alone: #f6c35a; --fz-sole: #f0ad3c; --fz-terra-1: #e6cda5; --fz-terra-2: #bf9a70; --fz-bordo: #cfae82;
  --fz-galleria: #9e7a54; --fz-sasso: #c8a982; --fz-erba: #8c9a52; --fz-formica: #4b2614; --fz-chicco: #d89a2c; --fz-uovo: #fff8ea;
  --fz-candele: .26; --fz-luce-granaio: 0;
}
:root[data-theme="dark"] .favola__scena {
  --fz-cielo: #263a63; --fz-alone: #f4ead6; --fz-terra-1: #3f3328; --fz-terra-2: #211912; --fz-bordo: #4d3f31; --fz-galleria: #15100b;
  --fz-sasso: #4a3d31; --fz-erba: #59683c; --fz-formica: #eaa37e; --fz-chicco: #f2b84b; --fz-uovo: #e8dcc6; --fz-candele: .3; --fz-luce-granaio: .8;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .favola__scena {
    --fz-cielo: #263a63; --fz-alone: #f4ead6; --fz-terra-1: #3f3328; --fz-terra-2: #211912; --fz-bordo: #4d3f31; --fz-galleria: #15100b;
    --fz-sasso: #4a3d31; --fz-erba: #59683c; --fz-formica: #eaa37e; --fz-chicco: #f2b84b; --fz-uovo: #e8dcc6; --fz-candele: .3; --fz-luce-granaio: .8;
  }
}
.fz-s-cielo-0 { stop-color: var(--fz-cielo); stop-opacity: 0; }
.fz-s-cielo-1 { stop-color: var(--fz-cielo); stop-opacity: .45; }
.fz-s-cielo-2 { stop-color: var(--fz-cielo); stop-opacity: .95; }
.fz-s-terra-1 { stop-color: var(--fz-terra-1); }
.fz-s-terra-2 { stop-color: var(--fz-terra-2); }
.fz-s-alone-0 { stop-color: var(--fz-alone); stop-opacity: .55; }
.fz-s-alone-1 { stop-color: var(--fz-alone); stop-opacity: 0; }
.fz-s-bagliore-0 { stop-color: var(--fz-chicco); stop-opacity: .6; }
.fz-s-bagliore-1 { stop-color: var(--fz-chicco); stop-opacity: 0; }
.fz-stella { fill: #fff3d1; }
.fz-stelle { opacity: 0; transition: opacity 1.2s ease .5s; }
.fz-sole .fz-disco { fill: var(--fz-sole); }
.fz-luna .fz-disco { fill: #f4ead6; }
.fz-astro { transition: transform 1.6s cubic-bezier(.45, .05, .25, 1), opacity 1.1s ease; }
.fz-luna { transform: translateY(64px); opacity: 0; }
:root[data-theme="dark"] .fz-sole { transform: translateY(70px); opacity: 0; }
:root[data-theme="dark"] .fz-luna { transform: none; opacity: 1; }
:root[data-theme="dark"] .fz-stelle { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fz-sole { transform: translateY(70px); opacity: 0; }
  :root:not([data-theme="light"]) .fz-luna { transform: none; opacity: 1; }
  :root:not([data-theme="light"]) .fz-stelle { opacity: 1; }
}
.fz-candele { opacity: var(--fz-candele); }
.fz-candele .fz-su { fill: var(--accent); }
.fz-candele .fz-giu { fill: var(--accent-2); }
.fz-stoppino { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.fz-bordo { fill: none; stroke: var(--fz-bordo); stroke-width: 1.4; }
.fz-sassi ellipse { fill: var(--fz-sasso); }
.fz-gallerie path { fill: none; stroke: var(--fz-galleria); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.fz-gallerie ellipse { fill: var(--fz-galleria); }
.fz-bagliore { opacity: var(--fz-luce-granaio); }
.fz-chicchi ellipse, .fz-chicco, .fz-chicco-zeta { fill: var(--fz-chicco); }
.fz-uova ellipse { fill: var(--fz-uovo); }
.fz-linea { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fz-linea-alone { fill: none; stroke: var(--accent); stroke-width: 9; stroke-opacity: .14; stroke-linejoin: round; stroke-linecap: round; }
.fz-punto { fill: var(--accent); }
.fz-anello { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.fz-ciuffo { fill: none; stroke: var(--fz-erba); stroke-width: 1.3; stroke-linecap: round; }
.fz-zeta { color: var(--accent-2); }
.fz-formica { color: var(--fz-formica); }
/* senza JavaScript le formichine non si vedono (non si potrebbero fermare) */
.fz-formiche { visibility: hidden; }
.fz-js .fz-formiche { visibility: visible; }

/* animazioni CSS della scena: ferme finché lo script non mette .fz-vivo */
.fz-stella { animation: fz-brilla 3.8s ease-in-out infinite; }
.fz-alone { transform-box: fill-box; transform-origin: center; animation: fz-respira-astro 6s ease-in-out infinite; }
.fz-viva { transform-box: fill-box; transform-origin: 50% 100%; animation: fz-candela 4.2s ease-in-out infinite; }
.fz-anello { transform-box: fill-box; transform-origin: center; animation: fz-onda 2.4s ease-out infinite; }
.fz-ciuffo { transform-box: fill-box; transform-origin: 50% 100%; animation: fz-vento 5s ease-in-out infinite; }
.fz-antenna-1 { transform-box: fill-box; transform-origin: 100% 100%; animation: fz-antenna 2.6s ease-in-out infinite; }
.fz-antenna-2 { transform-box: fill-box; transform-origin: 0% 100%; animation: fz-antenna 2.6s ease-in-out infinite reverse; }
.fz-bagliore { transform-box: fill-box; transform-origin: center; animation: fz-respira-astro 5s ease-in-out infinite; }
/* le zampe stanno anche dentro le copie riusate (<use>): lì le regole «.scena *» non arrivano, una variabile si eredita */
.fz-zampe-a { animation: fz-passo .34s linear infinite; animation-play-state: var(--fz-gambe, running); }
.fz-zampe-b { animation: fz-passo .34s linear infinite; animation-delay: -.17s; animation-play-state: var(--fz-gambe, running); }
.fz-scena:not(.fz-vivo) { --fz-gambe: paused; }
.fz-scena:not(.fz-vivo) * { animation-play-state: paused !important; }
@keyframes fz-brilla { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fz-respira-astro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes fz-candela { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(.82); } 70% { transform: scaleY(1.12); } }
@keyframes fz-onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes fz-vento { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes fz-antenna { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes fz-passo { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* tasto pausa della scena (in basso a sinistra, sulla terra) */
.fz-pausa {
  position: absolute; left: .7rem; bottom: .7rem; width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0; color: var(--text); z-index: 2;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .82; transition: opacity .2s ease, border-color .2s ease;
}
.fz-pausa[hidden] { display: none; }
.fz-pausa:hover, .fz-pausa:focus-visible { opacity: 1; border-color: var(--accent); }
.fz-pausa svg { width: 15px; height: 15px; }
.fz-pausa .fz-ico-play { display: none; }
.fz-pausa[data-stato="fermo"] .fz-ico-pausa { display: none; }
.fz-pausa[data-stato="fermo"] .fz-ico-play { display: block; }

/* ---------- 4. SFONDI E DISEGNI ---------- */
/* colori delle sfumature (di giorno caldi, di notte blu e viola con un filo d'oro) */
:root[data-deco] { --deco-1: #f2c46b; --deco-2: #e9a37e; --deco-3: #b7c48a; }
:root[data-deco][data-theme="dark"] { --deco-1: #2f4a80; --deco-2: #6a4a8a; --deco-3: #b7791f; }
@media (prefers-color-scheme: dark) { :root[data-deco]:not([data-theme="light"]) { --deco-1: #2f4a80; --deco-2: #6a4a8a; --deco-3: #b7791f; } }
/* sfumature morbide dietro la parte alta, da bordo a bordo */
:root[data-deco~="sfumature"] main { overflow-x: clip; }
:root[data-deco~="sfumature"] .eroe::before {
  content: ""; position: absolute; z-index: -2; inset: -3rem calc(50% - 50vw) -2rem; pointer-events: none;
  background:
    radial-gradient(38% 55% at 78% 30%, color-mix(in srgb, var(--deco-1) 55%, transparent), transparent 70%),
    radial-gradient(34% 50% at 18% 70%, color-mix(in srgb, var(--deco-2) 45%, transparent), transparent 70%),
    radial-gradient(30% 45% at 52% 8%, color-mix(in srgb, var(--deco-3) 40%, transparent), transparent 70%);
  filter: blur(8px);
}
/* grana della carta: sotto i contenuti, sopra lo sfondo */
:root[data-deco~="grana"] body { isolation: isolate; }
:root[data-deco~="grana"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-deco~="grana"][data-theme="dark"] body::before { opacity: .09; filter: invert(1); }
@media (prefers-color-scheme: dark) { :root[data-deco~="grana"]:not([data-theme="light"]) body::before { opacity: .09; filter: invert(1); } }
/* colline al posto della riga dritta in cima alle fasce e al piè di pagina */
:root[data-deco~="colline"] :is(.sezione--fascia, .pie) { position: relative; border-top-color: transparent; }
:root[data-deco~="colline"] :is(.sezione--fascia, .pie)::before {
  content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 28px; background: var(--bg-2); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V17C120 4 240 2 360 12S600 26 720 16 960 0 1080 8 1320 24 1440 13V28Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V17C120 4 240 2 360 12S600 26 720 16 960 0 1080 8 1320 24 1440 13V28Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
/* gallerie del formicaio disegnate leggere nelle fasce */
:root[data-deco~="gallerie"] .sezione--fascia { position: relative; isolation: isolate; }
:root[data-deco~="gallerie"] .sezione--fascia::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--line); opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M-10 60C60 40 90 90 150 80S240 30 300 58 420 110 530 70'/%3E%3Cpath d='M150 80C160 120 130 150 170 180S260 200 300 230'/%3E%3Cpath d='M300 58C320 20 360 10 400 -10'/%3E%3Cpath d='M-10 200C40 190 70 220 120 210S200 170 240 196'/%3E%3Cellipse cx='300' cy='232' rx='26' ry='11' fill='%23000'/%3E%3Cellipse cx='120' cy='210' rx='18' ry='8' fill='%23000'/%3E%3C/svg%3E") 0 0 / 520px 260px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M-10 60C60 40 90 90 150 80S240 30 300 58 420 110 530 70'/%3E%3Cpath d='M150 80C160 120 130 150 170 180S260 200 300 230'/%3E%3Cpath d='M300 58C320 20 360 10 400 -10'/%3E%3Cpath d='M-10 200C40 190 70 220 120 210S200 170 240 196'/%3E%3Cellipse cx='300' cy='232' rx='26' ry='11' fill='%23000'/%3E%3Cellipse cx='120' cy='210' rx='18' ry='8' fill='%23000'/%3E%3C/svg%3E") 0 0 / 520px 260px repeat;
}

/* ---------- 5. ANIMAZIONI ---------- */
/* formiche sui bordi delle sezioni (le mette lo script) */
:root[data-anim~="sentieri"] :is(.sezione--fascia, .pie) { position: relative; }
.fz-sentiero { position: absolute; left: 0; right: 0; top: -12px; height: 12px; overflow: hidden; pointer-events: none; z-index: 1; }
:root[data-deco~="colline"] .fz-sentiero { top: 1px; }
.fz-sf { position: absolute; left: 0; bottom: 0; width: 22px; height: 12px; color: color-mix(in srgb, var(--text-2) 85%, transparent);
         animation: fz-attraversa var(--dur, 46s) linear infinite; animation-delay: var(--rit, 0s); }
.fz-sf--indietro { animation-name: fz-attraversa-indietro; }
.fz-sf svg, .fz-lettura__formica svg { display: block; width: 22px; height: 12px; overflow: visible; }
.fz-chicco-sf { fill: var(--accent); }
@keyframes fz-attraversa { from { transform: translateX(-40px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes fz-attraversa-indietro { from { transform: translateX(calc(100vw + 40px)) scaleX(-1); } to { transform: translateX(-40px) scaleX(-1); } }
/* Zeta segna quanto hai letto: una formica scorre sotto la barra e a fine pagina arriva al granaio */
.fz-lettura { position: fixed; left: 0; right: 0; top: var(--alto-barra, 64px); height: 16px; z-index: 49; pointer-events: none; }
.fz-lettura[hidden] { display: none; }
.fz-lettura__traccia { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, var(--line) 70%, transparent); }
.fz-lettura__fatto { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--avanzamento, 0) * 100%); background: var(--accent); }
.fz-lettura__formica { position: absolute; top: -1px; left: calc(var(--avanzamento, 0) * (100% - 30px)); width: 26px; height: 14px; color: var(--accent-2); }
.fz-lettura__formica svg { width: 26px; height: 14px; }
.fz-lettura__granaio { position: absolute; right: 4px; top: 2px; width: 16px; height: 10px; }
.fz-lettura__granaio ellipse { fill: var(--accent); }
/* comparsa morbida di card e titoli mentre scorri */
:root.fz-js[data-anim~="comparsa"] .fz-da-mostrare { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
:root.fz-js[data-anim~="comparsa"] .fz-da-mostrare.fz-visto { opacity: 1; transform: none; }
/* il grafico che si disegna: zig-zag d'oro sotto i titoli di sezione (la linea della scena la anima lo script) */
:root[data-anim~="grafico"] .sezione h2 { position: relative; padding-bottom: .35rem; }
:root[data-anim~="grafico"] .sezione h2::after {
  content: ""; position: absolute; left: 0; bottom: -.15rem; width: 120px; height: 12px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 9 14 6 22 8 34 4 44 7 56 3 66 6 78 2 90 5 102 2 118 4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 9 14 6 22 8 34 4 44 7 56 3 66 6 78 2 90 5 102 2 118 4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:root.fz-js[data-anim~="grafico"] .sezione h2::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.3, .6, .2, 1) .15s; }
:root.fz-js[data-anim~="grafico"] .sezione h2.fz-visto::after { clip-path: inset(0 0 0 0); }
/* chicchi che saltano fuori dal tasto principale */
:root[data-anim~="chicchi"] .btn--primario { position: relative; }
.fz-chicco-volo { position: absolute; left: 50%; top: 50%; width: 7px; height: 5px; border-radius: 50%; background: var(--accent);
                  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-ink) 25%, transparent); pointer-events: none;
                  animation: fz-chicco-volo .9s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes fz-chicco-volo {
  0% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
  45% { transform: translate(calc(-50% + var(--x) * .7), calc(-50% + var(--y))) rotate(160deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) + 46px)) rotate(320deg); opacity: 0; }
}
/* lucciole di notte, pulviscolo dorato di giorno, nella parte alta (le mette lo script) */
.fz-lucciole { position: absolute; z-index: -1; inset: -2rem calc(50% - 50vw) 0; pointer-events: none; overflow: hidden; }
:root[data-anim~="lucciole"] main { overflow-x: clip; }
.fz-lucciola { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
               background: color-mix(in srgb, var(--accent) 70%, #fff); opacity: 0; box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 60%, transparent);
               animation: fz-volo var(--dur) ease-in-out infinite, fz-luccica calc(var(--dur) / 3) ease-in-out infinite; animation-delay: var(--rit), var(--rit); }
:root[data-theme="dark"] .fz-lucciola { width: 4px; height: 4px; background: #f4ffa8; box-shadow: 0 0 8px 3px rgba(222, 255, 120, .55), 0 0 18px 6px rgba(222, 255, 120, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fz-lucciola { width: 4px; height: 4px; background: #f4ffa8; box-shadow: 0 0 8px 3px rgba(222, 255, 120, .55), 0 0 18px 6px rgba(222, 255, 120, .18); } }
@keyframes fz-volo { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(var(--dx), calc(var(--dy) * -.6)); }
                     50% { transform: translate(calc(var(--dx) * -.4), var(--dy)); } 75% { transform: translate(calc(var(--dx) * .8), calc(var(--dy) * .3)); } }
@keyframes fz-luccica { 0%, 100% { opacity: 0; } 40%, 60% { opacity: .95; } }
/* card in rilievo con il riflesso che segue il mouse */
:root[data-anim~="rilievo"] :is(.card, .contatore, .quadro-oggi) { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
:root[data-anim~="rilievo"] :is(.card, .contatore, .quadro-oggi):hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 22px 40px -18px color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, .5)); }
:root[data-anim~="rilievo"] :is(.card, .contatore) { position: relative; overflow: hidden; }
:root[data-anim~="rilievo"] :is(.card, .contatore)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
:root[data-anim~="rilievo"] :is(.card, .contatore):hover::before { opacity: 1; }
/* sfondo che respira: le sfumature si muovono piano (solo con lo script, così il tasto ⏸ può fermarle) */
:root.fz-js[data-anim~="respiro"][data-deco~="sfumature"] .eroe::before { animation: fz-respiro 26s ease-in-out infinite alternate; }
@keyframes fz-respiro { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, 2%) scale(1.06) rotate(2deg); } 100% { transform: translate(2%, -2%) scale(1.03) rotate(-1.5deg); } }

/* ---------- 6. CAMBIO DI TEMA SFUMATO ---------- */
/* lo sfondo sta anche sulla radice: quello che il body «presta» alla finestra non sfuma (verificato in Edge) */
:root[data-cambio="sfumato"] { background-color: var(--bg); }
:root[data-cambio="sfumato"].fz-sfuma,
:root[data-cambio="sfumato"].fz-sfuma *:not(.fz-astro):not(.fz-stelle):not(.fz-sf):not(.fz-lucciola) {
  transition: background-color .7s ease, color .7s ease, border-color .7s ease, fill .7s ease, stroke .7s ease,
              stop-color .7s ease, box-shadow .7s ease !important;
}

/* ---------- 7. FERMO (tasto ⏸) E MOVIMENTO RIDOTTO ---------- */
:root.fz-fermo { --fz-gambe: paused; }
:root.fz-fermo :is(.fz-sf, .fz-lucciola),
:root.fz-fermo :is(.fz-sf, .fz-lettura) *,
:root.fz-fermo .eroe::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  :root { --fz-gambe: paused; }
  .fz-scena *, .fz-astro, .fz-stelle, .fz-sf, .fz-lucciola, .eroe::before, .fz-chicco-volo { animation: none !important; transition: none !important; }
  :root.fz-js[data-anim~="comparsa"] .fz-da-mostrare { opacity: 1; transform: none; transition: none; }
  :root.fz-js[data-anim~="grafico"] .sezione h2::after { clip-path: none; transition: none; }
  :root[data-anim~="rilievo"] :is(.card, .contatore, .quadro-oggi) { transition: none; }
  :root[data-anim~="rilievo"] :is(.card, .contatore, .quadro-oggi):hover { transform: none; }
  .fz-lucciole, .fz-sentiero { display: none; }
  :root.fz-sfuma, :root.fz-sfuma * { transition: none !important; }
}

/* ---------- 8. TASTO ⏸ IN ALTO (e voce del menu sul telefono) ---------- */
/* c'è solo se qualcosa si muove (lo scrive il generatore) e solo con lo script (senza script nulla si muove) */
.fz-mov { border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 38px; height: 34px; border-radius: 999px;
          cursor: pointer; display: none; place-items: center; padding: 0; }
.fz-js .fz-mov { display: inline-grid; }
.fz-mov:hover { border-color: var(--accent); }
.fz-mov svg { width: 16px; height: 16px; }
.fz-mov .fz-ico-play { display: none; }
.fz-mov[data-stato="fermo"] .fz-ico-pausa { display: none; }
.fz-mov[data-stato="fermo"] .fz-ico-play { display: block; }
.fz-mov-menu { display: none; }
/* fra 1101 e 1260 px c'è il menu completo: con il tasto ⏸ in più si stringono appena le voci, così sole/luna resta dentro */
@media (min-width: 1101px) and (max-width: 1260px) {
  .fz-js .barra__dentro { gap: .6rem; }
  .fz-js .nav a { padding-inline: .42rem; font-size: .88rem; }
  .fz-js .controlli { gap: .25rem; }
}
@media (max-width: 600px) {
  .fz-js .barra .fz-mov { display: none; }
  .fz-js .fz-mov-menu { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .75rem .5rem; border: 0; border-top: 1px solid var(--line);
                        background: none; color: var(--text); font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
}

/* ---------- 9. LOGO «ZETA» (data-logo="zeta") ---------- */
/* il marchio: la Z d'oro con la formica ritagliata (dal ritaglio si vede lo sfondo); un solo colore, l'oro del tema */
.logo-zeta { display: block; flex: none; color: var(--accent); }
/* testata e piè di pagina come il logo «in riga»: scritta Fraunces 800 («Trading» resta leggero), Z alta 1,9 volte le maiuscole */
:root[data-logo="zeta"] .marchio { font-weight: 800; letter-spacing: -.015em; gap: .45rem; }
:root[data-logo="zeta"] .marchio .coda { font-weight: 400; letter-spacing: 0; }
.marchio .logo-zeta { width: 40px; height: 40px; margin: -4px -.1rem -4px -.35rem; color: var(--accent); }
.pie .marchio .logo-zeta { width: 36px; height: 36px; }
@media (max-width: 600px) { .marchio .logo-zeta { width: 36px; height: 36px; margin: -4px -.1rem -4px -.3rem; } }
/* le illustrazioni in due versioni: il tema decide quale si vede (il browser scarica solo quella) */
:is(.emblema, .timbro) > img { display: block; width: 100%; height: auto; }
:is(.emblema, .timbro) > .fz-notte { display: none; }
:root[data-theme="dark"] :is(.emblema, .timbro) > .fz-giorno { display: none; }
:root[data-theme="dark"] :is(.emblema, .timbro) > .fz-notte { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.emblema, .timbro) > .fz-giorno { display: none; }
  :root:not([data-theme="light"]) :is(.emblema, .timbro) > .fz-notte { display: block; }
}
/* le tre foto della famiglia nei riquadri di Contatti: canale (sigillo), gruppo (formiche che fanno la Z), posta (chicco) */
.card .emblema { display: block; width: 96px; height: 96px; margin: -.25rem 0 .2rem; }
.emblema .fz-formicaio, .emblema .fz-formicaio-svg, .emblema .fz-formicaio-fermo { display: block; width: 100%; height: 100%; }
/* le formiche che camminano lungo la Z: colori del tema con classi semplici (arrivano anche dentro le copie riusate <use>) */
.fz-fa { fill: var(--accent-2); }
.fz-fo { fill: var(--accent); }
.fz-pista { fill: none; stroke: var(--accent); stroke-opacity: .3; stroke-width: 3; stroke-dasharray: 1 12; stroke-linecap: round; }
.fz-formicaio { display: none; }
.fz-js .fz-formicaio { display: block; }
.fz-formicaio-svg { display: block; width: 100%; height: auto; }
.pagina-404 .fz-formicaio { width: 210px; margin: 0 auto .5rem; }
.pagina-404 .fz-formicaio svg { width: 225px; height: 210px; }
.pagina-404 .fz-formicaio-fermo { display: block; margin: 0 auto 1rem; }
/* Zeta del logo nuovo sulla cima del formicaio (formica di profilo col chicco d'oro con la Z): colori del tema */
.fz-zc-a { fill: var(--accent-2); }
.fz-zc-b { fill: color-mix(in srgb, var(--accent-2) 60%, var(--bg)); }
.fz-zc-c { fill: var(--accent); }
/* il timbro delle Buste chiuse: il sigillo d'oro accanto al titolo, un po' storto come un timbro vero */
.titolo-pagina--timbro { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: center; }
.titolo-pagina--timbro > :not(.timbro) { grid-column: 1; }
.titolo-pagina--timbro > .timbro { grid-column: 2; grid-row: 1 / span 3; width: 150px; transform: rotate(-11deg); }
@media (max-width: 700px) { .titolo-pagina--timbro > .timbro { width: 92px; } }