/* ==========================================================================
   animations.css — keyframes + scroll-reveal
   ========================================================================== */

@keyframes gradient-pan {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

@keyframes wheel {
  0%   { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translate(-8%, -6%) scale(1); }
  50%      { transform: translate(8%, 6%)  scale(1.08); }
}

/* ----- Scroll reveal (attivo solo con JS: senza JS il contenuto resta visibile) ----- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].in { opacity: 1; transform: none; }

/* staggered children */
.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}
[data-reveal-stagger].in > *:nth-child(1) { transition-delay: .04s; }
[data-reveal-stagger].in > *:nth-child(2) { transition-delay: .10s; }
[data-reveal-stagger].in > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].in > *:nth-child(4) { transition-delay: .22s; }
[data-reveal-stagger].in > *:nth-child(5) { transition-delay: .28s; }
[data-reveal-stagger].in > *:nth-child(6) { transition-delay: .34s; }
[data-reveal-stagger].in > *:nth-child(7) { transition-delay: .40s; }
[data-reveal-stagger].in > *:nth-child(8) { transition-delay: .46s; }

/* hero entrance */
.hero [data-anim] {
  opacity: 0; transform: translateY(40px);
  animation: hero-in 1s var(--ease-out) forwards;
}
.hero [data-anim="1"] { animation-delay: .15s; }
.hero [data-anim="2"] { animation-delay: .30s; }
.hero [data-anim="3"] { animation-delay: .45s; }
.hero [data-anim="4"] { animation-delay: .60s; }
@keyframes hero-in { to { opacity: 1; transform: none; } }