/* ============================================================
   KeyBazaar India — animations.css
   All keyframes and animation utilities
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Core Keyframes ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); max-height: 0; padding: 0; margin: 0; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes tricolorShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,153,0,0.2); }
  50%       { box-shadow: 0 0 30px rgba(255,153,0,0.5); }
}
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,153,0,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(255,153,0,0); }
}

/* ── Scroll Reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* ── Hero Animations ───────────────────────────────────────── */
.hero__badge   { animation: fadeUp 0.5s ease 0.1s both; }
.hero__title   { animation: fadeUp 0.6s ease 0.2s both; }
.hero__subtitle{ animation: fadeUp 0.6s ease 0.35s both; }
.hero__cta     { animation: fadeUp 0.6s ease 0.5s both; }
.hero__trust   { animation: fadeUp 0.6s ease 0.65s both; }

/* ── Typewriter ────────────────────────────────────────────── */
.typewriter { overflow: hidden; border-right: 2px solid var(--accent); white-space: nowrap; animation: typewriter 3s steps(40,end) 0.5s both, blinkCaret 0.75s step-end infinite; }
@keyframes typewriter { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { 50% { border-color: transparent; } }

/* ── Gold Shimmer (Featured cards) ────────────────────────── */
.product-card--featured {
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(255,153,0,0.04) 50%, rgba(212,175,55,0.06) 100%);
  background-size: 200% auto;
  animation: goldShimmer 4s linear infinite;
}

/* ── Tricolor Shimmer ──────────────────────────────────────── */
.tricolor-stripe {
  background-size: 200% 100%;
  animation: tricolorShimmer 4s ease infinite;
}

/* ── Status Step Pulsing ───────────────────────────────────── */
.timeline__step.is-active .timeline__icon { animation: statusPulse 2s ease-in-out infinite; }

/* ── Button Ripple ─────────────────────────────────────────── */
.btn { overflow: hidden; }
.btn .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 ────────────────────────────────────────── */
.count-up { transition: none; }

/* ── Loading Spinner ───────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* ── Glow on Active ────────────────────────────────────────── */
.payment-method-card.is-selected { animation: glowPulse 2s ease-in-out 1; }

/* ── Order Confirmation success icon ──────────────────────── */
.confirm-page__icon { animation: scaleIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both; }

/* ── Admin specific ────────────────────────────────────────── */
.stat-card { animation: fadeUp 0.4s ease both; }
.stat-card:nth-child(2) { animation-delay: 0.05s; }
.stat-card:nth-child(3) { animation-delay: 0.1s; }
.stat-card:nth-child(4) { animation-delay: 0.15s; }

/* ── Sidebar ───────────────────────────────────────────────── */
.admin-sidebar { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }

/* ── Page transition ───────────────────────────────────────── */
.page-enter { animation: fadeIn 0.25s ease; }