/* ===== SCROLL REVEAL ANIMATIONS ===== */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }

/* ===== FLOATING ANIMATION ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.floating-product {
  animation: float 4s ease-in-out infinite;
}

/* ===== GLOW RING PULSE ===== */
@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.15); opacity: 0.6; }
}
.glow-ring {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ===== ORBIT ANIMATION ===== */
@keyframes orbit {
  0% { transform: rotate(0deg) translateX(var(--distance)) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(var(--distance)) rotate(-360deg); }
}
.orbit-icon {
  animation: orbit 12s linear infinite;
  animation-delay: var(--delay);
}

/* ===== MARQUEE SCROLL ===== */
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marqueeScroll 25s linear infinite;
}

/* ===== BOUNCE EMOJI ===== */
@keyframes bounceEmoji {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-16px) scale(1.1); }
}
.bounce-emoji {
  animation: bounceEmoji 2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

/* ===== HERO TITLE ENTRANCE ===== */
@keyframes slideInLeft {
  0% { opacity: 0; transform: translateX(-60px); }
  100% { opacity: 1; transform: translateX(0); }
}
.hero.loaded .hero-content .title-line {
  animation: slideInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}
.hero.loaded .hero-content .title-line:nth-child(2) {
  animation-delay: 0.15s;
}

/* ===== HERO SUBTITLE ENTRANCE ===== */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero.loaded .hero-subtitle {
  animation: fadeInUp 0.8s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}
.hero.loaded .hero-cta {
  animation: fadeInUp 0.8s 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}
.hero.loaded .hero-stats {
  animation: fadeInUp 0.8s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* ===== HERO PRODUCT ENTRANCE ===== */
@keyframes scaleIn {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
.hero.loaded .hero-product-wrapper {
  animation: scaleIn 0.8s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  opacity: 0;
}

/* ===== PARTICLE FLOAT ===== */
@keyframes particleFloat {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}
.particle {
  animation: particleFloat var(--duration) var(--delay) ease-in-out infinite;
}

/* ===== STEP ICON PULSE ===== */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.step:hover .step__icon {
  animation: iconPulse 0.8s ease-in-out;
}

/* ===== CARD TILT EFFECT (via JS) ===== */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* ===== BUTTON RIPPLE ===== */
@keyframes ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
  animation: ripple 0.6s ease-out;
}

/* ===== CART ITEM ENTRANCE ===== */
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
.cart-item {
  animation: slideInRight 0.3s ease-out;
}

/* ===== TOAST ANIMATION ===== */
@keyframes toastIn {
  0% { transform: translateX(120%); }
  100% { transform: translateX(0); }
}
@keyframes toastOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(120%); }
}

/* ===== SLIME DRIP ANIMATION ===== */
@keyframes slimeDrip {
  0% { transform: scaleY(0); transform-origin: top; }
  60% { transform: scaleY(1.1); }
  100% { transform: scaleY(1); transform-origin: top; }
}
.slime-drip-top {
  animation: slimeDrip 1s 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform: scaleY(0);
}

/* ===== NAVBAR SCROLL EFFECT ===== */
.navbar {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* ===== SMOOTH HOVER GLOW ===== */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, transparent, rgba(139, 111, 192, 0.06));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }
.feature-card { position: relative; overflow: hidden; }

/* ===== ADD-TO-CART POP ===== */
@keyframes cartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.cart-count.pop {
  animation: cartPop 0.3s ease;
}

/* ===== LOADING SHIMMER ===== */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}