@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  scroll-behavior: smooth;
}

article,
div,
section {
  scroll-margin-top: 80px;
}

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

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
}

.product-image-container {
  perspective: 1000px;
}

.product-image {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.product-image-container:hover .product-image {
  transform: rotateY(5deg) rotateX(-5deg);
}

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

.pulse-badge {
  animation: pulse 2s infinite;
}

.gradient-text {
  background: linear-gradient(135deg, #2f2f2f 0%, #ff7f71 25%, #b9e937 50%, #2f2f2f 75%, #ff7f71 100%);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}