/* Base comune delle landing immersive.
   Il progetto ridefinisce solo i gettoni in :root (colori della luce, accento, font).
   Regole del RICETTARIO sezione 0: una luce, un accento, bianco a tre forze. */

@font-face { font-family: 'Instrument Serif'; src: url('../vendor/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../vendor/fonts/instrument-serif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../vendor/fonts/geist-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../vendor/fonts/geist-mono-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Anton'; src: url('../vendor/fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('../vendor/fonts/big-shoulders-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../vendor/fonts/archivo-wdth.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../vendor/fonts/fraunces-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../vendor/fonts/fraunces-var-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('../vendor/fonts/space-grotesk-var.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }

:root {
  /* gettoni da ridefinire nel progetto */
  --fondo: #07060a;          /* quasi nero, mai #000 */
  --luce: 255, 140, 60;       /* colore della luce come terna rgb */
  --accento: rgb(var(--luce));
  --inchiostro: 255, 255, 255;
  --font-titoli: 'Instrument Serif', serif;
  --font-testo: 'Geist', system-ui, sans-serif;
  --font-etichette: 'Geist Mono', ui-monospace, monospace;
  --margine: clamp(16px, 4vw, 56px);
  --curva-uscita: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-tendina: cubic-bezier(0.7, 0, 0.3, 1);

  /* bianco a tre forze */
  --t100: rgba(var(--inchiostro), 1);
  --t70: rgba(var(--inchiostro), 0.7);
  --t40: rgba(var(--inchiostro), 0.4);
  --bordo: rgba(var(--inchiostro), 0.08);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: la barra di scorrimento che torna alla fine del caricamento non sposta la pagina */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.in-caricamento { overflow: hidden; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--t70);
  font-family: var(--font-testo);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accento); color: var(--fondo); }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 4px; border-radius: 4px; }

/* Una luce sola: bagliore radiale dalla fonte dichiarata, fisso dietro tutto */
.velo-luce {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at var(--luce-x, 50%) var(--luce-y, 85%), rgba(var(--luce), 0.18), transparent 70%),
    var(--fondo);
}
/* Grana da pellicola: toglie l'effetto "colore piatto da modello" */
.grana {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grana 0.9s steps(4) infinite;
}
@keyframes grana { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* Canvas 3D fisso dietro la pagina */
.palco-3d { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
[data-parcheggio] { pointer-events: none; }

/* Tipografia */
.titolo {
  font-family: var(--font-titoli); font-weight: 400; color: var(--t100);
  font-size: clamp(48px, 7vw, 112px); line-height: 1.02; letter-spacing: -0.01em; margin: 0;
  text-wrap: balance;
}
.titolo em { font-style: italic; }
.titolo .accento { color: var(--accento); }
.etichetta {
  font-family: var(--font-etichette); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--t40); margin: 0;
}
.testo { max-width: 60ch; color: var(--t70); text-wrap: pretty; }
.nota-esempio { font-size: 11px; opacity: 0.5; margin-top: 8px; font-family: var(--font-etichette); letter-spacing: 0.04em; }
.lettera { display: inline; }
/* decifra(): la lettera vera tiene il posto (larghezza bloccata), il glifo le sta sopra.
   line-height: normal fa coincidere la linea di base del glifo con quella della lettera. */
.lettera.cifrata { position: relative; -webkit-text-fill-color: transparent; }
.lettera.cifrata::after {
  content: attr(data-glifo); position: absolute; left: 0; right: 0; top: 0;
  text-align: center; line-height: normal; -webkit-text-fill-color: currentColor; pointer-events: none;
}

/* Pulsanti: il principale brilla del colore della luce, il secondo resta trasparente */
.pulsante {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px;
  font-family: var(--font-testo); font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--bordo); background: transparent; color: var(--t100);
  transition: transform 0.4s var(--curva-uscita), box-shadow 0.4s var(--curva-uscita), background-color 0.3s;
}
.pulsante:hover { transform: translateY(-2px); }
.pulsante.primario {
  background: var(--accento); color: var(--fondo); border-color: transparent;
  box-shadow: 0 8px 30px rgba(var(--luce), 0.45);
}
.pulsante.primario:hover { box-shadow: 0 12px 44px rgba(var(--luce), 0.6); }
.pulsante svg { width: 16px; height: 16px; }

/* Card con il bordo superiore che prende la luce */
.lastra {
  border: 1px solid var(--bordo); border-radius: 20px;
  background: linear-gradient(180deg, rgba(var(--inchiostro), 0.035), rgba(var(--inchiostro), 0.01));
  box-shadow: inset 0 1px 0 rgba(var(--inchiostro), 0.06);
}

/* Censura che si svela (RICETTARIO 3.3) */
.censura { position: relative; white-space: nowrap; }
.censura::after {
  content: ''; position: absolute; inset: -2px -4px; background: #0b0b0c; border-radius: 2px;
  transform: rotate(var(--inclina, 0deg)) scaleX(1); transform-origin: right;
  transition: transform 400ms var(--curva-tendina);
  box-shadow: inset 0 0 0 1px rgba(var(--inchiostro), 0.06);
}
.censura.svelata::after { transform: rotate(var(--inclina, 0deg)) scaleX(0); }
.censura.sigillata:not(.svelata) { cursor: pointer; }

/* Rivelazioni allo scroll */
[data-rivela] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva-uscita) var(--ritardo, 0ms), transform 1.2s var(--curva-uscita) var(--ritardo, 0ms); }
[data-rivela].rivelato { opacity: 1; transform: none; }

/* Disegni SVG */
[data-disegna] { fill: none; stroke: var(--t70); stroke-width: 1.5; }
[data-dopo] { opacity: 0; transition: opacity 0.4s ease; }
[data-dopo].visibile { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .censura::after { transition: opacity 0.3s !important; }
  .censura.svelata::after { transform: none; opacity: 0; }
  [data-rivela] { opacity: 1; transform: none; }
  .grana { animation: none; }
}