/* TechHub Pro v4.0 — 动画样式 */

/* 入场动画基础 */
.reveal { opacity:0; transform:translateY(30px); transition:all .6s cubic-bezier(.16,1,.3,1); }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* 卡片入场 stagger */
.course-card.reveal, .bili-card.reveal, .gh-card.reveal, .res-card.reveal, .rank-card.reveal, .path-card.reveal {
  transition-delay:calc(var(--i, 0) * 60ms);
}

/* 3D 卡片倾斜 */
.course-card, .bili-card, .gh-card {
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .15s ease-out, box-shadow .3s, border-color .3s;
}

/* 滚动进度条 */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  z-index:9999; transition:width .12s ease-out;
  box-shadow:0 0 8px var(--accent);
}

/* 鼠标光晕 */
.mouse-glow {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,212,255,0.08), transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .4s;
  z-index:0; will-change:transform;
}

/* 数字增长 */
[data-count] { font-variant-numeric:tabular-nums; }

/* 浮动卡片 */
.float-card {
  position:absolute; padding:10px 18px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  font-size:0.85rem; font-weight:600; color:var(--text2);
  animation:floatY 6s ease-in-out infinite;
  backdrop-filter:blur(6px);
}
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-12px); }
}

/* 按钮微交互 */
.btn-primary, .btn-ghost, .btn-free, .btn-buy, .btn-paid, .btn-detail {
  transition:all .2s cubic-bezier(.16,1,.3,1);
}
.btn-primary:active, .btn-buy:active { transform:scale(0.97); }

/* 主题切换动画 */
body { transition:background .4s ease, color .4s ease; }
.navbar { transition:background .3s, box-shadow .3s, backdrop-filter .3s; }

/* 骨架屏 */
@keyframes shimmer {
  0% { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
.skeleton {
  background:linear-gradient(90deg, var(--bg3) 25%, var(--card) 50%, var(--bg3) 75%);
  background-size:200% 100%;
  animation:shimmer 1.6s infinite;
  border-radius:8px;
}

/* 平滑滚动 */
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* 焦点可见性 */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible, a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* 选择颜色 */
::selection { background:var(--accent); color:#fff; }

/* 滚动条美化 */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--bg3); border-radius:5px; border:2px solid var(--bg2); }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }