/* ============================================
   SPINSPARKSTACK — ANIMATIONS
   animations.css
   ============================================ */

/* ---- KEYFRAMES ---- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes scroll-bounce {
  0% { top: 5px; opacity: 1; }
  60% { top: 20px; opacity: 0; }
  61% { top: 5px; opacity: 0; }
  100% { top: 5px; opacity: 1; }
}

@keyframes float-up-down {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.97); }
}

@keyframes fade-in-up-anim {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-right-anim {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-anim {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(124, 58, 255, 0.6), 0 0 60px rgba(0, 229, 255, 0.2); }
}

@keyframes bar-grow {
  from { height: 0; }
  to { height: var(--h); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- ANIMATION CLASSES ---- */
.fade-in-up {
  opacity: 0;
  animation: fade-in-up-anim 0.7s ease forwards;
  animation-delay: var(--delay, 0s);
}

.fade-in-right {
  opacity: 0;
  animation: fade-in-right-anim 0.7s ease forwards;
  animation-delay: var(--delay, 0.2s);
}

.fade-in {
  opacity: 0;
  animation: fade-in-anim 0.5s ease forwards;
}

/* Floating badges */
.float-badge-1 {
  animation: float-up-down 3.5s ease-in-out infinite;
}

.float-badge-2 {
  animation: float-up-down 4s ease-in-out infinite reverse;
}

/* Orb animations */
.hero-orb-1 {
  animation: orb-drift 12s ease-in-out infinite;
}

.hero-orb-2 {
  animation: orb-drift 15s ease-in-out infinite reverse;
}

.hero-orb-3 {
  animation: orb-drift 18s ease-in-out infinite;
}

/* Stack card stagger */
.stack-card-front {
  animation: fade-in-up-anim 0.8s ease forwards 0.3s;
  opacity: 0;
}

.stack-card-mid {
  animation: fade-in-up-anim 0.8s ease forwards 0.15s;
  opacity: 0;
}

.stack-card-back {
  animation: fade-in-up-anim 0.8s ease forwards 0s;
  opacity: 0;
}

/* Graph bars */
.graph-bar {
  animation: bar-grow 1s ease forwards;
  animation-delay: calc(var(--delay, 0s) + 0.5s);
}

.graph-bars .graph-bar:nth-child(1) { animation-delay: 0.6s; }
.graph-bars .graph-bar:nth-child(2) { animation-delay: 0.7s; }
.graph-bars .graph-bar:nth-child(3) { animation-delay: 0.8s; }
.graph-bars .graph-bar:nth-child(4) { animation-delay: 0.9s; }
.graph-bars .graph-bar:nth-child(5) { animation-delay: 1.0s; }
.graph-bars .graph-bar:nth-child(6) { animation-delay: 1.1s; }
.graph-bars .graph-bar:nth-child(7) { animation-delay: 1.2s; }

/* Stack card glow */
.stack-card-front {
  animation: fade-in-up-anim 0.8s ease forwards 0.3s, glow-pulse 4s ease-in-out infinite 1.5s;
}

/* Connector dot pulse */
.connector-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Badge dot pulse */
.badge-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Timeline dots */
.timeline-dot {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Scroll-triggered animations via Intersection Observer — see main.js */
.anim-ready {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-ready.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-ready-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.anim-ready-right.anim-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Page transition */
body {
  animation: fade-in-anim 0.4s ease forwards;
}

/* Shimmer loading effect */
.shimmer {
  background: linear-gradient(90deg,
    var(--color-bg-card) 25%,
    var(--color-bg-card-hover) 50%,
    var(--color-bg-card) 75%
  );
  background-size: 200% auto;
  animation: shimmer 2s linear infinite;
}