/* ============================================================
   Code-Aura — Animations & Keyframes
   ============================================================ */

/* ── Loader ── */
@keyframes loader-fill {
  0%   { width: 0; }
  30%  { width: 40%; }
  70%  { width: 75%; }
  100% { width: 100%; }
}

/* ── Ticker / Marquee ── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── Float ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* ── Float Large ── */
@keyframes float-lg {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-20px) rotate(3deg); }
  66%       { transform: translateY(-10px) rotate(-2deg); }
}

/* ── Pulse Ring (WhatsApp) ── */
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ── Pulse Dot (badge) ── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* ── Neon Glow Pulse ── */
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(108,99,255,0.4), 0 0 40px rgba(108,99,255,0.2); }
  50%       { box-shadow: 0 0 40px rgba(108,99,255,0.8), 0 0 80px rgba(108,99,255,0.4); }
}

/* ── Neon Text Pulse ── */
@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(108,99,255,0.5); }
  50%       { text-shadow: 0 0 30px rgba(108,99,255,0.9), 0 0 60px rgba(0,229,255,0.5); }
}

/* ── Particle Drift ── */
@keyframes particle-drift {
  0%   { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-100px) translateX(40px) scale(1.5); opacity: 0; }
}

/* ── Showcase Scroll ── */
@keyframes showcase-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ── Scan Line ── */
@keyframes scan {
  0%   { top: -4px; }
  100% { top: 100%; }
}

/* ── Orbit ── */
@keyframes orbit {
  from { transform: rotate(0deg) translateX(120px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
}

/* ── Ripple ── */
@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(4); opacity: 0; }
}

/* ── Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

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

/* ── Slide Up ── */
@keyframes slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Slide In Left ── */
@keyframes slide-in-left {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Slide In Right ── */
@keyframes slide-in-right {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Bounce ── */
@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Particles Canvas BG ── */
@keyframes bg-pan {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ── Glitch ── */
@keyframes glitch-1 {
  0%   { clip-path: inset(0 0 95% 0); }
  20%  { clip-path: inset(40% 0 40% 0); }
  40%  { clip-path: inset(70% 0 10% 0); }
  60%  { clip-path: inset(10% 0 70% 0); }
  80%  { clip-path: inset(50% 0 30% 0); }
  100% { clip-path: inset(0 0 95% 0); }
}

/* ── Helper utility classes using animations ── */
.animate-float      { animation: float 3s ease-in-out infinite; }
.animate-float-lg   { animation: float-lg 5s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.animate-neon       { animation: neon-pulse 2.5s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 20s linear infinite; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

/* ── Scroll-triggered counter number ── */
.counter-val {
  display: inline-block;
  transition: all 0.1s;
}