/* =============================================================================
   SPE Consulting — Animation layer (pairs with assets/js/animations.js)
   ============================================================================= */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1); /* back.out(~1.2): morbido overshoot */
  --anim-dur: 900ms;
  --scroll: 0; /* 0..1 updated by JS */
}

/* ---------------------------------------------------------------- reveal --- */
.js [data-anim].anim-init {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity var(--anim-dur) var(--ease-out) var(--anim-delay, 0ms),
    transform var(--anim-dur) var(--ease-out) var(--anim-delay, 0ms),
    filter var(--anim-dur) var(--ease-out) var(--anim-delay, 0ms);
}

.js [data-anim].anim-init            { transform: translateY(40px); }      /* default = up */
.js [data-anim="up"].anim-init       { transform: translateY(40px); }
.js [data-anim="down"].anim-init     { transform: translateY(-40px); }
.js [data-anim="left"].anim-init     { transform: translateX(48px); }
.js [data-anim="right"].anim-init    { transform: translateX(-48px); }
.js [data-anim="scale"].anim-init    { transform: scale(0.9); }
.js [data-anim="fade"].anim-init     { transform: none; }
.js [data-anim="blur"].anim-init     { transform: translateY(24px); filter: blur(14px); }

/* rise: fade + lift + scala ridotta, con easing elastico leggero (back.out).
   Usato per le card che entrano in sequenza (stagger). */
.js [data-anim="rise"].anim-init {
  transform: translateY(40px) scale(0.95);
  transition:
    opacity   var(--anim-dur) var(--ease-out)  var(--anim-delay, 0ms),
    transform var(--anim-dur) var(--ease-back) var(--anim-delay, 0ms);
}

.js [data-anim].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --------------------------------------------------------------- spin ------ */
@keyframes spe-spin { to { transform: rotate(360deg); } }
.spin-fwd { animation: spe-spin var(--spin-dur, 40s) linear infinite; }
.spin-rev { animation: spe-spin var(--spin-dur, 40s) linear infinite reverse; }

/* --------------------------------------------------------------- float ----- */
@keyframes spe-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.float { animation: spe-float 6s var(--ease-soft) infinite; }

/* --------------------------------------------------------------- pulse ----- */
@keyframes spe-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.pulse { animation: spe-pulse 4s var(--ease-soft) infinite; }

/* --------------------------------------------------------------- marquee --- */
/* Track holds two identical groups; we translate by -50% for a seamless loop. */
@keyframes spe-marquee { to { transform: translateX(-50%); } }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: spe-marquee var(--marquee-dur, 40s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* --------------------------------------------------------- reduced motion -- */
.reduce-motion [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) {
  .spin-fwd, .spin-rev, .float, .pulse, .marquee__track { animation: none !important; }
  [data-parallax], [data-parallax-x] { transform: none !important; }
}