/* ============================================================
   motion.css — 动效层
   L0 CSS 过渡（hover/active）已在 base.css
   L1 进场揭示（本文件 + IntersectionObserver）
   L2 滚动视差 / 进度（本文件 + app.js）
   ============================================================ */

/* ---------------- 进场揭示 ---------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* 索引页首屏：整屏元素一起出现，不再逐条错开——
   刚从封面交叉淡化过来时，错开的渐显会让跳转显得拖沓 */
body.is-home [data-reveal] {
  transition-duration: 240ms;
  transition-delay: 0s;
}

/* 首屏文字按行依次出现（不覆盖元素自身的 display） */
[data-hero-line] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}

[data-hero-line].is-in {
  opacity: 1;
  transform: none;
}

[data-hero-line]:nth-child(1) {
  transition-delay: 60ms;
}

[data-hero-line]:nth-child(2) {
  transition-delay: 180ms;
}

/* ---------------- 顶部加载细线 ---------------- */

.load-bar {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 400;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--ember);
  transition: transform 600ms var(--ease), opacity 400ms var(--ease);
  pointer-events: none;
}

.load-bar.is-done {
  transform: scaleX(1);
  opacity: 0;
}

/* ---------------- 阅读进度条 ---------------- */

.read-bar {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 130;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--ink);
  opacity: 0;
  transition: opacity var(--t2) var(--ease);
  pointer-events: none;
}

.read-bar.is-visible {
  opacity: 0.28;
}

/* ---------------- 页面转场 ---------------- */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 220ms var(--ease) both;
  }

  ::view-transition-new(root) {
    animation: vt-in 380ms var(--ease) both;
  }
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* 降级方案：不支持 View Transitions 时的整页淡出 */
body.is-leaving {
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

/* ---------------- 减少动态效果 ---------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-hero-line] {
    opacity: 1 !important;
    transform: none !important;
  }

}