@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.5);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
.animate-on-scroll {
  opacity: 0;
}
.animate-on-scroll.is-visible {
  animation: fadeInUp 0.6s ease forwards;
}
.animate-on-scroll:nth-child(1) {
  animation-delay: 0.1s;
}
.animate-on-scroll:nth-child(2) {
  animation-delay: 0.2s;
}
.animate-on-scroll:nth-child(3) {
  animation-delay: 0.3s;
}
.hover-glow:hover {
  animation: glow 1.2s ease infinite;
}
.btn.ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.35) 10%,
    transparent 10%
  );
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.btn.ripple:active::after {
  transform: scale(2);
  opacity: 1;
}
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.06)
  );
  background-size: 200px 100%;
  animation: shimmer 1.2s infinite;
}
.tooltip {
  position: relative;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 14, 39, 0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.tooltip:hover::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.price-pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes filterReveal {
  0% {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.filter-btn {
  opacity: 0;
  animation: filterReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.filter-btn:nth-child(1) {
  animation-delay: 0.1s;
} 
.filter-btn:nth-child(2) {
  animation-delay: 0.15s;
} 
.filter-btn:nth-child(3) {
  animation-delay: 0.2s;
} 
.filter-btn:nth-child(4) {
  animation-delay: 0.25s;
} 
.filter-btn:nth-child(5) {
  animation-delay: 0.3s;
} 
.filter-btn:nth-child(6) {
  animation-delay: 0.35s;
} 
.filter-btn:nth-child(7) {
  animation-delay: 0.4s;
} 
.filter-btn:nth-child(8) {
  animation-delay: 0.45s;
} 
@keyframes glassShine {
  0% {
    left: -150%;
  }
  20% {
    left: 250%;
  } 
  100% {
    left: 250%;
  } 
}
@keyframes popInStack {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(var(--target-scale, 1));
  }
}