/* Solenne Calibro 01, versione SpaceX (design-md/musk-spacex/DESIGN.md, chiesta da Fabio il 25/10/2026).
   Tela: nero pieno #000. Palette: solo bianco e nero; l'unico colore è l'orologio, che fa da "fotografia".
   Titoli: maiuscolo condensato (D-DIN sostituito da Archivo stretto al 78%, peso 700), interlinea 0.95,
   spaziatura positiva. Testi: Geist. Pulsanti: una sola pillola a contorno bianco per fascia, mai piena.
   Menu: trasparente sopra l'immagine, voci in maiuscolo. Niente ombre, bagliori, sfumature, grana.
   Sfondo: nero nitido con una griglia tecnica sottile e ferma (foglio di disegno), al posto della polvere. */

:root {
  --fondo: #000000;
  --fondo-morbido: #0a0a0a;
  --luce: 255, 255, 255;
  --accento: #ffffff;
  --inchiostro: 255, 255, 255;
  --filo: #3a3a3f;                       /* hairline-on-dark */
  --font-titoli: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-testo: 'Geist', Arial, sans-serif;
  --font-etichette: 'Geist', Arial, sans-serif;
  --t70: rgba(var(--inchiostro), 0.86);  /* on-primary-mute: quasi bianco */
  --bordo: var(--filo);
  --passo-griglia: 96px;
}
body { color: var(--t70); font-size: 16px; line-height: 1.7; letter-spacing: 0.02em; }
::selection { background: #fff; color: #000; }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { overflow: clip; }
section { position: relative; padding-inline: var(--margine); }

/* Sfondo: nero pieno e griglia tecnica nitida (1 px, ferma). Niente velo di luce, niente grana. */
.velo-luce { background: var(--fondo); }
.velo-luce::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: var(--passo-griglia) var(--passo-griglia);
  background-position: calc(50% + 0.5px) calc(50% + 0.5px);
}
/* due assi più marcati al centro: il foglio ha un'origine */
.velo-luce::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 100% 100%;
  background-position: 0 50%, 50% 0;
  background-repeat: no-repeat;
  background-size: 100% 1px, 1px 100%;
}
.grana { display: none; }

/* Tipografia */
.titolo, .numero, .caricamento-numero, .manifesto-frase, .menu-marchio, .parola-gigante {
  font-family: var(--font-titoli); font-stretch: 78%; font-weight: 700; text-transform: uppercase;
}
.titolo { line-height: 0.95; letter-spacing: 0.02em; color: #fff; }
.titolo em { font-style: normal; display: block; color: rgba(var(--inchiostro), 0.55); }
.titolo .accento { color: #fff; }
.etichetta {
  font-family: var(--font-etichette); font-size: 12px; font-weight: 400; line-height: 2; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(var(--inchiostro), 0.7);
}
.testo { color: var(--t70); font-size: 16px; line-height: 1.7; letter-spacing: 0.02em; }
.nota-esempio { opacity: 1; color: rgba(var(--inchiostro), 0.6); font-size: 13px; letter-spacing: 0; }

/* Pulsanti: pillola a contorno bianco, maiuscolo 13 px, mai piena. Al passaggio si inverte. */
.pulsante, .pulsante.primario {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 18px 24px;
  border: 1px solid #fff; border-radius: 32px; background: transparent; color: #fff;
  font-family: var(--font-testo); font-size: 13px; font-weight: 700; line-height: 0.94; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none; box-shadow: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.pulsante:hover, .pulsante.primario:hover { background: #fff; color: #000; transform: none; box-shadow: none; }
.pulsante:focus-visible { outline-color: #fff; }
.pulsante svg { width: 14px; height: 14px; }
.pulsante.piccolo { min-height: 40px; padding: 12px 18px; font-size: 12px; }
.collegamento { color: #fff; text-decoration: underline; text-underline-offset: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

/* Caricamento: prima scena, numero in maiuscolo condensato */
.caricamento {
  position: fixed; inset: 0; z-index: 60; display: grid; align-content: end; justify-items: start; gap: 10px;
  padding: 0 var(--margine) clamp(28px, 6vh, 56px);
  background: transparent; pointer-events: none;
  transition: opacity 0.9s var(--curva-uscita), visibility 0.9s;
}
.eroe-testo, .menu, .eroe-scorri, .parola-gigante { transition: opacity 1s var(--curva-uscita) 0.2s; }
html.in-caricamento .eroe-testo, html.in-caricamento .menu,
html.in-caricamento .eroe-scorri, html.in-caricamento .parola-gigante { opacity: 0; }
.caricamento.finito { opacity: 0; visibility: hidden; }
.caricamento-numero { margin: 0; font-size: clamp(88px, 16vw, 220px); line-height: 0.95; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.caricamento-linea { width: min(280px, 60vw); height: 1px; background: var(--filo); overflow: hidden; }
.caricamento-linea i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Menu: trasparente sopra l'immagine, bianco, maiuscolo */
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); padding: 24px var(--margine);
  background: transparent; border: 0; box-shadow: none;
}
.menu-marchio { font-size: 22px; letter-spacing: 0.22em; color: #fff; text-decoration: none; margin-right: auto; }
.menu nav { display: flex; gap: 28px; }
.menu nav a { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.menu nav a:hover { border-bottom-color: #fff; }

/* Eroe: titolo da cartello di lancio, un solo pulsante a contorno */
.eroe {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: 2vw; padding-top: 120px; padding-bottom: 80px;
}
.parola-gigante {
  position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); margin: 0; z-index: -1;
  font-size: 24vw; line-height: 0.85; letter-spacing: 0.04em;
  color: rgba(var(--inchiostro), 0.05); white-space: nowrap; pointer-events: none; user-select: none;
}
.eroe-testo { display: grid; gap: 24px; max-width: 680px; }
.eroe-titolo { font-size: clamp(52px, 6.4vw, 100px); min-height: calc(2 * 0.95em); } /* due righe: IL TEMPO, / FATTO A MANO. */
.eroe-sotto { font-size: 16px; max-width: 48ch; }
.eroe-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.eroe-parcheggio { aspect-ratio: 1; width: min(46vw, 78svh); justify-self: end; }
.eroe-scorri { position: absolute; left: var(--margine); bottom: 28px; display: flex; align-items: center; gap: 12px; }
.eroe-scorri span { width: 48px; height: 1px; background: rgba(var(--inchiostro), 0.5); transform-origin: left; animation: scorri 2.4s var(--curva-uscita) infinite; }
@keyframes scorri { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* Manifesto */
.manifesto {
  min-height: 110svh; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center; gap: 4vw; padding-block: 18vh;
}
.manifesto-parcheggio { aspect-ratio: 1; width: min(30vw, 52svh); justify-self: center; }
.manifesto-testo { display: grid; gap: 28px; }
.manifesto-frase {
  margin: 0; font-size: clamp(28px, 3.2vw, 50px); line-height: 1.12; letter-spacing: 0.02em; color: #fff;
  max-width: 26ch; text-wrap: pretty;
}
.manifesto-piede { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.manifesto-piede .nota-esempio { margin: 0; }

/* Vista esplosa: palco fisso */
.esplosa { height: 320svh; padding: 0; }
.esplosa-palco {
  position: sticky; top: 0; height: 100svh; display: grid; padding-inline: var(--margine);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: center;
}
.esplosa-parcheggio { grid-column: 2; grid-row: 1; aspect-ratio: 1; width: min(100%, 70svh); justify-self: center; }
.esplosa-testo { grid-column: 1; grid-row: 1; display: grid; gap: 16px; align-self: center; }
.esplosa-titolo { font-size: clamp(44px, 5vw, 84px); }
.esplosa-conteggio { margin: 8px 0 0; font-family: var(--font-titoli); font-stretch: 78%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(22px, 2vw, 32px); color: #fff; }
.esplosa-conteggio span { font-variant-numeric: tabular-nums; }
.esplosa-nota { font-size: 13px; color: rgba(var(--inchiostro), 0.6); max-width: 30ch; margin: 0; letter-spacing: 0; }
.esplosa-elenco { grid-column: 3; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; justify-self: end; }
.esplosa-elenco li {
  display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--filo);
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(var(--inchiostro), 0.45);
  transition: color 0.5s var(--curva-uscita), transform 0.5s var(--curva-uscita); min-width: 240px;
}
.esplosa-elenco li span { font-weight: 400; font-size: 12px; letter-spacing: 0.08em; }
.esplosa-elenco li.attivo { color: #fff; transform: translateX(-8px); }
.esplosa-barra { position: absolute; left: var(--margine); right: var(--margine); bottom: 32px; height: 1px; background: var(--filo); }
.esplosa-barra i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Numeri */
.numeri { min-height: 90svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); align-items: center; padding-block: 16vh; gap: 4vw; }
.numeri-parcheggio { grid-column: 2; grid-row: 1; aspect-ratio: 1; width: min(26vw, 46svh); justify-self: center; }
.numeri-elenco { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.numeri-elenco li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 26px 0; border-bottom: 1px solid var(--filo); }
.numero { font-size: clamp(64px, 8.5vw, 150px); line-height: 0.95; letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; }
.numero small { font-size: 0.3em; color: rgba(var(--inchiostro), 0.55); margin-left: 10px; letter-spacing: 0.04em; }
.numeri-nota { grid-column: 1; }

/* Disegno tecnico: il foglio di sfondo e la tavola parlano la stessa lingua */
.disegno { min-height: 120svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; gap: 5vw; padding-block: 16vh; }
.disegno-tavola { position: relative; width: min(100%, 620px); justify-self: center; }
.tavola { width: 100%; height: auto; stroke: rgba(var(--inchiostro), 0.7); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.quota {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--font-etichette); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: var(--fondo); padding: 2px 6px;
}
.disegno-testo { display: grid; gap: 22px; }
.disegno-testo .titolo { font-size: clamp(44px, 5vw, 84px); }
.disegno-parcheggio { position: absolute; left: 14.06%; top: 14.06%; width: 71.88%; aspect-ratio: 1; }

/* Prenota */
.prenota { min-height: 120svh; display: grid; align-items: center; justify-items: center; padding-block: 16vh; text-align: center; padding-bottom: 46svh; }
.prenota-parcheggio { position: absolute; left: 50%; bottom: -24svh; transform: translateX(-50%); width: min(70vw, 80svh); aspect-ratio: 1; }
.prenota-testo { position: relative; z-index: 0; display: grid; gap: 24px; justify-items: center; max-width: 760px; }
/* niente velo sfumato: il testo sta su una lastra nera netta con un filo */
.prenota-testo::before { content: ''; position: absolute; inset: -32px -40px; z-index: -1; background: var(--fondo); border: 1px solid var(--filo); }
.prenota-titolo { font-size: clamp(60px, 9vw, 160px); line-height: 0.95; }
.prenota-modulo {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 0; width: min(720px, 100%);
  text-align: left; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.prenota-modulo label { display: grid; gap: 6px; }
.prenota-modulo input {
  background: #fff; color: #000; border: 1px solid #fff; border-radius: 4px; font: inherit; font-size: 16px; letter-spacing: 0;
  padding: 12px 16px; min-height: 50px; outline: none;
}
.prenota-modulo input::placeholder { color: #5a5a5f; }
.prenota-modulo input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.prenota-modulo input[aria-invalid="true"] { border-color: rgb(255, 120, 90); box-shadow: inset 0 0 0 1px rgb(255, 120, 90); }
.prenota-esito { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: 13px; color: var(--t70); letter-spacing: 0; }

.piede {
  position: relative; background: var(--fondo);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 32px var(--margine) 40px;
  border-top: 1px solid var(--filo); font-size: 13px; color: #fff; letter-spacing: 0;
}
.piede p { margin: 0; }

/* Telefono: progettato, non ristretto */
@media (max-width: 860px) {
  :root { --passo-griglia: 64px; }
  .menu nav { display: none; }
  .menu { padding: 12px var(--margine); background: var(--fondo); } /* sul telefono la barra è nera piena (nav-bar-overlay di SpaceX): mai sopra i titoli */
  .eroe { grid-template-columns: 1fr; align-content: start; padding-top: 104px; gap: 8px; min-height: 100svh; }
  .eroe-testo { gap: 18px; }
  .eroe-titolo { font-size: clamp(44px, 13vw, 64px); }
  .eroe-parcheggio { width: min(66vw, 34svh); order: 2; margin-top: 15svh; justify-self: center; }
  .eroe-scorri { display: none; }
  .parola-gigante { bottom: 2vh; font-size: 30vw; }
  .manifesto { grid-template-columns: 1fr; min-height: auto; padding-block: 14vh; gap: 6vh; }
  .manifesto-parcheggio { width: min(44vw, 26svh); }
  .manifesto-frase { font-size: clamp(24px, 7vw, 32px); }
  .esplosa { height: 260svh; }
  .esplosa-palco { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; padding-top: 96px; padding-bottom: 64px; }
  .esplosa-testo { grid-column: 1; grid-row: 1; gap: 8px; }
  .esplosa-nota { display: none; }
  .esplosa-parcheggio { grid-column: 1; grid-row: 2; width: min(62vw, 34svh); align-self: center; }
  .esplosa-elenco { grid-column: 1; grid-row: 3; justify-self: stretch; grid-auto-flow: column; overflow: hidden; gap: 0; }
  .esplosa-elenco li { min-width: 0; display: none; border: 0; padding: 0; }
  .esplosa-elenco li.ultimo { display: flex; }
  .esplosa-elenco li.attivo { transform: none; }
  .numeri { grid-template-columns: 1fr; padding-block: 12vh; }
  .numeri-parcheggio { grid-column: 1; grid-row: auto; width: min(34vw, 22svh); order: -1; justify-self: end; margin-bottom: 4vh; }
  .numeri-elenco, .numeri-nota { grid-column: 1; grid-row: auto; }
  .disegno { grid-template-columns: 1fr; min-height: auto; padding-block: 12vh; }
  .disegno-tavola { order: 2; margin-block: 18svh 10svh; }
  .prenota-modulo { grid-template-columns: 1fr; }
  .prenota-testo::before { inset: -20px -12px; }
  .prenota { padding-bottom: 34svh; }
  .prenota-parcheggio { width: min(86vw, 52svh); bottom: -16svh; }
}
@media (prefers-reduced-motion: reduce) {
  .eroe-scorri span { animation: none; transform: none; }
}