/* motion-advanced.css —— 进阶动效（依赖 tokens.css / base.css）
 *
 * 提供四件事：
 *  1. 滚动叙事：元素按滚动进度推进（--scene: 0→1），可做标题渐显、图片缩放、进度条
 *  2. 分组错峰：data-reveal-group 让子元素自动依次入场
 *  3. hover 光斑：卡片跟随指针的径向高光（--gx / --gy）
 *  4. 页面转场：跨文档 View Transitions（Chrome 126+）自动生效，其它浏览器优雅降级
 *
 * 动效预算（硬规则，写进验收）：
 *   时长 ≤ 420ms；位移 ≤ 24px；缩放 ≤ 1.06；同时动 ≤ 6 个元素；
 *   一屏内最多 1 个「大动作」（满屏转场/大幅缩放）。
 */

/* ------------------------------------------------------------ 1. 滚动叙事 */
[data-scene] {
  /* --scene 由 JS 写入：0 = 刚进入视口底部，1 = 已滚出视口顶部 */
  --scene: 0;
}
[data-scene="fade"] {
  opacity: calc(0.15 + var(--scene) * 0.85);
  transform: translate3d(0, calc((1 - var(--scene)) * 24px), 0);
}
[data-scene="zoom"] > * {
  transform: scale(calc(0.94 + var(--scene) * 0.06));
  transform-origin: 50% 60%;
  will-change: transform;
}
[data-scene="rise"] {
  transform: translate3d(0, calc((1 - var(--scene)) * 40px), 0);
  opacity: calc(0.25 + var(--scene) * 0.75);
}
[data-scene="progress"] {
  position: sticky; top: calc(var(--nav-h) + 12px);
}

/* 叙事进度条：贴顶的细线，长度 = 阅读进度 */
.read-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform-origin: 0 50%; transform: scaleX(var(--read, 0));
  transition: transform 90ms linear;
  pointer-events: none;
}

/* ------------------------------------------------------------ 2. 分组错峰 */
[data-reveal-group] > * {
  transition-delay: calc(var(--group-i, 0) * var(--group-step, 70ms));
}

/* ------------------------------------------------------------ 3. hover 光斑 */
[data-glow] {
  position: relative; isolation: isolate; overflow: hidden;
}
[data-glow]::after {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: radial-gradient(220px circle at var(--gx, 50%) var(--gy, 0%),
    rgba(53, 230, 255, .18), transparent 70%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
  pointer-events: none;
}
[data-glow]:hover::after, [data-glow]:focus-within::after { opacity: 1; }

/* 强调边框：指针靠近时描边发亮（比光斑更克制） */
[data-glow="line"]::after { display: none; }
[data-glow="line"] {
  border-color: color-mix(in oklab, var(--line-strong) 70%, var(--cyan));
}

/* ------------------------------------------------------------ 4. 页面转场 */
@view-transition { navigation: auto; }

/* 默认：整页淡入淡出（跨文档转场可用时由浏览器接管） */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.vt-fallback body { animation: page-in var(--dur-3) var(--ease-out) both; }
html.vt-leaving body { opacity: 0; transition: opacity 160ms var(--ease-out); }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-3);
}

/* ------------------------------------------------------------ 5. 悬浮元素 */
.float { animation: float 7s var(--ease-in-out) infinite; }
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0); }
}

/* 光晕呼吸：用于强调「活着」的状态点 */
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, rgba(53,230,255,.28), transparent 70%);
  animation: breathe 3.4s var(--ease-in-out) infinite; pointer-events: none;
}
@keyframes breathe { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: .8; transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .float, .halo::before, .read-progress { animation: none !important; }
  [data-scene] { transform: none !important; opacity: 1 !important; }
  html.vt-fallback body { animation: none; }
}