/* ================================================================
   ZWIPKART ANIMATIONS
   Consolidated @keyframes and animation utility classes.
   All animations live here — never define @keyframes in style.css.

   RULES:
   - Use --duration-* and --ease-* tokens for all timing.
   - Respect prefers-reduced-motion (handled in style.css reset).
   - One canonical definition per animation — no duplicates.
   ================================================================ */


/* ================================================================
   KEYFRAMES — Entrances
   ================================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* Toast entrance — slight scale + translate */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast exit */
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-12px) scale(0.95); }
}

/* Lightbox */
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Message panel slide */
@keyframes msgSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Help page */
@keyframes helpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Tab panel */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ================================================================
   KEYFRAMES — Exits
   ================================================================ */

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.9); }
}


/* ================================================================
   KEYFRAMES — Looping / Feedback
   ================================================================ */

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Also used by auth spinner — canonical name */
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

/* Pulse (generic — element throbs) */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.85); }
}

/* Pulse dot (navigation indicator) */
@keyframes nav-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.6); }
}

/* Pulse dot (simple opacity) */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Float up (subtle hover effect) */
@keyframes floatUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

/* Bounce (attention grabber) */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Shake (error feedback) */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* Also used by auth forms */
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* Cart count pop */
@keyframes cart-count-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.65); }
  65%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* Ripple (button tap feedback) */
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}


/* ================================================================
   KEYFRAMES — Loading / Skeleton
   ================================================================ */

/* Shimmer — horizontal sweep (for skeleton blocks) */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Also used by product card image placeholders */
@keyframes img-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Legacy skeleton shimmer alias */
@keyframes skel-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton pulse (opacity throb) */
@keyframes skeletonPulse {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.3; }
  100% { opacity: 0.6; }
}

/* Alternate skeleton pulse (used by product detail) */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}


/* ================================================================
   KEYFRAMES — Ticker / Marquee
   ================================================================ */

@keyframes tickerSlide {
  0%, 28%   { transform: translateY(0); }
  33%, 61%  { transform: translateY(-28px); }
  66%, 94%  { transform: translateY(-56px); }
  100%      { transform: translateY(0); }
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ================================================================
   ANIMATION UTILITY CLASSES
   Apply these directly to elements for common entrance effects.
   ================================================================ */

.animate-fade-in      { animation: fadeIn var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-fade-in-up   { animation: fadeInUp var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-fade-in-down { animation: fadeInDown var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-fade-in-left { animation: fadeInLeft var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-slide-up     { animation: slideUp var(--duration-slow, 0.35s) var(--ease-spring, ease) forwards; }
.animate-slide-down   { animation: slideDown var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-scale-in     { animation: scaleIn var(--duration-normal, 0.25s) var(--ease-out, ease) forwards; }
.animate-bounce       { animation: bounce 0.5s var(--ease-spring, ease) forwards; }
.animate-shake        { animation: shake 0.4s var(--ease-in-out, ease) forwards; }
.animate-spin         { animation: spin 0.7s linear infinite; }

/* Legacy class — keep for backward compat */
.animate-in { animation: fadeInUp 0.5s ease forwards; }