/* 第二阶段动效层（最后加载）。
   所有「未出现」的隐藏状态都挂在 html.mx-on 下：只有 motion.js 判定动效开启时才生效。
   关闭动效（body.motion-off）、系统减少动态、或脚本未运行时，内容一律直接以最终状态呈现。
   只动 transform / opacity / clip-path / scale / translate，不劫持滚动，不做固定钉住。 */

:root { --mx-ease: cubic-bezier(.16, 1, .3, 1); --mx-ease-soft: cubic-bezier(.22, .8, .24, 1); }

/* ---------- 1. 首屏入场：标题逐行上浮，其余信息依次淡入（只在首次加载播放一次） ---------- */
html.mx-on:not(.mx-hero-done) body .hero .title-line { animation: mx-line-rise 1.15s var(--mx-ease) both; }
html.mx-on:not(.mx-hero-done) body .hero .title-line:nth-child(2) { animation-delay: .12s; }
html.mx-on:not(.mx-hero-done) body .hero :is(.hero-kicker, .hero-position) { animation: mx-fade-up .9s var(--mx-ease) both; }
html.mx-on:not(.mx-hero-done) body .hero :is(.hero-description, .hero-beliefs, .hero-actions) { animation: mx-fade-up 1s var(--mx-ease) .32s both; }
html.mx-on:not(.mx-hero-done) body .hero .hero-network { animation: mx-fade 1.4s var(--mx-ease-soft) .2s both; }
html.mx-on:not(.mx-hero-done) body .hero .hero-kicker > span { animation: mx-draw .9s var(--mx-ease) .1s both; transform-origin: left; }
@keyframes mx-line-rise { from { clip-path: inset(0 0 100% 0); translate: 0 .45em; } to { clip-path: inset(0 0 -12% 0); translate: 0 0; } }
@keyframes mx-fade-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes mx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-draw { from { scale: 0 1; } to { scale: 1 1; } }

/* 首屏滚动视差：文字略快上移，关联图略慢，形成前后两层的纵深。--mx-hero 由脚本写入（0–1）。 */
html.mx-on body .hero .hero-copy { translate: 0 calc(var(--mx-hero, 0) * -64px); opacity: calc(1 - var(--mx-hero, 0) * .55); }
html.mx-on body .hero .hero-network { translate: 0 calc(var(--mx-hero, 0) * 36px); }

/* 向下提示：发丝线里的朱砂点缓慢下行（循环，可随全局开关暂停）。 */
html.mx-on body .hero .scroll-line { position: relative; overflow: hidden; }
html.mx-on body .hero .scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 10px; background: var(--zhu); animation: mx-cue 2.4s var(--mx-ease-soft) infinite; }
@keyframes mx-cue { from { translate: 0 -10px; } to { translate: 0 34px; } }

/* ---------- 2. 标题揭示：自下而上的遮罩展开 ---------- */
html.mx-on body .mx-rise { transition: clip-path 1.1s var(--mx-ease), translate 1.1s var(--mx-ease); }
html.mx-on body .mx-rise:not(.mx-in) { clip-path: inset(0 0 100% 0); translate: 0 .4em; }
html.mx-on body .mx-rise.mx-in { clip-path: inset(0 0 -15% 0); }

/* ---------- 3. 图片：幕布展开 + 由大到正的缓动，进入后随滚动轻微视差 ---------- */
html.mx-on body .mx-frame { transition: clip-path 1.3s var(--mx-ease); }
html.mx-on body .mx-frame:not(.mx-in) { clip-path: inset(10% 6% 10% 6%); }
html.mx-on body .mx-frame.mx-in { clip-path: inset(0 0 0 0); }
html.mx-on body .mx-frame .mx-img { scale: 1.06; translate: 0 calc(var(--mx-p, 0) * -2.6%); transition: scale 1.8s var(--mx-ease); }
html.mx-on body .mx-frame:not(.mx-in) .mx-img { scale: 1.16; }
@media (max-width: 680px) {
  html.mx-on body .mx-frame:not(.mx-in) { clip-path: inset(6% 0 6% 0); }
  html.mx-on body .mx-frame .mx-img { translate: 0 calc(var(--mx-p, 0) * -1.6%); }
}

/* ---------- 4. 报告聚焦：权重条依次生长；数字由脚本滚动计数 ---------- */
html.mx-on body .weight-track span { transform-origin: left center; transition: scale 1.2s var(--mx-ease); }
html.mx-on body .weight-track span:nth-child(2) { transition-delay: .14s; }
html.mx-on body .weight-track span:nth-child(3) { transition-delay: .28s; }
html.mx-on body .weight-track:not(.mx-in) span { scale: 0 1; }
html.mx-on body .report-numbers > div { transition: opacity .9s var(--mx-ease), translate .9s var(--mx-ease); }
html.mx-on body .report-numbers:not(.mx-in) > div { opacity: 0; translate: 0 16px; }
html.mx-on body .report-numbers > div:nth-child(2) { transition-delay: .1s; }
html.mx-on body .report-numbers > div:nth-child(3) { transition-delay: .2s; }

/* ---------- 5. 卡片与列表：同组错落进入 ---------- */
html.mx-on body .js .reveal,
html.mx-on.js body .reveal { transition-duration: 1s; transition-timing-function: var(--mx-ease); }
html.mx-on.js body .project-card.reveal:nth-child(3n+2) { transition-delay: .08s; }
html.mx-on.js body .project-card.reveal:nth-child(3n) { transition-delay: .16s; }
html.mx-on body :is(.opc-step, .opc-evidence, .lab-card) { transition: opacity .9s var(--mx-ease), translate .9s var(--mx-ease); }
html.mx-on body .mx-stagger:not(.mx-in) :is(.opc-step, .opc-evidence, .lab-card) { opacity: 0; translate: 0 22px; }
html.mx-on body .mx-stagger :is(.opc-step, .opc-evidence, .lab-card):nth-child(2) { transition-delay: .08s; }
html.mx-on body .mx-stagger :is(.opc-step, .opc-evidence, .lab-card):nth-child(3) { transition-delay: .16s; }
html.mx-on body .mx-stagger :is(.opc-step, .opc-evidence, .lab-card):nth-child(4) { transition-delay: .24s; }

/* 链接箭头：悬停时轻推（只在精确指针设备上）。 */
@media (hover: hover) and (pointer: fine) {
  html.mx-on body :is(.text-link, .project-bottom > a, .lab-link) { transition: color .3s, letter-spacing .4s var(--mx-ease); }
  html.mx-on body :is(.text-link, .project-bottom > a, .lab-link):hover { letter-spacing: .02em; }
}

/* ---------- 6. 兜底：关闭动效、系统减少动态时，一律回到静态最终状态 ---------- */
body.motion-off :is(.mx-rise, .mx-frame, .mx-img, .weight-track span, .report-numbers > div, .opc-step, .opc-evidence, .lab-card, .hero-copy, .hero-network, .title-line) {
  clip-path: none !important; translate: none !important; scale: none !important; opacity: 1 !important; animation: none !important; transition: none !important;
}
body.motion-off .hero .scroll-line::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.mx-rise, .mx-frame, .mx-img, .weight-track span, .report-numbers > div, .opc-step, .opc-evidence, .lab-card, .hero-copy, .hero-network, .title-line) {
    clip-path: none !important; translate: none !important; scale: none !important; opacity: 1 !important; animation: none !important; transition: none !important;
  }
  .hero .scroll-line::after { display: none; }
  .site-header { transition: none !important; }
}