/* ═══════════════════════════════════════════════════════
   QUANDIA — Animations
   animations.css
═══════════════════════════════════════════════════════ */

/* ─── Loader ─── */
@keyframes neural-pulse {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1.2); opacity: 1; }
}

/* ─── Float ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(1deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-30px); }
}

/* ─── Glow pulse ─── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(108,99,255,0.3); }
  50% { box-shadow: 0 0 60px rgba(108,99,255,0.6), 0 0 100px rgba(108,99,255,0.2); }
}
@keyframes glow-pulse-blue {
  0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.3); }
  50% { box-shadow: 0 0 60px rgba(0,212,255,0.6); }
}

/* ─── Orbit ring ─── */
@keyframes orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes orbit-reverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* ─── Gradient shift ─── */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Shimmer ─── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Fade In ─── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Scale ─── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── Typing cursor ─── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ─── Wave ─── */
@keyframes wave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(15deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* ─── Data flow ─── */
@keyframes data-flow {
  0% { stroke-dashoffset: 1000; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ─── Particle drift ─── */
@keyframes particle-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.3; }
  100% { transform: translate(var(--tx, 100px), var(--ty, -100px)) scale(0.5); opacity: 0; }
}

/* ─── Spin ─── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Bounce ─── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
  50% { transform: translateY(-12px); animation-timing-function: ease-out; }
}

/* ─── Utility Classes ─── */
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }
.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }
.animate-glow-blue { animation: glow-pulse-blue 3s ease-in-out infinite; }
.animate-orbit { animation: orbit 20s linear infinite; }
.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 5s ease infinite;
}
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-fade-in { animation: fadeIn 0.5s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }

/* ─── Delay helpers ─── */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-700 { animation-delay: 0.7s; }
.delay-1000 { animation-delay: 1s; }

/* ─── Shimmer card effect ─── */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.04),
    transparent
  );
  transform: rotate(25deg);
  animation: shimmer 3s ease-in-out infinite;
}