/* ============================================================
   «ROTATIVA» — regia.css: il movimento, la stampa e la quiete.
   Firma della proposta 3: il filetto sotto le cifre dei passi si
   TIRA da sinistra a destra quando la tappa entra in scena, in
   cascata. Tutto parte da uno stato VISIBILE: l'opacità a zero
   vive solo sotto .js, così senza JavaScript non sparisce nulla.
   ============================================================ */

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ---------- coreografia d'ingresso: solo le due colonne dell'apertura ---------- */
@media (prefers-reduced-motion:no-preference){
  .fx{animation:rise .7s var(--ease-soft) both}
  .fx-2{animation-delay:.12s}
}

/* ---------- reveal allo scorrimento (solo con JS attivo) ---------- */
/* Animazione, non transizione (5/9/2026, giro a vista del 3a): con la transizione, la regola .reveal.in-view
   (specificità maggiore, foglio caricato per ultimo) SOSTITUIVA la lista delle transizioni degli elementi
   che ne hanno una propria, come le schede col sollevamento al passaggio del mouse (sections.css), che così
   scattavano senza movimento. Difetto ereditato dalla proposta. Stessi tempi, curva e cascata di prima.
   will-change: l'affioramento corre sul compositore, senza ridipingere le stampe dentro. */
@keyframes reveal-in{
  from{opacity:0;translate:0 16px}
  to{opacity:1;translate:0 0}
}
.js .reveal{opacity:0;translate:0 16px;will-change:opacity,translate}
.js .reveal.in-view{animation:reveal-in .7s var(--ease-soft) both}
.js .reveal.r2.in-view{animation-delay:.1s}
.js .reveal.r3.in-view{animation-delay:.2s}
.js .reveal.r4.in-view{animation-delay:.3s}

/* ---------- LA FIRMA: il filetto si tira come un tratto di penna ---------- */
.js .reveal .rule{transform:scaleX(0)}
.js .reveal.in-view .rule{
  transform:scaleX(1);
  transition:transform .55s var(--ease-soft) .2s;
}
/* nelle tappe il filetto è lungo quanto la colonna: il tiro si vede davvero,
   e la cascata segue lo scaglionamento delle tappe */
.js .step.reveal.r2.in-view .rule{transition-delay:.3s}
.js .step.reveal.r3.in-view .rule{transition-delay:.4s}
.js .step.reveal.r4.in-view .rule{transition-delay:.5s}

/* ---------- la fotografia dell'apertura affiora come una stampa ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-portrait .plate{animation:rise .8s var(--ease-soft) .18s both}
}

/* ---------- stampa su carta ---------- */
@media print{
  .header,.burger,.call-bar,.to-top,.stripes,.glow{display:none !important}
  .fx,.hero-portrait .plate{animation:none !important;opacity:1 !important}
  .js .reveal{opacity:1 !important;translate:none !important;animation:none !important}
  .js .reveal .rule{transform:none !important}
  .band-dark,.closing,.footer,.band-warm,.band-paper{background:none !important}
  .band-dark,.band-dark *,.closing,.closing *,.footer,.footer *{color:#000 !important}
  .card,.twin,.quote,.form-card,.accordion-item,.legal-note{box-shadow:none !important}
  .plate::before{display:none !important}
  .colophon-row{padding-bottom:1.4rem !important}
  .button{border:1px solid #000 !important;color:#000 !important;background:none !important}
}

/* ---------- movimento ridotto: tutto fermo, tutto visibile ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fx,.hero-portrait .plate{animation:none !important}
  .js .reveal{opacity:1 !important;translate:none !important;transition:none !important;animation:none !important}
  .js .reveal .rule{transform:scaleX(1) !important;transition:none !important}
  .js .header nav{transition:none !important}
  .burger-lines,.burger-lines::before,.burger-lines::after{transition:none !important}
  .to-top{transition:none !important;translate:none !important}
  .header nav a::after{transition:none !important}
  .button,.header-phone,.card,.card:hover,.arrow-link svg,
  .arrow-link:hover svg,.accordion-item summary::after{transition:none !important;transform:none !important}
}