/* ============================================
   ANIMATION STYLESHEET
   Smooth, premium, nature-inspired
   ============================================ */

/* --- Keyframes --- */

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade In Scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide In Right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Ambient Glow Pulse */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(225, 161, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 40px rgba(225, 161, 0, 0.3);
  }
}

/* Floating */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pollen Float */
@keyframes pollenFloat {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  10% {
    opacity: 0.6;
    transform: scale(1);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translate(var(--drift-x, 60px), var(--drift-y, -200px)) scale(0.5);
  }
}

/* Shimmer */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Spin slow */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Bounce subtle */
@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* --- Animation Classes --- */

/* Scroll-triggered fade-in (applied via JS) */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Stagger delay classes */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Glow pulse for hero elements */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* Float animation for decorative elements */
.float-anim {
  animation: float 4s ease-in-out infinite;
}

.float-anim--slow {
  animation: float 6s ease-in-out infinite;
}

.float-anim--delay {
  animation: float 4s ease-in-out 1s infinite;
}

/* Hero float cards */
.hero__float-card--top {
  animation: float 5s ease-in-out infinite;
}

.hero__float-card--bottom {
  animation: float 5s ease-in-out 1.5s infinite;
}

/* Pollen particles */
.hero__particle:nth-child(1) {
  --drift-x: 80px;
  --drift-y: -250px;
  left: 15%;
  top: 80%;
  animation: pollenFloat 8s ease-out infinite;
  animation-delay: 0s;
}

.hero__particle:nth-child(2) {
  --drift-x: -60px;
  --drift-y: -300px;
  left: 45%;
  top: 90%;
  animation: pollenFloat 10s ease-out infinite;
  animation-delay: 2s;
}

.hero__particle:nth-child(3) {
  --drift-x: 100px;
  --drift-y: -200px;
  left: 70%;
  top: 85%;
  animation: pollenFloat 7s ease-out infinite;
  animation-delay: 4s;
}

.hero__particle:nth-child(4) {
  --drift-x: -40px;
  --drift-y: -280px;
  left: 25%;
  top: 75%;
  animation: pollenFloat 9s ease-out infinite;
  animation-delay: 1s;
}

.hero__particle:nth-child(5) {
  --drift-x: 70px;
  --drift-y: -220px;
  left: 85%;
  top: 70%;
  animation: pollenFloat 11s ease-out infinite;
  animation-delay: 3s;
}

.hero__particle:nth-child(6) {
  --drift-x: -90px;
  --drift-y: -260px;
  left: 55%;
  top: 95%;
  animation: pollenFloat 8.5s ease-out infinite;
  animation-delay: 5s;
}

.hero__particle:nth-child(7) {
  --drift-x: 50px;
  --drift-y: -310px;
  left: 10%;
  top: 65%;
  animation: pollenFloat 12s ease-out infinite;
  animation-delay: 2.5s;
}

.hero__particle:nth-child(8) {
  --drift-x: -70px;
  --drift-y: -190px;
  left: 90%;
  top: 80%;
  animation: pollenFloat 9.5s ease-out infinite;
  animation-delay: 6s;
}

/* Shimmer overlay for product images */
.product-card__image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.6s ease;
  z-index: 2;
  pointer-events: none;
}

.product-card:hover .product-card__image-wrapper::after {
  left: 150%;
}

/* Button shimmer */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  pointer-events: none;
}

.btn--primary:hover::after {
  animation: shimmer 0.8s ease-out;
}

/* Page load animation */
.page-load {
  animation: fadeIn 0.4s ease-out;
}

/* Hero entry animations */
.hero__badge {
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.hero__title {
  animation: fadeInUp 0.6s ease-out 0.35s both;
}

.hero__subtitle {
  animation: fadeInUp 0.6s ease-out 0.5s both;
}

.hero__actions {
  animation: fadeInUp 0.6s ease-out 0.65s both;
}

.hero__stats {
  animation: fadeInUp 0.6s ease-out 0.8s both;
}

.hero__visual {
  animation: fadeInScale 0.8s ease-out 0.5s both;
}

/* Mobile nav animations */
.mobile-nav__link {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-nav.open .mobile-nav__link {
  opacity: 1;
  transform: translateX(0);
}

.mobile-nav.open .mobile-nav__link:nth-child(1) { transition-delay: 0.1s; }
.mobile-nav.open .mobile-nav__link:nth-child(2) { transition-delay: 0.15s; }
.mobile-nav.open .mobile-nav__link:nth-child(3) { transition-delay: 0.2s; }
.mobile-nav.open .mobile-nav__link:nth-child(4) { transition-delay: 0.25s; }
.mobile-nav.open .mobile-nav__link:nth-child(5) { transition-delay: 0.3s; }
.mobile-nav.open .mobile-nav__link:nth-child(6) { transition-delay: 0.35s; }
.mobile-nav.open .mobile-nav__link:nth-child(7) { transition-delay: 0.4s; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__stats,
  .hero__visual {
    animation: none;
    opacity: 1;
  }

  .hero__float-card--top,
  .hero__float-card--bottom,
  .float-anim,
  .float-anim--slow,
  .float-anim--delay {
    animation: none;
  }

  .glow-pulse {
    animation: none;
  }

  .hero__particle {
    display: none;
  }

  .product-card__image-wrapper::after,
  .btn--primary::after {
    display: none;
  }
}