/* ============================================================
   ChemB2B - 动画系统 v3.0
   丰富动效 | 滚动揭示 | 微交互
   ============================================================ */

/* ---- 关键帧 ---- */
@keyframes floatDot {
  0%, 100% { transform: translateY(0) scale(1); opacity: .4; }
  50% { transform: translateY(-80px) scale(1.4); opacity: .12; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.8); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes scaleInUp {
  from { opacity: 0; transform: scale(.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes numberBounce {
  0% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbitPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(6,182,212,.3); }
  50% { box-shadow: 0 0 40px rgba(6,182,212,.6); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes countingUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(6,182,212,.2); }
  50% { box-shadow: 0 0 20px rgba(6,182,212,.5); }
}

/* ---- 应用类 ---- */
.animate-fadeInUp { animation: fadeInUp .7s ease-out both; }
.animate-fadeInDown { animation: fadeInDown .6s ease-out both; }
.animate-fadeInLeft { animation: fadeInLeft .6s ease-out both; }
.animate-fadeInRight { animation: fadeInRight .6s ease-out both; }
.animate-fadeIn { animation: fadeIn .5s ease-out both; }
.animate-scaleIn { animation: scaleIn .4s ease-out both; }
.animate-scaleInUp { animation: scaleInUp .5s ease-out both; }
.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  background-size: 200% 100%; animation: shimmer 2s infinite;
}
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-iconFloat { animation: iconFloat 3s ease-in-out infinite; }
.animate-glowPulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* 延迟 */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }

/* ---- 滚动显示 ---- */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale {
  opacity: 0; transform: scale(.85);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ---- 悬停效果 ---- */
.hover-lift { transition: transform var(--transition), box-shadow var(--transition); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-glow:hover { box-shadow: 0 0 24px rgba(6,182,212,.2); }
.hover-scale { transition: transform var(--transition); }
.hover-scale:hover { transform: scale(1.03); }

/* ---- 骨架屏 ---- */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius);
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.skeleton-title { height: 24px; width: 60%; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-card { height: 200px; }
.skeleton-chart { height: 300px; }

/* ---- Ripple Effect ---- */
.ripple-effect {
  position: relative; overflow: hidden;
}
.ripple-effect .ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.35);
  transform: scale(0); animation: ripple .6s linear; pointer-events: none;
}

/* ---- 粒子背景动画 ---- */
.particles-container {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(6,182,212,.3); animation: floatDot var(--dur) ease-in-out infinite;
}

/* ---- 渐变背景动画 ---- */
.bg-animate {
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}