/* =========================================================
   Bottoni animati — un unico posto per tutto il sito.

   L'idea è quella della component di Uiverse: una macchia tonda
   che scorre in diagonale da sotto-destra e riempie il bottone.

   Qui è applicata in due versi:

   · bottoni VUOTI (bordo colorato, dentro trasparente)
     la macchia ENTRA: il bottone si riempie e il testo si schiarisce.

   · bottoni PIENI (fondo colorato, testo chiaro)
     la macchia ESCE: è la stessa animazione al contrario. Il colore
     di fondo non è più sullo sfondo del bottone ma dentro la macchia,
     così quando se ne va il bottone resta davvero vuoto — si vede
     quello che c'è dietro, non un colore finto — e resta il bordo.

   In tutti i casi lo stato a riposo è identico a prima: cambia
   solo quello che succede al passaggio del mouse.

   Il movimento usa la stessa curva morbida per tutti, così i
   bottoni del sito sembrano parenti fra loro.
   ========================================================= */

:root {
  --btn-curva: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-tempo: 0.42s;
}

/* ---------------------------------------------------------
   1. La meccanica, uguale per tutti
   --------------------------------------------------------- */

.navbar__cta,
.bottone-filo,
.contatto,
.piede__bottone,
.chip,
.lingua,
.tab__voce {
  position: relative;
  z-index: 1;
  isolation: isolate;   /* la macchia resta affare interno del bottone */
  /* opacity e translate servono alla comparsa di stile-base.css (.fx-su) */
  transition: color 0.28s ease, scale 0.15s var(--btn-curva),
              opacity var(--durata) var(--curva) var(--ritardo, 0s), translate var(--durata) var(--curva) var(--ritardo, 0s);
}

/* alla pressione il bottone cede un attimo: col dito è l'unico segnale
   che il tocco è arrivato */
.navbar__cta:active,
.bottone-filo:active,
.contatto:active,
.piede__bottone:active,
.chip:active,
.lingua:active,
.tab__voce:active {
  scale: 0.95;
}

/* ogni bottone taglia la macchia sul proprio bordo */
.navbar__cta,
.bottone-filo,
.contatto,
.piede__bottone,
.chip,
.lingua,
.tab__voce {
  overflow: hidden;
}

/* Frecce e pausa del carosello fanno eccezione: la loro posizione (assoluta,
   dentro la vetrina) e il loro z-index arrivano gia' da style.css. Qui vanno
   solo isolate e ritagliate, altrimenti si riportano in flusso e finiscono
   sotto la card. */
.storie__freccia,
.storie__pausa {
  isolation: isolate;
  overflow: hidden;
  transition: color 0.28s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* la macchia */
.bottone-filo::before,
.contatto::before,
.storie__freccia::before,
.storie__pausa::before,
.piede__bottone::before,
.chip::before,
.lingua::before,
.tab__voce::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 200%;
  height: 500%;
  border-radius: 50%;
  background: var(--btn-macchia, currentColor);
  transition: top var(--btn-tempo) var(--btn-curva),
              left var(--btn-tempo) var(--btn-curva);
  pointer-events: none;
}

/* posizione a riposo: fuori in basso a destra per i vuoti,
   sopra il bottone per i pieni (che infatti sembrano pieni) */
.bottone-filo::before,
.storie__freccia::before,
.storie__pausa::before,
.piede__bottone::before,
.chip::before,
.lingua::before,
.tab__voce::before {
  top: 100%;
  left: 100%;
}

.contatto::before,
.chip.attiva::before,
.lingua.attiva::before,
.piede__bottone--pieno::before,
.tab__voce[aria-current='page']::before {
  top: -60%;
  left: -50%;
}

/* il bordo dei bottoni pieni: sta sopra la macchia, quindi resta
   visibile quando il colore se ne va. A riposo non si nota, perché
   è dello stesso colore del riempimento. */
.navbar__cta::after,
.contatto::after,
.piede__bottone--pieno::after,
.chip.attiva::after,
.lingua.attiva::after,
.tab__voce[aria-current='page']::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--btn-bordo, currentColor);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------------------------------------------------------
   2. I colori, bottone per bottone
   --------------------------------------------------------- */

/* --- home --- */

/* Prenota! — pieno arancione, si svuota sulla navbar sfocata */
.navbar__cta {
  background: none;
  --btn-bordo: #ff7b1c;
}

/* Chiamaci! — vuoto, si riempie di arancione */
.bottone-filo {
  --btn-macchia: var(--arancio);
}

/* Telefono e Whatsapp — pieni bianchi, si svuotano sulla sezione.
   Sotto non c'è la foto ma il grigio chiaro della pagina (#efefef):
   il bordo e il testo restano quindi arancioni, perché in bianco
   sparirebbero. */
.contatto {
  background: none;
  --btn-macchia: var(--bianco);
  --btn-bordo: var(--arancio);
}

/* Frecce e pausa del carosello: qui il verso è quello dei vuoti, non
   dei pieni. Svuotarli toglierebbe il velo scuro che li rende leggibili
   sopra le foto, e al passaggio del mouse un comando deve risaltare di
   più, non di meno. Il velo di partenza resta quello di prima. */
.storie__freccia,
.storie__pausa {
  --btn-macchia: rgba(0, 0, 0, 0.75);
}

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

/* Come arrivare, Instagram — vuoti sul fondo arancione */
.piede__bottone {
  --btn-macchia: var(--grigio);
}

/* Prenota un tavolo — pieno, si svuota sull'arancione del piede */
.piede__bottone--pieno {
  background: none;
  --btn-macchia: var(--grigio);
  --btn-bordo: var(--grigio);
}

/* categorie: quella su cui si sta è piena, le altre vuote */
.chip,
.lingua {
  --btn-macchia: var(--marrone);
}

.chip.attiva,
.lingua.attiva {
  background: none;
  --btn-bordo: var(--marrone);
}

/* le tre linguette in testata */
.tab__voce {
  --btn-macchia: var(--accento);
}

.tab__voce[aria-current='page'] {
  background: none;
  --btn-macchia: var(--accento);
  --btn-bordo: var(--accento);
}

/* ---------------------------------------------------------
   3. Cosa succede al passaggio del mouse
   --------------------------------------------------------- */

@media (hover: hover) {

  /* i vuoti si riempiono: la macchia entra */
  .bottone-filo:hover::before,
  .piede__bottone:hover::before,
  .chip:hover::before,
  .lingua:hover::before,
  .tab__voce:hover::before {
    top: -60%;
    left: -50%;
  }

  /* i pieni si svuotano: la macchia esce dalla parte opposta */
  .contatto:hover::before,
  .piede__bottone--pieno:hover::before,
  .chip.attiva:hover::before,
  .lingua.attiva:hover::before,
  .tab__voce[aria-current='page']:hover::before {
    top: 100%;
    left: 100%;
  }

  .storie__freccia:hover::before,
  .storie__pausa:hover::before {
    top: -60%;
    left: -50%;
  }

  /* i colori del testo dopo il passaggio */
  .bottone-filo:hover { color: var(--grigio); }
  /* il contatto tiene i suoi colori: erano già arancioni e restano
     leggibili sul grigio chiaro che compare quando il bianco se ne va */
  .piede__bottone:hover { background: none; color: var(--arancio); }
  .piede__bottone--pieno:hover { background: none; color: var(--grigio); }
  .chip:hover { background: none; color: var(--grigio); }
  .chip.attiva:hover { color: var(--marrone); }
  .lingua:hover { color: var(--grigio); }
  .lingua.attiva:hover { color: var(--marrone); }
  .tab__voce:hover { background: rgba(239, 239, 239, 0.08); color: var(--marrone); }
  .tab__voce[aria-current='page']:hover { color: var(--accento); }
}

/* Stessa cosa per chi naviga con il tasto Tab: l'effetto non è solo
   per il mouse. Il contorno di sistema resta, serve a capire dove si è. */
.bottone-filo:focus-visible::before,
.piede__bottone:focus-visible::before,
.chip:focus-visible::before,
.lingua:focus-visible::before,
.tab__voce:focus-visible::before {
  top: -60%;
  left: -50%;
}

.contatto:focus-visible::before,
.piede__bottone--pieno:focus-visible::before,
.chip.attiva:focus-visible::before,
.lingua.attiva:focus-visible::before,
.tab__voce[aria-current='page']:focus-visible::before {
  top: 100%;
  left: 100%;
}

.storie__freccia:focus-visible::before,
.storie__pausa:focus-visible::before {
  top: -60%;
  left: -50%;
}

/* ---------------------------------------------------------
   4. Chi ha chiesto meno animazioni ne riceve meno:
   niente scorrimento, solo il cambio di colore.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bottone-filo::before,
  .contatto::before,
  .storie__freccia::before,
  .storie__pausa::before,
  .piede__bottone::before,
  .chip::before,
  .lingua::before,
  .tab__voce::before {
    transition: none;
  }
}