/* ============================================================
   MOTION — implementazione canonica degli effetti MOT
   File FISSO dello Starter Kit. Il Section Builder APPLICA
   queste classi, non le reimplementa.
   ============================================================ */

/* --- MOT-01 / MOT-02 / MOT-07: reveal on scroll --- */
.reveal {
  opacity: 0;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms); /* usato da MOT-03 stagger */
  will-change: opacity, transform;
}
.reveal--up    { transform: translateY(var(--space-5)); }
.reveal--fade  { transform: none; }
.reveal--scale { transform: scale(0.96); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --- MOT-04: rule-draw (su SVG line o elemento filetto) --- */
.mot-rule {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}
.mot-rule.is-visible { opacity: 1; transform: scaleX(1); }

/* --- MOT-05: load-sequence (pattern keyframes per hero) --- */
@keyframes mot-fade { to { opacity: 1; } }
@keyframes mot-rise { to { opacity: 1; transform: translateY(0); } }
/* uso: elemento con opacity:0 [+ translateY] e
   animation: mot-rise var(--duration-slow) var(--ease-out) [delay] forwards */

/* --- MOT-06: hover-underline --- */
.mot-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-medium) var(--ease-out);
}
.mot-underline:hover,
.mot-underline:focus-visible { background-size: 100% 1px; }

/* --- MOT-08: parallax-soft (trasforma gestita da reveal.js) --- */
.mot-parallax { will-change: transform; }

/* --- MOT-09: image-reveal (sipario) --- */
.mot-curtain { position: relative; overflow: hidden; }
.mot-curtain::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--color-bg);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--duration-slow) var(--ease-in-out);
}
.mot-curtain.is-visible::after { transform: scaleX(0); }

/* --- MOT-10: count-up (numero gestito da reveal.js) --- */
.mot-count { font-variant-numeric: tabular-nums; }

/* --- Reduced motion: tutto visibile e fermo --- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible,
  .mot-rule, .mot-rule.is-visible {
    opacity: 1; transform: none; transition: none;
  }
  .mot-curtain::after { display: none; }
  .mot-parallax { transform: none !important; }
  * { animation: none !important; }
}