/* Tono. Riferimento: design-md/apple/DESIGN.md
   Luce: chiave fredda da sinistra in alto. Fasce alternate: nero (film, avvisami), grigio chiaro (numeri).
   Accento: blu Apple, #2997ff sul buio e #0066cc sul chiaro, solo pulsante principale e "strati".
   Font: Geist per tutto (al posto di SF Pro), titoli con lettere strette.
   Collaudo del 25/10/2026 (giro 1, 40/50): menu chiaro sulla fascia chiara, pulsanti senza bagliore,
   errore del modulo coerente, titoli senza righe orfane, oggetto ingrandito da chiuso, didascalie sui pezzi,
   tocchi da 44 px nel menu del telefono, testo del telefono che sparisce prima di salire sull'oggetto. */

:root {
  --fondo: #000000;
  --luce: 41, 151, 255;          /* #2997ff, blu d'azione sul buio */
  --inchiostro: 255, 255, 255;
  --font-titoli: 'Geist', system-ui, sans-serif;
  --font-etichette: 'Geist', system-ui, sans-serif;
  --t40: rgba(var(--inchiostro), 0.62);
  --chiaro: #f5f5f7;
  --inchiostro-chiaro: #1d1d1f;
  --blu-chiaro: #0066cc;
}
html { scrollbar-gutter: stable; }
main { overflow: clip; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.titolo { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
.titolo em { font-style: normal; color: var(--t40); display: block; }
.etichetta { font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 600; color: rgba(var(--luce), 1); }
.nota-esempio { opacity: 1; color: #6e6e73; font-size: 12px; }

/* Pulsanti come Apple: piatti a riposo, al passaggio del mouse solo un blu un poco più chiaro,
   niente bagliore (quello di base.css è pensato per la luce calda del kit) e niente salto */
.pulsante { border-radius: 980px; transition: background-color 0.2s ease, color 0.2s ease; }
.pulsante:hover { transform: none; }
.pulsante.primario { box-shadow: none; }
.pulsante.primario:hover { box-shadow: none; background: #0077ed; transform: none; }
.pulsante.primario:focus-visible { outline-color: #fff; }

/* Menu: barra sottile di vetro scuro, come Apple; chiara quando passa sopra la fascia chiara */
.menu {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 48px;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--margine);
  background: rgba(22, 22, 23, 0.72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.menu-marchio { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--t100); text-decoration: none; margin-right: auto; transition: color 0.35s ease; }
.menu nav { display: flex; gap: 24px; }
.menu nav a { font-size: 13px; color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.35s ease; }
.menu nav a:hover { color: #fff; }
.pulsante.piccolo { padding: 6px 14px; font-size: 13px; }
.menu.chiaro { background: rgba(251, 251, 253, 0.8); border-bottom-color: rgba(0, 0, 0, 0.08); }
.menu.chiaro .menu-marchio, .menu.chiaro nav a { color: var(--inchiostro-chiaro); }
.menu.chiaro nav a:hover { color: #000; }
.menu.chiaro .pulsante.primario { background: var(--blu-chiaro); color: #fff; }
.menu.chiaro .pulsante.primario:hover { background: #0071e3; }
.menu.chiaro .pulsante.primario:focus-visible { outline-color: var(--blu-chiaro); }

/* Film: velo ai lati, oggetto al centro pulito */
.film-palco::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 25%);
}
/* Render v3: la camera si avvicina da sola al diffusore chiuso, il film non si ingrandisce più in CSS. */
.film-capitolo { gap: 16px; max-width: min(36vw, 660px); }
.film-capitolo:first-child { max-width: min(44vw, 760px); }
.film-capitolo .titolo { font-size: clamp(40px, 4.2vw, 80px); }
.film-capitolo h1.titolo { font-size: clamp(44px, 3.6vw, 72px); }
/* il diffusore chiuso è largo: l'inquadratura si sposta un poco a destra, il titolo non lo tocca */
.film { --film-posizione: 32% 50%; }
.film-capitolo .testo { font-size: clamp(17px, 1.2vw, 21px); color: rgba(255, 255, 255, 0.8); max-width: 34ch; }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; }
.film-capitolo[data-lato="destra"] .azioni { justify-content: flex-end; }

/* Didascalie dei sei strati (tocco weblove, RICETTARIO 4.3): a sinistra dell'oggetto aperto, una per
   pezzo, all'altezza misurata sui fotogrammi 58-125 (oggetto fermo al centro). Entrano a scalini
   con la presenza del capitolo "Sei strati", che principale.js copia nella variabile --presenza. */
.didascalie {
  position: absolute; z-index: 4; left: var(--margine); right: 65%; top: 0; bottom: 0; margin: 0; padding: 0;
  list-style: none; pointer-events: none;
}
.didascalie li {
  position: absolute; right: 0; top: var(--quota); transform: translateY(-50%);
  padding-right: 40px; text-align: right; font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78); white-space: nowrap;
  opacity: var(--presenza, 0);
  translate: calc((1 - var(--presenza, 0)) * -12px) 0;
  transition: opacity 0.35s ease, translate 0.35s ease;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.didascalie li.didascalia-luce { color: rgb(var(--luce)); }
.didascalie li.didascalia-luce::after { background: rgba(var(--luce), 0.7); }
.didascalie li::after {
  content: ''; position: absolute; right: 0; top: 50%; width: 24px; height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transform: scaleX(var(--presenza, 0)); transform-origin: left;
  transition: transform 0.35s ease; transition-delay: calc(var(--i, 0) * 60ms + 80ms);
}

/* Numeri: fascia chiara (Apple alterna chiaro e scuro) */
.numeri {
  position: relative; z-index: 1; background: var(--chiaro); color: var(--inchiostro-chiaro);
  padding: 20vh var(--margine) 16vh;
}
.numeri .titolo { color: var(--inchiostro-chiaro); font-size: clamp(40px, 5vw, 88px); max-width: 16ch; margin-bottom: 10vh; }
.numeri .titolo em { color: #86868b; }
.numeri .etichetta { color: #6e6e73; font-weight: 500; font-size: 15px; }
.numeri-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4vw; }
.numeri-elenco li { display: grid; gap: 10px; }
.numero { font-weight: 600; letter-spacing: -0.04em; font-size: clamp(72px, 9vw, 160px); line-height: 0.9; color: var(--inchiostro-chiaro); font-variant-numeric: tabular-nums; }
.numero small { font-size: 0.28em; color: #86868b; margin-left: 8px; letter-spacing: 0; }

/* Avvisami: di nuovo il buio */
.avvisami { min-height: 90svh; display: grid; place-items: center; text-align: center; padding: 16vh var(--margine); background: #000; }
.avvisami-testo { display: grid; gap: 24px; justify-items: center; max-width: 720px; }
.avvisami .titolo { font-size: clamp(48px, 6vw, 104px); }
.avvisami .testo { color: rgba(255, 255, 255, 0.75); max-width: 44ch; }
.modulo { display: flex; gap: 10px; width: min(520px, 100%); flex-wrap: wrap; justify-content: center; }
.modulo input {
  flex: 1 1 260px; min-height: 52px; padding: 0 20px; border-radius: 980px; border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 17px; outline: none;
}
.modulo input::placeholder { color: rgba(255, 255, 255, 0.55); }
.modulo input:focus-visible { border-color: rgb(var(--luce)); box-shadow: 0 0 0 3px rgba(var(--luce), 0.35); }
/* con l'email sbagliata il campo è rosso anche a fuoco: un solo colore alla volta */
.modulo input[aria-invalid="true"],
.modulo input[aria-invalid="true"]:focus-visible { border-color: rgb(255, 120, 100); box-shadow: 0 0 0 3px rgba(255, 120, 100, 0.3); }
.modulo .pulsante { min-height: 52px; padding: 0 28px; }
.modulo-esito { flex-basis: 100%; margin: 0; min-height: 1.2em; font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.modulo-esito.errore { color: rgb(255, 150, 135); }

.piede { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 28px var(--margine) 36px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: #86868b; background: #000; }
.piede p { margin: 0; max-width: 72ch; }

@media (max-width: 860px) {
  /* tocchi da 44 px nel menu */
  .menu { height: 56px; gap: 16px; }
  .menu nav { display: none; }
  .menu-marchio { padding: 10px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .pulsante.piccolo { min-height: 44px; padding: 0 16px; }
  .film { --film-punto-testo: 0.86; } /* aperto, l'oggetto scende fino al 62% dello schermo: il testo sta sotto */
  .film-palco::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 38%, transparent 60%); }
  .film-capitolo, .film-capitolo[data-lato="destra"], .film-capitolo:first-child { align-content: end; padding-bottom: 72px; margin-left: 0; text-align: left; justify-items: start; max-width: 92vw; }
  .film-capitolo[data-lato="destra"] .azioni { justify-content: flex-start; }
  /* dissolvenza più ripida: il testo sparisce prima di salire sull'anello e sulla base dell'oggetto aperto */
  .film-capitolo > * { opacity: clamp(0, calc((var(--presenza, 1) - 0.45) / 0.55), 1); }
  /* la prima schermata ha l'oggetto chiuso in alto e nulla da coprire: resta leggibile più a lungo (data-finestra nell'HTML) */
  .film-capitolo:first-child > * { opacity: var(--presenza, 1); }
  [data-film-banda] { align-content: space-between; }
  .film-capitolo .titolo { font-size: clamp(36px, 10.5vw, 52px); }
  .film-capitolo h1.titolo { font-size: clamp(42px, 12vw, 58px); }
  .didascalie { display: none; }
  .numeri-elenco { grid-template-columns: 1fr; gap: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .film-capitolo > * { opacity: 1; }
  .didascalie { display: none; } /* con movimento ridotto resta il poster chiuso: le didascalie indicherebbero il vuoto */
}