/* ===========================================================================
   MARCA_77500_GALLERIA_MUSICA -- il lettore della musica nella galleria
   del cliente (D174, 18 settembre 2026).
   MARCA_77560_MUSICA_PIU_BRANI (19 settembre 2026): piu' brani, l'elenco
   per scegliere, le onde animate (D178, componenti di 21st.dev rifatti
   in CSS semplice).

   FOGLIO SUO, non dentro modern-theme.css: questa e' una cosa nuova, e
   un foglio a parte si spegne e si riaccende senza toccare il vestito di
   tutte le gallerie. Si carica SOLO quando la galleria ha una musica.

   I COLORI SONO QUELLI DELLA GALLERIA (77560). Fino a ieri il lettore era
   una pastiglia scura uguale dappertutto; adesso prende i colori della
   galleria che sta guardando il cliente -- fondo (--surface), testo
   (--ink), bordo (--line) e COLORE D'ACCENTO (--accent), quello che ogni
   stile e ogni tema hanno gia': chiaro o scuro, Mosaico o Pellicola, il
   lettore si veste come la pagina. Ogni variabile ha un ripiego scritto
   qui accanto (var(--surface, #17171b)): se un tema un giorno non la
   definisse, il bordo NON sparisce in silenzio (e' successo davvero, il
   13/9) e il lettore resta leggibile, scuro. Nessun colore vero e'
   scritto a mano, tranne nel visore a schermo intero (vedi in fondo),
   che e' nero per tutti.

   COME E' FATTO. Due righe:
     1. IN ALTO i comandi (precedente, play, successivo), il titolo con
        «Brano N di M», il volume e il tasto dell'elenco;
     2. SOTTO le onde animate, con il tempo passato e la durata ai lati e
        la barra sottile con il pallino lungo il bordo di sotto: e' un
        comando solo (si clicca o si trascina, dito compreso).
   Sul telefono e' la stessa cosa, senza la barretta del volume (sul
   telefono il volume lo si fa coi tasti del telefono).

   DOVE STA. In fondo allo schermo, sotto le foto -- «nella galleria
   sotto la slide» (Giovanni). Quando si apre il visore a schermo
   intero diventa piccolo e si sposta in basso a sinistra, dove non
   copre ne' la fila dei comandi (Auto, 1x, due affiancate, che sta in
   mezzo) ne' il tasto del cuore.
   =========================================================================== */

.gal-musica {
  /* --- i colori: quelli della galleria, con il ripiego scuro --- */
  --gm-fondo: var(--surface, #17171b);
  --gm-testo: var(--ink-strong, var(--ink, #f2f0ee));
  --gm-accento: var(--accent, #c9a227);
  --gm-su-accento: var(--on-accent, #14120c);
  --gm-bordo: rgba(127, 127, 127, .34);
  --gm-barra: rgba(127, 127, 127, .42);
  --gm-testo-2: rgba(127, 127, 127, .95);
  --gm-velo: rgba(127, 127, 127, .14);
  --gm-accento-tenue: rgba(127, 127, 127, .2);

  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 950;                 /* il visore e' 900: il lettore ci sta sopra */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "comandi testi extra"
    "onda onda onda";
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  width: min(640px, calc(100vw - 24px));
  padding: 9px 14px 8px;
  border-radius: 22px;
  background: var(--gm-fondo);
  color: var(--gm-testo);
  border: 1px solid var(--gm-bordo);
  box-shadow: 0 14px 38px -14px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .10);
  font-size: 13px;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, width .25s ease,
              left .25s ease, bottom .25s ease;
}

/* Le tinte che si ricavano dal testo e dal colore d'accento: dove il
   browser sa mescolare i colori (tutti quelli di oggi) si mescolano, e
   seguono la galleria; altrove restano i grigi trasparenti qui sopra,
   che vanno bene sul chiaro e sullo scuro. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .gal-musica {
    --gm-bordo: color-mix(in srgb, var(--gm-testo) 20%, transparent);
    --gm-barra: color-mix(in srgb, var(--gm-testo) 26%, transparent);
    --gm-testo-2: color-mix(in srgb, var(--gm-testo) 70%, var(--gm-fondo));
    --gm-velo: color-mix(in srgb, var(--gm-testo) 9%, transparent);
    --gm-accento-tenue: color-mix(in srgb, var(--gm-accento) 20%, transparent);
  }
}

/* Compare solo quando il brano e' pronto: un lettore che appare vuoto e
   poi si riempie sembra rotto. */
.gal-musica.gal-musica-pronta { opacity: 1; pointer-events: auto; }

/* L'azzeramento dei pulsanti sta dentro :where(): non pesa niente, e le
   regole con il nome della classe (il colore del play, il fondo del tasto
   dell'elenco) vincono senza bisogno di trucchi. Scritto come
   ".gal-musica button" il play restava senza il suo cerchio colorato
   (visto in una schermata, non nel codice). */
:where(.gal-musica) button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Il segno di tastiera: visibile, con il colore d'accento. */
.gal-musica button:focus-visible,
.gal-musica-onda:focus-visible,
.gal-musica input[type="range"]:focus-visible {
  outline: 2px solid var(--gm-accento);
  outline-offset: 2px;
}

/* --- i comandi: precedente, play, successivo -------------------------- */
.gal-musica-comandi {
  grid-area: comandi;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gal-musica-play {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gm-accento);
  color: var(--gm-su-accento);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.gal-musica-play:hover { transform: scale(1.06); }
.gal-musica-play svg { width: 17px; height: 17px; fill: currentColor; }

.gal-musica-prec,
.gal-musica-succ {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gm-testo);
}
.gal-musica-prec:hover,
.gal-musica-succ:hover { background: var(--gm-velo); }
.gal-musica-prec svg,
.gal-musica-succ svg { width: 17px; height: 17px; fill: currentColor; }

/* --- il titolo e «Brano N di M» --------------------------------------- */
.gal-musica-testi { grid-area: testi; min-width: 0; }

.gal-musica-titolo {
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gm-testo);
}

.gal-musica-posizione {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--gm-testo-2);
  white-space: nowrap;
}

/* --- volume e tasto dell'elenco --------------------------------------- */
.gal-musica-extra {
  grid-area: extra;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gal-musica-volume {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gal-musica-muto {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--gm-testo-2);
}
.gal-musica-muto:hover { color: var(--gm-testo); background: var(--gm-velo); }
.gal-musica-muto svg { width: 17px; height: 17px; fill: currentColor; }
.gal-musica-volume-barra { width: 74px; }

.gal-musica-elenco-tasto {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  color: var(--gm-testo);
  background: var(--gm-velo);
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.gal-musica-elenco-tasto:hover,
.gal-musica-elenco-tasto[aria-expanded="true"] {
  background: var(--gm-accento-tenue);
}
.gal-musica-elenco-tasto svg { width: 17px; height: 17px; fill: currentColor; }

/* --- la barra dell'avanzamento del volume ----------------------------- */
.gal-musica input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;                 /* spazio per il dito, la riga resta sottile */
  background: none;
  margin: 0;
  cursor: pointer;
}
.gal-musica input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--gm-accento) var(--gal-musica-riempito, 0%),
    var(--gm-barra) var(--gal-musica-riempito, 0%));
}
.gal-musica input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--gm-barra);
}
.gal-musica input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--gm-accento);
}
.gal-musica input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gm-accento);
  margin-top: -3.5px;
  box-shadow: 0 0 0 2px var(--gm-fondo);
}
.gal-musica input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--gm-accento);
  box-shadow: 0 0 0 2px var(--gm-fondo);
}

/* --- LE ONDE ANIMATE (D178) --------------------------------------------
   Sotto ci sono i due tempi e in mezzo il comando: le barrette (le
   disegna il JS, quante ce ne stanno) e, lungo il bordo di sotto, la
   barra sottile con il pallino. La parte gia' suonata e' piena, il resto
   e' spento. Un comando solo: si clicca o si trascina. */
.gal-musica-onda-riga {
  grid-area: onda;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gal-musica-tempo {
  flex: 0 0 auto;
  min-width: 32px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-testo-2);
}
.gal-musica-durata { text-align: right; }

.gal-musica-onda {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  cursor: pointer;
  /* Il dito che scorre in verticale muove la pagina; in orizzontale
     muove il brano. */
  touch-action: pan-y;
  border-radius: 6px;
  -webkit-user-select: none;
  user-select: none;
}
.gal-musica-onda[aria-disabled="true"] { cursor: default; }

.gal-musica-barre {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gal-musica-barra {
  flex: 1 1 0;
  min-width: 2px;
  height: calc(var(--h, .5) * 100%);
  border-radius: 2px;
  background: var(--gm-barra);
  transform-origin: 50% 50%;
}
.gal-musica-barra-fatta { background: var(--gm-accento); }

/* «Respirano» mentre il brano suona: ognuna col suo passo (--t), a suo
   tempo (--d) e per quanto (--r, quanto si abbassa). Solo transform:
   niente ricalcolo della pagina. In pausa STANNO FERME dove sono.
   Prima che il brano sia mai partito non c'e' nessuna animazione: le
   onde sono esattamente il disegno del brano. */
@keyframes gal-musica-respira {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(var(--r, .72)); }
}
.gal-musica-ha-suonato .gal-musica-barra {
  animation: gal-musica-respira var(--t, 1.4s) ease-in-out var(--d, 0s) infinite;
  animation-play-state: paused;
}
.gal-musica-suona .gal-musica-barra { animation-play-state: running; }

/* La barra sottile lungo il bordo di sotto, col pallino. */
.gal-musica-linea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--gm-barra);
}
.gal-musica-linea-piena {
  display: block;
  height: 100%;
  width: var(--gal-musica-riempito, 0%);
  border-radius: 999px;
  background: var(--gm-accento);
}
.gal-musica-suona:not(.gal-musica-tocco) .gal-musica-linea-piena {
  transition: width .3s linear;
}
.gal-musica-testina {
  position: absolute;
  top: 50%;
  left: var(--gal-musica-riempito, 0%);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--gm-accento);
  box-shadow: 0 0 0 2px var(--gm-fondo);
  transition: transform .12s ease;
}
.gal-musica-onda:hover .gal-musica-testina,
.gal-musica-tocco .gal-musica-testina { transform: scale(1.25); }

/* --- L'ELENCO DEI BRANI (il selettore) --------------------------------
   Si apre sopra il lettore, largo come lui. Un titolo per riga, alto
   abbastanza da toccarlo col dito. Il brano che suona ha il fondo del
   colore d'accento e tre barrette che si muovono al posto del numero. */
.gal-musica-elenco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
  border-radius: 18px;
  background: var(--gm-fondo);
  color: var(--gm-testo);
  border: 1px solid var(--gm-bordo);
  box-shadow: 0 14px 38px -14px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .10);
}
.gal-musica-elenco[hidden] { display: none; }

.gal-musica-elenco-intesta {
  padding: 4px 12px 6px;
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gm-testo-2);
}

.gal-musica-brani {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gal-musica-brano {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  text-align: left;
  color: var(--gm-testo);
}
.gal-musica-brano:hover { background: var(--gm-velo); }
.gal-musica-brano[aria-current="true"] {
  background: var(--gm-accento-tenue);
  font-weight: 650;
}

.gal-musica-brano-n,
.gal-musica-brano-eq {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--gm-testo-2);
}
.gal-musica-brano-eq {
  display: none;
  height: 14px;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}
.gal-musica-brano-eq i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--gm-accento);
  transform-origin: 50% 100%;
  transform: scaleY(.45);
}
.gal-musica-brano[aria-current="true"] .gal-musica-brano-n { display: none; }
.gal-musica-brano[aria-current="true"] .gal-musica-brano-eq { display: flex; }

@keyframes gal-musica-eq {
  0%, 100% { transform: scaleY(.3); }
  50% { transform: scaleY(1); }
}
.gal-musica-suona .gal-musica-brano[aria-current="true"] .gal-musica-brano-eq i {
  animation: gal-musica-eq .9s ease-in-out infinite;
}
.gal-musica-suona .gal-musica-brano[aria-current="true"] .gal-musica-brano-eq i:nth-child(2) { animation-delay: -.3s; }
.gal-musica-suona .gal-musica-brano[aria-current="true"] .gal-musica-brano-eq i:nth-child(3) { animation-delay: -.6s; }

.gal-musica-brano-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- il telefono ---------------------------------------------------------
   Il volume NON c'e': sul telefono lo si fa con i tasti del telefono, e
   una barretta in piu' toglierebbe spazio al titolo. Resta il tasto del
   muto, che serve davvero (musica addosso in mezzo alla gente). */
@media (max-width: 640px) {
  .gal-musica {
    width: calc(100vw - 20px);
    column-gap: 8px;
    padding: 8px 12px 7px;
    border-radius: 20px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }
  .gal-musica-volume-barra { display: none; }
  .gal-musica-prec, .gal-musica-succ { width: 30px; height: 30px; }
  .gal-musica-play { width: 36px; height: 36px; }
  .gal-musica-onda-riga { gap: 8px; }
}

/* --- dentro il visore a schermo intero -----------------------------------
   Piccolo e in basso a sinistra: la fila dei comandi del visore sta in
   mezzo e il cuore appena sopra, quindi qui non si copre niente. Resta il
   play/pausa, il titolo e un filo di onde -- si puo' ancora fermare la
   musica mentre si guardano le foto grandi. Il visore e' NERO per tutti
   gli stili, quindi qui (e solo qui) il lettore e' scuro: un lettore
   color carta sopra il nero salterebbe agli occhi. */
.gal-musica.gal-musica-compatta,
.gal-musica.gal-musica-ripiego {
  --gm-fondo: #17171b;
  --gm-testo: #f2f0ee;
  --gm-accento: var(--accent-bright, var(--accent, #c9a227));
  --gm-su-accento: #14120c;
  --gm-bordo: rgba(255, 255, 255, .16);
  --gm-barra: rgba(255, 255, 255, .28);
  --gm-testo-2: rgba(255, 255, 255, .7);
  --gm-velo: rgba(255, 255, 255, .12);
  --gm-accento-tenue: rgba(255, 255, 255, .2);
}
.gal-musica.gal-musica-compatta {
  left: 12px;
  transform: none;
  width: min(250px, calc(100vw - 24px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding: 7px 12px 6px 7px;
  column-gap: 9px;
  row-gap: 2px;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "comandi testi"
    "onda onda";
  border-radius: 18px;
}
.gal-musica.gal-musica-compatta .gal-musica-extra,
.gal-musica.gal-musica-compatta .gal-musica-tempo,
.gal-musica.gal-musica-compatta .gal-musica-prec,
.gal-musica.gal-musica-compatta .gal-musica-succ,
.gal-musica.gal-musica-compatta .gal-musica-posizione,
.gal-musica.gal-musica-compatta .gal-musica-elenco { display: none; }
.gal-musica.gal-musica-compatta .gal-musica-play { width: 32px; height: 32px; }
.gal-musica.gal-musica-compatta .gal-musica-play svg { width: 14px; height: 14px; }
.gal-musica.gal-musica-compatta .gal-musica-titolo { font-size: 11.5px; }
.gal-musica.gal-musica-compatta .gal-musica-onda { height: 18px; }
.gal-musica.gal-musica-compatta .gal-musica-barre { height: 13px; }
.gal-musica.gal-musica-compatta .gal-musica-linea { bottom: 1px; height: 2px; }
.gal-musica.gal-musica-compatta .gal-musica-testina { display: none; }

/* Sul telefono, dentro il visore, in fondo NON c'e' posto: la fila dei
   comandi comincia a 105 punti dal bordo sinistro e il lettore le
   finirebbe sopra (visto in una schermata, non immaginato). Quindi
   sale in ALTO a sinistra, sotto il conta-foto: li' non c'e' niente. */
@media (max-width: 640px) {
  .gal-musica.gal-musica-compatta {
    width: 190px;
    left: 8px;
    top: 56px;
    bottom: auto;
    padding: 6px 10px 5px 6px;
  }
}

/* --- quello che c'era gia' in fondo allo schermo -------------------------
   La pastiglia «N foto scelte» (.gal-volante) e l'avviso del tetto
   stanno in fondo al centro: con il lettore acceso salgono di quanto
   basta a non finirci sotto. QUANTO lo misura il lettore (--gal-musica-
   occupa, in punti): alto due righe com'e' adesso, e' piu' di una
   pastiglia. Se la misura non c'e', valgono i numeri di sempre. Si scrive
   QUI e non in modern-theme.css: senza musica quel foglio non viene
   nemmeno caricato, e tutto resta come oggi. */
body.gal-musica-c-e .gal-volante { bottom: var(--gal-musica-occupa, 86px); }
body.gal-musica-c-e .gal-avviso-tetto { bottom: calc(var(--gal-musica-occupa, 86px) + 52px); }
/* La freccia in fondo alla copertina («scendi alle foto»): senza questa
   riga finiva proprio sotto la pastiglia -- visto in una schermata. */
body.gal-musica-c-e .gal-apertura-giu { bottom: calc(var(--gal-musica-occupa, 86px) + 6px); }
/* Gli avvisi che il programma scrive dentro la pagina (foto scelta,
   link copiato): salgono anche loro invece di finire sotto. */
body.gal-musica-c-e #avvisi { bottom: var(--gal-musica-occupa, 86px); }
/* E le ultime foto della pagina non restano nascoste sotto il lettore. */
body.gal-musica-c-e { padding-bottom: calc(var(--gal-musica-occupa, 86px) - 12px); }

/* Chi ha chiesto di non far muovere le animazioni: niente movimento
   (ne' le onde, ne' i tre pallini dell'elenco, ne' le transizioni).
   Avanza soltanto la parte piena. */
@media (prefers-reduced-motion: reduce) {
  .gal-musica,
  .gal-musica-linea-piena,
  .gal-musica-testina { transition: none; }
  .gal-musica-play:hover { transform: none; }
  .gal-musica-barra,
  .gal-musica-ha-suonato .gal-musica-barra,
  .gal-musica-suona .gal-musica-barra,
  .gal-musica-suona .gal-musica-brano[aria-current="true"] .gal-musica-brano-eq i {
    animation: none !important;
  }
  .gal-musica-brano-eq i { transform: scaleY(.7); }
}

/* --- MARCA_77762_AVVIO_ROBUSTO (20/9/2026, D206) ---------------------------
   L'INVITO sopra il lettore: «Tocca per ascoltare la musica». Compare solo
   quando la musica non e' partita da sola (il browser ha detto no) e sparisce
   appena parte. E' un pulsante vero. Sta FUORI dal lettore (sopra, a sinistra),
   quindi non sposta niente dentro: usa gli stessi colori del tasto play. Un
   leggero battito sul play, fermo per chi ha chiesto meno movimento. --- */
.gal-musica-invito { display: none; }
.gal-musica.gal-musica-in-attesa .gal-musica-invito {
  display: block;
  position: absolute;
  left: 14px;
  bottom: calc(100% + 8px);
  max-width: calc(100% - 28px);
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gm-accento);
  color: var(--gm-su-accento);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .55);
  animation: gal-musica-invito-entra .35s ease both;
}
.gal-musica.gal-musica-in-attesa .gal-musica-play {
  animation: gal-musica-battito 1.9s ease-in-out infinite;
}
.gal-musica.gal-musica-compatta .gal-musica-invito { display: none !important; }
@keyframes gal-musica-invito-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes gal-musica-battito {
  0%, 100% { box-shadow: 0 0 0 0 var(--gm-bordo); }
  50% { box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-musica.gal-musica-in-attesa .gal-musica-invito { animation: none; }
  .gal-musica.gal-musica-in-attesa .gal-musica-play { animation: none; }
}