/* ============================================================
   TROVABANDO OPEN — motion.css (additivo: base/themes non toccati)
   Animazioni 1 (hero DAR), 4 (calcolatore), 6 (reveal a cascata).
   Tutte gated su prefers-reduced-motion; stato finale sempre
   identico allo statico. Nessun loop infinito (brand rule).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. HERO — il DAR si costruisce da solo ---------- */
  /* gauge e contatori sono pilotati da motion.js (rAF);
     qui la cascata CSS di punti e assi del radar (funziona anche no-JS:
     l'animazione completa comunque allo stato finale). */
  .dr-radar circle{opacity:0;animation:drDot .35s var(--ease-out,ease) forwards}
  .dr-radar circle:nth-of-type(1){animation-delay:.80s}
  .dr-radar circle:nth-of-type(2){animation-delay:.86s}
  .dr-radar circle:nth-of-type(3){animation-delay:.92s}
  .dr-radar circle:nth-of-type(4){animation-delay:.98s}
  .dr-radar circle:nth-of-type(5){animation-delay:1.04s}
  .dr-radar circle:nth-of-type(6){animation-delay:1.10s}
  .dr-radar circle:nth-of-type(7){animation-delay:1.16s}
  @keyframes drDot{from{opacity:0;transform:scale(.3);transform-origin:center;transform-box:fill-box}
                   to{opacity:1;transform:scale(1)}}
  .dr-radar .dr-axis{opacity:0;animation:drAxis .45s ease forwards;animation-delay:1.0s}
  @keyframes drAxis{to{opacity:1}}
  /* la darcard entra con un lieve rise dopo il copy */
  .js .darcard{animation:darIn .6s var(--ease-out,ease) both;animation-delay:.15s}
  @keyframes darIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* ---------- 4. CALCOLATORE — micro-transizioni ---------- */
  /* passaggi di step direzionali (fwd/back impostati da calculator-v35.js) */
  .calc__stage[data-dir="fwd"] .q[data-active="true"]{animation:qFwd .32s var(--ease-out,ease) both}
  .calc__stage[data-dir="back"] .q[data-active="true"]{animation:qBack .32s var(--ease-out,ease) both}
  @keyframes qFwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @keyframes qBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

  /* il valore dello slider "pesa" mentre trascini */
  #pmiVal{display:inline-block;transition:transform .16s var(--ease-out,ease)}
  #pmiVal.bump{transform:scale(1.07)}

  /* risultato: gerarchia temporale — profilo → headline → anno2 →
     breakdown → upgrade → ripaga (la card configurazione chiude) */
  .result[data-active="true"] #r-body > *{animation:rUp .5s var(--ease-out,ease) both}
  .result[data-active="true"] #r-body > *:nth-child(1){animation-delay:.05s}
  .result[data-active="true"] #r-body > *:nth-child(2){animation-delay:.16s}
  .result[data-active="true"] #r-body > *:nth-child(3){animation-delay:.27s}
  .result[data-active="true"] #r-body > *:nth-child(4){animation-delay:.38s}
  .result[data-active="true"] #r-body > *:nth-child(5){animation-delay:.49s}
  .result[data-active="true"] #r-body > *:nth-child(6){animation-delay:.60s}
  .result[data-active="true"] .result__cta{animation:rUp .5s var(--ease-out,ease) both;animation-delay:.72s}
  @keyframes rUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* barre del breakdown: la larghezza parte da 0 e cresce in cascata
     (delay inline da calculator-v35.js) */
  .bdrow__fill{transition:width .6s var(--ease-out,cubic-bezier(.4,0,.2,1))}

}

/* fallback esplicito: con reduced-motion tutto è statico e completo */
@media (prefers-reduced-motion: reduce) {
  .dr-radar circle,.dr-radar .dr-axis{opacity:1;animation:none}
  .js .darcard{animation:none}
  .calc__stage .q[data-active="true"]{animation:none}
  .result[data-active="true"] #r-body > *,
  .result[data-active="true"] .result__cta{animation:none}
}