/* ============================================
   DRINKOSIP — Animations & Micro-interactions
   ============================================ */

/* --- Hero entrance animations --- */
@keyframes heroContentSlide {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroImageFloat {
  0% { opacity: 0; transform: translateY(40px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-content { animation: heroContentSlide 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s both; }
.hero-image-wrapper { animation: heroImageFloat 1s cubic-bezier(0.22,1,0.36,1) 0.5s both; }

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(0deg); }
  75% { transform: translateY(-4px) rotate(-1deg); }
}

.float-gentle { animation: floatGentle 3s ease-in-out infinite; }
.float-slow { animation: floatSlow 4s ease-in-out infinite; }

/* --- Marquee --- */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Counter pulse --- */
@keyframes counterPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* --- Card hover glow --- */
@keyframes cardGlow {
  0% { box-shadow: 0 4px 16px rgba(45,42,38,0.06); }
  100% { box-shadow: 0 20px 60px rgba(45,42,38,0.1), 0 8px 20px rgba(45,42,38,0.06); }
}

/* --- Ingredient bounce --- */
@keyframes ingredientBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.ingredient-icon {
  animation: ingredientBounce 2.5s ease-in-out infinite;
}
.ingredient-item:nth-child(2) .ingredient-icon { animation-delay: 0.2s; }
.ingredient-item:nth-child(3) .ingredient-icon { animation-delay: 0.4s; }
.ingredient-item:nth-child(4) .ingredient-icon { animation-delay: 0.6s; }

/* --- Fade in up for form success --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.form-success.show {
  animation: fadeInUp 0.4s cubic-bezier(0.22,1,0.36,1);
}

/* --- Toast --- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Timeline dot pulse --- */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.timeline-dot { animation: dotPulse 2s ease-in-out infinite; }

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

/* --- Spin (for decorative elements) --- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

/* --- Stagger delays for grid items --- */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}