/* --- Autocosmic Premium Animations --- */

:root {
  --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-slow: 0.8s;
  --duration-base: 0.4s;
  --duration-fast: 0.2s;
}

/* 1. Base Animation Classes */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium);
}

.fade-in {
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-premium);
}

.zoom-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-slow) var(--ease-premium), transform var(--duration-slow) var(--ease-premium);
}

/* Active State (Triggered by JS) */
.animate-active {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* 2. Header Effects */
.header-scrolled {
  background-color: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px);
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

.nav-link-animate {
  position: relative;
}

.nav-link-animate::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #eab308;
  transition: width var(--duration-base) var(--ease-premium);
}

.nav-link-animate:hover::after {
  width: 100%;
}

/* 3. Product Card Hover Effects */
.product-card-hover {
  transition: transform var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium);
}

.product-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

.img-zoom-hover img {
  transition: transform 1.2s var(--ease-out-expo);
}

.img-zoom-hover:hover img {
  transform: scale(1.1);
}

.btn-slide-up {
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-premium), opacity var(--duration-base);
  opacity: 0;
}

.product-card-hover:hover .btn-slide-up {
  transform: translateY(0);
  opacity: 1;
}

/* 4. Interaction Effects */
.btn-animate:active {
  transform: scale(0.95);
}

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

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(234, 179, 8, 0); }
  100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); }
}

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

@keyframes badge-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 5. Staggered Animations */
.stagger-item {
  transition-delay: calc(var(--stagger-index) * 100ms);
}