/**
 * motion.css —— 第 3 层：动效与 3D 五级降级（L0–L4）
 *
 * 分档写进 <html data-fx="L0..L4">，由 assets/js/capability.js 在首帧前决定，
 * CSS 只负责「这一档该显示什么」，不做能力判断。
 *
 *   L0 全量 3D（桌面 + WebGL2）      → canvas + 光斑 + 指针视差
 *   L1 轻量 3D（移动 WebGL）         → canvas（低模/低 DPR）+ 光斑
 *   L2 2D Canvas                     → canvas 2D 粒子
 *   L3 纯 CSS                        → 光斑 + 渐变块（无 canvas）
 *   L4 静态                          → 仅 hero poster 图
 */

/* ---------- 入场：只在 JS 可用时启用（html.js 由 header 内联脚本加上） ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- L0 / L1：3D 场景 ---------- */
.hero__scene { opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
html[data-fx="L0"] .hero__scene,
html[data-fx="L1"] .hero__scene,
html[data-fx="L2"] .hero__scene { opacity: 1; }

/* 2D 降级同样显示 canvas，但去掉光斑动画避免叠加 */
html[data-fx="L2"] .hero__panel { background: var(--grad-iridescent-soft), var(--bg-card); }

/* L0 才允许指针视差（由 JS 写 --px/--py） */
html[data-fx="L0"] .hero__panel { transform: perspective(900px) rotateX(calc(var(--py, 0) * -3deg)) rotateY(calc(var(--px, 0) * 3deg)); transition: transform 120ms linear; }

/* ---------- L3 / L4：纯 CSS 兜底 ---------- */
html[data-fx="L3"] .sectionfx::before,
html[data-fx="L4"] .sectionfx::before {
  opacity: .55;
  display: block;
}
html[data-fx="L4"] .hero {
  background-image: none;
  background-color: var(--bg-sunken);
}
html[data-fx="L3"] .hero__scene,
html[data-fx="L4"] .hero__scene { display: none; }

/* L4：连渐变光斑都不给，只留 poster 与色块（极弱设备 / 打印） */
html[data-fx="L4"] .sectionfx::before { display: none; }
html[data-fx="L4"] .hero__panel { box-shadow: none; }

/* ---------- 通用 hover 流光（仅指针精细设备） ---------- */
@media (hover: hover) and (pointer: fine) {
  .card--prism:hover::after { animation: prism-sweep 2.4s linear infinite; }
}
@keyframes prism-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---------- 骨架屏（图片懒加载占位，避免 CLS） ---------- */
.pcard__media img,
.gallery__main img {
  background: var(--bg-inset);
}

/* ---------- 打印：去掉一切装饰 ---------- */
@media print {
  .site-header, .site-footer, .float-contact, .nav-mobile, .lang, .filterbar, .cta-band { display: none !important; }
  body { background: var(--bg-base); color: var(--text-primary); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: var(--text-muted); }
  .section { padding-block: var(--s-4); }
}

/* ---------- 用户要求减少动态：全部停掉 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html[data-fx="L0"] .hero__panel { transform: none; }
  .card--prism:hover::after { animation: none; }
  html { scroll-behavior: auto; }
}