/* Movimento: entrate con dissolvenza + spostamento + leggera scala, una dopo l'altra,
   curva che parte veloce e si posa piano. Disattivato da "riduci movimento" (vedi styles.css). */
:root { --molla: cubic-bezier(.16, 1, .3, 1); }

@keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes entra-riga { from { opacity: 0; transform: translateX(-10px); } }
@keyframes cresci { from { transform: scaleX(0); } }
@keyframes sale { from { opacity: 0; transform: translateY(24px) scale(.96); } }

.entra { animation: entra .6s var(--molla) both; animation-delay: calc(var(--i, 0) * 60ms); }
.entra-riga { animation: entra-riga .5s var(--molla) both; animation-delay: calc(240ms + var(--j, 0) * 45ms); }

/* barre che crescono da sinistra: termometro, cascata dei soldi, magro/normale/grosso */
.termo-fill, .casc-bar span, .gruppi span { transform-origin: left center; animation: cresci .9s var(--molla) both; animation-delay: .25s; }
.casc-riga .casc-bar span { animation-delay: calc(.3s + var(--j, 0) * 70ms); }
.entra-riga .casc-bar span { animation-delay: calc(.35s + var(--j, 0) * 70ms); }
.gruppi span:nth-child(2) { animation-delay: .35s; }
.gruppi span:nth-child(3) { animation-delay: .45s; }

/* il verdetto arriva per primo e un po' più marcato */
.verdetto.entra { animation-name: sale; animation-duration: .75s; }

/* pressione tattile su schede e righe toccabili */
a.riga-c, a.riga, .grande-scelta, .chip, .btn { transition: transform .18s var(--molla), background .15s, border-color .15s; }
a.riga-c:active, a.riga:active { transform: scale(.99); }

/* avviso di nuova versione */
.nuova-versione {
  position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); z-index: 80; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; max-width: calc(100% - 24px);
  background: var(--testo); color: var(--bg); font-weight: 600; font-size: 15px; box-shadow: 0 12px 30px -10px rgb(0 0 0 / .45);
  animation: sale .5s var(--molla) both;
}
.nuova-versione .ph { font-size: 22px; color: var(--salvia); }
.nuova-versione .btn { flex: none; min-height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .entra, .entra-riga, .termo-fill, .casc-bar span, .gruppi span, .verdetto.entra, .nuova-versione { animation: none !important; }
}