/* Palette Mustard: Quasi Nero e Giallo Mustard primari, Blu Notte e Ghiaccio di supporto,
   Arancio Bruciato solo dentro il fascio di luce. Gradient primario #FFF57F → #FDC234 → #D26800. */
/* Albert Sans, font variabile ospitato in locale (SIL OFL 1.1, licenza in assets/font/). */
@font-face {
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("font/albert-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nero: #020A1A;
  --notte: #0F324D;
  --mustard: #FDC234;
  --luce: #FFF57F;
  --arancio: #D26800;
  --ghiaccio: #E6EBE5;
  --testo: #E6EBE5;
  --testo-tenue: rgba(230, 235, 229, .68);
  --linea: rgba(230, 235, 229, .16);
  --progresso: 0;

  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --colonna: 44rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
a { color: var(--mustard); text-underline-offset: .2em; }

/* ---------- la scena: un fascio di luce su fondo profondo ---------- */
.scena {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 0% 100%, rgba(15, 50, 77, .6), transparent 65%),
    var(--nero);
}
/* Raggio della luce che si accende all'apertura, dall'angolo in alto a destra. */
@property --accensione { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

/* Le immagini generate, se presenti in assets/, stanno sotto il fascio disegnato in CSS. */
.scena__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: 70% 40% / cover no-repeat;
  transform-origin: 100% 0;
  /* Più si avanza, più la luce della foto si alza. */
  filter: brightness(calc(.72 + var(--progresso) * .38)) saturate(1.05);
  transform: scale(calc(1.06 - var(--progresso) * .06));
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 calc(var(--accensione) - 30%), transparent var(--accensione));
          mask-image: radial-gradient(circle at 100% 0, #000 calc(var(--accensione) - 30%), transparent var(--accensione));
  transition: opacity .3s ease, filter 1.2s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1),
    --accensione 1.6s cubic-bezier(.55, 0, .25, 1);
}
.is-pronto .scena__foto { --accensione: 140%; }
.ha-foto .scena__foto { background-image: url("bg-wide.jpg"); }
@media (max-aspect-ratio: 3/4) {
  .ha-foto .scena__foto { background-image: url("bg-tall.jpg"); background-position: 100% 0; }
}
.is-pronto.ha-foto .scena__foto { opacity: 1; }
/* Con la foto il fascio disegnato in CSS si fa da parte; resta come ripiego. */
.ha-foto .scena__fascio, .ha-foto .scena__alone { display: none; }
.is-fine .scena__foto { filter: brightness(1.25) saturate(1.1); }

.scena__fascio {
  position: absolute;
  top: -40vh;
  right: calc(-14vw + var(--progresso) * 10vw);
  width: calc(30vw + var(--progresso) * 22vw);
  min-width: 260px;
  height: 190vh;
  transform: rotate(32deg) translateY(-6vh);
  transform-origin: top right;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(210, 104, 0, .16) 12%,
    rgba(253, 194, 52, .42) 36%,
    rgba(253, 194, 52, .58) 50%,
    rgba(253, 194, 52, .40) 64%,
    rgba(210, 104, 0, .16) 86%,
    transparent 100%);
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease .15s, width 1.2s cubic-bezier(.16, 1, .3, 1), right 1.2s cubic-bezier(.16, 1, .3, 1);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 92%);
}
.is-pronto .scena__fascio { opacity: 1; }
/* Il nucleo del fascio, più stretto e più caldo. */
.scena__fascio::after {
  content: "";
  position: absolute;
  inset: 0 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 127, .5) 45%, rgba(253, 194, 52, .55) 60%, transparent);
  filter: blur(18px);
}

/* Il punto da cui entra la luce, in alto a destra. */
.scena__alone {
  position: absolute;
  top: -22vmax;
  right: -18vmax;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 127, .42) 0%, rgba(253, 194, 52, .2) 30%, rgba(210, 104, 0, .06) 55%, transparent 70%);
  mix-blend-mode: screen;
  opacity: calc(.55 + var(--progresso) * .45);
  transition: opacity 1.2s ease;
}
/* Il fascio che si ravviva quando arrivano le scintille di una risposta. */
.scena__lampo {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 100% 0, rgba(255, 245, 127, .38), rgba(253, 194, 52, .14) 45%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
}
.scena__grana {
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07;
  mix-blend-mode: overlay;
}

/* Alla fine la stanza si accende: il fascio si allarga fino a coprire la pagina. */
.is-fine .scena__fascio { width: 120vw; right: -30vw; }
.is-fine .scena__alone { opacity: 1; }

/* ---------- barra di avanzamento: la stessa luce, in alto ---------- */
.avanzamento {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 3;
  background: rgba(230, 235, 229, .08);
}
.avanzamento__luce {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--progresso));
  background: linear-gradient(90deg, var(--luce), var(--mustard) 60%, var(--arancio));
  box-shadow: 0 0 14px rgba(253, 194, 52, .7);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- palco ---------- */
.palco {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(48px, 9vh, 96px);
}
.schermo {
  width: 100%;
  max-width: var(--colonna);
}

/* ---------- intro ---------- */
.intro__contesto {
  margin: 0 0 1.4rem;
  color: var(--testo-tenue);
  font-size: .95rem;
}
/* Titolo principale come da manuale Mustard: Albert Sans Medium, maiuscolo, senza grassetto. */
.intro__titolo {
  margin: 0 0 2rem;
  font-weight: 500;
  font-size: clamp(2.6rem, 8.2vw, 5.5rem);
  line-height: .94;
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 16ch;
  color: var(--ghiaccio);
  text-wrap: balance;
}
/* La luce passa sul titolo da destra a sinistra e lo lascia acceso. */
.is-pronto .intro__titolo {
  background: linear-gradient(105deg, rgba(230, 235, 229, .12) 0 40%, var(--mustard) 47%, var(--luce) 50%, var(--ghiaccio) 56% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: luce-sul-titolo 1.5s cubic-bezier(.45, 0, .25, 1) .5s both;
}
@keyframes luce-sul-titolo { from { background-position: 0 0; } to { background-position: 100% 0; } }
.intro__testo { max-width: 36rem; }
.intro__testo p { margin: 0 0 1rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.intro__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 2.2rem 0 3.2rem; }
.intro__nota { flex-basis: 100%; margin: 0 0 .25rem; color: var(--testo-tenue); }
.intro__firma { margin: 0; font-size: .92rem; color: var(--testo-tenue); line-height: 1.5; }

/* L'unica entrata orchestrata: il titolo sale mentre la luce entra. */
.intro > * { opacity: 0; transform: translateY(16px); }
.is-pronto .intro > * {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}
.is-pronto .intro > :nth-child(2) { transition-delay: .25s; }
.is-pronto .intro > :nth-child(3) { transition-delay: 1s; }
.is-pronto .intro > :nth-child(4) { transition-delay: 1.15s; }
.is-pronto .intro > :nth-child(5) { transition-delay: 1.3s; }

/* ---------- bottoni ---------- */
.bottone {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: .95rem 1.6rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s;
}
.bottone--pieno { background: var(--mustard); color: var(--nero); box-shadow: 0 10px 30px -12px rgba(253, 194, 52, .7); }
.bottone--pieno:hover { background: var(--luce); }
.bottone--pieno:active { transform: translateY(1px) scale(.99); }
.bottone--pieno:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; background: var(--mustard); }
.bottone--vuoto { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--linea); }
.bottone--vuoto:hover { box-shadow: inset 0 0 0 1.5px var(--ghiaccio); }

:focus-visible { outline: 2px solid var(--mustard); outline-offset: 3px; border-radius: 6px; }
.bottone:focus-visible { border-radius: 999px; outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- domanda ---------- */
.domanda__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2.25rem;
  margin-bottom: 1.6rem;
}
.domanda__numero { color: var(--testo-tenue); font-size: .92rem; font-variant-numeric: tabular-nums; }
.indietro {
  appearance: none;
  background: none;
  border: 0;
  padding: .4rem 0;
  color: var(--testo-tenue);
  cursor: pointer;
  font-size: .95rem;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: .25em;
}
.indietro:hover { color: var(--ghiaccio); text-decoration-color: currentColor; }

.domanda__testo {
  margin: 0 0 1rem;
  font-weight: 400;
  font-size: clamp(1.45rem, 3.1vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ghiaccio);
  max-width: 34ch;
  text-wrap: pretty;
}
.domanda__aiuto { margin: 0 0 1rem; color: var(--testo-tenue); font-size: .98rem; max-width: 40rem; }

.opzioni { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.opzione {
  appearance: none;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.1rem;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: rgba(15, 50, 77, .42);
  box-shadow: inset 0 0 0 1px var(--linea);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .2s ease, color .25s ease, transform .15s ease;
}
/* La scelta si riempie di giallo da sinistra: è la risposta che si accende. */
.opzione::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mustard);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.opzione:hover { box-shadow: inset 0 0 0 1px rgba(253, 194, 52, .65); }
.opzione:active { transform: scale(.995); }
.opzione.is-scelta { color: var(--nero); box-shadow: none; }
.opzione.is-scelta::before { transform: scaleX(1); }
.opzione__tasto {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 7px;
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--linea);
  color: var(--testo-tenue);
  transition: color .25s, box-shadow .25s;
}
.opzione.is-scelta .opzione__tasto { color: var(--nero); box-shadow: inset 0 0 0 1.5px rgba(2, 10, 26, .45); }
.opzione__testo { font-size: 1.04rem; line-height: 1.35; }

.domanda__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.6rem; }
.domanda__tastiera { margin: 1.6rem 0 0; font-size: .85rem; color: var(--testo-tenue); }
@media (hover: none), (max-width: 640px) { .domanda__tastiera { display: none; } .opzione__tasto { display: none; } }

/* ---------- attesa, errore ---------- */
.attesa__titolo, .errore__titolo { margin: 0 0 1rem; font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.errore p { color: var(--testo-tenue); max-width: 36rem; }

/* ---------- fine ---------- */
.fine__titolo {
  margin: 0 0 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 12vw, 8rem);
  line-height: .9;
  letter-spacing: -.03em;
  /* Gradient primario in cutout, una sola volta in tutta la pagina. */
  background: linear-gradient(115deg, var(--luce) 10%, var(--mustard) 45%, var(--arancio) 95%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* GRAZIE emerge dal bagliore che ha riempito lo schermo. */
.fine__titolo { animation: grazie 1.5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes grazie {
  from { opacity: 0; filter: brightness(2.4) blur(12px); letter-spacing: .05em; }
  50% { opacity: 1; }
  to { opacity: 1; filter: none; letter-spacing: -.03em; }
}
.fine__testo { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 0 0 2.6rem; }

.contatto {
  max-width: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 20px;
  background: rgba(2, 10, 26, .62);
  box-shadow: inset 0 0 0 1px var(--linea);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.contatto__titolo { margin: 0 0 .4rem; font-weight: 500; font-size: 1.3rem; color: var(--ghiaccio); }
.contatto__nota { margin: 0 0 1.4rem; color: var(--testo-tenue); font-size: .95rem; }
.contatto__modulo { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo__etichetta { font-size: .9rem; color: var(--testo-tenue); padding: 0; }
.campo input {
  width: 100%;
  padding: .85rem 1rem;
  border: 0;
  border-radius: 12px;
  background: rgba(230, 235, 229, .07);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 1.05rem;
}
.campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--mustard); }
.spunta { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; font-size: .98rem; }
.spunta input { accent-color: var(--mustard); width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex: none; }
.spunta--consenso { font-size: .9rem; color: var(--testo-tenue); }
.contatto__errore { margin: 0; color: var(--luce); font-size: .95rem; }
.contatto__ok { margin: 0; font-size: 1.1rem; color: var(--ghiaccio); }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.informativa { margin: 1.4rem 0 0; font-size: .88rem; color: var(--testo-tenue); }
.informativa .collegamento { display: block; font-size: .88rem; color: var(--testo); }

.collegamento {
  appearance: none;
  background: none;
  border: 0;
  padding: .3rem 0;
  margin-top: .2rem;
  color: var(--testo-tenue);
  font-size: .92rem;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--linea);
  text-underline-offset: .25em;
}
.collegamento:hover { color: var(--ghiaccio); text-decoration-color: currentColor; }

/* ---------- finestra dell'informativa ---------- */
.finestra {
  width: min(40rem, calc(100vw - 32px));
  max-height: min(86vh, 52rem);
  max-height: min(86dvh, 52rem);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--nero);
  color: var(--testo);
  box-shadow: inset 0 0 0 1px var(--linea), 0 40px 80px -30px rgba(0, 0, 0, .8);
  overflow: hidden;
}
.finestra[open] { display: flex; flex-direction: column; }
.finestra::backdrop {
  background: rgba(2, 10, 26, .62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.finestra__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem clamp(1.2rem, 4vw, 2rem);
  box-shadow: 0 1px 0 var(--linea);
}
.finestra__titolo { margin: 0; font-weight: 500; font-size: 1.25rem; color: var(--ghiaccio); }
.finestra__testa form { margin: 0; }
.finestra__chiudi {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: .5rem 1rem;
  background: rgba(230, 235, 229, .08);
  color: var(--ghiaccio);
  font-size: .92rem;
  cursor: pointer;
}
.finestra__chiudi:hover { background: var(--mustard); color: var(--nero); }
.finestra__corpo {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .4rem clamp(1.2rem, 4vw, 2rem) 2rem;
  font-size: .98rem;
  line-height: 1.6;
}
.finestra__corpo h3 { margin: 1.6rem 0 .4rem; font-size: 1rem; font-weight: 700; color: var(--mustard); }
.finestra__corpo p { margin: 0 0 .8rem; color: var(--testo-tenue); max-width: 62ch; }
.finestra__corpo strong { color: var(--testo); font-weight: 500; }

/* ---------- scintille e diluvio di luce ---------- */
.scintille { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.scintilla {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, var(--luce) 35%, rgba(253, 194, 52, 0) 70%);
  box-shadow: 0 0 8px 2px rgba(253, 194, 52, .65);
  mix-blend-mode: screen;
}
/* Alla fine la luce riempie lo schermo e si ritira, lasciando il GRAZIE. */
/* Un cerchio di luce centrato sull'angolo in alto a destra: sfumato fino al bordo,
   così mentre cresce non mostra mai uno spigolo. */
.diluvio {
  position: fixed;
  z-index: 5;
  top: -150vmax;
  right: -150vmax;
  width: 300vmax;
  height: 300vmax;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 245, 127, .96) 0%, rgba(253, 194, 52, .88) 40%, rgba(210, 104, 0, .5) 72%, rgba(210, 104, 0, 0) 100%);
  mix-blend-mode: screen;
}

.noscript { position: relative; z-index: 2; padding: 2rem var(--gutter); }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .intro > * { opacity: 1; transform: none; }
  .scena__fascio { opacity: 1; }
  .ha-foto .scena__foto { opacity: 1; }
}