/* ============================================================
   烛心 · 动画增强层 v2.0（丝滑版）
   ------------------------------------------------------------
   设计原则：
   1. 全部动效走 transform / opacity（GPU 合成，不触发重排）
   2. 统一缓动曲线体系（弹簧 / 缓出 / 标准 / 强调）
   3. 交错入场用 CSS 变量驱动，JS 只负责设延迟
   4. 尊重 prefers-reduced-motion
   ============================================================ */

/* ---------- 统一缓动与时长体系 ---------- */
:root {
  /* 缓动 */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);        /* 主缓出，收尾柔和 */
  --ease-soft:   cubic-bezier(.4, 0, .2, 1);          /* 标准 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);     /* 回弹 */
  --ease-spring-soft: cubic-bezier(.2, 1.1, .35, 1);  /* 轻回弹，更克制 */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);        /* 对称 */
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);         /* 强烈缓出，适合大位移 */

  /* 时长 */
  --dur-instant: .12s;
  --dur-fast:    .2s;
  --dur:         .38s;
  --dur-slow:    .6s;
  --dur-slower:  .9s;

  /* 交错步长 */
  --stagger: 55ms;
}

/* ---------- 全局平滑：让所有过渡走 GPU ---------- */
.acard, .li, .stat, .litem, .gitem,
.tab, .brand-avatar, .adban, .gbtn, .pbtn, .atab, .chip,
.pcard-copy, .dnav-item, .btn {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* 动画结束后释放 will-change，避免长期占用显存 */
.acard.in, .li.in, .stat.in, .litem.in, .gitem.in {
  will-change: auto;
}

/* ============================================================
   2. 卡片：悬停抬起 + 光泽扫过 + 边框点亮
   ============================================================ */
.acard, .li, .litem, .gitem {
  transition:
    transform var(--dur) var(--ease-spring-soft),
    border-color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur-fast) var(--ease-soft);
}
.acard:hover, .li:hover, .litem:hover, .gitem:hover {
  transform: translate3d(0, -5px, 0) scale(1.012);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, .6),
    0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.acard:active, .li:active, .litem:active, .gitem:active {
  transform: translate3d(0, -2px, 0) scale(.995);
  transition-duration: var(--dur-fast);
}

/* 图标弹跳（保留原有手感，加快回弹） */
.acard .ic, .litem .ic, .gitem .ic {
  transition: transform var(--dur) var(--ease-spring);
}
.acard:hover .ic { transform: translateY(-2px) scale(1.16) rotate(-4deg); }

/* ============================================================
   3. 页面切换：更顺滑的交叉淡入
   ============================================================ */
#blocks {
  animation: blockEnter var(--dur-slow) var(--ease-expo) both;
}
@keyframes blockEnter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* 页面标题逐字上浮 */
.page-head h1 {
  animation: headSlide var(--dur-slow) var(--ease-expo) both;
}
.page-head > p {
  animation: headSlide var(--dur-slow) var(--ease-expo) both;
  animation-delay: .1s;
}
@keyframes headSlide {
  from { opacity: 0; transform: translate3d(0, 18px, 0); letter-spacing: -.5px; }
  to   { opacity: 1; transform: translate3d(0, 0, 0); letter-spacing: inherit; }
}

/* ============================================================
   4. 区块标题：下划线生长
   ============================================================ */
.block-title::before {
  transform-origin: center;
  animation: barGrowIn var(--dur-slow) var(--ease-spring-soft) both;
}
@keyframes barGrowIn {
  from { transform: scaleY(.2); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ============================================================
   5. 数字滚动：更细腻的弹性
   ============================================================ */
.stat b {
  transition: color var(--dur) var(--ease-soft);
}

/* ============================================================
   6. 导航标签：滑动指示条 + 图标上浮
   ============================================================ */
.tab-underline {
  transition:
    transform var(--dur) var(--ease-expo),
    width var(--dur) var(--ease-expo),
    opacity var(--dur-fast) var(--ease-soft);
}
.tab .ti {
  transition: transform var(--dur) var(--ease-spring);
}
.tab:hover .ti {
  transform: translateY(-2px) scale(1.15);
}

/* ============================================================
   7. 抽屉菜单：丝滑滑入 + 列表项逐条浮现
   ============================================================ */
.drawer {
  transition: transform .42s var(--ease-expo);
}
.drawer-mask {
  transition: opacity var(--dur-slow) var(--ease-soft),
              visibility var(--dur-slow);
}
.drawer-open .dnav-item {
  animation: dnavIn .48s var(--ease-expo) both;
}
.drawer-open .dnav-sec {
  animation: dnavIn .42s var(--ease-expo) both;
}
@keyframes dnavIn {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* 逐条延迟 */
.drawer-open .dnav-sec:nth-child(1) { animation-delay: .04s; }
.drawer-open .dnav-item:nth-child(2) { animation-delay: .07s; }
.drawer-open .dnav-item:nth-child(3) { animation-delay: .10s; }
.drawer-open .dnav-item:nth-child(4) { animation-delay: .13s; }
.drawer-open .dnav-item:nth-child(5) { animation-delay: .16s; }
.drawer-open .dnav-item:nth-child(6) { animation-delay: .19s; }
.drawer-open .dnav-item:nth-child(7) { animation-delay: .22s; }
.drawer-open .dnav-item:nth-child(8) { animation-delay: .25s; }
.drawer-open .dnav-item:nth-child(9) { animation-delay: .28s; }
.drawer-open .dnav-item:nth-child(10) { animation-delay: .31s; }
.drawer-open .dnav-item:nth-child(11) { animation-delay: .34s; }
.drawer-open .dnav-item:nth-child(12) { animation-delay: .37s; }

/* 抽屉里的板块图标：展开时轻微弹入 */
.drawer-open .dnav-ic {
  animation: dnavIcon .55s var(--ease-spring) both;
  animation-delay: inherit;
}
@keyframes dnavIcon {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================================
   8. 弹窗：更自然的弹出
   ------------------------------------------------------------
   ⚠️ 两套动画不能混用：
   - .gmodal-box  → position:relative + margin:auto 居中 ⇒ 只能纯 scale
   - .rm-box      → 保持 readme.css 里自己的 rmIn 动画（不动它）
   ============================================================ */
.gmodal-box {
  animation: gPop2 .4s var(--ease-spring-soft) both;
}
@keyframes gPop2 {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.gmodal-mask, .rm-mask {
  animation: maskIn var(--dur) var(--ease-soft) both;
}
@keyframes maskIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   9. 顶栏：滚动时收缩 + 阴影加深
   ============================================================ */
.topbar {
  transition:
    box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-soft),
    height var(--dur) var(--ease-expo);
}
html.scrolled .topbar {
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ============================================================
   10. 滚动进度条：平滑跟随
   ============================================================ */
.scroll-progress {
  will-change: width;
  transition: width .1s linear;
}

/* ============================================================
   11. 按钮：统一的按下反馈
   ============================================================ */
button, .btn, .tab, .dnav-item, a.acard {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):active,
.gbtn:active, .pbtn:active, .atab:active,
.pcard-copy:active, .chip:active {
  transform: scale(.96);
  transition-duration: var(--dur-instant);
}

/* ============================================================
   12. 加载骨架：更柔的呼吸
   ============================================================ */
@keyframes skelPulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .8; }
}
.skel, .skeleton {
  animation: skelPulse 1.6s var(--ease-in-out) infinite;
}

/* ============================================================
   13. 背景光晕：更缓慢的漂浮（降低性能开销）
   ============================================================ */
.bg-layer .orb {
  will-change: transform;
  animation-timing-function: var(--ease-in-out);
}
.bg-layer .grid {
  animation-timing-function: linear;
}

/* ============================================================
   14. 列表项：悬停时左侧指示条生长
   ============================================================ */
.li, .litem {
  position: relative;
  overflow: hidden;
}
.li::before, .litem::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height var(--dur) var(--ease-spring-soft);
}
.li:hover::before, .litem:hover::before {
  height: 62%;
}

/* ============================================================
   15. 媒体光标（鼠标跟随光晕）：更跟手
   ============================================================ */
.glow-dot, .cursor-glow {
  transition: transform .18s var(--ease-out),
              opacity var(--dur) var(--ease-soft);
}

/* ============================================================
   16. 小游戏 / 街机厅交互反馈
   ============================================================ */
.gslot {
  transition: transform var(--dur) var(--ease-spring),
              border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.gslot.win { animation: slotWin .62s var(--ease-spring) both; }
@keyframes slotWin {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-3deg); }
  70%  { transform: scale(.96) rotate(2deg); }
  100% { transform: scale(1); }
}
.scard {
  transition: transform var(--dur) var(--ease-spring-soft),
              box-shadow var(--dur) var(--ease-out);
}
.scard:hover {
  transform: translate3d(0, -4px, 0) scale(1.02);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .6);
}

/* 转盘 / 骰子滚动 */
.dice-box.roll { animation: rollA .7s var(--ease-spring) both; }

/* ============================================================
   17. 数字变化：轻微脉冲
   ============================================================ */
.num-bump {
  animation: numBump .5s var(--ease-spring) both;
}
@keyframes numBump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ============================================================
   18. 无动画模式（无障碍）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ============================================================
   19. 【最终版】滚动进场
   ------------------------------------------------------------
   必须用 !important：
   因为 .acard / .li 等元素自带 transition（特异性更高），
   会覆盖 .reveal 的 transition，导致 opacity:0 不生效。
   ============================================================ */
.reveal {
  opacity: 0 !important;
  transform: translate3d(0, 26px, 0) scale(.97) !important;
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms),
    transform .8s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms) !important;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  will-change: auto;
}

/* 卡片类进场稍慢一点，更有层次 */
.cards .acard.reveal,
.gallery .gitem.reveal {
  transform: translate3d(0, 30px, 0) scale(.95) !important;
}
.cards .acard.reveal.in,
.gallery .gitem.reveal.in {
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* 无动画模式 / 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
html.no-anim .reveal,
html.no-anim .reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}