/* I BOTTONI SULL'ARANCIO, su tutte le pagine (Francesco, 23/10/2026: «su arancione, scritte bianche, anche nel footer, e i
   pulsanti: bordo e, in hover, bianco pieno»). Il piede, la chiusa dei progetti, la musica di Chi sono: solo il bordo crema
   (il bianco del brand, ⛔ #fff), il --pieno compreso. L'hover è UN gesto: la crema sale dal fondo e se ne va dall'alto
   (un velo che scorre, ⛔ una dissolvenza), la scritta passa al nero, la freccia avanza.
   Arriva dopo gli stili della pagina e dopo piede.css (build_sito.py); l'html davanti vince sulle regole di pagina.
   ⛔ Altre regole .bottone in piede.css, chiusa.css o nelle pagine: un :hover più specifico qui sopra cancellerebbe il gesto. */
html :is(.piede,.chiusa,.chi-musica) .bottone{position:relative;isolation:isolate;overflow:hidden;background:transparent;border-color:var(--crema);color:var(--crema);
  transition:color .45s cubic-bezier(.16,1,.3,1)}
html :is(.piede,.chiusa,.chi-musica) .bottone::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--crema);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .55s cubic-bezier(.16,1,.3,1)}
html :is(.piede,.chiusa,.chi-musica) .bottone:focus-visible{background:transparent;border-color:var(--crema);color:var(--nero)}
html :is(.piede,.chiusa,.chi-musica) .bottone:focus-visible::before,
html :is(.piede,.chiusa,.chi-musica) .bottone:active::before{transform:scaleY(1);transform-origin:50% 100%}
html :is(.piede,.chiusa,.chi-musica) .bottone:active{color:var(--nero)}
@media (hover:hover){
  html :is(.piede,.chiusa,.chi-musica) .bottone:hover{background:transparent;border-color:var(--crema);color:var(--nero)}
  html :is(.piede,.chiusa,.chi-musica) .bottone:hover::before{transform:scaleY(1);transform-origin:50% 100%}
}
@media (prefers-reduced-motion:reduce){html :is(.piede,.chiusa,.chi-musica) .bottone::before{transition-duration:.01s}}