/* ============================================
   Elvisto Premium Animations
   ============================================ */

/* --- Float animations --- */
@keyframes sa-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes sa-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.sa-float { animation: sa-float 4s ease-in-out infinite; }
.sa-hero-float { animation: sa-hero-float 4s ease-in-out infinite; }

/* --- Bar grow (chart bars) --- */
@keyframes sa-bar-grow {
  0% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
.sa-bar { animation: sa-bar-grow 1.5s ease-out forwards; transform-origin: bottom; opacity: 0; }
.sa-bar-1 { animation-delay: 0.1s; }
.sa-bar-2 { animation-delay: 0.25s; }
.sa-bar-3 { animation-delay: 0.4s; }
.sa-bar-4 { animation-delay: 0.55s; }
.sa-bar-5 { animation-delay: 0.7s; }

/* --- Score ring draw --- */
@keyframes sa-draw-ring {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 20; }
}
.sa-score-ring {
  animation: sa-draw-ring 2s ease-out 0.8s forwards;
  stroke-dashoffset: 100;
}

/* --- Trend line draw --- */
@keyframes sa-draw-trend {
  0% { stroke-dashoffset: 200; }
  100% { stroke-dashoffset: 0; }
}
.sa-trend-line {
  animation: sa-draw-trend 2s ease-out 0.3s forwards;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

/* --- Sparkle pulse --- */
@keyframes sa-sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
.sa-sparkle { animation: sa-sparkle 2.5s ease-in-out infinite; }
.sa-sparkle-1 { animation-delay: 0s; }
.sa-sparkle-2 { animation-delay: 0.8s; }
.sa-sparkle-3 { animation-delay: 1.6s; }

/* --- Hero dashboard mock animations --- */
@keyframes sa-score-reveal {
  0% { opacity: 0; transform: scale(0.6); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sa-score-pop {
  0% { opacity: 0; transform: scale(0); }
  70% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sa-metric-slide-up {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes sa-hero-sparkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.8); }
}
.sa-score-reveal { animation: sa-score-reveal 1s ease-out 0.3s both; }
.sa-score-pop { animation: sa-score-pop 0.6s ease-out 0.8s both; }
.sa-metric-slide-up { opacity: 0; animation: sa-metric-slide-up 0.6s ease-out both; }
.sa-metric-1 { animation-delay: 1s; }
.sa-metric-2 { animation-delay: 1.15s; }
.sa-metric-3 { animation-delay: 1.3s; }
.sa-hero-sparkle { position: absolute; border-radius: 50%; animation: sa-hero-sparkle 2.5s ease-in-out infinite; }

/* --- Scroll reveal --- */
.sa-animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.sa-animate-on-scroll.sa-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children */
.sa-stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.sa-stagger-children.sa-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.sa-stagger-children.sa-visible > *:nth-child(1) { transition-delay: 0s; }
.sa-stagger-children.sa-visible > *:nth-child(2) { transition-delay: 0.1s; }
.sa-stagger-children.sa-visible > *:nth-child(3) { transition-delay: 0.15s; }
.sa-stagger-children.sa-visible > *:nth-child(4) { transition-delay: 0.2s; }
.sa-stagger-children.sa-visible > *:nth-child(5) { transition-delay: 0.25s; }
.sa-stagger-children.sa-visible > *:nth-child(6) { transition-delay: 0.3s; }

/* --- Feature card hover --- */
.sa-feature-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sa-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- Fade in up utility --- */
@keyframes sa-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.sa-fade-in-up { animation: sa-fade-in-up 0.6s ease-out both; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .sa-float, .sa-hero-float, .sa-bar, .sa-score-ring, .sa-trend-line,
  .sa-sparkle, .sa-hero-sparkle, .sa-feature-card,
  .sa-score-reveal, .sa-score-pop, .sa-metric-slide-up, .sa-fade-in-up {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .sa-animate-on-scroll, .sa-stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}