/* =========================================================
   Animazioni del sito — carattere "Misurato": calmo,
   deliberato, on-brand. Vanilla: solo opacity/transform
   (GPU). Vocabolario: reveal misurato, riga che si traccia,
   rail del Metodo che accende gli step, count-up del
   verdetto verde nei casi.
   Gating .no-js/.js + prefers-reduced-motion rispettato.
   ========================================================= */

html.js {
  --rv-y: 13px;
  --rv-dur: .58s;
  --rv-ease: cubic-bezier(.22, 1, .36, 1);
  --stagger: 82ms;
  --draw-dur: .8s;
  --rail-dur: 1s;
  --count-dur: 1100;          /* letto anche dal JS (ms) */
}

/* Senza JS si vede tutto (lo stato nascosto vive solo con .js) */
html.no-js [data-reveal],
html.no-js [data-draw] { opacity: 1; transform: none; }

/* Reduced motion: stato finale immediato, niente moto */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-draw],
  html.js .method__step .method__num,
  html.js .method::before {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
}

/* ---------------- Primitive ---------------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-y));
  transition: opacity var(--rv-dur) var(--rv-ease),
              transform var(--rv-dur) var(--rv-ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
html.js [data-reveal].in { opacity: 1; transform: none; }

/* line-draw: regola che si traccia da sinistra */
html.js [data-draw] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--draw-dur) var(--rv-ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
html.js [data-draw].in { transform: scaleX(1); }

/* ---------------- Hero ---------------- */
html.js .hero__title .ln { display: inline-block; }
.hero__rule {
  display: block; height: 2px; width: 132px;
  background: var(--signal); margin: 1.3rem 0 .2rem; border-radius: 2px;
}

/* ---------------- Il Metodo: rail + step che si accendono ---------------- */
html.js .method { position: relative; }
html.js .method::before {
  content: ""; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 2px;
  background: var(--line-2); transform: scaleY(0); transform-origin: top;
  transition: transform var(--rail-dur) var(--rv-ease);
}
html.js .method.in::before { transform: scaleY(1); }
html.js .method__num {
  transition: background .45s var(--rv-ease), color .45s var(--rv-ease),
              transform .45s var(--rv-ease);
}
html.js .method__step:not(.in) .method__num {
  background: var(--line-2); color: var(--paper); transform: scale(.84);
}
html.js .method__step.in .method__num { background: var(--ink); transform: none; }
html.js .method__step--verdict.in .method__num { background: var(--signal-d); }

/* ---------------- Casi: il verdetto verde che si materializza ---------------- */
html.js .case__table td.g { transition: background .5s var(--rv-ease); }
html.js .case__table tr.in td.g { animation: gwash 1s var(--rv-ease) both; }
@keyframes gwash {
  0%   { background: var(--signal-wash); }
  100% { background: transparent; }
}