/* ==========================================================================
   RADIC FORMA — foglio di stile unico
   Ordine: font · token · reset · tipografia · navbar · hero · footer ·
           sezioni di contenuto · atti animati · versione con video
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font self-hosted — nessuna richiesta verso fonts.googleapis.com
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design token
   -------------------------------------------------------------------------- */
:root {
  /* Palette di marca */
  --verde-alloro:   #6C7A47;  /* colore primario */
  --verde-corteccia:#22281F;  /* fondi scuri, testi forti */
  --foglia:         #9BAA6B;  /* marchio su fondo scuro */
  --ottone:         #B08A4F;  /* accento: incisione, finiture */
  --carta:          #F4F2EA;  /* fondo chiaro */
  --pietra:         #8C8F86;  /* testi secondari, dati tecnici */
  --avorio:         #EDE9DB;  /* testo su fondo scuro */
  --nero-corteccia: #1B1E1A;  /* fondo profondo della scena */

  /* Ruoli semantici — usare questi nei componenti, non i colori grezzi */
  --bg:             var(--carta);
  --bg-scuro:       var(--verde-corteccia);
  --testo:          var(--verde-corteccia);
  --testo-soft:     #4A5342;
  --testo-inv:      var(--avorio);
  /* Pietra e Verde Alloro non arrivano a 4,5:1 su Carta (2,93:1 e 4,15:1):
     su fondo chiaro si usano queste due varianti scurite, che passano AA.
     I colori di marca restano quelli originali per grafica e fondi scuri. */
  --testo-tecnico:  #686B62;   /* 4,84:1 su Carta */
  --alloro-testo:   #63713F;   /* 4,73:1 su Carta */
  --linea:          rgba(140, 143, 134, 0.2);   /* Pietra 20% */
  --linea-inv:      rgba(237, 233, 219, 0.16);
  --focus:          var(--ottone);

  /* Tipografia */
  --serif:  'Cormorant Garamond', Cormorant, 'EB Garamond', Garamond, 'Times New Roman', serif;
  --sans:   'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --ls-titolo: 0.14em;   /* spaziatura ampia per i titoli in maiuscolo */
  --ls-eyebrow: 0.22em;

  /* Scala tipografica fluida */
  --t-display: clamp(2.6rem, 1.6rem + 4.4vw, 5.6rem);
  --t-h2:      clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --t-h3:      clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-corpo:   clamp(1rem, 0.96rem + 0.2vw, 1.075rem);  /* mai sotto 13px */
  --t-piccolo: 0.875rem;
  --t-tecnico: 0.8125rem;                                /* 13px, il minimo */

  /* Spaziature */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4.5rem; --sp-8: 7rem;
  --sezione-y: clamp(5rem, 3.4rem + 7.5vw, 10rem);
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3.5rem);
  --max-w:     1240px;
  --max-testo: 62ch;

  --raggio: 3px;              /* angoli quasi vivi: è un marchio inciso */

  /* Movimento. Quattro durate e due curve, usate in tutto il sito: una scala
     ristretta e' quello che fa sembrare le transizioni parte della stessa
     cosa invece di una collezione di scelte diverse.
     La durata si sceglie dal peso del gesto, non dalla distanza percorsa:
     --dur-1 per un cambio di stato che l'utente ha appena provocato (colore,
     opacita' di un bottone), --dur-2 per un elemento che si muove, --dur-3 per
     qualcosa che entra in scena, --dur-4 per un movimento ampio e narrativo. */
  --dur-1: 150ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --dur-4: 680ms;
  /* uscita decisa, arrivo lungo: e' la curva che non fa sentire l'inizio */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  /* per andata e ritorno simmetrici */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* alias storico, usato dove basta la transizione di base */
  --transizione: var(--dur-2) var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. Reset essenziale
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* NB: niente scroll-behavior: smooth — va in conflitto con ScrollTrigger.
     Lo scorrimento morbido dei link di ancoraggio è gestito in main.js. */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* La navbar e' fissa: senza questo, un link di ancoraggio porta il titolo
   della sezione a finirci sotto. */
:where(main, footer) [id] { scroll-margin-block-start: 92px; }

img, svg, canvas { display: block; max-width: 100%; }
video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Focus visibile su tutto ciò che è interattivo */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--verde-alloro); color: var(--carta); }

/* Solo per screen reader */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Salto al contenuto */
.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 200;
  background: var(--verde-corteccia); color: var(--avorio);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--raggio);
  font-size: var(--t-piccolo);
}
.skip-link:focus { top: var(--sp-3); }

/* I defs SVG condivisi non devono occupare spazio */
.rf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  /* Il Cormorant a corpo grande ha un incastro naturale largo: stringerlo di
     un soffio e' quello che gli da' il passo del titolo invece della frase. */
  letter-spacing: -0.006em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: var(--t-h2); line-height: 1.06; }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0 0 var(--sp-3); max-width: var(--max-testo); }
p:last-child { margin-bottom: 0; }

/* Evita le righe finali con una parola sola. Dove non e' supportato non
   cambia niente. */
p, li, figcaption { text-wrap: pretty; }

/* Occhiello: piccola etichetta in maiuscolo sopra i titoli, preceduta da un
   filetto. E' il segno che tiene insieme le intestazioni di tutto il sito. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--sans);
  font-size: var(--t-tecnico);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--alloro-testo);
  margin: 0 0 var(--sp-3);
}
.eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.sezione--scura .eyebrow { color: var(--foglia); }

.testo-guida {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--testo-soft);
  max-width: 54ch;
}
.sezione--scura .testo-guida { color: rgba(237, 233, 219, 0.78); }

/* Dati tecnici: mai sotto 13px */
.dato-tecnico {
  font-size: var(--t-tecnico);
  letter-spacing: 0.06em;
  color: var(--testo-tecnico);
  font-variant-numeric: tabular-nums;
}
/* Su fondo scuro serve il verso opposto: la variante scurita sparirebbe. */
.sezione--scura .dato-tecnico,
.atto .dato-tecnico { color: var(--pietra); }

/* --------------------------------------------------------------------------
   5. Impaginazione
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Ogni sezione dichiara il proprio fondo: dietro c'e' la hero incollata, e una
   sezione trasparente la lascerebbe vedere. */
.sezione {
  padding-block: var(--sezione-y);
  position: relative;
  background: var(--bg);
}

.sezione--scura {
  background: var(--bg-scuro);
  color: var(--testo-inv);
}
.sezione--scura h2, .sezione--scura h3 { color: var(--avorio); }

.sezione__intestazione { margin-bottom: var(--sp-7); max-width: 56ch; }
.sezione__intestazione h2 { margin-block-end: var(--sp-3); }

/* --------------------------------------------------------------------------
   6. Marchio — composizioni riusate da navbar, hero e footer
   -------------------------------------------------------------------------- */
/* Il monogramma è un unico <path> richiamato via <use>: mai duplicato nel DOM */
.mono { fill: var(--verde-alloro); }
.mono--chiaro { fill: var(--foglia); }

/* Lockup: monogramma + testo, stesse coordinate del file originale
   (viewBox 0 0 900 700, monogramma a translate(211.5 40)) */
.lockup { width: 100%; height: auto; }
.lockup__nome {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 80px;
  letter-spacing: 19px;
}
.lockup__claim {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 7.5px;
}

/* Scritta della navbar: viewBox 0 0 900 240, solo testo */
.scritta { height: 22px; width: auto; }
.scritta__nome {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 80px;
  letter-spacing: 19px;
}
.scritta__claim {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 7.5px;
}

/* --------------------------------------------------------------------------
   7. Navbar
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  background: transparent;
  transition: background-color var(--transizione), box-shadow var(--transizione),
              border-color var(--transizione);
  border-block-end: 1px solid transparent;
}

/* Sull'hero la barra è trasparente e il marchio è nella versione chiara */
.navbar__marchio { display: inline-flex; align-items: center; flex: 0 0 auto; }
.navbar__marchio .scritta__nome  { fill: var(--avorio); }
.navbar__marchio .scritta__claim { fill: var(--foglia); }

/* Dopo lo scroll: fondo Carta */
.navbar.is-attaccata {
  background: rgba(244, 242, 234, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-block-end-color: var(--linea);
}
.navbar.is-attaccata .scritta__nome  { fill: #3E4A2E; }
.navbar.is-attaccata .scritta__claim { fill: var(--alloro-testo); }
.navbar.is-attaccata .navbar__link,
.navbar.is-attaccata .lingua__voce { color: var(--testo); }
.navbar.is-attaccata .navbar__apri { color: var(--testo); }

.navbar__nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
}

.navbar__link {
  font-size: var(--t-piccolo);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--avorio);
  padding-block: var(--sp-1);
  position: relative;
  transition: color var(--transizione);
}
.navbar__link::after {
  content: '';
  position: absolute; inset-inline: 0; inset-block-end: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--transizione);
}
.navbar__link:hover::after,
.navbar__link[aria-current='true']::after { transform: scaleX(1); }

/* Selettore di lingua: IT | EN testuale, senza bandiere */
.lingua {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--t-tecnico); letter-spacing: 0.1em;
}
.lingua__voce {
  color: var(--avorio);
  opacity: 0.6;
  padding: var(--sp-1) 2px;
  transition: opacity var(--transizione), color var(--transizione);
}
.lingua__voce:hover { opacity: 1; }
.lingua__voce[aria-pressed='true'] { opacity: 1; font-weight: 600; }
.lingua__sep { color: currentColor; opacity: 0.35; }

/* Menu su schermi stretti */
.navbar__apri { display: none; color: var(--avorio); padding: var(--sp-1); }

/* Le tre righe si trasformano in una croce quando il menu e' aperto: e' lo
   stesso tasto ad aprire e a chiudere, e la forma dice in quale stato si e'.
   transform-box: view-box perche' l'origine sia in coordinate del disegno e non
   del riquadro del singolo tratto, che e' alto un pixel. */
.navbar__riga {
  transform-box: view-box;
  transform-origin: 13px 13px;
  transition: transform var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}
.navbar__apri[aria-expanded='true'] .navbar__riga--alta  { transform: translateY(5px) rotate(45deg); }
.navbar__apri[aria-expanded='true'] .navbar__riga--mezza { opacity: 0; }
.navbar__apri[aria-expanded='true'] .navbar__riga--bassa { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .navbar__apri { display: inline-flex; margin-inline-start: auto; }
  .navbar__nav {
    position: fixed; inset: 0 0 auto;
    flex-direction: column; align-items: flex-start;
    gap: var(--sp-4);
    padding: calc(var(--sp-8) + var(--sp-3)) var(--gutter) var(--sp-7);
    background: var(--verde-corteccia);
    transform: translateY(-100%);
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
    margin: 0;
  }
  .navbar__nav[data-aperto='true'] { transform: translateY(0); }
  .navbar__nav .navbar__link { font-size: 1.05rem; color: var(--avorio); }

  /* Il pannello ha un fondo scuro tutto suo, quindi il testo dentro resta
     chiaro anche quando la barra e' nello stato "attaccata". Senza questa
     riga, appena si scorreva la pagina le voci IT ed EN diventavano verde
     scuro su verde scuro: restavano cliccabili, ma invisibili. */
  .navbar.is-attaccata .navbar__nav,
  .navbar.is-attaccata .navbar__nav .navbar__link,
  .navbar.is-attaccata .navbar__nav .lingua__voce { color: var(--avorio); }

  .navbar__nav .lingua {
    margin-block-start: var(--sp-2);
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--linea-inv);
    width: 100%;
  }
  .navbar__nav .lingua__voce { color: var(--avorio); font-size: 0.95rem; padding: var(--sp-2) var(--sp-1); }

  /* Il pannello e' in position fixed, quindi si disegna sopra gli elementi non
     posizionati: senza questo copriva il tasto, e una volta aperto il menu non
     c'era piu' niente da premere per richiuderlo. */
  .navbar__marchio,
  .navbar__apri { position: relative; z-index: 1; }

  /* Con il menu aperto il fondo sotto al tasto e al marchio e' quello scuro del
     pannello, quale che sia lo stato della barra. */
  .navbar.is-menu-aperto .navbar__apri,
  .navbar.is-attaccata.is-menu-aperto .navbar__apri { color: var(--avorio); }
  .navbar.is-attaccata.is-menu-aperto .navbar__marchio .scritta__nome { fill: var(--avorio); }
}

/* L'apertura: hero piu' primo atto. Vedi il commento in index.html. */
.apertura { position: relative; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--verde-corteccia);
  color: var(--testo-inv);
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  overflow: hidden;
}

/* Alone caldo appena percettibile dietro al marchio */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 50% 42%,
              rgba(176, 138, 79, 0.13), transparent 70%);
  pointer-events: none;
}

/* Il contenuto dell'hero si allontana e sfuma mentre si scorre: e' la prima
   meta' del raccordo con la scena. I valori li scrive scene.js. */
.hero__contenuto {
  position: relative;
  z-index: 1;
  /* senza width il grid centrato lo stringe alla larghezza del contenuto,
     e il lockup scendeva a 300px */
  width: 100%;
  max-width: 780px;
  opacity: var(--hero-op, 1);
  transform: translate3d(0, var(--hero-y, 0px), 0) scale(var(--hero-s, 1));
}

.hero__scroll { opacity: var(--hero-op, 1); }

.hero .lockup { max-width: min(740px, 90vw); margin-inline: auto; }

/* Sotto una certa larghezza il claim del lockup scenderebbe sotto i 10px.
   Il rapporto fra corpo e spaziatura resta quello del file di brand: cresce
   solo la scala della riga, che e' l'unico modo per tenerla leggibile. */
@media (max-width: 780px) {
  .lockup__claim { font-size: 26px; letter-spacing: 10.8px; }
}
@media (max-width: 560px) {
  .lockup__claim { font-size: 31px; letter-spacing: 12.9px; }
}

.hero__descrittore {
  /* i paragrafi hanno un max-width: senza margini automatici questo resterebbe
     ancorato a sinistra dentro il suo riquadro, e il testo, pur centrato al
     suo interno, si vedrebbe spostato rispetto al marchio.
     Attenzione a non rimettere qui una scorciatoia "margin": azzererebbe
     entrambe le righe qui sotto. */
  margin-block-start: var(--sp-5);
  margin-inline: auto;
  font-size: var(--t-tecnico);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--foglia);
}

/* Indicatore di scorrimento discreto */
.hero__scroll {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid; justify-items: center; gap: var(--sp-2);
  font-size: 0.75rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(237, 233, 219, 0.55);
}
.hero__scroll-linea {
  width: 1px; height: 46px;
  background: linear-gradient(var(--foglia), transparent);
  transform-origin: top;
  animation: scorri 2.4s ease-in-out infinite;
}
@keyframes scorri {
  0%, 100% { transform: scaleY(0.35); opacity: 0.45; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--nero-corteccia);
  color: var(--testo-inv);
  padding-block: var(--sp-7) var(--sp-5);
  border-block-start: 1px solid var(--linea-inv);
}
.footer__griglia {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px) {
  .footer__griglia { grid-template-columns: minmax(0, 260px) 1fr; gap: var(--sp-7); }
}
.footer .lockup { max-width: 260px; }
.footer__link {
  display: block;
  font-size: var(--t-piccolo);
  color: rgba(237, 233, 219, 0.82);
  text-decoration: none;
  padding-block: 3px;
}
.footer__link:hover { color: var(--avorio); text-decoration: underline; }
.footer__titolo {
  font-family: var(--sans);
  font-size: var(--t-tecnico);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--foglia);
  margin: 0 0 var(--sp-2);
}
.footer__colonne {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.footer__legale {
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--linea-inv);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--t-tecnico);
  color: rgba(237, 233, 219, 0.5);
}

/* --------------------------------------------------------------------------
   10. Rivelazione delle sezioni
   Stato iniziale in CSS, arrivo animato da GSAP. Se il JS non parte o l'utente
   ha chiesto meno movimento, il contenuto resta comunque leggibile.
   -------------------------------------------------------------------------- */
[data-rivela] { opacity: 0; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
  [data-rivela] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   11. Servizi
   -------------------------------------------------------------------------- */
.schede {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.scheda {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: rgba(255, 255, 255, 0.42);
  transition: transform var(--dur-3) var(--ease-out),
              border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.scheda:hover {
  transform: translateY(-2px);           /* sollevamento minimo */
  border-color: rgba(108, 122, 71, 0.5);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 36px -26px rgba(34, 40, 31, 0.55);
}
.scheda h3 { margin-block: var(--sp-2) var(--sp-2); }
.scheda p { font-size: 0.975rem; color: var(--testo-soft); }
.scheda .dato-tecnico { margin-block-start: var(--sp-3); }

.scheda__numero {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ottone);
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   12. Tecnologie
   -------------------------------------------------------------------------- */
.macchine {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.macchina p { color: rgba(237, 233, 219, 0.75); font-size: 0.975rem; }
.macchina h3 { margin-block-end: var(--sp-2); }

.specifiche { margin: var(--sp-4) 0 0; }
.specifica {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--linea-inv);
  font-size: var(--t-tecnico);
}
.specifica dt { color: rgba(237, 233, 219, 0.62); letter-spacing: 0.04em; }
.specifica dd {
  margin: 0; color: var(--foglia); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right;
}

/* --------------------------------------------------------------------------
   13. Materiali
   -------------------------------------------------------------------------- */
.materiali {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.materiali__colonna h3 { margin-block-end: var(--sp-3); }

.elenco-materiali { list-style: none; margin: 0; padding: 0; }
.elenco-materiali li {
  padding-block: var(--sp-2);
  border-block-start: 1px solid var(--linea);
  font-size: 0.975rem;
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.elenco-materiali li::before {
  content: ''; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ottone);          /* Ottone come segno grafico, non testo */
  translate: 0 -2px;
}
.materiali__nota { margin-block-start: var(--sp-5); }

/* --------------------------------------------------------------------------
   14. Processo
   -------------------------------------------------------------------------- */
.passi {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  counter-reset: passo;
}
.passo { position: relative; padding-block-start: var(--sp-4); border-block-start: 1px solid var(--linea-inv); }
.passo h3 { margin-block: var(--sp-2) var(--sp-2); }
.passo p { color: rgba(237, 233, 219, 0.75); font-size: 0.95rem; }
.passo__numero {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--ottone);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   15. Contatti
   -------------------------------------------------------------------------- */
.contatti { background: linear-gradient(180deg, var(--carta) 0%, #EAE7DA 100%); }
/* Il titolo qui non sta dentro .sezione__intestazione, quindi non eredita il
   suo margine inferiore, e resterebbe appiccicato al paragrafo. */
.contatti__griglia h2 { margin-block-end: var(--sp-3); }
.contatti__griglia {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) {
  .contatti__griglia { grid-template-columns: 1.35fr 1fr; gap: var(--sp-8); }
}

.bottone {
  display: inline-block;
  margin-block-start: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  background: var(--verde-corteccia);
  color: var(--avorio);
  text-decoration: none;
  border-radius: var(--raggio);
  font-size: var(--t-piccolo);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-3) var(--ease-out);
}
.bottone:hover {
  background: #2E3628;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -18px rgba(34, 40, 31, 0.6);
}
.bottone:active { transform: translateY(0); }

.contatti__nota { margin-block-start: var(--sp-3); }

.recapiti { margin: 0; }
.recapito { padding-block: var(--sp-3); border-block-start: 1px solid var(--linea); }
.recapito dt {
  font-size: var(--t-tecnico); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--alloro-testo); margin-block-end: 2px;
}
.recapito dd { margin: 0; font-size: 1.05rem; }
.recapito a { color: var(--testo); text-decoration-color: var(--linea); }
.recapito a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   16. Gli atti — incisione laser e stampa 3D

   Ogni atto e' una sezione alta 320vh che fa da corsa allo scroll; dentro,
   .atto__interno resta in sticky e riempie lo schermo. L'arte animata sta da
   un lato e il testo dall'altro, a specchio fra i due atti.

   L'inquadratura e' ravvicinata: il piano di lavoro sborda dal fotogramma e il
   marchio sta in primo piano. La camera e' una sola variabile per atto (--incl),
   e si animano soltanto transform, opacity e variabili custom.

   Su schermo stretto, e per chi chiede meno movimento, l'arte lascia il posto
   a un video e il testo gli va sotto: vedi 16.6.
   ========================================================================== */
.atto {
  position: relative;
  height: 320vh;
  z-index: 1;                  /* sopra l'hero, che resta incollata in alto */
  color: var(--avorio);
}

/* L'atto della stampa scorre sopra quello dell'incisione, che resta in sticky
   con il suo fondo: fra i due non si vede una cucitura. */
.atto--stampa { z-index: 2; }

.atto__interno {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(var(--sp-4), 3.4vw, var(--sp-7));
  padding-inline: var(--gutter);
  /* in alto lo spazio della navbar, in basso il respiro minimo */
  padding-block: clamp(80px, 11vh, 124px) clamp(var(--sp-4), 5vh, var(--sp-6));
}

/* Il fondo dell'incisione parte dal Verde Corteccia dell'hero e scivola verso
   il nero mentre l'atto avanza: il passaggio dall'hero non si vede. */
.atto--incisione .atto__interno {
  background-color: color-mix(in srgb,
    var(--nero-corteccia) calc(var(--buio, 0) * 100%), var(--verde-corteccia));
}
.atto--stampa .atto__interno { background-color: var(--nero-corteccia); }

/* L'arte occupa tutto il fotogramma e il testo le sta sopra, da un lato: e'
   quello che le da' la scala ravvicinata. Dividere lo schermo in due riquadri
   affiancati lasciava una cucitura verticale in mezzo, e l'inquadratura si
   leggeva come una figurina incollata accanto al testo invece che come una
   ripresa. */
.atto__arte {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.atto--incisione .atto__testo { grid-column: 2; }
.atto--stampa   .atto__testo { grid-column: 1; }

/* Velo dal lato del testo: garantisce il contrasto sopra l'immagine e chiude
   l'inquadratura. Si ferma prima della meta', cosi' il soggetto resta pulito.

   --entrata: tutto cio' che non e' il colore di fondo compare insieme all'atto.
   Il motivo e' la cucitura: mentre la sezione scorre sopra la precedente, il
   suo bordo superiore e' una riga orizzontale, e qualunque cosa la sezione
   disegni sopra il proprio fondo rende quella riga visibile. Il valore lo
   scrive scene.js; senza JavaScript resta 0 e i veli non si vedono, che e' il
   comportamento giusto perche' sono decorativi. */
.atto__interno::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: var(--entrata, 0);
  pointer-events: none;
}
.atto--incisione .atto__interno::before {
  background: linear-gradient(to left,
    rgba(9, 11, 8, 0.96) 0%, rgba(9, 11, 8, 0.92) 28%,
    rgba(9, 11, 8, 0.62) 46%, rgba(9, 11, 8, 0) 68%);
}
.atto--stampa .atto__interno::before {
  background: linear-gradient(to right,
    rgba(9, 11, 8, 0.96) 0%, rgba(9, 11, 8, 0.92) 28%,
    rgba(9, 11, 8, 0.62) 46%, rgba(9, 11, 8, 0) 68%);
}

/* will-change costa memoria GPU: si dichiara solo mentre l'atto e' davvero
   sullo schermo, e la classe viene tolta appena esce. */
.atto.e-attiva .laser__piano,
.atto.e-attiva .stampa__piano,
.atto.e-attiva .pila { will-change: transform; }

/* Veli ai bordi del fotogramma: chiudono l'inquadratura in alto e in basso e
   tengono il testo sempre su un fondo scuro. */
.atto__velo {
  position: absolute;
  inset-inline: -6%;
  height: 26%;
  pointer-events: none;
  z-index: 2;
}
.atto__velo--alto {
  inset-block-start: 0;
  background: linear-gradient(180deg, rgba(10, 12, 9, 0.82) 0%, rgba(10, 12, 9, 0) 100%);
  opacity: var(--entrata, 0);
}
.atto__velo--basso {
  inset-block-end: 0;
  background: linear-gradient(0deg, rgba(10, 12, 9, 0.9) 0%, rgba(10, 12, 9, 0) 100%);
}

/* --------------------------------------------------------------------------
   16.1 Atto 1 — l'incisione laser
   -------------------------------------------------------------------------- */
.laser {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Prospettiva lunga, non corta: e' un teleobiettivo macro come nelle riprese
     di riferimento. Con una prospettiva corta il bordo vicino del piano si
     ingrandisce a tal punto da uscire dal fotogramma. */
  perspective: 2300px;
  perspective-origin: 36% 42%;
}

/* La macchina intorno: solo masse scure, mai una sagoma riconoscibile. */
.laser__ambiente {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(52% 44% at 36% 40%, rgba(176, 138, 79, 0.15), transparent 74%),
    radial-gradient(130% 110% at 40% 130%, rgba(0, 0, 0, 0.66), transparent 62%);
  opacity: var(--entrata, 0);
}

/* La guida del portale, molto fuori fuoco: da' profondita' senza raccontare
   una macchina precisa. */
.laser__guida {
  position: absolute;
  inset-block-start: 3%;
  inset-inline: -14% 26%;
  height: clamp(18px, 3.4vh, 30px);
  border-radius: 40px;
  background: linear-gradient(180deg, #33383B 0%, #14171A 52%, #040506 100%);
  filter: blur(9px);
  opacity: calc(var(--entrata, 0) * 0.9);
}
.laser__guida::after {
  content: '';
  position: absolute;
  inset-block-start: 210%;
  inset-inline: 6%;
  height: 60%;
  border-radius: 30px;
  background: linear-gradient(180deg, #23272A, #0A0C0D);
  filter: blur(6px);
  opacity: 0.75;
}

/* Il piano di lavoro. E' la camera a inclinarlo: tutto quello che ci sta
   sopra — marchio, punto di incisione, fascio — e' suo figlio, quindi resta
   sempre sulla superficie senza dover ricalcolare niente. */
.laser__piano {
  position: absolute;
  inset-inline-start: 36%;      /* il soggetto sta a sinistra, il testo a destra */
  inset-block-start: 54%;
  width: min(58%, 84vh);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--incl, 52deg)) scale(var(--zoom, 1.04));
}

.laser__legno {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* La fotografia di partenza e' molto calda: desaturata scende sui toni del
     rovere e sta insieme al resto della palette. */
  filter: saturate(0.6) brightness(0.9) contrast(1.07);
  box-shadow: 0 44px 96px -34px rgba(0, 0, 0, 0.9),
              inset 0 0 90px rgba(0, 0, 0, 0.42);
}

/* Luce radente sul legno, come nella ripresa ravvicinata. */
.laser__piano::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(56% 44% at 50% 26%, rgba(255, 228, 176, 0.11), transparent 74%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Il riquadro condiviso dal marchio e dal punto di incisione. */
/* Il riquadro sta poco sotto il centro geometrico del piano: con la
   prospettiva la meta' lontana si comprime piu' di quella vicina, quindi il
   centro geometrico si proietta sopra il centro apparente dell'ellisse. Questi
   quattro punti percentuali riportano il marchio al centro di cio' che si
   vede. */
.laser__marchio {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 54%;
  width: 62%;
  aspect-ratio: 477 / 383;
  translate: -50% -50%;
  transform-style: preserve-3d;
}

.incisione {
  position: absolute;
  inset: 0;
  width: 100%;
  /* multiply: gli anelli del legno restano leggibili sotto la bruciatura */
  mix-blend-mode: multiply;
}
.incisione__burn {
  transform-origin: top;
  transform: scaleY(var(--burn, 0));    /* transform, non l'attributo height */
}
.incisione__hot {
  transform: translateY(var(--hot-y, 0px));
  opacity: var(--hot-op, 0);
}

/* Il punto di incisione, ancorato alla riga corrente. Vive dentro il piano,
   quindi la sua posizione sulla superficie e' esatta per costruzione. */
/* Attenzione: qui non ci vanno ne' opacity ne' filter. Entrambi appiattiscono
   il contesto 3D dei figli, e un fascio ruotato di -90deg dentro un contesto
   appiattito viene proiettato ad altezza zero, cioe' sparisce. L'opacita' la
   portano i singoli figli. */
.fuoco {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: calc(var(--fronte, 0) * 100%);
  transform-style: preserve-3d;
}

/* Il fascio sta in piedi perpendicolare al piano di lavoro: rotateX(-90deg)
   dentro un piano gia' inclinato porta l'asse Y locale lungo la normale alla
   superficie. Nessun calcolo di proiezione, e il piede resta sul punto. */
/* La sorgente: una massa scura molto fuori fuoco in alto, con la lente accesa.
   Non e' la sagoma di nessuna macchina in commercio: e' solo una presenza. */
.sorgente {
  position: absolute;
  /* spostata rispetto al centro del marchio: il raggio arriva di sbieco,
     come in una ripresa vera, invece che a piombo */
  inset-inline-start: 24%;
  inset-block-start: 15%;
  width: clamp(44px, 5.4vw, 76px);
  height: clamp(26px, 3.4vw, 44px);
  translate: -50% -50%;
  border-radius: 10px;
  background: linear-gradient(180deg, #23262A 0%, #121416 62%, #05060700 100%);
  filter: blur(9px);
  opacity: calc(var(--fuoco-op, 0) * 0.7);
  z-index: 1;
}
.sorgente::after {
  content: '';
  position: absolute;
  inset-block-start: 88%;
  inset-inline-start: 50%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 206, 255, 0.9) 0%, rgba(124, 108, 255, 0.35) 46%, transparent 72%);
}

/* Il raggio: ancorato alla sorgente e ruotato verso il punto di incisione.
   La lunghezza e l'angolo li scrive scene.js, che misura dove cade il punto. */
.raggio {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 0;
  height: 0;
  transform: translate3d(var(--raggio-x, 0px), var(--raggio-y, 0px), 0)
             rotate(var(--raggio-a, 0deg));
  transform-origin: 0 0;
  opacity: var(--fuoco-op, 0);
  z-index: 1;
  pointer-events: none;
}
.raggio__nucleo,
.raggio__aria {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: var(--raggio-l, 0px);
  translate: -50% 0;
}
/* il raggio vero: sottile, e piu' acceso man mano che si avvicina al legno */
.raggio__nucleo {
  width: clamp(2.5px, 0.4vw, 5px);
  background: linear-gradient(180deg,
    rgba(198, 188, 255, 0.55) 0%,
    rgba(168, 152, 255, 0.78) 40%,
    rgba(226, 220, 255, 0.96) 100%);
  filter: blur(0.6px);
}
/* la luce che il raggio lascia nell'aria intorno a se' */
.raggio__aria {
  width: clamp(16px, 2.4vw, 34px);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg,
    rgba(112, 94, 240, 0.06) 0%,
    rgba(124, 106, 248, 0.2) 52%,
    rgba(158, 142, 255, 0.44) 100%);
  filter: blur(6px);
}

.fuoco__alone {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: clamp(90px, 13vw, 168px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 198, 124, 0.44) 0%, rgba(255, 142, 52, 0.16) 28%, transparent 60%),
    radial-gradient(circle, rgba(132, 116, 255, 0.34) 0%, rgba(92, 76, 232, 0.12) 42%, transparent 72%);
  opacity: var(--fuoco-op, 0);
}

.fuoco__punto {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: clamp(14px, 2.1vw, 26px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFFFFF 0%, #F0F3FF 24%, #A79AFF 48%, rgba(124, 108, 255, 0) 74%);
  opacity: var(--fuoco-op, 0);
}

/* --------------------------------------------------------------------------
   16.2 Atto 2 — la stampa 3D
   -------------------------------------------------------------------------- */
.stampa {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 2000px;
  perspective-origin: 64% 34%;
}

.stampa__ambiente {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(48% 40% at 64% 60%, rgba(155, 170, 107, 0.15), transparent 74%),
    radial-gradient(130% 110% at 60% -18%, rgba(0, 0, 0, 0.7), transparent 58%);
  opacity: var(--entrata, 0);
}

/* La guida lineare dietro la testa, fuori fuoco. */
.stampa__rotaia {
  position: absolute;
  inset-block-start: 17%;
  inset-inline: 54% -18%;
  height: clamp(16px, 3vh, 28px);
  border-radius: 40px;
  background: linear-gradient(180deg, #4A4F53 0%, #949AA0 34%, #565C61 62%, #191C1F 100%);
  filter: blur(6px);
  opacity: calc(var(--entrata, 0) * 0.5);
}

/* Il piatto di stampa, quasi orizzontale: la ripresa e' molto radente. */
.stampa__piano {
  position: absolute;
  inset-inline-start: 64%;      /* il soggetto sta a destra, il testo a sinistra */
  inset-block-start: 62%;
  width: min(92%, 122vh);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(var(--incl, 74deg)) scale(var(--zoom, 1)) translateY(var(--piano-y, 0%));
  border-radius: 8px;
  background: linear-gradient(178deg, #2B2822 0%, #1C1A16 58%, #121110 100%);
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.72);
  opacity: var(--piano-op, 1);
}

/* La grana del piatto: rumore procedurale calcolato dal browser. */
.stampa__grana {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 0.5;
  pointer-events: none;
}

/* La pozza di luce che la testa getta sul piatto. */
.stampa__luce {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 236, 200, 0.16) 0%, rgba(155, 170, 107, 0.09) 42%, transparent 74%);
  opacity: var(--luce-op, 0);
}

.stampa__ombra {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 44%;
  height: 36%;
  translate: -50% -46%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), transparent 76%);
  opacity: var(--ombra-op, 0);
  transform: scale(var(--ombra-s, 0.6));
}

/* Gli strati: N copie del marchio separate lungo Z, cioe' perpendicolari al
   piatto, perche' la pila vive dentro il piano inclinato. */
.pila {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 42%;
  aspect-ratio: 477 / 383;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateZ(var(--pila-rz, 0deg));
}
.strato {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(var(--i) * var(--passo, 2px)));
  opacity: 0;
  transition: opacity var(--dur-1) linear;
}
.strato.e-steso { opacity: 1; }
.strato svg { width: 100%; height: 100%; }

/* La testa di stampa: in primo piano e appena fuori fuoco, come nella ripresa
   ravvicinata. Non e' la copia di una macchina in commercio. */
/* La testa e' posizionata perche' la punta dell'ugello cada sulla superficie
   superiore dell'oggetto; --testa-su la fa salire mano a mano che l'oggetto
   cresce. */
.testa {
  position: absolute;
  inset-inline-start: 64%;
  inset-block-start: 36%;
  width: clamp(104px, 15vw, 196px);
  translate: -50% 0;
  transform: translateY(calc(var(--testa-su, 0px) * -1));
  filter: blur(1.1px) drop-shadow(0 18px 30px rgba(0, 0, 0, 0.72));
  opacity: var(--testa-op, 0);
  z-index: 1;
}
/* Il corpo vaga con un ciclo suo: si muove anche a scroll fermo, come una
   macchina che sta lavorando. */
.testa__corpo {
  position: relative;
  animation: testa-x 3.4s ease-in-out infinite alternate,
             testa-y 2.6s ease-in-out infinite alternate;
}
.testa__corpo svg { width: 100%; height: auto; }
@keyframes testa-x { from { translate: -7% 0; } to { translate: 7% 0; } }
@keyframes testa-y { from { transform: translateY(-2.5%); } to { transform: translateY(2.5%); } }

/* Il filamento fuso che esce, e il calore all'ugello. */
.testa__caldo {
  position: absolute;
  inset-block-start: 96%;
  inset-inline-start: 50%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 206, 133, 0.5) 0%, rgba(255, 140, 40, 0) 70%);
}
.testa__filo {
  position: absolute;
  inset-block-start: 97%;
  inset-inline-start: 50%;
  width: 2px;
  height: 7%;
  translate: -50% 0;
  background: linear-gradient(180deg, #B6C486, rgba(155, 170, 107, 0));
}

/* --------------------------------------------------------------------------
   16.3 Pannelli tecnici
   -------------------------------------------------------------------------- */
.hud {
  position: absolute;
  /* sotto la navbar, che e' alta fra 72 e 84px */
  inset-block-start: clamp(94px, 13vh, 132px);
  inset-inline-start: clamp(var(--sp-3), 2vw, var(--sp-5));
  z-index: 3;
  font-family: var(--sans);
  font-size: var(--t-tecnico);
  color: var(--pietra);
  letter-spacing: 0.08em;
  opacity: var(--hud-op, 0);
  pointer-events: none;
  max-width: 15rem;
}
.hud--stampa {
  inset-inline-start: auto;
  inset-inline-end: clamp(var(--sp-3), 2vw, var(--sp-5));
  text-align: right;
}
.hud__macchina {
  margin: 0 0 var(--sp-2);
  color: var(--foglia);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hud__dati { margin: 0; display: grid; gap: 3px; }
.hud__dati > div { display: flex; gap: var(--sp-3); justify-content: space-between; }
.hud--stampa .hud__dati > div { flex-direction: row-reverse; }
.hud__dati dt { opacity: 0.62; }
.hud__dati dd { margin: 0; color: var(--avorio); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   16.4 Il testo dell'atto, a lato dell'arte
   -------------------------------------------------------------------------- */
.atto__testo {
  position: relative;
  z-index: 3;
  max-width: 46ch;
  justify-self: start;
}
.atto--stampa .atto__testo { justify-self: end; }

.atto__testo h2 {
  color: var(--avorio);
  margin-block: var(--sp-2) var(--sp-3);
}
.atto__paragrafo {
  color: rgba(237, 233, 219, 0.76);
  max-width: 42ch;
}
.atto__nota {
  font-size: var(--t-tecnico);
  line-height: 1.6;
  color: var(--pietra);
  max-width: 40ch;
  padding-inline-start: var(--sp-3);
  border-inline-start: 1px solid rgba(176, 138, 79, 0.42);
}

/* I blocchi del testo entrano uno dopo l'altro mentre l'atto avanza: i valori
   li scrive scene.js, uno per blocco. Senza JavaScript restano visibili. */
@media (min-width: 901px) {
  .atto__testo > [data-passo] {
    opacity: var(--p-op, 1);
    transform: translate3d(0, var(--p-y, 0px), 0);
  }
  .materia {
    opacity: var(--m-op, 1);
    transform: translate3d(0, var(--m-y, 0px), 0);
  }
}

.materie { margin-block-start: clamp(var(--sp-3), 3.4vh, var(--sp-5)); }
.materie__titolo {
  margin: 0 0 var(--sp-1);
  font-size: var(--t-tecnico);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--foglia);
}
.materie__elenco { list-style: none; margin: 0; padding: 0; }
/* Prima colonna a larghezza fissa e non "auto": ogni voce e' una griglia a se',
   quindi con auto ognuna si dimensionava sul proprio nome e le note partivano
   da punti diversi. Otto rem bastano al nome piu' lungo, "Vetro colorato" e il
   suo "Coloured glass" inglese. */
.materia {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--sp-1) var(--sp-3);
  padding-block: clamp(6px, 1.1vh, 11px);
  border-block-start: 1px solid var(--linea-inv);
}
.materia__nome {
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--avorio);
}
.materia__nota {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(237, 233, 219, 0.62);
}

.atto__cta {
  background: var(--ottone);
  color: #1B1E1A;
  pointer-events: var(--cta-eventi, auto);
}
.atto__cta:hover { background: #C29A5B; }

/* Su schermi bassi il testo ruberebbe spazio all'inquadratura. */
@media (min-width: 901px) and (max-height: 700px) {
  .atto__nota { display: none; }
  .materia__nota { display: none; }
  .materia { grid-template-columns: 1fr; }
}

/* Su schermo stretto il nome e la nota vanno incolonnati: affiancati, alla
   nota resterebbero poco piu' di venti caratteri per riga. */
@media (max-width: 560px) {
  .materia { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   16.5 Larghezze intermedie
   -------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .atto__interno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .atto__testo { max-width: 40ch; }
  .materia__nota { font-size: 0.83rem; }
}

/* --------------------------------------------------------------------------
   16.6 Versione con video
   Su schermo stretto, e per chi chiede meno movimento, l'animazione a
   scorrimento lascia il posto al video dell'animazione con il testo sotto.

   Il video ha preload="none" e nessun attributo poster finche' serve davvero:
   il fermo immagine sta in data-poster e lo promuove scene.js. Cosi' su schermo
   largo, dove l'animazione gira, non si scarica un byte di video.
   -------------------------------------------------------------------------- */
.atto__video { display: none; margin: 0; }
.atto__video-elemento {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--linea-inv);
  border-radius: var(--raggio);
  background-color: #101210;
}
.atto__video figcaption {
  margin-block-start: var(--sp-2);
  color: var(--pietra);
  font-size: var(--t-tecnico);
  letter-spacing: 0.04em;
}

/* Il passaggio alla versione con video: niente corsa, niente sticky. */
.atto--video,
.atto--video .atto__interno { height: auto; }
.atto--video .atto__interno {
  position: static;
  overflow: visible;
  padding-block: var(--sezione-y);
  background-color: var(--nero-corteccia);
}
.atto--video .atto__arte { display: none; }
.atto--video .atto__video { display: block; }
.atto--video .atto__velo { display: none; }

/* su schermo largo, con moto ridotto, video e testo restano affiancati */
.atto--incisione.atto--video .atto__video { grid-column: 1; }
.atto--stampa.atto--video .atto__video { grid-column: 2; }

@media (max-width: 900px) {
  .atto,
  .atto .atto__interno { height: auto; }
  .atto .atto__interno {
    position: static;
    overflow: visible;
    display: block;
    padding-block: var(--sezione-y);
    background-color: var(--nero-corteccia);
  }
  .atto .atto__arte,
  .atto .atto__velo { display: none; }
  .atto .atto__video { display: block; margin-block-end: var(--sp-5); }
  .atto .atto__testo,
  .atto--stampa .atto__testo { max-width: none; justify-self: stretch; }
  .atto .atto__paragrafo { max-width: var(--max-testo); }
  .atto--incisione .atto__arte { margin-inline-start: 0; }
  .atto--stampa .atto__arte { margin-inline-end: 0; }
}

/* Nessun movimento richiesto: il video resta fermo sul fermo immagine finche'
   non lo si avvia a mano, quindi con i comandi visibili. */
@media (prefers-reduced-motion: reduce) {
  .atto,
  .atto .atto__interno { height: auto; }
  .atto .atto__interno {
    position: static;
    overflow: visible;
    padding-block: var(--sezione-y);
    background-color: var(--nero-corteccia);
  }
  .atto .atto__arte,
  .atto .atto__velo { display: none; }
  .atto .atto__video { display: block; }
  .atto--incisione .atto__video { grid-column: 1; }
  .atto--stampa .atto__video { grid-column: 2; }
  .testa__corpo { animation: none; }
}