/* =========================================================
   Fuori Corso — stile di riferimento comune a home e menù.
   Il filo conduttore è l'insegna al neon: nero, arancio, bagliore.
   Qui stanno font, colori e movimento condivisi; style.css e
   menu.css tengono solo i token che servono a loro.
   ========================================================= */

/* ---------- font self-hosted ---------- */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../assets/fonts/bebasneue.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/opensans-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../assets/fonts/opensans-var-italic.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- token ---------- */

:root {
  --arancio: #e35a2e;
  --grigio: #efefef;
  --rosa-chiaro: #ffd6d6;
  --rosa: #f79e9e;
  --marrone: #251604;
  --nero: #000;
  --bianco: #fff;

  --display: 'Bebas Neue', Impact, sans-serif;
  --ui: 'Open Sans', system-ui, sans-serif;
  --corpo: 'Lato', system-ui, sans-serif;

  /* la scala del sito, uguale su telefono e computer: cresce con lo
     schermo fra un minimo e un massimo (stesso metodo di InSite e Da Paolo) */
  --contenuto: 1160px;                               /* larghezza utile massima */
  --rientro: clamp(20px, 5vw, 64px);                 /* margini laterali */
  --sezione-y: clamp(64px, 8vw, 120px);              /* respiro fra le sezioni */
  --t-titolo: clamp(38px, 4.4vw + 12px, 72px);       /* titoli in Bebas */
  --t-testo: clamp(18px, 0.3vw + 16.5px, 20px);      /* paragrafi */
  --interlinea: 1.65;
  --raggio: 20px;

  --neon: #ff6a3d;
  --bagliore: 0 0 6px rgba(255, 106, 61, 0.55), 0 0 22px rgba(227, 90, 46, 0.35);
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-molla: cubic-bezier(0.34, 1.56, 0.64, 1);
  --durata: 0.8s;
}

/* ---------- passaggio fra le pagine (home ↔ menù) ---------- */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; }

/* il nome della card in home diventa il titolo della pagina menù */
.menu__card[href$='/colazione'] .menu__nome,
body[data-menu='colazione'] .titolo { view-transition-name: menu-colazione; }
.menu__card[href$='/lunch'] .menu__nome,
body[data-menu='lunch'] .titolo { view-transition-name: menu-lunch; }
.menu__card[href$='/ape'] .menu__nome,
body[data-menu='ape'] .titolo { view-transition-name: menu-ape; }

::view-transition-group(menu-colazione),
::view-transition-group(menu-lunch),
::view-transition-group(menu-ape) { animation-duration: 0.55s; animation-timing-function: var(--curva); }

/* ---------- comparse: parte una volta e arriva sempre in fondo ----------
   Senza JS (o prima che parta) tutto è visibile: le classi di partenza
   le mette effetti.js, che aggiunge fx-dentro appena l'elemento entra a
   schermo. Si usa `translate` e non `transform`, così la comparsa si somma
   all'inclinazione delle card invece di cancellarla. */

.fx-su {
  opacity: 0;
  translate: 0 28px;
  transition: opacity var(--durata) var(--curva), translate var(--durata) var(--curva);
  transition-delay: var(--ritardo, 0s);
}
.fx-su.fx-dentro { opacity: 1; translate: none; }

/* titoli: compaiono riga per riga, salendo appena (--riga lo scrive effetti.js) */
.fx-righe .fx-parolina {
  display: inline-block;
  opacity: 0;
  translate: 0 0.35em;
  transition: opacity 0.8s var(--curva), translate 0.8s var(--curva);
  transition-delay: calc(var(--riga, 0) * 140ms);
}
.fx-righe.fx-dentro .fx-parolina { opacity: 1; translate: none; }

/* il filo arancio sotto i titoli si disegna da sinistra */
.fx-filo { position: relative; }
.fx-filo::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 64px;
  height: 2px;
  margin-left: -32px;
  background: var(--neon);
  box-shadow: var(--bagliore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--curva) 0.35s;
}
.fx-filo.fx-dentro::after { transform: scaleX(1); }

/* ---------- bagliore neon ---------- */

.fx-neon { text-shadow: var(--bagliore); }

/* il logo dei menù si accende a scatti (.marchio img, più sotto) */
@keyframes fx-accendi {
  0%   { opacity: 0;   filter: brightness(0.4); }
  8%   { opacity: 1;   filter: brightness(1.6) drop-shadow(0 0 18px var(--neon)); }
  12%  { opacity: 0.15; filter: brightness(0.4); }
  20%  { opacity: 1;   filter: brightness(1.4) drop-shadow(0 0 14px var(--neon)); }
  24%  { opacity: 0.3; }
  34%  { opacity: 1;   filter: brightness(1.2) drop-shadow(0 0 22px var(--neon)); }
  100% { opacity: 1;   filter: brightness(1) drop-shadow(0 0 12px rgba(255, 106, 61, 0.6)); }
}

/* parole del titolo che salgono una alla volta */
/* il titolo dell'apertura: una riga alla volta, quando l'insegna è accesa */
@keyframes fx-riga {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: none; }
}
.fx-riga {
  animation: fx-riga 0.9s var(--curva) both;
  animation-delay: calc(var(--parte, 0.5s) + var(--riga, 0) * 220ms);
}

/* ---------- l'insegna al neon della home ----------
   I tubi sono ricalcati dalla foto dell'insegna vera: carattere e
   spessore sono i suoi, ma piatti e puliti, senza la lastra. Ogni
   lettera ha il tubo spento (silicone lattiginoso, sempre visibile) e
   la luce: alone del colore, corpo chiaro, filo bianco al centro, come
   il LED nelle foto. La luce si accende a scatti con uno dei tre ritmi
   qui sotto (steps: il neon o c'è o non c'è); la "S" è stanca. */

.neon { fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.neon__tubo { stroke: rgba(236, 232, 240, 0.22); stroke-width: 11; }
.neon__luce { animation: neon-a 1.25s steps(1, end) var(--d) both; }
.neon__aura { stroke: var(--c); stroke-width: 11; filter: url(#neon-bagliore); }
.neon__corpo { stroke: var(--chiaro); stroke-width: 9.4; }
.neon__anima { stroke: #fff; stroke-width: 3.4; }

/* alone colorato sul muro: si accende con la sala, con un paio di sussulti */
.neon__alone {
  stroke-width: 30;
  filter: url(#neon-muro);
  opacity: 0.5;
  animation: neon-muro 2.6s steps(1, end) both;
}
@keyframes neon-muro {
  0% { opacity: 0; } 30% { opacity: 0.25; } 36% { opacity: 0; } 46% { opacity: 0.45; }
  50% { opacity: 0.1; } 62% { opacity: 0.4; } 100% { opacity: 0.5; }
}
.neon__lettera--b .neon__luce { animation-name: neon-b; animation-duration: 1.5s; }
.neon__lettera--c .neon__luce { animation-name: neon-c; }
.neon__lettera--guasta .neon__luce {
  animation: neon-a 1.25s steps(1, end) var(--d) both, neon-guasto 0.7s steps(1, end) 3.6s;
}

@keyframes neon-a {
  0% { opacity: 0; } 8% { opacity: 1; } 14% { opacity: 0; } 22% { opacity: 0.85; }
  28% { opacity: 0.1; } 46% { opacity: 1; } 52% { opacity: 0.45; } 58%, 100% { opacity: 1; }
}
@keyframes neon-b {
  0% { opacity: 0; } 12% { opacity: 0.7; } 16% { opacity: 0; } 42% { opacity: 1; } 46% { opacity: 0.25; }
  50% { opacity: 1; } 73% { opacity: 0.5; } 76%, 100% { opacity: 1; }
}
@keyframes neon-c {
  0% { opacity: 0; } 36% { opacity: 1; } 40% { opacity: 0.15; } 44%, 100% { opacity: 1; }
}
@keyframes neon-guasto {
  0% { opacity: 1; } 15% { opacity: 0.2; } 25% { opacity: 1; } 45% { opacity: 0.35; }
  55% { opacity: 1; } 70% { opacity: 0.6; } 80%, 100% { opacity: 1; }
}

/* la sala: parte al buio, sussulta con le prime lettere e si accende */
@keyframes sala {
  0%, 28% { opacity: 0.74; } 40% { opacity: 0.52; } 46% { opacity: 0.66; } 100% { opacity: 0; }
}
.hero__buio { animation: sala 2.7s ease-out both; }

/* toccando l'insegna si spegne e si riaccende (effetti.js) */
.neon-riavvia .neon__luce,
.neon-riavvia .neon__alone,
.neon-riavvia .hero__buio { animation: none; }

/* card che si inclinano verso il mouse (le variabili le scrive effetti.js) */
.fx-inclina {
  transform: perspective(900px) translateY(var(--alza, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  /* la comparsa (.fx-su) va ripetuta qui, o questa transition la cancella */
  transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva), scale 0.15s var(--curva),
              opacity var(--durata) var(--curva) var(--ritardo, 0s), translate var(--durata) var(--curva) var(--ritardo, 0s);
}
/* col dito non c'è l'inclinazione: la card cede alla pressione */
.fx-inclina:active { scale: 0.97; }
@media (hover: hover) {
  .fx-inclina:hover { --alza: -4px; box-shadow: 0 18px 40px rgba(227, 90, 46, 0.25); }
}

/* ---------- tocco: sul telefono non c'è il passaggio del mouse ---------- */

/* onda che parte dal punto toccato (la crea effetti.js, solo col dito) */
.fx-onda {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  transform: scale(0);
  pointer-events: none;
  animation: fx-onda 0.6s var(--curva) forwards;
}
@keyframes fx-onda { to { transform: scale(1); opacity: 0; } }

/* l'onda sostituisce il lampo grigio di sistema */
.navbar__cta, .bottone-filo, .contatto, .menu__card, .chip, .lingua,
.tab__voce, .piede__bottone, .storie__freccia, .storie__pausa {
  -webkit-tap-highlight-color: transparent;
}

/* foto dell'apertura che si assesta all'arrivo */
@keyframes fx-zoom { from { transform: scale(1.12); } to { transform: none; } }
.fx-zoom { animation: fx-zoom 2.8s var(--curva) both; }

/* appena a schermo i bottoni si accendono un attimo, per dire che si
   possono toccare: la classe la mette e la toglie effetti.js */
.bottone-filo.fx-lampo::before { top: -60%; left: -50%; }
.bottone-filo.fx-lampo { color: var(--grigio); }
.contatto.fx-lampo::before { top: 100%; left: 100%; }

/* la navbar, quando si stacca dall'apertura, si fa più scura */
.navbar { transition: background-color 0.35s ease, box-shadow 0.35s ease; }
.fx-staccata .navbar {
  background-color: rgba(0, 0, 0, 0.82);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

/* icone social: cedono alla pressione */
.footer__social a { transition: color 0.2s ease, scale 0.15s var(--curva); }
.footer__social a:active { scale: 0.85; }

/* nastri che si prendono in mano (main.js): in orizzontale il gesto è del
   nastro, in verticale resta lo scorrimento della pagina */
.nastro--presa { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.nastro--presa img { -webkit-user-drag: none; }
.nastro--tirato { cursor: grabbing; }
.vetrina__pista > .post { will-change: transform; }

/* ---------- chicche: spritz, cin cin, navbar con i CFU ---------- */

/* "Prenota!": a riposo un bicchiere vuoto col bordo arancio; al passaggio
   o al tocco si riempie di spritz, con l'onda e le bollicine. */
.navbar__cta.spritz { overflow: hidden; box-shadow: 0 0 16px rgba(255, 123, 28, 0.35); }
.navbar__cta.spritz { color: #fff; }
.navbar__cta.spritz > span:first-child { position: relative; z-index: 1; }
.spritz__liquido {
  position: absolute; z-index: 0; left: -10%; right: -10%; bottom: 0; height: 0;
  background: linear-gradient(180deg, #ff9a2e, #e8410f);
  transition: height 0.9s var(--curva);
}
/* l'onda in superficie si vede solo mentre il bicchiere si riempie */
.spritz__liquido::before {
  content: ''; position: absolute; left: 0; top: -8px; width: 200%; height: 9px;
  background: radial-gradient(11px 8px at 11px 9px, #ff9a2e 98%, transparent) 0 0 / 22px 9px repeat-x;
  opacity: 0; transition: opacity 0.3s;
  animation: spritz-onda 1.1s linear infinite;
}
@keyframes spritz-onda { to { transform: translateX(-22px); } }
.spritz__bolla {
  position: absolute; z-index: 0; bottom: -6px; left: 30%;
  width: 5px; height: 5px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.8); opacity: 0;
}
.spritz__bolla:nth-of-type(4) { left: 52%; width: 4px; height: 4px; }
.spritz__bolla:nth-of-type(5) { left: 70%; }
.spritz__bolla:nth-of-type(6) { left: 18%; width: 4px; height: 4px; }
.spritz.pieno .spritz__liquido { height: 115%; }
.spritz.pieno .spritz__liquido::before { opacity: 1; }
.spritz.pieno .spritz__bolla { animation: spritz-bolla 1.5s ease-in infinite; }
.spritz.pieno .spritz__bolla:nth-of-type(4) { animation-delay: 0.5s; }
.spritz.pieno .spritz__bolla:nth-of-type(5) { animation-delay: 0.9s; }
.spritz.pieno .spritz__bolla:nth-of-type(6) { animation-delay: 0.25s; }
@media (hover: hover) {
  .spritz:hover .spritz__liquido { height: 115%; }
  .spritz:hover .spritz__liquido::before { opacity: 1; }
  .spritz:hover .spritz__bolla { animation: spritz-bolla 1.5s ease-in infinite; }
  .spritz:hover .spritz__bolla:nth-of-type(4) { animation-delay: 0.5s; }
  .spritz:hover .spritz__bolla:nth-of-type(5) { animation-delay: 0.9s; }
  .spritz:hover .spritz__bolla:nth-of-type(6) { animation-delay: 0.25s; }
}
@keyframes spritz-bolla {
  0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(3px, -44px); }
}

/* "Guarda il menù": due calici di spritz arrivano accanto e brindano */
.menu__vai { position: relative; }
.cin {
  position: absolute; left: 100%; bottom: -8px; margin-left: 18px;
  width: 64px; height: 46px; pointer-events: none; color: var(--marrone);
}
.cin__calice { position: absolute; bottom: 0; width: 24px; height: 36px; opacity: 0; transform-origin: 50% 100%; }
.cin__calice--sx { left: 6px; }
.cin__calice--dx { left: 32px; }
.cin.brinda .cin__calice--sx { animation: brindisi-sx 1.3s var(--curva) both; }
.cin.brinda .cin__calice--dx { animation: brindisi-dx 1.3s var(--curva) both; }
@keyframes brindisi-sx {
  0% { opacity: 0; transform: translate(-22px, 8px) rotate(-6deg); } 25% { opacity: 1; }
  45% { transform: translate(0, 0) rotate(14deg); } 55% { transform: translate(-3px, 0) rotate(8deg); }
  85% { opacity: 1; } 100% { opacity: 0; transform: translate(-6px, -6px) rotate(8deg); }
}
@keyframes brindisi-dx {
  0% { opacity: 0; transform: translate(22px, 8px) rotate(6deg); } 25% { opacity: 1; }
  45% { transform: translate(0, 0) rotate(-14deg); } 55% { transform: translate(3px, 0) rotate(-8deg); }
  85% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -6px) rotate(-8deg); }
}
.cin__scintille { position: absolute; left: 32px; bottom: 40px; width: 0; height: 0; }
.cin__scintille i {
  position: absolute; width: 2px; height: 9px; border-radius: 2px;
  background: #ff9a2e; opacity: 0; transform-origin: 50% 0;
}
.cin.brinda .cin__scintille i { animation: scintilla 0.6s ease-out 0.55s both; }
@keyframes scintilla {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(3px) scaleY(0.4); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(16px) scaleY(1); }
}

/* colazione: la brioche arriva, si tuffa nel cappuccino e riemerge; la tazza fuma */
.cin__tazza { position: absolute; right: 2px; bottom: 0; width: 30px; height: 30px; opacity: 0; transform-origin: 50% 100%; }
.cin__brioche { position: absolute; left: 0; bottom: 18px; width: 30px; height: 19px; opacity: 0; transform-origin: 80% 60%; }
.cin__vapore path { opacity: 0; }
.cin--colazione.brinda .cin__tazza { animation: cin-tazza 1.5s var(--curva) both; }
.cin--colazione.brinda .cin__brioche { animation: cin-brioche 1.5s var(--curva) both; }
.cin--colazione.brinda .cin__vapore path { animation: cin-vapore 1.1s ease-out 0.45s both; }
.cin--colazione.brinda .cin__vapore path + path { animation-delay: 0.65s; }
@keyframes cin-tazza {
  0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; }
  46% { transform: rotate(-5deg); } 54% { transform: rotate(3deg); } 62% { transform: none; }
  85% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes cin-brioche {
  0% { opacity: 0; transform: translate(-22px, -4px) rotate(-10deg); } 22% { opacity: 1; }
  38% { transform: translate(6px, -2px) rotate(18deg); }
  48% { transform: translate(14px, 9px) rotate(38deg); }
  62% { transform: translate(6px, -4px) rotate(12deg); }
  85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, -8px) rotate(6deg); }
}
@keyframes cin-vapore {
  0% { opacity: 0; transform: translateY(2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); }
}

/* lunch: panino e lattina arrivano, si danno un colpetto e la cola frizza */
.cin__panino { position: absolute; left: 2px; bottom: 0; width: 30px; height: 22px; opacity: 0; transform-origin: 50% 100%; }
.cin__lattina { position: absolute; left: 38px; bottom: 0; width: 17px; height: 30px; opacity: 0; transform-origin: 50% 100%; }
.cin__bollicine { position: absolute; left: 46px; bottom: 30px; width: 0; height: 0; }
.cin__bollicine i {
  position: absolute; left: 0; bottom: 0; width: 4px; height: 4px; border-radius: 50%;
  border: 1.4px solid #e3242b; opacity: 0;
}
.cin--pranzo.brinda .cin__panino { animation: cin-panino 1.4s var(--curva) both; }
.cin--pranzo.brinda .cin__lattina { animation: cin-lattina 1.4s var(--curva) both; }
.cin--pranzo.brinda .cin__bollicine i { animation: cin-bolla 0.8s ease-out 0.6s both; }
.cin--pranzo.brinda .cin__bollicine i:nth-child(2) { animation-delay: 0.68s; --x: -6px; }
.cin--pranzo.brinda .cin__bollicine i:nth-child(3) { animation-delay: 0.76s; --x: 5px; }
.cin--pranzo.brinda .cin__bollicine i:nth-child(4) { animation-delay: 0.84s; --x: -2px; }
@keyframes cin-panino {
  0% { opacity: 0; transform: translateX(-20px); } 25% { opacity: 1; }
  45% { transform: translateX(6px) rotate(8deg); } 52% { transform: translateX(2px) scaleY(0.9); }
  62% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes cin-lattina {
  0% { opacity: 0; transform: translateX(20px); } 25% { opacity: 1; }
  45% { transform: translateX(-5px) rotate(-12deg); } 55% { transform: rotate(6deg); }
  65% { transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes cin-bolla {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 2px), -18px) scale(1.1); }
}

/* navbar: linea al neon sotto la sezione in cui sei */
.navbar { position: relative; }
.navbar__sottolinea {
  position: absolute; bottom: 12px; left: 0; width: 0; height: 2px; border-radius: 2px;
  background: #ffb38f; box-shadow: 0 0 6px var(--arancio), 0 0 14px var(--arancio);
  opacity: 0; transition: left 0.45s var(--curva), width 0.45s var(--curva), opacity 0.3s;
  pointer-events: none;
}
.navbar__sottolinea.accesa { opacity: 1; }
/* ...e i CFU: una barra sottile che si riempie con la pagina letta */
.navbar__cfu {
  position: absolute; left: 22px; right: 22px; bottom: 4px; height: 2px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.1); pointer-events: none;
}
.navbar__cfu-barra { display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--arancio); transform: scaleX(0); transform-origin: 0 50%; }
.navbar__cfu-numero {
  position: absolute; top: 10px; left: 0; transform: translateX(-50%);
  padding: 3px 8px; border-radius: 100px; background: rgba(0, 0, 0, 0.78);
  font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--grigio); white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; translate: 0 -4px; transition: opacity 0.3s, translate 0.3s var(--curva);
}
.navbar__cfu.mostra .navbar__cfu-numero { opacity: 1; translate: none; }

/* ---------- pagine menù ---------- */

/* la testata entra a scaglioni e il logo si accende come l'insegna */
@keyframes fx-entra {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: none; }
}
.testata .torna, .testata .marchio, .testata .orario, .testata .tab {
  animation: fx-entra 0.6s var(--curva) both;
}
.testata .marchio { animation-delay: 0.05s; }
.testata .orario  { animation-delay: 0.15s; }
.testata .tab     { animation-delay: 0.25s; }
.marchio img { animation: fx-accendi 1.6s linear 0.3s both; }

/* filo arancio sotto la barra delle categorie: dice quanto menù resta */
@keyframes fx-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  .barra-guscio::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--arancio);
    transform-origin: left;
    animation: fx-progresso linear both;
    animation-timeline: scroll(root);
  }
}

/* le voci entrano in cascata quando menu.js le disegna (--i lo scrive lui) */
@keyframes fx-voce {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: none; }
}
.voce { animation: fx-voce 0.5s var(--curva) both; animation-delay: calc(var(--i, 0) * 35ms); }

/* la pastiglia della categoria attiva scivola sotto le chip */
.barra { position: relative; }
.barra__pastiglia {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  z-index: 0;
  width: 0;
  border-radius: 100px;
  background: var(--marrone);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--curva), width 0.45s var(--curva), opacity 0.2s;
}
.barra .chip { position: relative; z-index: 1; }
/* con la pastiglia accesa la chip attiva non si riempie da sola (la
   macchia di bottoni.css resta fuori): il fondo è la pastiglia */
.barra.con-pastiglia .chip.attiva::before { top: 100%; left: 100%; }
.barra.con-pastiglia .chip.attiva::after { border-color: transparent; }
.barra.con-pastiglia .chip.attiva,
.barra.con-pastiglia .chip.attiva:hover { color: var(--grigio); }

/* ---------- chi preferisce meno movimento: tutto fermo e visibile ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fx-su, .fx-righe .fx-parolina, .fx-filo::after { opacity: 1; translate: none; transform: none; transition: none; }
  .neon__lettera .neon__luce, .neon__alone, .hero__buio,   /* .neon__lettera: batte i ritmi --b, --c e --guasta */
  .fx-riga, .voce, .fx-zoom,
  .testata .torna, .testata .marchio, .testata .orario, .testata .tab, .marchio img { animation: none; }
  .fx-onda { display: none; }
  .post--scoppio .post__scoppio svg, .post--piace .post__mi-piace .post__icona { animation: none; }
  .cin { display: none; }
  .spritz__liquido, .navbar__sottolinea { transition: none; }
  .spritz__liquido::before, .spritz__bolla { animation: none !important; }
  .fx-inclina { transform: none; }
  .barra__pastiglia { transition: none; }
}