/* ==========================================================================
   SAIMON — Base
   Reset ragionato, tipografia, accessibilità, sistema di rivelazione allo scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font — self-hosted, niente Google Fonts (nessuna richiesta a terzi, nessun
   problema GDPR). Solo i quattro pesi previsti dal design system.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('../font/montserrat-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../font/montserrat-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../font/montserrat-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../font/montserrat-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  /* Le foglie decorative sporgono di proposito oltre il bordo delle sezioni
     (per nascondere il gambo fuori schermo, vedi componenti.css) e la loro
     misura è in rem fissi: su schermi stretti sfondano di molto più dei
     pochi pixel che ci si aspetterebbe. overflow-x:hidden sul solo <body>
     non basta a contenerle in modo affidabile insieme alla testata
     position:fixed — su mobile la barra può restare ancorata a una finestra
     di layout più larga dello schermo reale, spingendo l'hamburger fuori
     vista. overflow-x:hidden come ripiego per i motori che non capiscono
     `clip`; clip è la sola forma pensata apposta per bloccare anche il
     contenuto che sfonda via trasformazione, non solo via scroll. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Lo spazio della barra di scorrimento è sempre riservato. Dove la barra
     occupa posto (Windows), Chrome disegna una pagina appena aperta prima
     di averla letta tutta: per un attimo è corta, senza barra, poi la
     barra compare e si mangia 17px. Margini e testo della testata sono in
     vw, quindi a ogni clic sul menu la barra di navigazione scattava e si
     ridimensionava. Su Mac e telefono, dove la barra galleggia, non cambia
     niente. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background-color: var(--sfondo-pagina);
  color: var(--testo-secondario);
  font-family: var(--font-principale);
  font-size: var(--testo-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Serve insieme al clip sull'html: da solo nessuno dei due contiene le
     foglie (misurato: con uno solo lo sfondamento torna a 599px su 485).
     Attenzione: un overflow diverso da visible qui rompe `position: sticky`
     per i figli, ed è il motivo per cui la testata è fixed e non sticky. */
  overflow-x: hidden;
}

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--testo-principale);
  text-wrap: balance;
}

.titolo-eroe {
  font-size: clamp(var(--testo-2xl), 8vw, var(--testo-4xl));
  font-weight: 300; line-height: 1.1; letter-spacing: -0.02em;
}
h1, .titolo-1 {
  font-size: clamp(var(--testo-2xl), 5.5vw, var(--testo-3xl));
  font-weight: 300; line-height: 1.15; letter-spacing: -0.015em;
}
h2, .titolo-2 {
  font-size: clamp(var(--testo-xl), 4.5vw, var(--testo-2xl));
  font-weight: 300; line-height: 1.2; letter-spacing: -0.01em;
}
h3, .titolo-3 {
  font-size: clamp(var(--testo-lg), 3vw, var(--testo-xl));
  font-weight: 400; line-height: 1.3;
}
h4, .titolo-4 {
  font-size: var(--testo-lg); font-weight: 500; line-height: 1.4;
}

p { margin: 0 0 var(--spazio-4); max-width: 34em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.testo-lead {
  font-size: var(--testo-md);
  line-height: 1.7;
  color: var(--testo-secondario);
}

.testo-tenue { color: var(--testo-tenue); font-size: var(--testo-sm); }

.etichetta {
  display: inline-block;
  font-size: var(--testo-sm); font-weight: 500; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--testo-caldo);
}

.didascalia {
  font-size: var(--testo-xs); font-weight: 400; line-height: 1.5;
  letter-spacing: 0.02em; color: var(--testo-tenue);
  max-width: 100%;
}

a { color: var(--testo-accento); text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
a:hover { color: var(--colore-salvia-900); }

/* Link testuale con sottolineatura che si estende da sinistra */
.link-esteso {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
}
.link-esteso::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background-color: currentColor;
  transform: scaleX(1); transform-origin: left;
  transition: transform var(--durata-media) var(--uscita);
}
.link-esteso:hover::after { transform: scaleX(0); transform-origin: right; }

/* --------------------------------------------------------------------------
   Struttura
   -------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--contenitore-base);
  margin-inline: auto;
  padding-inline: var(--margine-laterale);
}
.contenitore--stretto { max-width: var(--contenitore-stretto); }
.contenitore--largo   { max-width: var(--contenitore-largo); }
.contenitore--esteso  { max-width: var(--contenitore-esteso); }

/* Il margine laterale cresce con la finestra invece di restare fisso: su un
   monitor da 2560px il contenuto non finisce schiacciato al centro. */
@media (min-width: 1024px) {
  .contenitore { padding-inline: clamp(var(--spazio-12), 5vw, var(--spazio-32)); }
}

.sezione { padding-block: var(--spazio-24); }
.sezione--ampia { padding-block: var(--spazio-32); }
.sezione--alt { background-color: var(--sfondo-sezione-alt); }
.sezione--verde { background-color: var(--sfondo-sezione-verde); }
.sezione--calda { background-color: var(--sfondo-sezione-calda); }
/* Il bianco pieno serve a staccare nettamente una sezione dalla panna che la
   circonda: usato per i semifreddi, che non sono il gelato del banco. */
.sezione--bianca { background-color: var(--colore-bianco); }

@media (min-width: 768px) {
  .sezione { padding-block: var(--spazio-32); }
  .sezione--ampia { padding-block: var(--spazio-40); }
}

/* Il monogramma come separatore: al posto della solita riga piena */
.separatore {
  display: flex; align-items: center; gap: var(--spazio-6);
  margin-block: var(--spazio-16);
  color: var(--colore-legno-300);
}
.separatore::before, .separatore::after {
  content: ''; flex: 1; height: 1px; background-color: currentColor;
}
.separatore__segno {
  height: 1.9rem; width: calc(1.9rem * 544 / 1024);
  background-color: currentColor;
  -webkit-mask: url('../media/logo-monogramma.svg') center / contain no-repeat;
  mask: url('../media/logo-monogramma.svg') center / contain no-repeat;
}

/* Filetto di legno: separa senza pesare */
.filetto {
  height: 2px; border: 0; margin: 0;
  background-color: var(--bordo-decorativo);
}

/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-anello);
  outline-offset: 3px;
  border-radius: var(--raggio-sm);
}
.su-scuro :focus-visible,
.piede :focus-visible,
.eroe :focus-visible { outline-color: var(--focus-anello-scuro); }

.salta {
  position: absolute; left: var(--spazio-4); top: var(--spazio-4);
  z-index: var(--piano-pannello);
  transform: translateY(-150%);
  padding: var(--spazio-3) var(--spazio-6);
  background-color: var(--sfondo-elevato);
  color: var(--testo-principale);
  border: var(--bordo-sottile);
  border-radius: var(--raggio-md);
  font-size: var(--testo-sm); font-weight: 500; text-decoration: none;
  transition: transform var(--durata-media) var(--uscita);
}
.salta:focus-visible { transform: translateY(0); }

.solo-lettori {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Rivelazione allo scroll
   Il contenuto è visibile per default: l'animazione lo migliora, non lo
   nasconde. Se il JavaScript non parte, la pagina si legge comunque.
   -------------------------------------------------------------------------- */
.js [data-rivela] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--durata-lunga) var(--uscita),
    transform var(--durata-lunga) var(--uscita);
  transition-delay: var(--ritardo, 0ms);
}
.js [data-rivela].e-visibile {
  opacity: 1;
  transform: none;
}

/* Le immagini si scoprono dal basso mentre la foto si assesta.
   La maschera sta sull'immagine, non sul contenitore: un contenitore
   ritagliato al 100% verrebbe considerato "fuori schermo" e non si
   rivelerebbe mai.
   Nota: qui si usa `scale`, non `transform`. La parallasse muove la stessa
   immagine con `translate`, e le due proprietà separate convivono; con un
   solo `transform` l'ultima regola cancellerebbe l'altra. */
.js [data-rivela-foto] img,
.js [data-rivela-foto] video {
  clip-path: inset(100% 0 0 0);
  scale: 1.06;
  transition:
    clip-path 900ms var(--uscita-lenta),
    scale 1200ms var(--uscita-lenta);
  transition-delay: var(--ritardo, 0ms);
}
.js [data-rivela-foto].e-visibile img,
.js [data-rivela-foto].e-visibile video {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

/* --------------------------------------------------------------------------
   Parallasse: la foto scorre di pochi pixel dentro la cornice, che resta ferma.
   Il contenitore è leggermente più corto dell'immagine, così c'è margine per
   muoversi senza scoprire i bordi. Lo spostamento lo scrive js/parallasse.js.
   -------------------------------------------------------------------------- */
.js .cornice--parallasse img {
  height: calc(100% + 2 * var(--corsa-parallasse, 36px));
  margin-block-start: calc(var(--corsa-parallasse, 36px) * -1);
  translate: 0 var(--scorrimento, 0px);
  will-change: translate;
}

/* --------------------------------------------------------------------------
   Rispetto delle preferenze — §6.3 del design system
   -------------------------------------------------------------------------- */
@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;
  }
}

/* --------------------------------------------------------------------------
   Schermi molto larghi
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  html {
    font-size: 112.5%; /* 18px base instead of 16px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rivela] { opacity: 1; transform: none; }
  .js [data-rivela-foto] img,
  .js [data-rivela-foto] video { clip-path: none; scale: 1; }
  .js .cornice--parallasse img {
    height: 100%; margin-block-start: 0; translate: none;
  }
  .foglia { animation: none !important; }
  html { scroll-snap-type: none !important; }
}