/* ==========================================================================
   Fluxboard — 渐进增强层
   这一层只在浏览器支持时生效；不支持时页面依然完整可用。
   原则：动画只碰 S 级属性（transform / opacity / clip-path），
        滚动动画走合成器线程，绝不劫持滚动速度。
   ========================================================================== */

/* ── 1. 颗粒质感（低透明度 SVG 噪声，成本极低）───────────────────────── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: 0.05; }

/* ── 2. 滚动进度条：原生 scroll 时间线，零 JS ────────────────────────── */
@supports (animation-timeline: scroll()) {
  .progress__bar {
    transform: scaleX(0);
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
}

/* ── 3. 入场揭示 ──────────────────────────────────────────────────────── */
/* 默认可见：JS 未加载、解析失败或浏览器过旧时，内容依然完整显示 */
.reveal { opacity: 1; transform: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* 揭示完成后释放合成层，避免长页面上堆积大量 layer */
.js .reveal.is-done { will-change: auto; }

/* 支持原生 view() 时间线时，改用合成器线程驱动（比 IntersectionObserver 更省）
   注意：这里只对"简单"元素启用，带 hover 位移的卡片仍走 JS 类切换，
   以免 transform 被动画覆盖。 */
@supports (animation-timeline: view()) {
  .js .pull__quote.reveal,
  .js .endcta__inner.reveal,
  .js .strip__inner.reveal,
  .js .step.reveal {
    opacity: 0;
    transform: none;
    transition: none;
    animation: view-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 62%;
  }
  @keyframes view-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  /* animation-range 会随视口高度变化；用极小高度兜底 */
  @media (max-height: 460px) {
    .js .pull__quote.reveal,
    .js .endcta__inner.reveal,
    .js .strip__inner.reveal,
    .js .step.reveal { animation: none; opacity: 1; transform: none; }
  }
}

/* ── 4. 标题字重微动（变量字体轴，只在 hover 触发，极短）───────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card__title {
    transition: font-variation-settings var(--dur-micro) var(--ease);
    font-variation-settings: "wght" 600;
  }
  .card:hover .card__title { font-variation-settings: "wght" 680; }

  .plan__num {
    transition: font-variation-settings var(--dur-micro) var(--ease);
  }
  .plan:hover .plan__num { font-variation-settings: "wght" 700; }
}

/* Fraunces 的光学尺寸轴：大标题收紧，小标题放松 */
.hero__title { font-variation-settings: "opsz" 120; }
.pull__quote p { font-variation-settings: "opsz" 72; }
.sec-head h2, .endcta h2 { font-variation-settings: "opsz" 48; }
.card__title, .step h3 { font-variation-settings: "opsz" 24; }

/* ── 5. 容器查询：面板组件按自身宽度自适应，而非视口 ───────────────── */
@supports (container-type: inline-size) {
  .panel__body { container-type: inline-size; }

  @container (max-width: 340px) {
    .panel__head { flex-direction: column; }
    .panel__delta { font-size: 0.76rem; }
    .ptable thead th:nth-child(2),
    .ptable tbody td:nth-child(2) { display: none; }
  }
  @container (min-width: 460px) {
    .chart svg { height: 150px; }
  }
}

/* ── 6. 首屏入场：一次性，短，不拖慢感知 ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__copy > * {
    animation: hero-in 560ms var(--ease) both;
  }
  .js .hero__copy > *:nth-child(2) { animation-delay: 60ms; }
  .js .hero__copy > *:nth-child(3) { animation-delay: 120ms; }
  .js .hero__copy > *:nth-child(4) { animation-delay: 175ms; }
  .js .hero__copy > *:nth-child(5) { animation-delay: 220ms; }
  @keyframes hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .js .hero .panel { animation: hero-in 680ms var(--ease) 140ms both; }
}

/* ── 7. 高对比度模式与强制颜色兜底 ──────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --ink-2: oklch(0.32 0.02 62);
    --ink-3: oklch(0.42 0.02 60);
    --line: oklch(0.72 0.02 74);
    --line-strong: oklch(0.55 0.02 70);
  }
  .card, .plan, .panel { border-width: 1.5px; }
}

@media (forced-colors: active) {
  body::after { display: none; }
  .brand__mark rect { fill: CanvasText; }
  .plan--hot { border-width: 2px; }
  .chart__line { stroke: CanvasText; }
}