/* ================================================
   FLUXARI – animations.css
   Keyframes, scroll reveal, micro-interazioni
   ================================================ */

/* -----------------------------------------------
   KEYFRAMES
   ----------------------------------------------- */

/* Pulse ring: per i dot "Live" e "Disponibile" */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0   rgba(74, 222, 128, 0); }
}

/* Float: badge flottanti nel hero */
@keyframes float {
  0%, 100% { transform: translateY(0px)  rotate(-1deg); }
  50%       { transform: translateY(-9px) rotate(1deg);  }
}

/* Fade-in da sotto: entrata sezioni */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Shimmer: effetto caricamento (opzionale) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Scale pop: click feedback bottoni */
@keyframes scalePop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1);    }
}

/* Glow breathe: il radial glow nella CTA */
@keyframes glowBreathe {
  0%, 100% { opacity: 1;    transform: translate(-50%, -50%) scale(1); }
  50%       { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}

/* -----------------------------------------------
   PULSE DOT
   ----------------------------------------------- */
.pulse-dot {
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* -----------------------------------------------
   FLOAT BADGES (Hero)
   ----------------------------------------------- */
.float-badge--1 {
  animation: float 5.5s ease-in-out infinite;
}

.float-badge--2 {
  animation: float 5.5s ease-in-out infinite;
  animation-delay: -2.5s;
}

/* -----------------------------------------------
   HERO ENTRANCE (al caricamento pagina)
   ----------------------------------------------- */
.hero-content {
  animation: fadeInUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
}

.hero-visual {
  animation: fadeInUp 0.75s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

/* -----------------------------------------------
   SCROLL REVEAL
   Classe base: invisibile con translateY
   Classe .visible: aggiunta da JS tramite IntersectionObserver
   ----------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay per entrate sfalsate */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

/* -----------------------------------------------
   NAVBAR TRANSITION
   ----------------------------------------------- */
.navbar {
  transition:
    background-color 0.4s ease,
    backdrop-filter   0.4s ease,
    box-shadow        0.4s ease,
    border-color      0.4s ease;
}

/* -----------------------------------------------
   BUTTON PRESS
   ----------------------------------------------- */
.btn:active {
  animation: scalePop 0.22s ease;
}

/* -----------------------------------------------
   CTA GLOW BREATHE
   ----------------------------------------------- */
.cta-glow {
  animation: glowBreathe 5s ease-in-out infinite;
}

/* -----------------------------------------------
   SERVICE CARD: hover top-bar e lift
   (la logica è in style.css, qui solo la transizione
    sull'ombra per il service-card--featured)
   ----------------------------------------------- */
.service-card--featured {
  transition:
    transform    var(--t-base),
    box-shadow   var(--t-base),
    border-color var(--t-base);
}

/* -----------------------------------------------
   STEP NUMBER: hover scale
   (definito in style.css, ridichiarato qui per coerenza)
   ----------------------------------------------- */
.step-number {
  transition:
    background  var(--t-base),
    color       var(--t-base),
    box-shadow  var(--t-base),
    transform   var(--t-base);
}

/* -----------------------------------------------
   COUNTER VALUES
   Font tabular per evitare salti durante l'animazione
   ----------------------------------------------- */
.stat-animate,
.metric-animate {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}