/* ═══════════════════════════════════════════════════════════════════════════
   ARNOREX e-MARKET — ANIMATIONS CSS
   Page Transitions · Micro-interactions · Loading States ·
   Intelligence Animations · Score Updates · Trending Effects ·
   Card Interactions · Toast · Modal · Skeleton · Pulse Effects
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. KEYFRAME LIBRARY
   All @keyframes defined once, reused everywhere via animation classes
───────────────────────────────────────────────────────────────────────────── */

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

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

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  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); }
}

/* Scale */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

/* Slide */
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

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

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

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

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

@keyframes spinReverse {
  to { transform: rotate(-360deg); }
}

/* Bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-18px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* Shake — for errors */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-5px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

/* Shimmer — skeleton loading */
@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* Pulse — attention / live indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes pulseSlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.97); }
}

/* Ping — ripple outward */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Float — gentle levitation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Glow — ambient light effect */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(240,165,0,.4); }
  50%       { box-shadow: 0 0 24px rgba(240,165,0,.8); }
}

@keyframes glowBlue {
  0%, 100% { box-shadow: 0 0 8px rgba(37,99,235,.4); }
  50%       { box-shadow: 0 0 24px rgba(37,99,235,.8); }
}

@keyframes glowGreen {
  0%, 100% { box-shadow: 0 0 8px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 0 24px rgba(37,211,102,.8); }
}

/* Score count-up flash */
@keyframes scoreFlash {
  0%   { background: var(--amber-pale); transform: scale(1.05); }
  100% { background: transparent; transform: scale(1); }
}

/* Trending surge */
@keyframes trendSurge {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-4px) scale(1.04); }
  60%  { transform: translateY(-2px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

/* Trend pulse — purple glow */
@keyframes trendPulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(124,58,237,.4); }
  50%       { box-shadow: 0 2px 24px rgba(124,58,237,.75); }
}

/* Card add-to-cart confirmation */
@keyframes cartBump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.22); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* Like heart pop */
@keyframes heartPop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.4); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* WhatsApp pulse */
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); }
  50%       { box-shadow: 0 4px 36px rgba(37,211,102,.85); }
}

/* Live dot ping */
@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Number count-up (applied via JS) */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   2. UTILITY ANIMATION CLASSES
   Apply directly in HTML or via JS classList
───────────────────────────────────────────────────────────────────────────── */

/* Fade */
.anim-fade-in        { animation: fadeIn var(--dur-slow) var(--ease-in-out) both; }
.anim-fade-out       { animation: fadeOut var(--dur-slow) var(--ease-in-out) both; }
.anim-fade-in-up     { animation: fadeInUp var(--dur-slow) var(--ease-spring) both; }
.anim-fade-in-down   { animation: fadeInDown var(--dur-slow) var(--ease-spring) both; }
.anim-fade-in-left   { animation: fadeInLeft var(--dur-slow) var(--ease-spring) both; }
.anim-fade-in-right  { animation: fadeInRight var(--dur-slow) var(--ease-spring) both; }

/* Scale */
.anim-scale-in       { animation: scaleIn var(--dur-slow) var(--ease-spring) both; }
.anim-scale-bounce   { animation: scaleInBounce var(--dur-slower) var(--ease-spring) both; }

/* Slide */
.anim-slide-up       { animation: slideInUp var(--dur-slower) var(--ease-spring) both; }
.anim-slide-down     { animation: slideInDown var(--dur-slow) var(--ease-spring) both; }
.anim-slide-left     { animation: slideInLeft var(--dur-slow) var(--ease-spring) both; }
.anim-slide-right    { animation: slideInRight var(--dur-slow) var(--ease-spring) both; }

/* Attention */
.anim-bounce         { animation: bounce 1s infinite; }
.anim-float          { animation: float 3s ease-in-out infinite; }
.anim-pulse          { animation: pulse 2s ease-in-out infinite; }
.anim-pulse-slow     { animation: pulseSlow 3s ease-in-out infinite; }
.anim-spin           { animation: spin 1s linear infinite; }
.anim-shake          { animation: shake 0.5s var(--ease-in-out) both; }
.anim-glow           { animation: glow 2s ease-in-out infinite; }

/* Delays */
.anim-delay-1        { animation-delay: 100ms; }
.anim-delay-2        { animation-delay: 200ms; }
.anim-delay-3        { animation-delay: 300ms; }
.anim-delay-4        { animation-delay: 400ms; }
.anim-delay-5        { animation-delay: 500ms; }
.anim-delay-6        { animation-delay: 600ms; }

/* ─────────────────────────────────────────────────────────────────────────────
   3. PRODUCT CARD ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */

/* Staggered card entrance — applied via JS with index delay */
.pcard {
  animation: fadeInUp var(--dur-slower) var(--ease-spring) both;
}

/* Card score update flash */
.pcard.score-updated {
  animation: scoreFlash 0.6s var(--ease-in-out) both;
}

/* Card trending surge */
.pcard.trending-surge {
  animation: trendSurge 0.8s var(--ease-spring) both;
}

/* Cart add confirmation — badge bump */
.badge.bump {
  animation: cartBump 0.5s var(--ease-spring) both;
}

/* Like heart pop */
.plike.popped {
  animation: heartPop 0.5s var(--ease-spring) both;
}

/* Ripple effect on card tap */
.pcard-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(240,165,0,.25);
  transform: scale(0);
  animation: ripple 0.6s linear both;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. HERO ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */

/* Hero slide text — staggered entrance */
.hero-tag  { animation: fadeInUp 0.7s 0.0s var(--ease-spring) both; }
.hero-sub  { animation: fadeInUp 0.7s 0.1s var(--ease-spring) both; }
.hero-price-tag { animation: fadeInUp 0.7s 0.15s var(--ease-spring) both; }
.hero-cta  { animation: fadeInUp 0.7s 0.2s var(--ease-spring) both; }

/* Dots bounce in */
.hero-dot {
  animation: scaleInBounce 0.5s var(--ease-spring) both;
}

.hero-dot:nth-child(1) { animation-delay: 0.0s; }
.hero-dot:nth-child(2) { animation-delay: 0.07s; }
.hero-dot:nth-child(3) { animation-delay: 0.14s; }
.hero-dot:nth-child(4) { animation-delay: 0.21s; }
.hero-dot:nth-child(5) { animation-delay: 0.28s; }

/* ─────────────────────────────────────────────────────────────────────────────
   5. MODAL ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */

/* Overlay backdrop */
.moverlay {
  animation: fadeIn var(--dur-slow) var(--ease-in-out) both;
}

/* Sheet slide up */
.msheet {
  animation: slideInUp var(--dur-slower) var(--ease-spring) both;
}

/* Close button rotate on hover — defined in base, enhanced here */
.mclose {
  transition: background var(--dur-fast),
              color var(--dur-fast),
              transform var(--dur-slow) var(--ease-spring);
}

.mclose:active {
  transform: scale(0.88) rotate(90deg);
}

/* Modal content stagger */
.mbody > * {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

.mbody > *:nth-child(1) { animation-delay: 0.05s; }
.mbody > *:nth-child(2) { animation-delay: 0.10s; }
.mbody > *:nth-child(3) { animation-delay: 0.15s; }
.mbody > *:nth-child(4) { animation-delay: 0.20s; }
.mbody > *:nth-child(5) { animation-delay: 0.25s; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. INTELLIGENCE ENGINE ANIMATIONS
   Visual feedback when scores change and products rerank
───────────────────────────────────────────────────────────────────────────── */

/* Score bar fill animation */
.adm-score-fill {
  transition: width 1s var(--ease-out);
}

/* Score value count-up */
.adm-kpi-value.updated {
  animation: countUp 0.4s var(--ease-spring) both;
}

/* Product rerank — slide to new position */
.pcard.reranking {
  animation: fadeInUp 0.5s var(--ease-spring) both;
}

/* Trending badge pulse */
.pbadge-trending {
  animation: trendPulse 2s ease-in-out infinite;
}

/* Score increase indicator — green flash */
.score-increase {
  animation: scoreFlash 0.8s var(--ease-out) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. ADMIN DASHBOARD ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */

/* KPI cards stagger in */
.adm-kpi-card {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

.adm-kpi-card:nth-child(1) { animation-delay: 0.00s; }
.adm-kpi-card:nth-child(2) { animation-delay: 0.06s; }
.adm-kpi-card:nth-child(3) { animation-delay: 0.12s; }
.adm-kpi-card:nth-child(4) { animation-delay: 0.18s; }
.adm-kpi-card:nth-child(5) { animation-delay: 0.24s; }
.adm-kpi-card:nth-child(6) { animation-delay: 0.30s; }

/* Leaderboard items stagger */
.adm-leader-item {
  animation: fadeInLeft var(--dur-slow) var(--ease-spring) both;
}

.adm-leader-item:nth-child(1) { animation-delay: 0.00s; }
.adm-leader-item:nth-child(2) { animation-delay: 0.07s; }
.adm-leader-item:nth-child(3) { animation-delay: 0.14s; }
.adm-leader-item:nth-child(4) { animation-delay: 0.21s; }
.adm-leader-item:nth-child(5) { animation-delay: 0.28s; }

/* Event feed item entrance */
.adm-feed-item {
  animation: fadeInLeft var(--dur-slow) var(--ease-spring) both;
}

/* Chart bars grow up */
.adm-bar {
  animation: scaleInUp var(--dur-slower) var(--ease-spring) both;
  transform-origin: bottom center;
}

@keyframes scaleInUp {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.adm-bar:nth-child(1)  { animation-delay: 0.00s; }
.adm-bar:nth-child(2)  { animation-delay: 0.05s; }
.adm-bar:nth-child(3)  { animation-delay: 0.10s; }
.adm-bar:nth-child(4)  { animation-delay: 0.15s; }
.adm-bar:nth-child(5)  { animation-delay: 0.20s; }
.adm-bar:nth-child(6)  { animation-delay: 0.25s; }
.adm-bar:nth-child(7)  { animation-delay: 0.30s; }

/* Admin panel switch */
.adm-panel.on {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

/* Live indicator */
.adm-live-dot::before {
  animation: livePing 1.5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. CATEGORY CHIP ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */
.cat-chip {
  animation: fadeInDown var(--dur-slow) var(--ease-spring) both;
}

.cat-chip:nth-child(1) { animation-delay: 0.00s; }
.cat-chip:nth-child(2) { animation-delay: 0.04s; }
.cat-chip:nth-child(3) { animation-delay: 0.08s; }
.cat-chip:nth-child(4) { animation-delay: 0.12s; }
.cat-chip:nth-child(5) { animation-delay: 0.16s; }
.cat-chip:nth-child(6) { animation-delay: 0.20s; }
.cat-chip:nth-child(7) { animation-delay: 0.24s; }
.cat-chip:nth-child(8) { animation-delay: 0.28s; }
.cat-chip:nth-child(9) { animation-delay: 0.32s; }

/* Active chip transition */
.cat-chip.on {
  animation: scaleInBounce var(--dur-slow) var(--ease-spring) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. DOCK ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */
.dock {
  animation: slideInUp var(--dur-slower) var(--ease-spring) both;
}

.dock-btn {
  transition: color var(--dur-fast),
              transform var(--dur-base) var(--ease-spring);
}

.dock-btn.on svg {
  animation: bounceIn var(--dur-slow) var(--ease-spring) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. SEARCH ANIMATIONS
───────────────────────────────────────────────────────────────────────────── */
.srch-drop {
  animation: fadeInDown var(--dur-slow) var(--ease-spring) both;
}

.srch-item {
  animation: fadeInLeft var(--dur-base) var(--ease-spring) both;
}

.srch-item:nth-child(1) { animation-delay: 0.00s; }
.srch-item:nth-child(2) { animation-delay: 0.04s; }
.srch-item:nth-child(3) { animation-delay: 0.08s; }
.srch-item:nth-child(4) { animation-delay: 0.12s; }
.srch-item:nth-child(5) { animation-delay: 0.16s; }

/* ─────────────────────────────────────────────────────────────────────────────
   11. FLOATING WHATSAPP
───────────────────────────────────────────────────────────────────────────── */
.wa-float {
  animation:
    slideInRight var(--dur-slower) 0.5s var(--ease-spring) both,
    waPulse 3s 1s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. TOAST NOTIFICATION
───────────────────────────────────────────────────────────────────────────── */
.toast {
  animation: toastIn var(--dur-slow) var(--ease-spring) both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(14px) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. PAGE LOAD SEQUENCE
   Elements animate in sequence on first load
───────────────────────────────────────────────────────────────────────────── */
.hdr   { animation: slideInDown var(--dur-slower) var(--ease-spring) both; }

.srch-zone {
  animation: slideInDown var(--dur-slower) 0.06s var(--ease-spring) both;
}

.cats {
  animation: slideInDown var(--dur-slower) 0.12s var(--ease-spring) both;
}

.filters {
  animation: fadeInDown var(--dur-slow) 0.18s var(--ease-spring) both;
}

.sec-hdr {
  animation: fadeInUp var(--dur-slow) 0.22s var(--ease-spring) both;
}

.footer {
  animation: fadeIn var(--dur-slower) 0.3s var(--ease-in-out) both;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. PERSONALIZATION SECTION
───────────────────────────────────────────────────────────────────────────── */
.foryou-sec {
  animation: fadeInUp var(--dur-slow) var(--ease-spring) both;
}

/* For-you cards stagger */
.foryou-scroll .pcard:nth-child(1) { animation-delay: 0.00s; }
.foryou-scroll .pcard:nth-child(2) { animation-delay: 0.08s; }
.foryou-scroll .pcard:nth-child(3) { animation-delay: 0.16s; }
.foryou-scroll .pcard:nth-child(4) { animation-delay: 0.24s; }

/* ─────────────────────────────────────────────────────────────────────────────
   15. TRANSITION HELPERS
   For JS-controlled show/hide
───────────────────────────────────────────────────────────────────────────── */

/* Smooth height collapse */
.collapsible {
  overflow: hidden;
  transition: height var(--dur-slow) var(--ease-in-out),
              opacity var(--dur-slow) var(--ease-in-out);
}

.collapsible.collapsed {
  height: 0;
  opacity: 0;
}

/* Smooth opacity toggle */
.fade-toggle {
  transition: opacity var(--dur-base) var(--ease-in-out);
}

.fade-toggle.hidden-soft {
  opacity: 0;
  pointer-events: none;
}

/* Transform-based show/hide */
.slide-toggle {
  transition: transform var(--dur-slow) var(--ease-spring),
              opacity var(--dur-slow) var(--ease-in-out);
}

.slide-toggle.hidden-soft {
  transform: translateY(12px);
  opacity: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   16. REDUCED MOTION OVERRIDES
   All animations disabled for users who prefer it
───────────────────────────────────────────────────────────────────────────── */
@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;
  }

  .wa-float {
    animation: none !important;
    box-shadow: 0 4px 20px rgba(37,211,102,.5);
  }

  .pbadge-trending { animation: none !important; }
  .adm-live-dot::before { animation: none !important; }
}