/* 
   ZipZapZoi Premium Animations Engine
   Includes Keyframes, Glassmorphism utilities, and Scrollbar styling. 
*/

/* ─────────────────────────────────────────────────────────────────────
   1. GLOBAL SCROLLBAR POLISH 
   ───────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #019863;
}

/* ─────────────────────────────────────────────────────────────────────
   2. GLASSMORPHISM UTILITIES
   ───────────────────────────────────────────────────────────────────── */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

html.dark .glass-panel {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.glass-nav {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

html.dark .glass-nav {
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ─────────────────────────────────────────────────────────────────────
   3. TACTILE HOVER PHYSICS (Listing Cards)
   ───────────────────────────────────────────────────────────────────── */
.listing-card-physics {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.listing-card-physics:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html.dark .listing-card-physics:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.listing-img-zoom {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.listing-card-physics:hover .listing-img-zoom {
  transform: scale(1.08);
}

/* Tactile button press */
.btn-tactile {
  transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-tactile:active {
  transform: scale(0.96) translateY(2px);
  filter: brightness(0.9);
}

/* ─────────────────────────────────────────────────────────────────────
   4. STAGGERED ENTRANCE ANIMATIONS (Scroll Reveal)
   ───────────────────────────────────────────────────────────────────── */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

.reveal-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────────────────────────────
   5. SKELETON LOADERS
   ───────────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton-box {
  background: #e2e8f0;
  background-image: linear-gradient(90deg, #e2e8f0 0px, #cbd5e1 40px, #e2e8f0 80px);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
}

html.dark .skeleton-box {
  background: #334155;
  background-image: linear-gradient(90deg, #334155 0px, #475569 40px, #334155 80px);
  background-size: 1000px 100%;
}

/* ─────────────────────────────────────────────────────────────────────
   6. GEN Z BADGE ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */

/* 🔥 Hot badge flame pulse */
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
}
.badge-hot {
  animation: hotPulse 1.8s ease-in-out infinite;
}

/* 🔻 Price drop badge slide-in */
@keyframes priceDrop {
  0%   { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.badge-price-drop {
  animation: priceDrop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ✅ Verified seller badge shimmer */
@keyframes verifiedShimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.badge-verified {
  background: linear-gradient(90deg, #facc15 0px, #fef08a 40px, #facc15 80px);
  background-size: 200px 100%;
  animation: verifiedShimmer 2.5s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
}

/* 🎭 Story ring animation */
@keyframes storyRingPulse {
  0%, 100% { box-shadow: 0 0 0 2px #ec4899, 0 0 0 4px transparent; }
  50%       { box-shadow: 0 0 0 2px #a855f7, 0 0 0 4px rgba(168,85,247,0.2); }
}
.story-ring-active {
  animation: storyRingPulse 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   7. MAP MARKER ANIMATIONS
   ───────────────────────────────────────────────────────────────────── */
@keyframes markerPop {
  0%   { transform: scale(0) translateY(10px); opacity: 0; }
  70%  { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.map-marker-enter {
  animation: markerPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─────────────────────────────────────────────────────────────────────
   8. PREMIUM LOGO ANIMATION
   ───────────────────────────────────────────────────────────────────── */
@keyframes logoBouncy {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%       { transform: rotate(3deg) scale(1.05); }
}
.animate-logo-bouncy {
  animation: logoBouncy 3s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   9. LETTER BOUNCE-IN (Used in classifieds header text)
   ───────────────────────────────────────────────────────────────────── */
@keyframes bounceIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.8); }
  70%  { transform: translateY(-3px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-bounce-in {
  display: inline-block;
  opacity: 0;
  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ─────────────────────────────────────────────────────────────────────
   10. POP ANIMATION (used in empty states)
   ───────────────────────────────────────────────────────────────────── */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.animate-pop {
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* =====================================================
   GEN Z / ALPHA ANIMATION EXTENSIONS
   ===================================================== */

/* Shimmer skeleton loader */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}
html.dark .skeleton {
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 1000px 100%;
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* Wiggle - for notification badges */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-12deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-8deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
  90% { transform: rotate(4deg); }
}
.animate-wiggle { animation: wiggle 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; }
.animate-wiggle-once { animation: wiggle 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }

/* Pop Up - modal entrance */
@keyframes popUp {
  0% { opacity: 0; transform: scale(0.85) translateY(20px); }
  60% { opacity: 1; transform: scale(1.03) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-up { animation: popUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Heart Burst - favorite button */
@keyframes heartBurst {
  0% { transform: scale(1); }
  30% { transform: scale(1.5); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.animate-heart-burst { animation: heartBurst 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Number count up */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-count { animation: countUp 0.5s ease forwards; }

/* Neon glow utilities */
.neon-glow {
  box-shadow: 0 0 10px rgba(1,152,99,0.5), 0 0 30px rgba(1,152,99,0.2);
}
.neon-glow-pink {
  box-shadow: 0 0 10px rgba(244,63,143,0.5), 0 0 30px rgba(244,63,143,0.2);
}
.neon-glow-text {
  text-shadow: 0 0 10px rgba(1,152,99,0.8), 0 0 20px rgba(1,152,99,0.4);
}

/* Haptic tap feel */
.haptic-tap {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: pointer;
}
.haptic-tap:active {
  transform: scale(0.94) !important;
}

/* Badge pulse */
@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244,63,143,0.6); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(244,63,143,0); }
}
.badge-pulse { animation: badgePulse 1.8s ease infinite; }

/* Slide in from bottom */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Slide in from right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
.animate-slide-right { animation: slideInRight 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

/* Gradient shine on buttons */
@keyframes gradientShine {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.btn-shine {
  background: linear-gradient(90deg, #019863, #06c47e, #019863);
  background-size: 200% auto;
  animation: gradientShine 3s linear infinite;
  border: none;
  color: white;
  font-weight: 700;
  border-radius: 9999px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-shine:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(1,152,99,0.45); }

/* Reaction pop animation */
@keyframes reactionPop {
  0% { transform: scale(0) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.reaction-pop { animation: reactionPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Staggered fade in for list items */
.stagger-item {
  opacity: 0;
  animation: slideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0.05s; }
.stagger-item:nth-child(2) { animation-delay: 0.10s; }
.stagger-item:nth-child(3) { animation-delay: 0.15s; }
.stagger-item:nth-child(4) { animation-delay: 0.20s; }
.stagger-item:nth-child(5) { animation-delay: 0.25s; }
.stagger-item:nth-child(6) { animation-delay: 0.30s; }

/* Grain texture overlay */
.grain-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Typing indicator */
@keyframes typingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.typing-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #019863;
  animation: typingDot 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Avatar ring (online status) */
.avatar-online-ring {
  position: relative;
}
.avatar-online-ring::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.4);
}

/* Step progress (for post listing wizard) */
.step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
}
.step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 1;
}
.step-line {
  flex: 1;
  height: 3px;
  transition: background 0.5s ease;
}
.step-dot.done { background: #019863; color: white; box-shadow: 0 0 12px rgba(1,152,99,0.6); }
.step-dot.active { background: linear-gradient(135deg, #019863, #06c47e); color: white; transform: scale(1.15); box-shadow: 0 0 20px rgba(1,152,99,0.7); }
.step-dot.pending { background: #e5e7eb; color: #9ca3af; }
html.dark .step-dot.pending { background: #334155; color: #64748b; }
.step-line.done { background: #019863; }
.step-line.pending { background: #e5e7eb; }
html.dark .step-line.pending { background: #334155; }

/* Swipe card (for wanted.html) */
.swipe-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
  cursor: grab;
}
.swipe-card:active { cursor: grabbing; }

/* Floating Label Input */
.float-label-wrap {
  position: relative;
}
.float-label-wrap input,
.float-label-wrap textarea,
.float-label-wrap select {
  padding-top: 1.4rem;
  padding-bottom: 0.4rem;
}
.float-label-wrap label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #9ca3af;
  font-size: 0.95rem;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.float-label-wrap input:focus + label,
.float-label-wrap input:not(:placeholder-shown) + label,
.float-label-wrap textarea:focus + label,
.float-label-wrap textarea:not(:placeholder-shown) + label {
  top: 0.6rem;
  font-size: 0.7rem;
  color: #019863;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Hide scrollbar utility */
.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }