/* =====================================================================
   MOTION — animazioni solo CSS (design/DESIGN.md › Motion). Easing base cubic-bezier(.22,1,.36,1).
   - Con "riduci movimento" non si anima nulla.
   - Dove le animazioni legate allo scroll non sono supportate, i contenuti compaiono subito.
   - Solo opacity/transform/filter/clip-path: nessuno spostamento di layout.
   - fill-mode "backwards": finita l'animazione l'elemento torna al suo stile normale,
     cosi' gli effetti hover (zoom, sollevamento) continuano a funzionare.

   Classi da usare nei blocchi (Avanzate > Classi CSS aggiuntive):
     mm-in              ingresso al caricamento (contenuti sopra la piega)
     mm-reveal          comparsa allo scroll (fade-up 32px)
     mm-reveal-cascade  i figli compaiono a cascata (griglie di card)
     mm-reveal-img      l'immagine si rivela dal basso con leggero zoom-out
     mm-d1 … mm-d6      ritardo di 80ms × n per mm-in
   ===================================================================== */
:root { --mm-ease: cubic-bezier(.22, 1, .36, 1); }

@keyframes mm-fade-up {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes mm-reveal-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes mm-clip-up {
  from { clip-path: inset(100% 0 0 0 round var(--mm-radius, 0px)); }
  to { clip-path: inset(0 0 0 0 round var(--mm-radius, 0px)); }
}
@keyframes mm-zoom-out {
  from { transform: scale(1.12); }
  to { transform: none; }
}
@keyframes mm-draw {
  to { stroke-dashoffset: 0; }
}

.mm-d1 { --mm-i: 1; } .mm-d2 { --mm-i: 2; } .mm-d3 { --mm-i: 3; }
.mm-d4 { --mm-i: 4; } .mm-d5 { --mm-i: 5; } .mm-d6 { --mm-i: 6; }

@media (prefers-reduced-motion: no-preference) {
  /* 1. Ingresso al caricamento */
  .mm-in { animation: mm-fade-up .7s var(--mm-ease) backwards; animation-delay: calc(var(--mm-i, 0) * 80ms); }

  /* 2. Comparsa allo scroll */
  @supports (animation-timeline: view()) {
    .mm-reveal,
    .mm-reveal-cascade > * {
      animation: mm-reveal-up linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .mm-reveal-cascade > :nth-child(2) { animation-range: entry 5% cover 35%; }
    .mm-reveal-cascade > :nth-child(3) { animation-range: entry 10% cover 40%; }
    .mm-reveal-cascade > :nth-child(4) { animation-range: entry 15% cover 45%; }
    .mm-reveal-cascade > :nth-child(n+5) { animation-range: entry 20% cover 50%; }
    .mm-reveal-img {
      animation: mm-clip-up linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .mm-reveal-img img {
      animation: mm-zoom-out linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}