CSS 动画与编排：合成层、FLIP 与动效性能

/* 反例：宽度动画每帧都触发布局，列表一长帧率先扛不住 */
.drawer--bad { transition: width 240ms ease; }
.drawer--bad.is-open { width: 320px; }

/* 正例：布局一次到位，用 transform 演出"展开"过程，内容另做淡入 */
.drawer--good {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms ease;
}
.drawer--good.is-open { transform: scaleX(1); }

// WAAPI：JS 创建、可控制的动画，返回 Animation 实例
const anim = el.animate(
  [
    { opacity: 0, transform: 'translateY(16px)' },
    { opacity: 1, transform: 'translateY(0)' },
  ],
  { duration: 240, easing: 'ease-out', fill: 'both' }
);

anim.finished
  .then(() => el.classList.add('is-settled'))
  .catch(() => {
    // 动画被取消（元素移除、偏好设置）会 reject，业务状态要能自愈
    el.classList.add('is-settled');
  });

// 交互开始前提示，结束后回收：把层的生命周期绑定到交互生命周期
function hintLayer(el: HTMLElement): void {
  el.style.willChange = 'transform, opacity';
}

function releaseLayer(el: HTMLElement): void {
  el.style.willChange = '';
}

handle.addEventListener('pointerdown', () => hintLayer(card));
handle.addEventListener('pointerup', () => releaseLayer(card));

type Rect = { left: number; top: number; width: number; height: number };

function rectOf(el: HTMLElement): Rect {
  const r = el.getBoundingClientRect();
  return { left: r.left, top: r.top, width: r.width, height: r.height };
}

/** 对一批元素做 FLIP：mutate 里执行任意 DOM 改动，前后各量一次 */
function flipAll(
  elements: HTMLElement[],
  mutate: () => void,
  duration = 240
): void {
  const firsts = new Map(elements.map((el) => [el, rectOf(el)]));
  mutate();                                   // First → Last：布局一步到位
  for (const el of elements) {
    const first = firsts.get(el)!;
    const last = rectOf(el);
    const dx = first.left - last.left;
    const dy = first.top - last.top;
    if (dx === 0 && dy === 0) continue;      // 没动的元素不动画
    el.animate(                              // Invert + Play
      [
        { transform: `translate(${dx}px, ${dy}px)` },
        { transform: 'translate(0px, 0px)' },
      ],
      { duration, easing: 'cubic-bezier(0.2, 0, 0, 1)' }
    );
  }
}

// 用法：列表项上移一位，所有受影响元素一起过渡
function moveItem(list: HTMLElement, from: number, to: number): void {
  const items = [...list.children] as HTMLElement[];
  const moving = items[from];
  flipAll(items, () => {
    const ref = to < from ? items[to] : items[to].nextSibling;
    list.insertBefore(moving, ref);
  });
}

/* 页面滚动进度 → 顶栏进度条，scaleX 随滚动从 0 到 1 */
.progress-bar {
  transform-origin: left center;
  animation: grow-progress linear both;
  animation-timeline: scroll(nearest block);
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 元素穿过视口的过程 → 卡片入场；只取"进入视口 0%~70%"这段进度 */
.reveal-card {
  animation: reveal-card linear both;
  animation-timeline: view(block);
  animation-range: entry 0% entry 70%;
}

@keyframes reveal-card {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

const supportsScrollTimeline = CSS.supports('animation-timeline: scroll()');

if (supportsScrollTimeline) {
  document.documentElement.classList.add('scroll-timeline');
} else {
  // 降级一：IntersectionObserver 加 class，触发普通 transition（够用且便宜）
  // 降级二：rAF + scroll 监听做位移，注意 passive: true 与节流
  document.documentElement.classList.add('no-scroll-timeline');
}

import gsap from 'gsap';

// 一条时间线描述整屏入场：标题 → 副标题 → 列表项错峰，可整体暂停与重放
const tl = gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } });

tl.from('.hero-title', { y: 28, opacity: 0 })
  .from('.hero-sub', { y: 16, opacity: 0 }, '-=0.35')
  .from('.hero-item', { y: 12, opacity: 0, stagger: 0.08 }, '-=0.3')
  .pause();

document.querySelector('.hero-replay')?.addEventListener('click', () => {
  tl.restart();
});

const motionQuery = matchMedia('(prefers-reduced-motion: reduce)');

export function prefersReduced(): boolean {
  return motionQuery.matches;
}

// 偏好变化是运行时事件：用户在系统设置里切换时页面要即时响应
motionQuery.addEventListener('change', () => {
  document.documentElement.dataset.reducedMotion = String(prefersReduced());
});

@media (prefers-reduced-motion: reduce) {
  .reveal-card,
  .hero-item {
    animation: none;
    transition-duration: 1ms;   /* 状态仍要切换，只是不演过程 */
  }
  .parallax-layer { transform: none; }
}