/* mindset.xin, il sito vetrina. Seconda versione (4 ottobre 2026): il fondatore ha trovato la
   prima «fin troppo conservativa» e ha chiesto di osare molto di più.

   Idea [gusto]: un palco. L'apertura è buia, con il segno fatto di luce viva che segue il dito;
   «Una spalla» entra sottovoce e «spinta.» arriva con un botto (dalla calma al botto, il
   riferimento del fondatore è il video v3). Le quattro parole sono un palco fermo che cambia
   colore mentre scorri. Prova a tutta pagina, numeri giganti, testo cifrato che si decifra.

   Colori: solo variabili generate da design/tokens.yaml (tokens-stili.css), come nell'app:
   la notte (--night) è la superficie su cui MINDSET: parla e resta notte in ogni tema; i campi
   delle parole a gradiente; gli accenti delle parole sulla notte. Nitido: contrasto alto.

   Movimento [prova], docs/16-design.md §18: molle di ArkUI tradotte in linear() da
   web/sito/molle.py; rimbalzo solo su elementi piccoli o, per scelta, sulle parole giganti
   [gusto]; risposta su pointerdown; vetro solo su barra e capsula; una sola ripresa dal
   pulsante al foglio. Movimento ridotto e superfici piene sono preferenze indipendenti. */

:root {
  /* Generato da web/sito/molle.py: non modificare a mano. */
  --molla-sistema: linear(0, 0.0533, 0.1744, 0.3212, 0.468, 0.6005, 0.7124, 0.8019, 0.8705, 0.9209, 0.9564, 0.9802, 0.9952, 1.004, 1.0084, 1.0101, 1.01, 1.009, 1.0076, 1.006, 1.0046, 1.0034, 1.0024, 1.0016, 1);
  --molla-sistema-d: 757ms;
  --molla-dito: linear(0, 0.0541, 0.1755, 0.3211, 0.4652, 0.5945, 0.7032, 0.7903, 0.8573, 0.907, 0.9426, 0.9673, 0.9836, 0.994, 1.0001, 1.0033, 1.0047, 1.005, 1.0047, 1.004, 1.0033, 1.0026, 1.002, 1.0014, 1);
  --molla-dito-d: 209ms;
  --molla-contenitore: linear(0, 0.0556, 0.1754, 0.3136, 0.4468, 0.5645, 0.6632, 0.7431, 0.8063, 0.8554, 0.8928, 0.9211, 0.9423, 0.958, 0.9696, 0.9781, 0.9843, 0.9887, 0.992, 0.9943, 0.9959, 0.9971, 0.998, 0.9986, 1);
  --molla-contenitore-d: 500ms;
  --molla-fine: linear(0, 0.0699, 0.2263, 0.4101, 0.5856, 0.7341, 0.8492, 0.9312, 0.9848, 1.0161, 1.0311, 1.0354, 1.0332, 1.0278, 1.0213, 1.0151, 1.0097, 1.0056, 1.0026, 1.0006, 0.9995, 0.9989, 0.9987, 0.9988, 1);
  --molla-fine-d: 658ms;
  --molla-micro: linear(0, 0.1144, 0.365, 0.6408, 0.8734, 1.0326, 1.1166, 1.1401, 1.1242, 1.0892, 1.0505, 1.0179, 0.9955, 0.9837, 0.9804, 0.9826, 0.9875, 0.9929, 0.9975, 1.0006, 1.0023, 1.0028, 1.0024, 1.0018, 1);
  --molla-micro-d: 1122ms;
  --curva-schede: cubic-bezier(.2, 0, .1, 1);

  --pad: clamp(20px, 5vw, 64px);
  --largo: 1320px;
  --vetro-fondo: color-mix(in srgb, var(--bg) 64%, transparent);
  --vetro-notte: color-mix(in srgb, var(--night) 58%, transparent);
  --vetro-filtro: blur(20px) saturate(1.6);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --molla-sistema: cubic-bezier(.2, 0, .2, 1); --molla-sistema-d: 350ms;
    --molla-dito: cubic-bezier(.2, 0, .2, 1); --molla-dito-d: 200ms;
    --molla-contenitore: cubic-bezier(.2, 0, .2, 1); --molla-contenitore-d: 350ms;
    --molla-fine: cubic-bezier(.2, 0, .2, 1); --molla-fine-d: 350ms;
    --molla-micro: cubic-bezier(.2, 0, .2, 1); --molla-micro-d: 350ms;
  }
}
/* I colori del campo si animano: il palco delle parole e la prova sfumano da una parola all'altra. */
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #11172E; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #11172E; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  line-height: var(--line-height);
  color: var(--text);
  background: var(--night);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 96px;
}
:root[data-motion="ridotto"] { scroll-behavior: auto; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: clip; overflow-wrap: break-word; }
p { margin: 0 0 var(--space-m); }
h1, h2, h3 { margin: 0; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
b { font-weight: 800; }
:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: 3px; }
.sr-solo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; }
[hidden] { display: none !important; }
.salta { position: fixed; z-index: 100; top: -100px; left: 16px; padding: 12px 18px; border-radius: 14px; background: var(--tint); color: var(--on-tint); font-weight: 800; text-decoration: none; }
.salta:focus { top: 12px; }
.piccolo { font-size: var(--type-small-size); }
.largo { width: min(100% - 2 * var(--pad), var(--largo)); margin: 0 auto; }

/* Superfici notturne: restano notte in ogni tema (regola dell'identità). */
.notte, .palco, .parole { background: var(--night); color: var(--on-night); }
.notte a:not(.tasto), .palco a:not(.tasto) { color: inherit; }
.notte :focus-visible, .palco :focus-visible { outline-color: var(--on-night); }
.campo { background: linear-gradient(160deg, var(--g1) 0%, var(--g2) 82%); color: var(--on-field); }
.campo :focus-visible { outline-color: var(--on-field); }
.campo-challenge { --g1: var(--challenge-field); --g2: var(--challenge-field-2); }
.campo-choice { --g1: var(--choice-field); --g2: var(--choice-field-2); }
.campo-change { --g1: var(--change-field); --g2: var(--change-field-2); }
.campo-chance { --g1: var(--chance-field-2); --g2: var(--chance-field); }
.campo-pause { --g1: var(--pause-field); --g2: var(--pause-field-2); }

/* ---------- Tipografia ---------- */
.occhiello { font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; opacity: .86; }
.voce { font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; max-width: 44ch; }
.notte .voce, .palco .voce { color: var(--night-muted); }
.enorme { font-size: clamp(2.6rem, 8.4vw, 7.6rem); font-weight: 800; line-height: .92; letter-spacing: -.052em; max-width: 13ch; margin: 0 0 28px; text-wrap: balance; }
.nota { max-width: 60ch; opacity: .9; }

/* ---------- Tasti ---------- */
.tasto { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 28px; border-radius: 999px; font: inherit; font-weight: 800; text-decoration: none; text-align: center; line-height: 1.25; border: 0; cursor: pointer; }
.tasto-luce { background: var(--on-night); color: var(--night); --luce-col: color-mix(in srgb, var(--tint) 30%, transparent); }
.tasto-notte { background: color-mix(in srgb, var(--on-night) 12%, transparent); color: var(--on-night); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-night) 40%, transparent); }
.tasto-crema { background: var(--on-field); color: #111216; --luce-col: color-mix(in srgb, var(--g1, #5B3DF5) 30%, transparent); }
.tasto-pericolo { background: var(--danger); color: var(--on-danger); }
.tasto-grande { min-height: 72px; padding: 14px 40px; font-size: 1.25rem; }
.tasto-tondo { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 16px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; cursor: pointer; background: color-mix(in srgb, var(--on-field) 18%, transparent); color: var(--on-field); }
.tasto-tondo span[aria-hidden] { font-size: 1.35rem; line-height: 1; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; }

/* La pressione risponde subito (pointerdown) con la molla del dito. */
.premi { transition: scale var(--molla-dito-d) var(--molla-dito), background-color 150ms linear, color 150ms linear; }
.premi.premuto, .premi:active { scale: .96; }
/* La luce segue il dito (光随指动). */
.luce { position: relative; isolation: isolate; overflow: hidden; }
.luce::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(180px circle at var(--lx, 50%) var(--ly, 50%), var(--luce-col, rgba(255, 255, 255, .3)), transparent 70%);
  opacity: var(--luce-o, 0); transition: opacity 420ms linear;
}
.luce.acceso { --luce-o: 1; }
.luce.acceso::after { transition-duration: 120ms; }
.tasto-notte.luce { --luce-col: rgba(255, 255, 255, .22); }

/* ---------- Barra: trasparente sul palco, poi vetro del colore di ciò che sta sotto ---------- */
.barra {
  position: fixed; z-index: 40; inset: 0 0 auto 0; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--pad); padding-top: env(safe-area-inset-top);
  color: var(--text); transition: background-color 200ms linear, box-shadow 200ms linear, color 200ms linear;
}
.barra.su-notte { color: var(--on-night); }
.barra.scorsa { background: var(--vetro-fondo); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro); box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 14%, transparent); }
.barra.scorsa.su-notte { background: var(--vetro-notte); }
.barra :focus-visible { outline-color: currentColor; }
.marchio { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; font-size: 1.15rem; letter-spacing: -.045em; color: inherit; text-decoration: none; }
.due-punti { display: inline-flex; flex-direction: column; gap: .13em; margin-left: .07em; }
.due-punti i { display: block; width: .2em; height: .2em; border-radius: 50%; background: currentColor; }
.barra-azioni { display: flex; align-items: center; gap: 8px; }
.tasto-vetro { min-width: 48px; min-height: 48px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; color: inherit; background: color-mix(in srgb, currentColor 12%, transparent); }
.aa { font-size: 1.05rem; }
.aiuto { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--danger); color: var(--on-danger); font-weight: 800; text-decoration: none; font-size: .95rem; }

/* ---------- Apertura: il palco di luce ---------- */
.palco { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: end; padding: 104px 0 112px; }
.luce-viva { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.palco-testo { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), var(--largo)); margin: 0 auto; }
.palco h1 { margin: 0 0 28px; }
.sussurro { display: block; font-weight: 300; font-size: clamp(1.7rem, 4.2vw, 3.6rem); letter-spacing: -.025em; line-height: 1.1; color: var(--night-muted); margin-bottom: .1em; }
.botto { display: block; font-weight: 800; font-size: clamp(3.4rem, 13.5vw, 12.5rem); line-height: .86; letter-spacing: -.062em; }
.spinta {
  display: block; font-size: 1.5em; line-height: .82; padding-bottom: .06em;
  background: linear-gradient(100deg, var(--challenge) 0%, var(--chance) 32%, var(--choice) 66%, var(--change) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.palco .voce { max-width: 40ch; }
/* Sul telefono il segno di luce ha il suo spazio sopra le parole. */
@media (max-width: 899px) {
  .palco { padding-top: calc(108px + min(92vw, 46svh)); }
  .palco .invito { top: calc(78px + min(92vw, 46svh)); bottom: auto; left: 0; right: 0; max-width: none; text-align: center; }
}
@media (max-width: 699px) { .spinta { font-size: 1.72em; } }
:root[data-stile="nitido"] .palco { padding-top: 104px; }
.invito { position: absolute; z-index: 1; right: var(--pad); bottom: 96px; margin: 0; font-size: .9rem; color: var(--night-muted); max-width: 22ch; text-align: right; }
.solo-tocco { display: none; }
@media (pointer: coarse) { .solo-puntatore { display: none; } .solo-tocco { display: inline; } }

/* Ingresso, una volta sola: la calma (0-900 ms), poi il botto. */
.js .sussurro { opacity: 0; translate: 0 10px; }
.js .botto { opacity: 0; scale: 1.18; transform-origin: 0 100%; }
.js .entra-subito { opacity: 0; translate: 0 18px; }
.js .acceso-palco .sussurro { opacity: 1; translate: 0 0; transition: opacity 900ms linear, translate 1200ms var(--molla-sistema); }
.js .acceso-palco .botto { opacity: 1; scale: 1; transition: scale var(--molla-fine-d) var(--molla-fine) 1000ms, opacity 120ms linear 1000ms; }
.js .acceso-palco .entra-subito { opacity: 1; translate: 0 0; transition: opacity 400ms linear 1350ms, translate var(--molla-sistema-d) var(--molla-sistema) 1350ms; }
.js .acceso-palco .occhiello.entra-subito { transition-delay: 200ms; }

/* ---------- Le quattro parole: palco fermo ---------- */
.parole { position: relative; }
.scena-testa { padding: 104px var(--pad) 32px; }
.scena-testa h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; max-width: 22ch; }
.scena-segno, .scena-passi { display: none; }
.pannello { position: relative; min-height: 90svh; padding: 48px var(--pad) 120px; display: flex; flex-direction: column; justify-content: flex-end; }
.indice { font-weight: 800; letter-spacing: .14em; font-size: .85rem; margin-bottom: 8px; }
.gigante { font-size: clamp(3.4rem, 18vw, 17rem); font-weight: 800; letter-spacing: -.065em; line-height: .84; margin: 0 0 24px -.04em; white-space: nowrap; }
.gigante-calmo { font-weight: 300; letter-spacing: -.04em; }
.domanda { font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.25; max-width: 30ch; letter-spacing: -.015em; }
.anteprima { list-style: none; margin: 4px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.anteprima li { margin: 0; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: .95rem; background: color-mix(in srgb, var(--on-field) 16%, transparent); }
.anteprima-testo { max-width: 46ch; font-size: 1.1rem; }
.pannello .tasto { align-self: flex-start; }

/* Con JavaScript: un solo palco alto cinque schermate, fermo mentre scorri. */
.js .parole { height: 500svh; }
.js .scena {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: linear-gradient(160deg, var(--g1) 0%, var(--g2) 82%); color: var(--on-field);
  transition: --g1 700ms linear, --g2 700ms linear;
}
.js .scena-testa { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-right: calc(var(--pad) + 120px); }
.js .scena-segno { display: block; position: absolute; z-index: 2; right: var(--pad); top: 92px; width: clamp(56px, 9vw, 132px); overflow: visible; }
.scena-segno use { fill: color-mix(in srgb, var(--on-field) 26%, transparent); transform-box: view-box; transform-origin: 50px 50px; transition: fill 200ms linear, scale var(--molla-micro-d) var(--molla-micro); }
.scena-segno use.attivo { fill: var(--on-field); scale: 1.1; }
/* Sul desktop il segno diventa lo sfondo del palco, dietro le parole [gusto]. */
@media (min-width: 1000px) {
  .js .scena-segno { z-index: 1; width: min(46vw, 74svh); right: -5vw; top: 50%; translate: 0 -46%; }
  .scena-segno use { fill: color-mix(in srgb, var(--on-field) 9%, transparent); }
  .scena-segno use.attivo { fill: color-mix(in srgb, var(--on-field) 24%, transparent); scale: 1.04; }
}
.js .scena-passi { display: flex; position: absolute; z-index: 2; left: var(--pad); bottom: 96px; gap: 6px; list-style: none; margin: 0; padding: 0; }
.scena-passi li { width: 8px; height: 8px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--on-field) 40%, transparent); transition: width 250ms var(--curva-schede), background-color 200ms linear; }
.scena-passi li.attivo { width: 28px; background: var(--on-field); }
.js .pannello { position: absolute; inset: 0; z-index: 2; min-height: 0; background: none; padding-bottom: 136px; opacity: 0; pointer-events: none; transition: opacity 180ms linear; }
.js .pannello.attivo { opacity: 1; pointer-events: auto; transition-duration: 260ms; }
/* Le lettere della parola arrivano una alla volta (sfasate di 35 ms) con la molla fine [gusto]. */
.gigante .lettera { display: inline-block; }
.js .pannello .gigante .lettera { opacity: 0; translate: 0 .5em; }
.js .pannello.attivo .gigante .lettera { opacity: 1; translate: 0 0; transition: translate var(--molla-fine-d) var(--molla-fine), opacity 160ms linear; transition-delay: calc(var(--l) * 35ms); }
.js .pannello .domanda, .js .pannello .anteprima, .js .pannello .anteprima-testo, .js .pannello .tasto { opacity: 0; translate: 0 16px; }
.js .pannello.attivo .domanda, .js .pannello.attivo .anteprima, .js .pannello.attivo .anteprima-testo, .js .pannello.attivo .tasto { opacity: 1; translate: 0 0; transition: translate var(--molla-sistema-d) var(--molla-sistema) 220ms, opacity 240ms linear 220ms; }
.js .pannello.attivo .anteprima { transition-delay: 300ms; }
.js .pannello.attivo .tasto { transition-delay: 380ms; }

/* ---------- Prova: a tutta pagina ---------- */
.prova { position: relative; isolation: isolate; overflow: hidden; transition: --g1 600ms linear, --g2 600ms linear; }
.prova-dentro { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), var(--largo)); margin: 0 auto; padding: clamp(96px, 12vw, 160px) 0 clamp(120px, 12vw, 168px); display: grid; gap: 40px; align-items: end; }
@media (min-width: 1000px) { .prova-dentro { grid-template-columns: 1fr 1.05fr; gap: 72px; } }
.prova .voce { color: var(--on-field); }
.particelle { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.scegli-prova { display: flex; flex-wrap: wrap; gap: 8px; }
.pillola { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; font: inherit; font-weight: 800; cursor: pointer; background: color-mix(in srgb, var(--on-field) 16%, transparent); color: var(--on-field); }
.pillola[aria-pressed="true"] { background: var(--on-field); color: #111216; }
.conversazione { position: relative; min-height: min(620px, 78svh); display: flex; flex-direction: column; }
.prova-testa { display: flex; align-items: center; gap: 8px; }
.prova-titoli { flex: 1; min-width: 0; }
.prova-titolo { margin: 0; font-weight: 800; font-size: 1.2rem; }
.prova-passo { margin: 0; font-size: .95rem; }
.avanzamento { height: 6px; margin: 14px 0 0; border-radius: 999px; background: color-mix(in srgb, var(--on-field) 22%, transparent); }
.avanzamento i { display: block; height: 100%; width: var(--p, 4%); border-radius: inherit; background: var(--on-field); transition: width var(--molla-contenitore-d) var(--molla-contenitore); }
.prova-corpo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding-top: 28px; }
.trascritto { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.trascritto li:not(:nth-last-child(-n+2)) { display: none; }
.trascritto .d { display: block; color: color-mix(in srgb, var(--on-field) 84%, transparent); white-space: pre-line; }
.trascritto .r { display: inline-block; margin-top: 6px; padding: 6px 14px; border-radius: 16px; font-weight: 800; background: color-mix(in srgb, var(--on-field) 18%, transparent); }
.prova-domanda { margin: 0; font-size: clamp(1.7rem, 3.3vw, 2.7rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; white-space: pre-line; }
.prova-domanda.nuova { animation: domanda var(--molla-sistema-d) var(--molla-sistema) both; }
@keyframes domanda { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
.prova-suggerimento { margin: 0; font-weight: 800; }
.prova-risposte { display: flex; flex-direction: column; gap: 8px; }
.nuove { animation: domanda var(--molla-sistema-d) var(--molla-sistema) both 80ms; }
.scelta { min-height: 60px; padding: 10px 24px; border: 0; border-radius: 30px; text-align: left; font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; color: var(--on-field); background: color-mix(in srgb, var(--on-field) 18%, transparent); --luce-col: rgba(255, 255, 255, .28); }
.scelta.scelto { background: var(--on-field); color: #111216; }
.in-attesa .scelta:not(.scelto), .in-attesa .avanti { opacity: .38; transition: opacity 150ms linear; }
.scala { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.scala .scelta { padding: 0; min-height: 56px; text-align: center; border-radius: 999px; }
.campo-testo { width: 100%; min-height: 110px; padding: 16px 18px; border-radius: 22px; resize: vertical; font: inherit; font-size: 1.1rem; color: var(--on-field); background: color-mix(in srgb, var(--on-field) 10%, transparent); border: 2px solid color-mix(in srgb, var(--on-field) 60%, transparent); }
.campo-testo::placeholder { color: color-mix(in srgb, var(--on-field) 78%, transparent); }
.campo-testo:focus-visible { outline: 3px solid var(--on-field); outline-offset: 2px; }
.avanti { min-height: 60px; border: 0; border-radius: 999px; font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; background: var(--on-field); color: #111216; --luce-col: color-mix(in srgb, var(--g1) 30%, transparent); }
.prova-nota { margin: 0; }
.puntini { display: flex; gap: 7px; padding: 4px 0; }
.puntini i { width: 10px; height: 10px; border-radius: 50%; background: var(--on-field); animation: puntino 600ms ease-in-out both; }
.puntini i:nth-child(2) { animation-delay: 100ms; } .puntini i:nth-child(3) { animation-delay: 200ms; }
@keyframes puntino { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 0 -6px; } }
.perche { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; padding: 22px; border-radius: 28px; background: var(--surface); color: var(--text); animation: foglio-su var(--molla-contenitore-d) var(--molla-contenitore) both; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
@keyframes foglio-su { from { translate: 0 60px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.perche .tasto-tondo { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.perche :focus-visible { outline-color: var(--focus); }
.perche-testa { display: flex; align-items: center; justify-content: space-between; }
.perche-titolo { margin: 0; font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.perche-elenco { overflow-y: auto; padding-top: 8px; }
.perche-elenco article { padding: 16px 0; border-top: 1px solid var(--divider); }
.perche-elenco h3 { font-size: 1.15rem; font-weight: 800; }
.perche-elenco p, .perche-elenco li { font-size: 1rem; margin: 6px 0 0; }
.perche-elenco ul { margin: 6px 0 0; padding-left: 1.1em; }
.perche-elenco .fonte { color: var(--muted); font-size: .9rem; }
.perche-elenco a { color: var(--accent); }

/* ---------- Gradi delle prove: a parole e in forma (tre, due, un punto) ---------- */
.grado { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: .88rem; color: var(--accent); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.notte .grado { color: var(--on-night); background: color-mix(in srgb, var(--on-night) 14%, transparent); }
.grado::before { content: ""; width: 34px; height: 8px; background: radial-gradient(circle 4px at 4px 4px, currentColor 3.5px, transparent 4px) 0 0 / 13px 8px repeat-x; }
.grado-buone::before { width: 21px; } .grado-limitate::before { width: 8px; } .grado-nessuno::before { display: none; }

/* ---------- Prove: numeri giganti ---------- */
.prove { padding: clamp(96px, 13vw, 176px) 0; }
.cifre { list-style: none; margin: 56px 0 24px; padding: 0; }
.cifra-riga { display: grid; gap: 8px 56px; padding: 36px 0; border-top: 1px solid color-mix(in srgb, var(--on-night) 22%, transparent); }
@media (min-width: 1000px) { .cifra-riga { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.cifra-grande { margin: 0; font-size: clamp(4.4rem, 23vw, 13.5rem); font-weight: 800; letter-spacing: -.07em; line-height: .84; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra-riga:nth-child(1) .cifra-grande { color: var(--choice); }
.cifra-riga:nth-child(2) .cifra-grande { color: var(--change); }
.cifra-riga:nth-child(3) .cifra-grande { color: var(--chance); }
.cifra-testo h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.025em; margin: 14px 0 10px; }
.cifra-testo p { max-width: 50ch; }
.limiti { color: var(--night-muted); }
.fonte { font-size: .92rem; color: var(--night-muted); overflow-wrap: anywhere; }

/* ---------- Privacy: il testo si decifra ---------- */
.privacy { padding: clamp(96px, 13vw, 176px) 0; background: var(--bg); color: var(--text); }
.patti { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0 56px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.patto { padding: 28px 0; border-top: 2px solid var(--text); }
.patto h3 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 14px 0 10px; }
.patto p:last-child { margin: 0; color: var(--muted); max-width: 46ch; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; font-size: .9rem; }
.stato::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.stato-ora::before { background: currentColor; }
.cifrato { font-variant-ligatures: none; }
/* Le lettere restano al loro posto (niente salti di riga): sopra ciascuna c'è un glifo finché non si decifra. */
.cifra-c { position: relative; }
.cifra-c[data-g] { color: transparent; }
.cifra-c[data-g]::after { content: attr(data-g); position: absolute; left: 50%; top: 0; translate: -50% 0; color: var(--tint); }

/* ---------- Aiuto: il momento calmo, senza movimento ---------- */
.aiuto-sezione { padding: clamp(96px, 12vw, 160px) 0; }
.aiuto-dentro { display: grid; gap: 32px 72px; }
@media (min-width: 1000px) { .aiuto-dentro { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.aiuto-sezione .enorme { margin: 0; }
.soccorso { margin-top: 24px; padding: 24px; border-radius: 24px; background: color-mix(in srgb, var(--on-night) 9%, transparent); }
.soccorso-titolo { font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; }
.soccorso .tasto { white-space: nowrap; }
.soccorso .piccolo { margin: 12px 0 0; color: var(--night-muted); }
.numero { white-space: nowrap; font-size: 1.15em; }

/* ---------- Dove: un tabellone ---------- */
.dove { padding: clamp(96px, 12vw, 160px) 0 clamp(64px, 8vw, 96px); background: var(--bg); color: var(--text); }
.tabellone { list-style: none; margin: 0; padding: 0; }
.tabellone li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; margin: 0; padding: 18px 0; border-top: 2px solid var(--text); }
.tabellone li:last-child { border-bottom: 2px solid var(--text); }
.canale-nome { font-size: clamp(2rem, 7vw, 6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; }

/* ---------- Chiusura: il nastro si muove con lo scorrimento ---------- */
.finale {
  position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0;
  background: linear-gradient(115deg, var(--challenge-field) 0%, var(--chance-field) 33%, var(--choice-field) 66%, var(--change-field) 100%);
  color: var(--on-field);
}
.nastro { white-space: nowrap; font-size: clamp(4rem, 15vw, 13rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; translate: var(--s, 0px) 0; }
.finale-dentro { margin-top: clamp(32px, 5vw, 56px); }
.finale :focus-visible { outline-color: var(--on-field); }

/* ---------- Piede ---------- */
.piede { background: var(--bg); color: var(--text); padding: 28px var(--pad) 132px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--divider); }
.piede p { margin: 0; color: var(--muted); }

/* ---------- Entrata delle sezioni, in sequenza (Huawei 2.1.5.1.6) ---------- */
.js .entra { opacity: 0; translate: 0 28px; }
.js .entra.dentro { opacity: 1; translate: 0 0; transition: translate var(--molla-sistema-d) var(--molla-sistema), opacity 300ms linear; transition-delay: var(--ritardo, 0ms); }

/* ---------- Capsula di navigazione: vetro sottile, alta 56, l'indicatore scorre ---------- */
.capsula {
  position: fixed; z-index: 40; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 4px; min-height: 56px; max-width: calc(100% - 24px); border-radius: 999px;
  overflow-x: auto; scrollbar-width: none;
  color: var(--text); background: var(--vetro-fondo); -webkit-backdrop-filter: var(--vetro-filtro); backdrop-filter: var(--vetro-filtro);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  transition: background-color 200ms linear, color 200ms linear;
}
.capsula.su-notte { color: var(--on-night); background: var(--vetro-notte); }
.capsula a { flex: none; position: relative; z-index: 1; display: grid; place-items: center; min-width: 48px; min-height: 48px; padding: 0 clamp(10px, 3.4vw, 18px); border-radius: 999px; color: inherit; font-weight: 800; font-size: .95rem; text-decoration: none; transition: color 150ms linear; }
.capsula a[aria-current="true"] { color: var(--on-tint); }
.capsula-indice { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0px); translate: var(--x, 0px) 0; border-radius: 999px; background: var(--tint); opacity: 0; transition: translate 250ms var(--curva-schede), width 250ms var(--curva-schede), opacity 150ms linear; }
.capsula.attiva .capsula-indice { opacity: 1; }
.capsula :focus-visible { outline-color: currentColor; outline-offset: -3px; }

/* ---------- Fogli delle parole e Aspetto ---------- */
dialog { border: 0; padding: 0; color: inherit; }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
.foglio { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 760px) { .foglio { width: min(860px, 92vw); height: auto; max-height: 90vh; margin: auto; border-radius: 36px; } }
.foglio-dentro { padding: max(18px, env(safe-area-inset-top)) clamp(20px, 5vw, 48px) 44px; }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.segno-piccolo { width: 46px; height: 46px; fill: color-mix(in srgb, var(--on-field) 30%, transparent); }
.segno-piccolo .pieno { fill: var(--on-field); }
.foglio h2 { font-size: clamp(3rem, 11vw, 6rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.foglio-domanda { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; margin: 14px 0 28px; max-width: 34ch; }
.attrezzi { list-style: none; margin: 0; padding: 0; }
.attrezzi li { padding: 16px 0; border-top: 1px solid color-mix(in srgb, var(--on-field) 30%, transparent); }
.attrezzi b { display: block; font-size: 1.2rem; letter-spacing: -.01em; }
.attrezzi span { display: block; margin-top: 2px; }
.foglio-nota { margin: 24px 0 0; font-size: 1rem; }
dialog[open].foglio, dialog[open].aspetto { animation: appare 200ms linear; }
dialog[open].in-ripresa { animation: none; }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
/* Una sola ripresa (共享容器): cresce il contenitore, il contenuto entra dopo. */
::view-transition-group(foglio) {
  animation-duration: var(--molla-contenitore-d); animation-timing-function: var(--molla-contenitore);
  background: linear-gradient(160deg, var(--vt-g1, transparent), var(--vt-g2, transparent)); border-radius: 28px; overflow: hidden;
}
::view-transition-old(foglio) { animation: vt-esce 110ms linear both; }
::view-transition-new(foglio) { animation: vt-entra 200ms linear 180ms both; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }

.aspetto { width: min(440px, calc(100% - 24px)); max-height: calc(100% - 24px); margin: auto; padding: 22px; border-radius: 28px; background: var(--surface); color: var(--text); overflow-y: auto; }
.aspetto-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.aspetto h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.aspetto .tasto-tondo { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.aspetto fieldset { border: 0; margin: 0 0 14px; padding: 0; }
.aspetto legend { font-weight: 800; padding: 0; margin-bottom: 4px; }
.aspetto label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px; border-radius: 14px; cursor: pointer; }
.aspetto label:has(input:checked) { background: color-mix(in srgb, var(--tint) 13%, transparent); }
.aspetto input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--tint); }
.aspetto .piccolo { color: var(--muted); margin: 0; }

/* ---------- Superfici piene: niente vetro ---------- */
:root[data-vetro="opaco"] { --vetro-fondo: var(--bg); --vetro-notte: var(--night); --vetro-filtro: none; }

/* ---------- Movimento ridotto: niente spostamenti, solo dissolvenze brevi ---------- */
:root[data-motion="ridotto"] .sussurro, :root[data-motion="ridotto"] .botto, :root[data-motion="ridotto"] .entra-subito, :root[data-motion="ridotto"] .entra,
:root[data-motion="ridotto"] .gigante .lettera, :root[data-motion="ridotto"] .pannello .domanda, :root[data-motion="ridotto"] .pannello .anteprima,
:root[data-motion="ridotto"] .pannello .anteprima-testo, :root[data-motion="ridotto"] .pannello .tasto {
  translate: none !important; scale: none !important; transition: opacity 150ms linear !important; transition-delay: 0s !important;
}
:root[data-motion="ridotto"] .premi { transition: background-color 100ms linear, color 100ms linear; scale: none !important; }
:root[data-motion="ridotto"] .luce::after { display: none; }
:root[data-motion="ridotto"] .prova-domanda.nuova, :root[data-motion="ridotto"] .nuove, :root[data-motion="ridotto"] .perche { animation: appare 150ms linear both; }
:root[data-motion="ridotto"] .avanzamento i, :root[data-motion="ridotto"] .scena-segno use { transition: none; }
:root[data-motion="ridotto"] .nastro { translate: none; white-space: normal; }
:root[data-motion="ridotto"] .capsula-indice { transition: opacity 100ms linear; }

/* ---------- Nitido: contrasto alto, bordi netti, niente decorazioni ---------- */
:root[data-stile="nitido"] { --vetro-fondo: var(--bg); --vetro-notte: var(--night); --vetro-filtro: none; }
:root[data-stile="nitido"] .occhiello { text-transform: none; letter-spacing: 0; font-size: 1rem; opacity: 1; }
:root[data-stile="nitido"] .spinta { background: none; color: var(--on-night); }
:root[data-stile="nitido"] .sussurro { font-weight: 600; color: var(--on-night); }
:root[data-stile="nitido"] .luce-viva, :root[data-stile="nitido"] .invito, :root[data-stile="nitido"] .luce::after { display: none; }
:root[data-stile="nitido"] .cifra-grande { color: var(--on-night) !important; }
:root[data-stile="nitido"] .tasto-notte, :root[data-stile="nitido"] .pillola, :root[data-stile="nitido"] .scelta, :root[data-stile="nitido"] .tasto-tondo, :root[data-stile="nitido"] .anteprima li { box-shadow: inset 0 0 0 2px currentColor; }
:root[data-stile="nitido"] .capsula { box-shadow: inset 0 0 0 2px currentColor; }
:root[data-stile="nitido"] .tasto-crema, :root[data-stile="nitido"] .avanti, :root[data-stile="nitido"] .pillola[aria-pressed="true"], :root[data-stile="nitido"] .scelta.scelto { background: var(--on-field); color: var(--g1, #fff); }
:root[data-stile="nitido"] .finale { background: var(--surface); color: var(--text); }
:root[data-stile="nitido"] .finale .tasto-crema { background: var(--text); color: var(--bg); }
:root[data-stile="nitido"] .trascritto .d { color: var(--on-field); }

@media print {
  .barra, .capsula, .luce-viva, .particelle, .invito, .scena-segno, .scena-passi, .nastro { display: none !important; }
  .js .parole { height: auto; } .js .scena { position: static; height: auto; }
  .js .pannello { position: relative; opacity: 1; }
  .js .entra, .js .sussurro, .js .botto, .js .entra-subito, .js .lettera { opacity: 1 !important; translate: none !important; scale: none !important; }
}