/* ============================================================
   MOTION SYSTEM — motion.css
   Sistema di movimento universale. Zero dipendenze.
   Va incluso PRIMA del CSS del progetto, insieme a motion.js.
   Regole e ragionamento: MOTION-SPEC.md
   Namespace classi: .ms-*  |  Namespace attributi: data-*
   ============================================================ */

/* ---------- 1. TOKEN — la fonte unica di ogni animazione ---------- */
:root{
  /* Curve */
  --ease-out:cubic-bezier(.22,.9,.28,1);      /* uscita morbida — il default */
  --ease-in-out:cubic-bezier(.6,0,.35,1);     /* simmetrica — cambi di stato */
  --ease-pop:cubic-bezier(.34,1.56,.5,1);     /* con rimbalzo — nascita elementi */

  /* Durate */
  --dur-fast:120ms;                            /* colore, bordo, opacità */
  --dur-base:200ms;                            /* hover, scale, ombra */
  --dur-slow:360ms;                            /* apertura pannelli, layout */
  --dur-reveal:640ms;                          /* reveal elementi piccoli */
  --dur-rise:960ms;                            /* reveal blocchi grandi */

  /* Spostamenti */
  --reveal-y:30px;                             /* distanza reveal piccolo */
  --rise-y:clamp(100px,16vh,220px);            /* distanza reveal grande */
  --lift-hover:-4px;                           /* sollevamento card */
  --scale-hover:1.04;                          /* ingrandimento bottone */
  --scale-press:.97;                           /* schiacciamento al click */

  /* Cursore personalizzato — sovrascrivi con i colori del brand */
  --cursor-color:#111;
  --cursor-color-active:#111;
  --cursor-fill-active:rgba(0,0,0,.10);
}

/* ---------- 2. REVEAL — stato di partenza, il JS aggiunge .is-in ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(var(--reveal-y));
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].is-in{opacity:1;transform:none}

[data-reveal-rise]{
  opacity:0;
  transform:translateY(var(--rise-y));
  transition:opacity var(--dur-rise) var(--ease-out),
             transform var(--dur-rise) var(--ease-out);
}
[data-reveal-rise].is-in{opacity:1;transform:none}

/* Figli che si compongono dentro un blocco grande */
[data-reveal-rise] [data-reveal-child],
[data-reveal] [data-reveal-child]{
  opacity:0;
  transform:scale(.86);
  transition:opacity 820ms var(--ease-out), transform 820ms var(--ease-out);
}
.is-in [data-reveal-child]{opacity:1;transform:none}
.is-in [data-reveal-child]:nth-child(1){transition-delay:80ms}
.is-in [data-reveal-child]:nth-child(2){transition-delay:180ms}
.is-in [data-reveal-child]:nth-child(3){transition-delay:260ms}
.is-in [data-reveal-child]:nth-child(4){transition-delay:340ms}
.is-in [data-reveal-child]:nth-child(n+5){transition-delay:420ms}

/* ---------- 3. PARALLASSE ---------- */
[data-parallax]{will-change:transform}

/* ---------- 4. MICRO-INTERAZIONI ---------- */
.ms-lift{transition:transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base) var(--ease-out)}
.ms-lift:hover{transform:translateY(var(--lift-hover))}

.ms-press{transition:transform var(--dur-fast) var(--ease-out)}
.ms-press:active{transform:scale(var(--scale-press))}

.ms-grow{transition:transform var(--dur-base) var(--ease-out)}
.ms-grow:hover{transform:scale(var(--scale-hover))}
.ms-grow:active{transform:scale(var(--scale-press))}

/* ---------- 5. FEEDBACK — richiamate da Motion.pop() / Motion.shake() ---------- */
@keyframes ms-pop{
  0%{transform:scale(1.7);opacity:0}
  60%{transform:scale(.9);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes ms-shake{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-7px)}
  70%{transform:translateX(7px)}
}
.ms-pop{animation:ms-pop 400ms var(--ease-pop)}
.ms-shake{animation:ms-shake 440ms var(--ease-out)}

/* ---------- 6. MARQUEE — nastro infinito, contenuto duplicato ---------- */
.ms-marquee{overflow:hidden}
.ms-marquee-track{
  display:flex;
  width:max-content;
  animation:ms-marquee var(--marquee-dur,34s) linear infinite;
}
@keyframes ms-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* ---------- 7. CURSORE PERSONALIZZATO ---------- */
/* cursor:none si attiva SOLO se il JS ha acceso il cursore.
   Se il JS non parte o siamo su touch, resta il cursore di sistema. */
.ms-cursor-on,
.ms-cursor-on button,
.ms-cursor-on a,
.ms-cursor-on input,
.ms-cursor-on textarea,
.ms-cursor-on select{cursor:none}

.ms-cursor-ring,.ms-cursor-dot{
  position:fixed;top:0;left:0;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
}
.ms-cursor-ring{
  width:34px;height:34px;
  border:1.5px solid var(--cursor-color);
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.ms-cursor-dot{
  width:6px;height:6px;
  background:var(--cursor-color);
}

/* ---------- 8. RISPETTO PER CHI NON VUOLE MOVIMENTO ---------- */
/* Non è opzionale: alcune persone stanno male con le animazioni. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal-rise],[data-reveal-child]{
    opacity:1 !important;
    transform:none !important;
  }
  [data-parallax]{transform:none !important}
  .ms-cursor-ring,.ms-cursor-dot{display:none}
}

/* ---------- 9. TOUCH — niente cursore finto, niente parallasse pesante ---------- */
@media (hover:none),(pointer:coarse){
  .ms-cursor-ring,.ms-cursor-dot{display:none}
}