/* ============================================
   蓝豆仔官网 - 动效系统 v2
   3D插画风格 · 科技感 · 流畅
   ============================================ */

/* === 基础动画 === */
@keyframes fadeInUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInScale { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
@keyframes bounceIn {
  0% { opacity:0; transform:scale(.3); }
  50% { opacity:1; transform:scale(1.08); }
  70% { transform:scale(.95); }
  100% { transform:scale(1); }
}
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes slowSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes particleFloat {
  0% { transform:translateY(0) translateX(0) scale(1); opacity:0; }
  15% { opacity:.8; }
  85% { opacity:.4; }
  100% { transform:translateY(-100vh) translateX(80px) scale(.2); opacity:0; }
}
@keyframes glowPulse { 0%,100% { box-shadow:0 0 8px rgba(37,99,235,.2); } 50% { box-shadow:0 0 24px rgba(37,99,235,.5); } }
@keyframes progressGrow { from { width:0; } }

/* === 滚动触发动画类 === */
.anim-ready { opacity:0; transition:all .7s cubic-bezier(.25,.46,.45,.94); }
.anim-ready.anim-visible { opacity:1; }
.anim-fade-up.anim-ready { transform:translateY(50px); }
.anim-fade-up.anim-ready.anim-visible { transform:translateY(0); }
.anim-fade-left.anim-ready { transform:translateX(-50px); }
.anim-fade-left.anim-ready.anim-visible { transform:translateX(0); }
.anim-fade-right.anim-ready { transform:translateX(50px); }
.anim-fade-right.anim-ready.anim-visible { transform:translateX(0); }
.anim-fade-scale.anim-ready { transform:scale(.8); }
.anim-fade-scale.anim-ready.anim-visible { transform:scale(1); }
.anim-bounce.anim-ready { transform:scale(.3); }
.anim-bounce.anim-ready.anim-visible { animation:bounceIn .7s ease-out forwards; }

/* 卡片延迟序列 */
.anim-stagger > * { opacity:0; transform:translateY(40px); transition:all .6s ease-out; }
.anim-stagger.anim-visible > *:nth-child(1) { transition-delay:0s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(2) { transition-delay:.1s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(3) { transition-delay:.2s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(4) { transition-delay:.3s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(5) { transition-delay:.4s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(6) { transition-delay:.5s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(7) { transition-delay:.6s; opacity:1; transform:translateY(0); }
.anim-stagger.anim-visible > *:nth-child(8) { transition-delay:.7s; opacity:1; transform:translateY(0); }

/* === Banner粒子 === */
.hero-particles { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hero-particle {
  position:absolute; width:4px; height:4px; background:rgba(255,255,255,.5);
  border-radius:50%; animation:particleFloat linear infinite;
}
.hero-particle:nth-child(1) { left:10%; animation-duration:9s; animation-delay:0s; width:3px; height:3px; }
.hero-particle:nth-child(2) { left:25%; animation-duration:11s; animation-delay:1.5s; width:4px; height:4px; }
.hero-particle:nth-child(3) { left:40%; animation-duration:8s; animation-delay:2s; width:2px; height:2px; }
.hero-particle:nth-child(4) { left:55%; animation-duration:10s; animation-delay:3s; width:5px; height:5px; }
.hero-particle:nth-child(5) { left:70%; animation-duration:12s; animation-delay:1s; width:3px; height:3px; }
.hero-particle:nth-child(6) { left:85%; animation-duration:9s; animation-delay:2.5s; width:4px; height:4px; }
.hero-particle:nth-child(7) { left:15%; animation-duration:13s; animation-delay:3.5s; width:2px; height:2px; }
.hero-particle:nth-child(8) { left:60%; animation-duration:10s; animation-delay:4s; width:3px; height:3px; }

/* Banner文字入场 */
.hero-text-anim { opacity:0; transform:translateY(30px); animation:fadeInUp .8s cubic-bezier(.25,.46,.45,.94) forwards; }
.hero-text-anim:nth-child(1) { animation-delay:.2s; }
.hero-text-anim:nth-child(2) { animation-delay:.5s; }
.hero-text-anim:nth-child(3) { animation-delay:.7s; }
.hero-text-anim:nth-child(4) { animation-delay:.9s; }
.hero-text-anim:nth-child(5) { animation-delay:1.1s; }

/* 浮动元素 */
.hero-visual .float-icon { animation:gentleFloat 3s ease-in-out infinite; }
.hero-visual .float-icon:nth-child(1) { animation-delay:0s; }
.hero-visual .float-icon:nth-child(2) { animation-delay:1s; }
.hero-visual .float-icon:nth-child(3) { animation-delay:2s; }

/* === 成长路径动画 === */
.growth-timeline::before { transition:width 1.5s ease-out; width:0; }
.growth-timeline.anim-visible::before { width:100%; }
.growth-stage .stage-dot { transition:all .5s ease-out; }
.growth-stage.anim-visible .stage-dot { animation:bounceIn .6s ease-out forwards; }

/* === 数字计数 === */
.stat-number.counting { transition:none; }

/* === 光泽流动 === */
.shimmer-effect {
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  background-size:200% 100%; animation:shimmer 2s infinite;
}

/* === 页面加载 === */
.page-loader {
  position:fixed; inset:0; background:var(--white); z-index:9999;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .4s, visibility .4s;
}
.page-loader.hidden { opacity:0; visibility:hidden; }
.loader-logo { width:60px; height:60px; animation:bounceIn .6s ease-out, gentleFloat 2s ease-in-out .6s infinite; }
.loader-ring {
  width:80px; height:80px; border:3px solid #e2e8f0;
  border-top-color:var(--primary); border-radius:50%;
  animation:slowSpin .8s linear infinite; position:absolute;
}

/* 回到顶部和滚动进度条样式已统一在style.css中 */

/* === 图片悬停 === */
.campus-img img, .course-icon img { transition:transform .5s cubic-bezier(.25,.46,.45,.94); }
.campus-card:hover .campus-img img, .course-card:hover .course-icon img { transform:scale(1.12); }

/* === 工具卡片图标跳动 === */
.tool-card:hover .tool-icon { animation:bounceIn .5s ease-out; }