/* =========================================================
   VDS Motion Pack — motion.css (COMPLETO)
   CSS-first • GPU-friendly • Lighthouse-safe
   Uso: combina con VDSMotion.js (IntersectionObserver) solo se serve
   ========================================================= */

/* ---------- Tokens base ---------- */
:root{
  --vds-motion-ease: cubic-bezier(.2,.8,.2,1);
  --vds-motion-ease-soft: cubic-bezier(.22,.61,.36,1);
  --vds-motion-dur: 520ms;
  --vds-motion-dur-fast: 340ms;
  --vds-motion-dur-slow: 720ms;
}

/* ---------- Accessibilità: riduzione motion ---------- */
@media (prefers-reduced-motion: reduce){
  [data-anim], [data-anim-child]{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
    background-size: 100% 2px !important;
  }
  [data-anim="glow-breath"]::before,
  [data-anim="ring-pulse"]::after,
  [data-anim="shine-sweep"]::before{
    animation: none !important;
    opacity: .14 !important;
    transform: none !important;
  }
}

/* =========================================================
   PRESET BASE (Enter / Reveal)
   Regola: JS aggiunge .vds-anim-in quando entra in viewport
   ========================================================= */

/* Stato iniziale standard */
[data-anim]{
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  will-change: transform, opacity;
}

/* Stato attivo standard */
.vds-anim-in{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--vds-motion-dur) var(--vds-motion-ease),
    opacity  var(--vds-motion-dur) var(--vds-motion-ease);
}

/* 1) fade */
[data-anim="fade"]{ transform: none; }
[data-anim="fade"].vds-anim-in{
  transition: opacity var(--vds-motion-dur) var(--vds-motion-ease);
}

/* 2) reveal-up (default) */
[data-anim="reveal-up"].vds-anim-in{}

/* 3) reveal-down */
[data-anim="reveal-down"]{ transform: translate3d(0, -14px, 0); }
[data-anim="reveal-down"].vds-anim-in{ transform: translate3d(0, 0, 0); }

/* 4) reveal-left */
[data-anim="reveal-left"]{ transform: translate3d(-14px, 0, 0); }
[data-anim="reveal-left"].vds-anim-in{ transform: translate3d(0, 0, 0); }

/* 5) reveal-right */
[data-anim="reveal-right"]{ transform: translate3d(14px, 0, 0); }
[data-anim="reveal-right"].vds-anim-in{ transform: translate3d(0, 0, 0); }

/* 6) scale-in */
[data-anim="scale-in"]{
  transform: translate3d(0, 0, 0) scale(.98);
}
[data-anim="scale-in"].vds-anim-in{
  transform: translate3d(0, 0, 0) scale(1);
}

/* 7) pop (più deciso, per CTA / badge importanti) */
[data-anim="pop"]{
  transform: translate3d(0, 0, 0) scale(.94);
}
[data-anim="pop"].vds-anim-in{
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform var(--vds-motion-dur-fast) var(--vds-motion-ease),
    opacity  var(--vds-motion-dur-fast) var(--vds-motion-ease);
}

/* 8) underline (micro polish per titoli/link) */
[data-anim="underline"]{
  opacity: 1;
  transform: none;
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-image: linear-gradient(currentColor, currentColor);
}
[data-anim="underline"].vds-anim-in{
  transition: background-size var(--vds-motion-dur-fast) var(--vds-motion-ease);
  background-size: 100% 2px;
}

/* =========================================================
   GROUP / STAGGER
   ========================================================= */

/* 9) stagger-children (container) */
[data-anim="stagger-children"]{
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* figli marcati */
[data-anim-child]{
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: transform, opacity;
}
[data-anim-child].vds-anim-in{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition:
    transform var(--vds-motion-dur) var(--vds-motion-ease),
    opacity  var(--vds-motion-dur) var(--vds-motion-ease);
}

/* =========================================================
   2026-STYLE INTERACTIVE CUES (CSS-first)
   ========================================================= */

/* 10) glow-breath (cue click su flip cards / CTA)
   Evita animare box-shadow: usiamo pseudo + opacity/scale */
[data-anim="glow-breath"]{
  opacity: 1;
  transform: none;
  position: relative;
  isolation: isolate;
}
[data-anim="glow-breath"]::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: inherit;
  z-index:-1;
  background: radial-gradient(closest-side, rgba(255,255,255,.20), rgba(255,255,255,0));
  filter: blur(12px);
  opacity:.08;
  transform: translate3d(0,0,0) scale(.98);
  will-change: opacity, transform;
  pointer-events:none;
}
[data-anim="glow-breath"].vds-anim-in::before{
  animation: vdsGlowBreath 2200ms var(--vds-motion-ease) infinite;
}
@keyframes vdsGlowBreath{
  0%{opacity:.08; transform:translate3d(0,0,0) scale(.98);}
  50%{opacity:.20; transform:translate3d(0,0,0) scale(1.01);}
  100%{opacity:.08; transform:translate3d(0,0,0) scale(.98);}
}

/* 11) ring-pulse (ring leggero: usa su 1 elemento max per sezione) */
[data-anim="ring-pulse"]{
  opacity: 1;
  transform: none;
  position: relative;
  isolation: isolate;
}
[data-anim="ring-pulse"]::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.22);
  opacity:0;
  transform: translate3d(0,0,0) scale(.98);
  pointer-events:none;
  will-change: opacity, transform;
}
[data-anim="ring-pulse"].vds-anim-in::after{
  animation: vdsRingPulse 1600ms var(--vds-motion-ease) infinite;
}
@keyframes vdsRingPulse{
  0%{opacity:0; transform:translate3d(0,0,0) scale(.98);}
  30%{opacity:.28; transform:translate3d(0,0,0) scale(1.01);}
  100%{opacity:0; transform:translate3d(0,0,0) scale(1.03);}
}

/* 12) float-y (hero mockup/icon, lento e leggero) */
[data-anim="float-y"]{
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: transform;
}
[data-anim="float-y"].vds-anim-in{
  animation: vdsFloatY 4200ms var(--vds-motion-ease-soft) infinite;
}
@keyframes vdsFloatY{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-10px,0); }
}

/* 13) tilt-hover (solo hover desktop, zero JS) */
[data-anim="tilt-hover"]{
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform 320ms var(--vds-motion-ease);
}
@media (hover:hover){
  [data-anim="tilt-hover"]:hover{
    transform: translate3d(0,-2px,0) rotateX(2deg) rotateY(-2deg);
  }
}

/* 14) shine-sweep (micro shine su CTA/titolo breve: usa raramente) */
[data-anim="shine-sweep"]{
  opacity: 1;
  transform: none;
  position: relative;
  overflow: hidden;
}
[data-anim="shine-sweep"]::before{
  content:"";
  position:absolute;
  top:-20%;
  left:-60%;
  width:40%;
  height:140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translate3d(0,0,0) skewX(-12deg);
  opacity: 0;
  pointer-events:none;
}
[data-anim="shine-sweep"].vds-anim-in::before{
  animation: vdsShineSweep 1400ms var(--vds-motion-ease) 1;
}
@keyframes vdsShineSweep{
  0%{ transform: translate3d(0,0,0) skewX(-12deg); opacity:0; }
  10%{ opacity:1; }
  100%{ transform: translate3d(360%,0,0) skewX(-12deg); opacity:0; }
}

/* 15) clip-reveal (premium per H1/H2: max 1–2 per pagina) */
[data-anim="clip-reveal"]{
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
[data-anim="clip-reveal"].vds-anim-in{
  transition: clip-path var(--vds-motion-dur-slow) var(--vds-motion-ease);
  clip-path: inset(0 0 0 0);
}

/* =========================================================
   MODALI (CSS-only trigger con class)
   ========================================================= */

/* 16) modal-pop (overlay + panel)
   Struttura attesa:
   <div class="vds-modal">
     <div class="vds-modal-panel">...</div>
   </div>
   Apri: aggiungi .is-open */
.vds-modal{
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--vds-motion-ease);
}
.vds-modal.is-open{
  opacity: 1;
  pointer-events: auto;
}
.vds-modal .vds-modal-panel{
  transform: translate3d(0,8px,0) scale(.98);
  opacity: 0;
  transition:
    transform 280ms var(--vds-motion-ease),
    opacity  280ms var(--vds-motion-ease);
  will-change: transform, opacity;
}
.vds-modal.is-open .vds-modal-panel{
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}

/* =========================================================
   SPECIAL (opzionali, disabilitati di default nel JS/preset policy)
   Li puoi usare, ma con criterio
   ========================================================= */

/* 17) page-fade (se vuoi transizioni contenitore pagina) */
.vds-page-fade{
  opacity: 0;
  transition: opacity 240ms var(--vds-motion-ease);
}
.vds-page-fade.vds-anim-in{
  opacity: 1;
}