/* ============================================================
   animations.css — Keyframes & Motion Design
   Schfees Pay — Premium Fintech Interactions
   ============================================================ */

/* ---------- Preloader ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.2); opacity: 1; }
}
@keyframes ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes scrollDot {
  0%, 100% { top: 0; opacity: 1; }
  50% { top: 34px; opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* ---------- Scroll Reveal (base class) ---------- */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Counter Animation ---------- */
.counter-animating {
  transition: none; /* handled by JS */
}

/* ---------- Magnetic Button (JS applies transform) ---------- */
.btn--magnetic {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Ripple Effect (JS adds element) ---------- */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ---------- Card Lift Hover (applied via class if needed) ---------- */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ---------- Typing Indicator (for AI Support) ---------- */
.typing-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--clr-gray-500);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite both;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
}

/* ---------- Progress Ring (calculator) ---------- */
@keyframes ringFill {
  from { stroke-dashoffset: 264; }
  to { stroke-dashoffset: var(--target-offset); }
}

/* ---------- Section Entrance (alternative) ---------- */
.section-entrance {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Gradient Text Animation ---------- */
.animated-gradient-text {
  background: linear-gradient(270deg, var(--clr-primary-600), var(--clr-gold-400), var(--clr-primary-600));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ---------- Floating Particles (hero background) ---------- */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--clr-primary-500);
  border-radius: 50%;
  animation: particleFloat 8s linear infinite;
  opacity: 0.3;
}
@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ---------- Glassmorphism Hover Glow ---------- */
.glass-glow:hover {
  box-shadow: 0 0 20px rgba(212,166,44,0.2), var(--glass-shadow);
}

/* ---------- Dark Mode Transition ---------- */
.theme-transition * {
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}