/* GPU-Accelerated Animations for High FPS */

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide Up Animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Parallax Background */
.parallax-bg {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Floating Particles */
@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  33% {
    transform: translateY(-30px) translateX(10px) rotate(120deg);
  }
  66% {
    transform: translateY(30px) translateX(-10px) rotate(240deg);
  }
}

.particle {
  will-change: transform;
  transform: translateZ(0);
  animation: float 20s infinite ease-in-out;
}

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
}

/* GPU-Accelerated Classes */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Fade In Up */
.fade-in-up {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.fade-in-up-delay-1 {
  animation: fadeIn 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

.fade-in-up-delay-2 {
  animation: fadeIn 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

.fade-in-up-delay-3 {
  animation: fadeIn 0.8s ease-out 0.6s forwards;
  opacity: 0;
}

/* Slide Up */
.slide-up {
  animation: slideUp 1s ease-out forwards;
  opacity: 0;
}

.slide-up-delay-1 {
  animation: slideUp 1s ease-out 0.3s forwards;
  opacity: 0;
}

.slide-up-delay-2 {
  animation: slideUp 1s ease-out 0.6s forwards;
  opacity: 0;
}

/* Scale In */
.scale-in {
  animation: scaleIn 0.6s ease-out forwards;
  opacity: 0;
}

/* Hover Scale Effect */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Smooth Transitions */
.smooth-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Text Gradient Animation */
@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.gradient-text {
  background: linear-gradient(90deg, #ffffff, #e50914, #ffffff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 3s ease infinite;
}

/* Glow Effect */
.glow-red {
  box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
  transition: box-shadow 0.3s ease;
}

.glow-red:hover {
  box-shadow: 0 0 30px rgba(229, 9, 20, 0.8);
}

/* Intersection Observer Classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Product Card Hover */
.product-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
  transform: translateZ(0);
}

.product-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(229, 9, 20, 0.3);
}

/* Button Pulse */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.pulse-animation {
  animation: pulse 2s ease-in-out infinite;
}

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

.spinner {
  border: 3px solid rgba(229, 9, 20, 0.3);
  border-top-color: #e50914;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  will-change: transform;
}