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

@keyframes loadFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes floating {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-18px) rotate(1deg); }
  66% { transform: translateY(-8px) rotate(-1deg); }
}

@keyframes ringPulse {
  0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); }
}

@keyframes scrollAnim {
  0% { transform: scaleX(1); transform-origin: left; }
  50% { transform: scaleX(0); transform-origin: left; }
  51% { transform: scaleX(0); transform-origin: right; }
  100% { transform: scaleX(1); transform-origin: right; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes particleFloat {
  0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100px) translateX(var(--drift, 40px)) scale(1); opacity: 0; }
}

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(123, 47, 190, 0.3); }
  50% { box-shadow: 0 0 50px rgba(123, 47, 190, 0.7), 0 0 80px rgba(201, 168, 76, 0.2); }
}

/* ===== REVEAL CLASSES ===== */
.reveal, .reveal-left, .reveal-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: none;
}

/* ===== FLOATING ANIMATION ===== */
.floating { animation: floating 6s ease-in-out infinite; }

/* ===== GLOW PULSE ===== */
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ===== STAGGER DELAYS FOR CARDS ===== */
.product-card:nth-child(1) { transition-delay: 0.05s; }
.product-card:nth-child(2) { transition-delay: 0.1s; }
.product-card:nth-child(3) { transition-delay: 0.15s; }
.product-card:nth-child(4) { transition-delay: 0.2s; }
.product-card:nth-child(5) { transition-delay: 0.25s; }
.product-card:nth-child(6) { transition-delay: 0.3s; }

.why-card:nth-child(1) { transition-delay: 0.05s; }
.why-card:nth-child(2) { transition-delay: 0.12s; }
.why-card:nth-child(3) { transition-delay: 0.19s; }
.why-card:nth-child(4) { transition-delay: 0.26s; }

.testimonial-card:nth-child(1) { transition-delay: 0.05s; }
.testimonial-card:nth-child(2) { transition-delay: 0.12s; }
.testimonial-card:nth-child(3) { transition-delay: 0.19s; }

/* ===== SHIMMER EFFECT ON CARDS ===== */
.product-card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -60%;
  width: 40%;
  height: 300%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left 0.8s ease;
  pointer-events: none;
}
.product-card:hover::after { left: 130%; }

/* ===== HERO CONTENT STAGGER ===== */
.hero-tag { animation: fadeInUp 0.8s ease 2.5s both; }
.hero-title { animation: fadeInUp 0.9s ease 2.7s both; }
.hero-sub { animation: fadeInUp 0.8s ease 2.9s both; }
.hero-btns { animation: fadeInUp 0.8s ease 3.1s both; }
.hero-bottle { animation: fadeInRight 1s ease 3s both; }
.scroll-indicator { animation: fadeInUp 0.8s ease 3.3s both; }