/* =====================================================================
 * Sphere — Animations 2.0
 * Keyframes + utility classes condivise dai template 2.0+
 * Compatibile con 1.0 (non sovrascrive nulla)
 * Rispetta prefers-reduced-motion (vedi @media in fondo)
 * 2026-05-13
 * ===================================================================== */

/* ===== Reveal on scroll (paired con IntersectionObserver in JS) ===== */
.sp-anim-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.sp-anim-reveal.is-in { opacity: 1; transform: translateY(0); }

.sp-anim-reveal--up    { transform: translateY(28px); }
.sp-anim-reveal--down  { transform: translateY(-28px); }
.sp-anim-reveal--left  { transform: translateX(-28px); }
.sp-anim-reveal--right { transform: translateX(28px); }
.sp-anim-reveal--fade  { transform: none; }

.sp-anim-reveal--up.is-in,
.sp-anim-reveal--down.is-in,
.sp-anim-reveal--left.is-in,
.sp-anim-reveal--right.is-in { transform: translate(0,0); }

/* ===== Pulse ring (badges, map pins, status dots) ===== */
@keyframes sp-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.sp-anim-pulse {
  position: relative;
}
.sp-anim-pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: sp-pulse-ring 2.2s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}

/* ===== Word-by-word reveal (cinematic hero) ===== */
@keyframes sp-word-in {
  to { opacity: 1; transform: translateY(0); }
}
.sp-anim-words .sp-anim-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: sp-word-in 0.7s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Delay incrementale gestito via inline style (animation-delay) in JS */

/* ===== Shimmer gradient text (cinematic accent) ===== */
@keyframes sp-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.sp-anim-shimmer {
  background-size: 200% auto;
  animation: sp-shimmer 5s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Ken Burns slideshow ===== */
@keyframes sp-ken-burns {
  from { transform: scale(1)    translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
.sp-anim-kb {
  will-change: transform;
  animation: sp-ken-burns 9s linear forwards;
}
.sp-anim-kb--slow { animation-duration: 14s; }
.sp-anim-kb--fast { animation-duration: 6s; }

.sp-anim-fade {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.2,.7,.2,1);
}
.sp-anim-fade.is-active { opacity: 1; }

/* ===== Marquee (loghi clienti scorrevoli) ===== */
@keyframes sp-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.sp-anim-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.sp-anim-marquee-track {
  display: flex;
  gap: 72px;
  animation: sp-marquee 32s linear infinite;
  white-space: nowrap;
  align-items: center;
}
.sp-anim-marquee:hover .sp-anim-marquee-track { animation-play-state: paused; }
.sp-anim-marquee--slow .sp-anim-marquee-track { animation-duration: 48s; }
.sp-anim-marquee--fast .sp-anim-marquee-track { animation-duration: 20s; }

/* ===== Scroll mouse cue (hero) ===== */
@keyframes sp-scroll-mouse {
  0%, 20%   { transform: translate(-50%, 0); opacity: 1; }
  80%, 100% { transform: translate(-50%, 14px); opacity: 0; }
}
.sp-anim-scroll-mouse {
  width: 22px; height: 36px;
  border-radius: 4px;
  border: 1px solid currentColor;
  position: relative;
}
.sp-anim-scroll-mouse::after {
  content: ""; position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 6px;
  background: currentColor;
  border-radius: 1px;
  animation: sp-scroll-mouse 1.8s ease-in-out infinite;
}

/* ===== Counter (hero stats — no keyframe, valore aggiornato da JS) ===== */
.sp-anim-counter {
  font-variant-numeric: tabular-nums;
}

/* ===== Hover lift ===== */
.sp-anim-lift {
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1);
}
.sp-anim-lift:hover { transform: translateY(-4px); }

/* ===== Skeleton loading ===== */
@keyframes sp-skeleton {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.sp-anim-skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: sp-skeleton 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  .sp-anim-reveal,
  .sp-anim-reveal--up, .sp-anim-reveal--down,
  .sp-anim-reveal--left, .sp-anim-reveal--right { opacity: 1; transform: none; transition: none; }
  .sp-anim-words .sp-anim-word { opacity: 1; transform: none; animation: none; }
  .sp-anim-shimmer { animation: none; }
  .sp-anim-kb,
  .sp-anim-marquee-track,
  .sp-anim-pulse::after { animation: none; }
  .sp-anim-fade { transition: opacity .3s linear; }
  .sp-anim-scroll-mouse::after { animation: none; opacity: 1; }
  .sp-anim-skeleton { animation: none; background: rgba(0,0,0,0.06); }
}