/**
 * R28 动画集中管理文件
 * 包含：@keyframes定义 + .animation-* 应用类 + stagger延迟CSS变量 + 过渡曲线
 * 
 * ★R66 动画时间轴（全部动画标注 duration / trigger / easing）：
 * 
 * 1. Hero入场        fadeIn 800ms + slideUp 600ms + bounce 600ms  →  页面加载触发
 * 2. 箭头脉冲         2s infinite pulse                            →  页面加载完成
 * 3. 卡片stagger      400ms/卡，隔80ms依次                         →  IntersectionObserver
 * 4. 加购morph        300ms 文字→✓                                 →  点击加购按钮
 * 5. 加购粒子          400ms bezier飞行                            →  加购后100ms
 * 6. 购物车弹跳        300ms scale bounce                          →  粒子完成后
 * 7. 弹窗面板          400ms spring translateY                     →  点击菜品卡片
 * 8. 弹窗内容          渐显stagger 50ms                             →  面板弹出后
 * 9. 主题切换          400ms CSS transition                        →  HTML class变更
 * 10. 关闭弹窗         200ms面板下滑 + 100ms遮罩消退               →  点击关闭/ESC
 */

/* ========== Hero入场动画 ========== */
/* duration: 800ms | trigger: 页面加载 | easing: ease */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* duration: 600ms | trigger: 页面加载后200ms | easing: ease-out */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* duration: 600ms | trigger: slideUp结束后 | easing: cubic-bezier(0.68, -0.55, 0.27, 1.55) */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== 向下箭头脉冲 ========== */
/* duration: 2s infinite | trigger: Hero加载后800ms */
@keyframes pulse-arrow {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.5; }
}

/* ========== 卡片入场 stagger ========== */
/* duration: 400ms | trigger: IntersectionObserver (仅触发一次) | easing: ease-out */
@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dish-card[data-animate="stagger"]:not(.animate-visible) {
  opacity: 0;
  transform: translateY(20px);
}

.dish-card.animate-visible {
  animation: staggerFadeIn 0.4s ease-out forwards;
}

/* ========== 加购按钮morph（文字→✓） ========== */
/* duration: 300ms | trigger: 点击加购 | easing: ease */
@keyframes morphCheck {
  0% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.btn-dish-add.added {
  animation: morphCheck 0.3s ease;
  background: var(--color-primary);
  color: #fff;
}

/* ========== 加购粒子飞行 ========== */
/* duration: 400ms | trigger: 加购后100ms | easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) */
/* (JS动态创建粒子元素，此处为占位) */
.cart-particle {
  z-index: 10001;
  pointer-events: none;
}

/* ========== 购物车图标弹跳 ========== */
/* duration: 300ms | trigger: 粒子飞行完成后 | easing: cubic-bezier(0.68, -0.55, 0.27, 1.55) */
@keyframes cart-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ========== 骨架屏闪烁 ========== */
/* duration: 1.5s infinite | trigger: 图片加载中 */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ========== 过渡曲线工具类 ========== */
.transition-spring {
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.transition-bounce {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* ========== 无障碍：prefers-reduced-motion ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}