/* ============================================================
   AUTODEB — Animations & Keyframes
   ============================================================ */

/* ── Keyframes ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.85); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}
@keyframes orbit-reverse {
  from { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
  to   { transform: rotate(0deg) translateX(110px) rotate(0deg); }
}
@keyframes data-flow {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}
@keyframes scan-line {
  0%   { top: 0; }
  100% { top: 100%; }
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-left {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fade-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  from { background-position: -300px 0; }
  to   { background-position: 300px 0; }
}
@keyframes counter-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes ripple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(124,58,237,0); }
}
@keyframes progress-bar {
  from { width: 0%; }
  to   { width: var(--target-width, 100%); }
}
@keyframes tick {
  0%   { transform: scale(0) rotate(-45deg); opacity: 0; }
  60%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Animation Utilities ── */
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
.animate-glow       { animation: glow-pulse 3s ease-in-out infinite; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse-dot 2s ease-in-out infinite; }

/* ── Scroll-triggered Animations ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1),
              transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ── Gradient Background Animation ── */
.animated-gradient-bg {
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

/* ── Shimmer Loading ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 25%,
    var(--bg-card-hover) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── API Flow Animation ── */
.flow-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-line 2s ease forwards;
}

/* ── Particle Dots ── */
.particle-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── Ripple effect on buttons ── */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ── Number Counter ── */
.counter-num {
  display: inline-block;
  transition: all var(--ease-base);
}

/* ── Typing cursor ── */
.typing-cursor::after {
  content: '|';
  animation: blink-cursor 1s step-end infinite;
  color: var(--color-primary);
  font-weight: 100;
  margin-left: 2px;
}

/* ── Node pulse (process diagram) ── */
.node-active {
  animation: node-pulse 2s ease-in-out infinite;
}

/* ── Step progress ── */
.step-progress-fill {
  animation: progress-bar 1.5s cubic-bezier(0.4,0,0.2,1) forwards;
  animation-delay: 0.3s;
  width: 0;
}