/* ==========================================================================
   Tutto Spina — base
   Azzeramento, tipografia, bottoni, testata, barra bassa, la linea.
   Le scene stanno in scene.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  line-height: var(--interlinea-testo);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ambra); color: var(--grafite-900); }

:focus-visible { outline: 2px solid var(--ambra); outline-offset: 3px; border-radius: var(--r-1); }
.scena--buio :focus-visible, .testata :focus-visible { outline-color: var(--ambra-chiara); }

.nascosto { position: absolute; width: 0; height: 0; overflow: hidden; }
.nascosto-visivamente {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--s-3); top: -100px; z-index: 100;
  background: var(--ambra); color: var(--grafite-900); padding: var(--s-2) var(--s-3);
  font-weight: 600; border-radius: var(--r-2);
}
.salta:focus { top: var(--s-3); }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Tipografia ----------------------------------------------------------- */
/* Le etichette sono maiuscoletti veri del graziato: un'intestazione da
   modulo stampato, non un'etichetta da terminale. */
.etichetta {
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: var(--t-etichetta);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--testo-2);
}
/* Le didascalie delle foto e delle tavole: corsivo, come in un catalogo. */
.didascalia {
  font-style: italic;
  font-size: var(--t-piccolo);
  line-height: 1.45;
  color: var(--testo-2);
}
.scena--buio .didascalia { color: var(--buio-testo-2); }
.scena--buio .etichetta { color: var(--buio-testo-2); }

.titolo-scena {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.lead {
  font-size: var(--t-corpo-l);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--testo-2);
  text-wrap: pretty;
}
.scena--buio .lead { color: var(--buio-testo-2); }
.ambra { color: var(--ambra); }

/* --- Scene ---------------------------------------------------------------- */
.scena { position: relative; z-index: var(--z-contenuto); padding-block: var(--scena-y); }
.scena--buio { background: var(--grafite-900); color: var(--buio-testo); }
.scena--schiuma { background: var(--schiuma); }

/* --- Bottoni: una promessa, non un "scopri" -------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-2);
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--d-breve) var(--ease-uscita),
              color var(--d-breve) var(--ease-uscita),
              box-shadow var(--d-breve) var(--ease-uscita),
              transform var(--d-breve) var(--ease-uscita);
}
.bottone:active { transform: translateY(1px); }
.bottone--azione {
  background: var(--azione);
  color: var(--azione-testo);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.35);
}
.bottone--azione:hover { background: var(--ambra-chiara); }
.bottone--linea {
  background: transparent;
  color: var(--testo);
  box-shadow: inset 0 0 0 1.5px var(--grafite-900);
}
.bottone--linea:hover { background: var(--grafite-900); color: var(--acciaio-50); }
.bottone--scuro { background: var(--grafite-900); color: var(--acciaio-50); }
.bottone--scuro:hover { background: var(--grafite-700); }
.bottone--piccolo { min-height: 42px; padding: 0 var(--s-3); font-size: 0.9375rem; }

/* --- Ingressi ------------------------------------------------------------- */
/* Gli elementi entrano come attori: uno dopo l'altro, dal basso, senza rimbalzi.
   Senza JavaScript (classe no-js) si vede tutto subito. */
.js .entra { opacity: 0; transform: translateY(18px); animation: entra var(--d-lunga) var(--ease-uscita) forwards; animation-delay: var(--ritardo, 0ms); }
@keyframes entra { to { opacity: 1; transform: none; } }
.js .rivela { opacity: 0; transform: translateY(24px); transition: opacity var(--d-lunga) var(--ease-uscita), transform var(--d-lunga) var(--ease-uscita); transition-delay: var(--ritardo, 0ms); }
.js .rivela.visibile { opacity: 1; transform: none; }

/* --- Testata -------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: var(--z-testata);
  color: var(--testo);
  transition: color var(--d-media) var(--ease-uscita);
}
.testata::before {
  /* lo sfondo sta in uno pseudo-elemento: il blur sulla testata stessa
     creerebbe un contenitore per il menu fisso su telefono */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(238 240 238 / 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid rgb(182 189 186 / 0.6);
  transition: background-color var(--d-media) var(--ease-uscita), border-color var(--d-media);
}
.testata--buio { color: var(--buio-testo); }
.testata--buio::before { background: rgb(19 22 24 / 0.82); border-bottom-color: var(--buio-filetto); }

.testata__riga { display: flex; align-items: center; gap: var(--s-4); min-height: 72px; }
.testata__marchio { display: flex; flex-direction: column; align-items: center; text-decoration: none; margin-right: auto; }
.marchio { width: 132px; height: auto; }
.testata__dal { font-size: 0.8125rem; font-style: italic; margin-top: -4px; opacity: 0.8; }

.testata__nav ul { display: flex; gap: var(--s-5); }
.testata__nav a { text-decoration: none; font-weight: 500; font-size: 1rem; position: relative; padding-block: var(--s-2); }
.testata__nav ul a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--ambra); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-breve) var(--ease-uscita);
}
.testata__nav ul a:hover::after, .testata__nav ul a[aria-current="true"]::after { transform: scaleX(1); }
.testata__tel-menu { display: none; }

.testata__tel { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; text-align: right; }
.testata__tel .etichetta { font-size: 0.875rem; color: inherit; opacity: 0.75; line-height: 1; }
.testata__numero { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: 0.03em; line-height: 1; }

.testata__apri { display: none; }

@media (max-width: 1080px) {
  .testata__tel { display: none; }
}
@media (max-width: 860px) {
  .testata__riga { min-height: 64px; gap: var(--s-3); }
  .marchio { width: 116px; }
  .testata__cta { display: none; }
  .testata__apri {
    display: inline-flex; align-items: center; gap: var(--s-2);
    min-height: 44px; padding: 0 var(--s-3);
    background: transparent; border: 1.5px solid currentColor; border-radius: var(--r-2);
    font-weight: 600; cursor: pointer;
  }
  .testata__apri-linee, .testata__apri-linee::before {
    display: block; width: 16px; height: 2px; background: currentColor; position: relative;
    transition: transform var(--d-breve) var(--ease-uscita);
  }
  .testata__apri-linee::before { content: ""; position: absolute; top: 6px; }
  .testata__apri-linee { transform: translateY(-3px); }
  .testata__apri[aria-expanded="true"] .testata__apri-linee { transform: translateY(0) rotate(45deg); }
  .testata__apri[aria-expanded="true"] .testata__apri-linee::before { transform: translateY(-6px) rotate(-90deg); }

  /* il menu si apre come lo sportello del sotto-banco: dall'alto, di colpo ma morbido */
  .testata__nav {
    position: fixed; inset: 64px 0 auto 0;
    background: var(--grafite-900); color: var(--buio-testo);
    padding: var(--s-5) var(--gutter) var(--s-6);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--d-media) var(--ease-fluido), visibility 0s linear var(--d-media);
  }
  .testata__nav.aperto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--d-media) var(--ease-fluido); }
  .testata__nav ul { flex-direction: column; gap: 0; }
  .testata__nav ul a {
    display: block; padding: var(--s-3) 0;
    font-family: var(--f-display); font-size: 2.75rem; text-transform: uppercase; line-height: 1;
    border-bottom: 1px solid var(--buio-filetto);
  }
  .testata__nav ul a::after { display: none; }
  .testata__tel-menu {
    display: inline-block; margin-top: var(--s-5);
    font-family: var(--f-display); font-size: 2.25rem; letter-spacing: 0.02em; color: var(--ambra); text-decoration: none;
  }
}

/* --- Barra bassa (telefono) ------------------------------------------------ */
.barra { display: none; }
@media (max-width: 860px) {
  .barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
    display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s-2);
    padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom));
    background: rgb(19 22 24 / 0.94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform var(--d-media) var(--ease-uscita);
  }
  .barra.visibile { transform: none; }
  .barra__voce {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 52px; border-radius: var(--r-2);
    color: var(--buio-testo); text-decoration: none; font-weight: 600;
    box-shadow: inset 0 0 0 1.5px var(--buio-filetto);
  }
  .barra__voce svg { width: 18px; height: 18px; fill: currentColor; }
  .barra__voce--azione { background: var(--ambra); color: var(--grafite-900); box-shadow: none; }
  body { padding-bottom: 76px; }
}

/* --- La linea ---------------------------------------------------------------
   Un tubo solo, dalla colonna dell'hero al bicchiere dei contatti. Lo scroll
   spinge la birra dentro. È la firma del sito: niente altro si muove così. */
main { position: relative; }
.linea {
  position: absolute; left: 0; top: 0; z-index: var(--z-linea);
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.linea path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.linea__tubo { stroke: rgb(182 189 186 / 0.55); stroke-width: var(--linea-tubo); }
.linea__riflesso { stroke: rgb(255 255 255 / 0.45); stroke-width: 2; transform: translate(-3px, 0); }
.linea__birra { stroke: var(--ambra); stroke-width: var(--linea-birra); }
.linea__maschera { stroke: #fff; stroke-width: var(--linea-birra); }
.linea__flusso {
  stroke: #fff6dc; stroke-width: 2.4; stroke-dasharray: 1.5 22; opacity: 0.9;
  animation: flusso 1.4s linear infinite;
}
@keyframes flusso { to { stroke-dashoffset: -23.5; } }
.no-js .linea { display: none; }

@media (max-width: 760px) {
  :root { --linea-tubo: 8px; --linea-birra: 4px; }
}

/* --- Movimento ridotto ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .entra, .js .rivela { opacity: 1; transform: none; }
  .linea__flusso { display: none; }
}