/* ============================================
   御膳小厨 — Animations Stylesheet
   All @keyframes + scroll-triggered classes
   ============================================ */

/* ----- Scroll-Triggered Animation Base ----- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

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

/* Staggered delays */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }
.animate-on-scroll.delay-6 { transition-delay: 0.6s; }

/* ----- Page-Load Animations (no scroll needed) ----- */
.animate-on-load {
  opacity: 0;
}

.hero-title.animate-on-load {
  animation: heroReveal 0.9s 0.1s var(--ease-out) forwards;
}

.hero-subtitle.animate-on-load {
  animation: heroReveal 0.8s 0.35s var(--ease-out) forwards;
}

.hero-tagline.animate-on-load {
  animation: heroReveal 0.8s 0.55s var(--ease-out) forwards;
}

.hero-scroll.animate-on-load {
  animation: heroReveal 0.6s 0.85s var(--ease-out) forwards, bounceDown 2s 1.5s ease-in-out infinite;
}

/* ----- Keyframes ----- */

/* Hero text reveal */
@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scroll arrow bounce */
@keyframes bounceDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}

/* Wok toss */
@keyframes wokToss {
  0% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(-50%) translateY(-20px) rotate(-12deg);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) rotate(-4deg);
  }
  100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
}

/* Countdown pulse */
@keyframes countPulse {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Ingredient caught - scale up & fade */
@keyframes ingredientCaught {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(-30px) scale(1.5);
    opacity: 1;
  }
  100% {
    transform: translateY(-60px) scale(0.3);
    opacity: 0;
  }
}

/* Ingredient missed - fall and fade */
@keyframes ingredientMissed {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

/* Gold particle burst */
@keyframes particleBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px), var(--py)) scale(0);
    opacity: 0;
  }
}

/* Honor card slide-in (staggered within section) */
.honor-card.animate-on-scroll {
  transform: translateX(40px);
}

.honor-card.animate-on-scroll.is-visible {
  transform: translateX(0);
}

/* Dish card hover detail overlay */
.dish-card {
  position: relative;
}

.dish-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 36, 22, 0.03) 0%, transparent 30%);
  border-radius: var(--radius-lg);
  pointer-events: none;
  transition: opacity 0.35s ease;
  opacity: 0;
}

.dish-card:hover::after {
  opacity: 1;
}