/* Finestra a equalizzatore: le barre del logo Vibra con una foto dentro che "balla".
   Uso: <span class="eqw" data-eqw="assets/img/alt/club-pista.jpg" role="img" aria-label="..."></span>
   Varianti: .eqw--block (riempie il contenitore), data-bars="7" (numero di barre).
   Le barre sono create da assets/js/eq-window.js. */

@property --eqw-h { syntax: "<number>"; inherits: false; initial-value: 1; }

.eqw {
  --eqw-gap: .08em;
  display: inline-flex; align-items: flex-end; gap: var(--eqw-gap);
  width: 2.3em; height: .98em;              /* in linea col testo: misure in em */
  vertical-align: baseline;
}
.eqw--block {                                 /* blocco: misure dal contenitore */
  --eqw-gap: clamp(6px, 1.2vw, 18px);
  display: flex; width: 100%; height: 100%;
}

.eqw__bar {
  flex: 1; height: 100%;
  background-repeat: no-repeat;             /* immagine, misura e posizione le mette lo script */
  --eqw-h: var(--eqw-a);
  clip-path: inset(calc((1 - var(--eqw-h)) * 100%) 0 0 0 round 99em 99em 0 0);
}

/* entrata: le barre salgono dalla base (una volta, quando la finestra entra nello schermo) */
.eqw.is-ready .eqw__bar { clip-path: inset(100% 0 0 0 round 99em 99em 0 0); }
.eqw.is-in .eqw__bar {
  clip-path: inset(calc((1 - var(--eqw-h)) * 100%) 0 0 0 round 99em 99em 0 0);
  transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) calc(var(--eqw-k) * 70ms);
}

/* il ballo: ogni barra oscilla tra la sua altezza nel logo e un'altra */
.eqw.is-dancing .eqw__bar { animation: eqw-dance var(--eqw-d) ease-in-out infinite alternate; transition: none; }
.eqw.is-paused .eqw__bar { animation-play-state: paused; }
@keyframes eqw-dance { from { --eqw-h: var(--eqw-a); } to { --eqw-h: var(--eqw-b); } }

@media (prefers-reduced-motion: reduce) {
  .eqw .eqw__bar { animation: none !important; transition: none !important;
    clip-path: inset(calc((1 - var(--eqw-a)) * 100%) 0 0 0 round 99em 99em 0 0) !important; }
}