/* 书房 · 动态层 v1（2026-11-11）
   只有 motion.js 给 <html> 加上 .mo 之后才生效；脚本没跑时页面和原来一样。
   规则：快（0.3–0.8s）、每个 hover 都有回应。减少动态偏好下全部关闭。 */
@media (prefers-reduced-motion: no-preference) {
  html.mo { --e: cubic-bezier(.16, 1, .3, 1); }

  /* ---------- 开场：名字逐字升起，其余依次跟上 ---------- */
  html.mo .hero h1 .w { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; padding: 0 .04em .14em 0; margin: 0 -.04em -.14em 0; }
  html.mo .hero h1 .ch { display: inline-block; white-space: pre; transition: transform .9s var(--e); transition-delay: calc(var(--i) * 38ms + 80ms); will-change: transform; }
  html.mo body.intro .hero h1 .ch { transform: translateY(115%) rotate(6deg); transition: none; }
  html.mo .hero > .eyebrow, html.mo .hero > .lead, html.mo .hero > .cta, html.mo .hero > .hint { transition: opacity .7s ease, transform .8s var(--e); transition-delay: calc(var(--mo-i, 0) * 90ms + 60ms); }
  html.mo .hero > .lead { --mo-i: 3; } html.mo .hero > .cta { --mo-i: 4.4; } html.mo .hero > .hint { --mo-i: 6; }
  html.mo body.intro .hero > .eyebrow, html.mo body.intro .hero > .lead, html.mo body.intro .hero > .cta, html.mo body.intro .hero > .hint { opacity: 0; transform: translateY(20px); transition: none; }
  html.mo .top > * { transition: opacity .6s ease, transform .7s var(--e); }
  html.mo .top > .nav { transition: none; }
  html.mo .nav button { transition: color .2s, background .2s, opacity .5s ease calc(var(--i, 0) * 60ms + 120ms), transform .7s var(--e) calc(var(--i, 0) * 60ms + 120ms); }
  html.mo body.intro .top > .mark, html.mo body.intro .top > .lang, html.mo body.intro .top > .count, html.mo body.intro .nav button { opacity: 0; transform: translateY(-14px); transition: none; }
  html.mo .dock > * { transition: opacity .7s ease .5s, transform .8s var(--e) .5s; }
  html.mo body.intro .dock > * { opacity: 0; transform: translateY(22px); transition: none; }

  /* ---------- 按钮：光扫过 + 磁吸 ---------- */
  html.mo .btn, html.mo .tag { position: relative; overflow: hidden; translate: var(--mo-tx, 0px) var(--mo-ty, 0px); }
  html.mo .btn { transition: background .2s, border-color .2s, transform .2s, translate .35s var(--e), box-shadow .3s; }
  html.mo .tag { transition: color .2s, border-color .2s, translate .35s var(--e); }
  html.mo .btn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .34) 50%, transparent 65%); transform: translateX(-120%); }
  html.mo .btn:hover::after { transform: translateX(120%); transition: transform .65s var(--e); }
  html.mo .btn.primary:hover { box-shadow: 0 10px 34px -8px rgba(242, 177, 80, .6); }
  html.mo .btn:active { transform: scale(.96); }

  /* ---------- 导览：下划线从左画出 ---------- */
  html.mo .nav button { position: relative; }
  html.mo .nav button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--e); }
  html.mo .nav button:hover::after { transform: scaleX(1); }
  html.mo .nav button.gate::after { background: #5b78ff; }
  html.mo .mark i { transition: transform .3s var(--e), box-shadow .3s; }
  html.mo .mark:hover i { transform: scale(1.7); box-shadow: 0 0 22px 7px rgba(242, 177, 80, .7); }

  /* ---------- 底部卡片：跟着鼠标倾斜，“下一个作品”有光扫过 ---------- */
  html.mo .card { transition: border-color .2s, transform .25s var(--e), box-shadow .3s; position: relative; overflow: hidden; }
  html.mo .card:hover { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: 0 18px 40px -20px rgba(242, 177, 80, .45); }
  html.mo .card.next::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(242, 177, 80, .16) 50%, transparent 70%); animation: mo-sweep 3.6s ease-in-out infinite; }
  @keyframes mo-sweep { 0%, 55% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
  html.mo .card.next small span:last-child { animation: mo-blink 1.8s ease-in-out infinite; }
  @keyframes mo-blink { 50% { opacity: .35; } }

  /* ---------- 侧栏内容依次进场 ---------- */
  html.mo #panel.open #panelBody > * { animation: mo-in .55s var(--e) both; }
  html.mo #panel.open #panelBody > *:nth-child(2) { animation-delay: .06s; } html.mo #panel.open #panelBody > *:nth-child(3) { animation-delay: .12s; }
  html.mo #panel.open #panelBody > *:nth-child(4) { animation-delay: .18s; } html.mo #panel.open #panelBody > *:nth-child(n+5) { animation-delay: .24s; }
  html.mo #panel.open .p-head h2 { animation: mo-in .6s var(--e) both; }
  @keyframes mo-in { from { opacity: 0; transform: translateY(16px); } }
  html.mo .row { transition: background .2s, padding .3s var(--e); }
  html.mo .row:hover { padding-left: 14px; }
  html.mo .pin.on { animation: mo-pin .5s var(--e) both; }
  html.mo .pin.pulse.on { animation: mo-pin .5s var(--e) both, breathe 2.2s ease-in-out .5s infinite; }
  @keyframes mo-pin { from { opacity: 0; scale: .7; } }
  html.mo #toast { transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  html.mo #tip:not([hidden]) { animation: mo-tip .22s var(--e); }
  @keyframes mo-tip { from { opacity: 0; scale: .92; } }

  /* ---------- 跟着鼠标的光圈 + 点击的涟漪 ---------- */
  .mo-ring { position: fixed; left: 0; top: 0; z-index: 30; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none; border: 1.5px solid rgba(242, 177, 80, .85); opacity: 0;
    transition: width .3s var(--e), height .3s var(--e), margin .3s var(--e), background .25s, border-color .25s, opacity .3s; will-change: transform; }
  .mo-ring.on { opacity: 1; }
  .mo-ring.hot { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(242, 177, 80, .14); border-color: rgba(255, 214, 150, .95); }
  .mo-ring.ui { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: rgba(242, 177, 80, .5); border-color: transparent; }
  .mo-ring.down { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  body[data-mode="entering"] .mo-ring, body[data-mode="factory"] .mo-ring { opacity: 0; }
  .mo-rip { position: fixed; left: 0; top: 0; z-index: 29; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none; border: 2px solid rgba(255, 214, 150, .9); animation: mo-rip .6s var(--e) forwards; }
  @keyframes mo-rip { to { scale: 4.2; opacity: 0; } }
}