/* ============================================================
   校园O2O商城 - 动画库
   ============================================================ */

/* ============ 进入动画 ============ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.3); }
  50% { transform: scale(1); }
  75% { transform: scale(1.3); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ============ 应用类 ============ */
.anim-fade-in { animation: fadeIn 0.4s var(--ease) both; }
.anim-fade-in-up { animation: fadeInUp 0.5s var(--ease) both; }
.anim-fade-in-down { animation: fadeInDown 0.4s var(--ease) both; }
.anim-slide-in-right { animation: slideInRight 0.4s var(--ease) both; }
.anim-scale-in { animation: scaleIn 0.3s var(--ease-bounce) both; }
.anim-pulse { animation: pulse 2s ease-in-out infinite; }
.anim-heart-beat { animation: heartBeat 1s ease-in-out; }
.anim-float { animation: float 3s ease-in-out infinite; }

/* ============ 瀑布流错开动画 ============ */
.goods-card:nth-child(1) { animation: fadeInUp 0.4s var(--ease) 0.05s both; }
.goods-card:nth-child(2) { animation: fadeInUp 0.4s var(--ease) 0.10s both; }
.goods-card:nth-child(3) { animation: fadeInUp 0.4s var(--ease) 0.15s both; }
.goods-card:nth-child(4) { animation: fadeInUp 0.4s var(--ease) 0.20s both; }
.goods-card:nth-child(5) { animation: fadeInUp 0.4s var(--ease) 0.25s both; }
.goods-card:nth-child(6) { animation: fadeInUp 0.4s var(--ease) 0.30s both; }
.goods-card:nth-child(7) { animation: fadeInUp 0.4s var(--ease) 0.35s both; }
.goods-card:nth-child(8) { animation: fadeInUp 0.4s var(--ease) 0.40s both; }

.campus-card:nth-child(1) { animation: fadeInUp 0.4s var(--ease) 0.05s both; }
.campus-card:nth-child(2) { animation: fadeInUp 0.4s var(--ease) 0.10s both; }
.campus-card:nth-child(3) { animation: fadeInUp 0.4s var(--ease) 0.15s both; }
.campus-card:nth-child(4) { animation: fadeInUp 0.4s var(--ease) 0.20s both; }
.campus-card:nth-child(5) { animation: fadeInUp 0.4s var(--ease) 0.25s both; }
.campus-card:nth-child(6) { animation: fadeInUp 0.4s var(--ease) 0.30s both; }
.campus-card:nth-child(7) { animation: fadeInUp 0.4s var(--ease) 0.35s both; }
.campus-card:nth-child(8) { animation: fadeInUp 0.4s var(--ease) 0.40s both; }

.quick-item:nth-child(1) { animation: fadeInUp 0.3s var(--ease) 0.05s both; }
.quick-item:nth-child(2) { animation: fadeInUp 0.3s var(--ease) 0.10s both; }
.quick-item:nth-child(3) { animation: fadeInUp 0.3s var(--ease) 0.15s both; }
.quick-item:nth-child(4) { animation: fadeInUp 0.3s var(--ease) 0.20s both; }
.quick-item:nth-child(5) { animation: fadeInUp 0.3s var(--ease) 0.25s both; }
.quick-item:nth-child(6) { animation: fadeInUp 0.3s var(--ease) 0.30s both; }
.quick-item:nth-child(7) { animation: fadeInUp 0.3s var(--ease) 0.35s both; }
.quick-item:nth-child(8) { animation: fadeInUp 0.3s var(--ease) 0.40s both; }
.quick-item:nth-child(9) { animation: fadeInUp 0.3s var(--ease) 0.45s both; }
.quick-item:nth-child(10) { animation: fadeInUp 0.3s var(--ease) 0.50s both; }

.seckill-item:nth-child(1) { animation: slideInRight 0.4s var(--ease) 0.1s both; }
.seckill-item:nth-child(2) { animation: slideInRight 0.4s var(--ease) 0.2s both; }
.seckill-item:nth-child(3) { animation: slideInRight 0.4s var(--ease) 0.3s both; }
.seckill-item:nth-child(4) { animation: slideInRight 0.4s var(--ease) 0.4s both; }
.seckill-item:nth-child(5) { animation: slideInRight 0.4s var(--ease) 0.5s both; }

/* ============ 数字滚动动画 ============ */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.count-anim { animation: countUp 0.5s var(--ease) both; }

/* ============ 角标小红点 ============ */
.badge-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ============ 图片懒加载 ============ */
.lazy-img {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
.lazy-img.loaded { opacity: 1; animation: none; }

/* ============ 关注按钮收藏效果 ============ */
.fav-btn {
  transition: all 0.3s var(--ease-bounce);
}
.fav-btn--active {
  animation: heartBeat 0.6s var(--ease);
}