/* animations.css — micro-animazioni SOLO CSS (zero librerie JS).
   Regola dura: tutto dentro prefers-reduced-motion: no-preference; la media
   query "reduce" sotto disattiva qualsiasi movimento (DESIGN §5).
   Durate 150-200 ms ease-out: segnale, mai intrattenimento. */

@media (prefers-reduced-motion: no-preference){
  /* 1) Ingresso card in stagger: transform+opacity, ~30 ms l'una (max 12) */
  #list .subcard-wrap{animation:card-in .18s ease-out backwards}
  @keyframes card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  #list .subcard-wrap:nth-child(2){animation-delay:.03s}
  #list .subcard-wrap:nth-child(3){animation-delay:.06s}
  #list .subcard-wrap:nth-child(4){animation-delay:.09s}
  #list .subcard-wrap:nth-child(5){animation-delay:.12s}
  #list .subcard-wrap:nth-child(6){animation-delay:.15s}
  #list .subcard-wrap:nth-child(7){animation-delay:.16s}
  #list .subcard-wrap:nth-child(n+8){animation-delay:.18s}

  /* 2) Sheet (paywall/onboarding/dettaglio): slide-up + backdrop fade.
        Lo slide-up del pannello esiste già in app.css (.sheet up .18s);
        qui si aggiunge il fade dello scrim, coordinato alla stessa durata. */
  .sheet-wrap{animation:backdrop-in .18s ease-out}
  @keyframes backdrop-in{from{opacity:0}to{opacity:1}}

  /* 3) Pill Timer Express sotto 10 minuti: pulse ambra SOFT (box-shadow, no
        scale: il countdown non deve "saltare"). Classe .low messa da paywall.js. */
  .pill-express.low{color:var(--trial-fg);animation:pulse-amber 1.8s ease-in-out infinite}
  .pill-express.low .pbar{background:var(--trial-fg)}
  @keyframes pulse-amber{
    0%,100%{box-shadow:0 0 0 0 rgba(146,64,14,0)}
    50%{box-shadow:0 0 0 6px rgba(146,64,14,.16)}
  }

  /* 4) Badge rosso rinnovo <48h: attention pulse UNA VOLTA al render (non
        infinito: niente dark pattern, DESIGN §1.1). */
  .badge.b-urgent{animation:attention .8s ease-out 1}
  @keyframes attention{
    0%{transform:scale(1)}
    35%{transform:scale(1.12)}
    70%{transform:scale(.98)}
    100%{transform:scale(1)}
  }

  /* 5) "Segna pagato ✓": check che fa pop + transizione colore al verde
        (classe .pay-done messa da home.js prima del salvataggio, ~380 ms). */
  .cta-mini,.swipe-pay,[data-pay].btn{transition:background-color .25s ease,color .25s ease}
  .pay-done{background:var(--ok-bg)!important;color:var(--ok-fg)!important;border-color:var(--ok-fg)!important}
  .pay-done svg{animation:check-pop .3s ease-out}
  @keyframes check-pop{
    0%{transform:scale(.4);opacity:0}
    60%{transform:scale(1.25);opacity:1}
    100%{transform:scale(1)}
  }

  /* 6) Stima onboarding che si rivela e toast: già coperti da transizioni in
        app.css (.estimate/.toast); qui solo il micromove d'ingresso del FAB. */
  .fab{animation:fab-in .2s ease-out backwards}
  @keyframes fab-in{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}
}

/* Rispetto prefers-reduced-motion: disattiva tutto il nuovo movimento
   (e anche lo shimmer skeleton/shake storico di app.css). */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}