/* motion.css —— motion.js 的配套样式。只管「动效必需」的结构，不管配色字体（那些归项目自己的设计系统）。
   可调的都是 CSS 变量，项目里覆盖即可。 */

/* ---------- book：3D 翻页 ---------- */
[data-m="book"]{--pw:min(38vw,380px);--ph:calc(var(--pw)*1.32);--paper:#fbf8f1;--m-ease:cubic-bezier(.65,0,.2,1);
  position:relative;width:calc(var(--pw)*2);height:var(--ph);transform-style:preserve-3d;transition:transform 1.2s var(--m-ease)}
[data-m="book"][data-state="drop"]{transform:translateY(-70vh) rotateX(62deg) rotateZ(-30deg) scale(.5)}
[data-m="book"][data-state="rest"]{transform:translateX(calc(var(--pw)*-.5)) rotateX(38deg) rotateZ(-14deg) scale(.82)}
[data-m="book"][data-state="open"]{transform:translateX(0) rotateX(12deg) rotateZ(0) scale(1)}
[data-m="book"][data-state="end"]{transform:translateX(calc(var(--pw)*.5)) rotateX(30deg) rotateZ(10deg) scale(.82)}
.m-board{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);background:var(--paper);border-radius:0 6px 6px 0;transition:opacity .6s;
  box-shadow:0 30px 60px -20px rgba(40,30,15,.45),inset 3px 0 0 #e8e1d2,6px 0 0 -2px #ece5d6,8px 0 0 -2px #ddd4c2}
[data-m="book"][data-state="end"] .m-board{opacity:0}
.m-leaf{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.1s var(--m-ease)}
.m-leaf.flipped{transform:rotateY(-180deg)}
.m-front,.m-back{position:absolute;inset:0;overflow:hidden;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:0 6px 6px 0}
.m-back{transform:rotateY(180deg);border-radius:6px 0 0 6px}
/* Safari 不认 backface-visibility（2026-11-08 WebKit 实测背面透出来）→ 不靠它：翻到一半时切换哪一面可见 */
.m-leaf>.m-front,.m-leaf>.m-back{transition:visibility 0s linear .55s}
.m-leaf>.m-back,.m-leaf.flipped>.m-front{visibility:hidden}
.m-leaf.flipped>.m-back{visibility:visible}
.m-front::after,.m-back::after{content:"";position:absolute;inset:0;pointer-events:none}
.m-front::after{background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 8%)}
.m-back::after{background:linear-gradient(270deg,rgba(0,0,0,.12),transparent 8%)}

/* ---------- orbit：环形轨道 ---------- */
[data-m="orbit"]{perspective:1400px;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}   /* Safari 只认带前缀的 user-select */
[data-m="orbit"]:active{cursor:grabbing}
[data-m="orbit"] [data-m-space]{position:absolute;inset:0;transform-style:preserve-3d;display:grid;place-items:center}
[data-m="orbit"] [data-m-ring]{position:absolute;transform-style:preserve-3d}
[data-m="orbit"] [data-m-item]{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}

/* ---------- queue：纵深队列 ---------- */
[data-m="queue"]{position:relative;overflow:hidden}
[data-m="queue"] [data-m-item]{position:absolute;left:0;transform-origin:50% 100%;cursor:pointer;
  transition:transform var(--m-dur,.9s) cubic-bezier(.7,0,.2,1),filter var(--m-dur,.9s) cubic-bezier(.7,0,.2,1),opacity var(--m-dur,.9s) cubic-bezier(.7,0,.2,1)}

/* ---------- pin 里的分章与进度条 ---------- */
[data-m-step]{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
[data-m-step].on{opacity:1;transform:none}
[data-m-bar]{transform-origin:0 50%;transform:scaleX(var(--k,0))}

/* ---------- marquee ---------- */
[data-m="marquee"]{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
[data-m="marquee"] [data-m-track]{display:flex;width:max-content;animation:m-marquee var(--m-marquee,32s) linear infinite}
[data-m="marquee"]:hover [data-m-track],[data-m="marquee"]:focus-within [data-m-track]{animation-play-state:paused}
@keyframes m-marquee{to{transform:translateX(-50%)}}
[data-m="count"]{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- spotlight：边框光 + 卡面柔光（卡片自己定背景和圆角） ---------- */
[data-m="spotlight"]{perspective:1000px}
[data-m="spotlight"] [data-m-item]{position:relative;isolation:isolate;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[data-m="spotlight"] [data-m-item]::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:radial-gradient(260px circle at var(--x,-999px) var(--y,-999px),var(--m-glow,rgba(255,140,80,.9)),rgba(255,255,255,.08) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
[data-m="spotlight"] [data-m-item]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(380px circle at var(--x,-999px) var(--y,-999px),var(--m-glow-soft,rgba(255,122,61,.10)),transparent 60%)}

/* ---------- gaze：眨眼 ---------- */
[data-m-head]{transform-box:fill-box;transform-origin:50% 90%}
[data-m-lid]{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform .09s}
.m-blink [data-m-lid]{transform:scaleY(1)}

/* ---------- shared ---------- */
::view-transition-group(m-hero){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}

/* ---------- 排版小工具 ---------- */
.m-nw{white-space:nowrap}   /* 中文标题里不许断开的一段 */

/* ---------- 第二批 ---------- */
/* reveal */
.m-reveal .m-u{display:inline-block;overflow:hidden;vertical-align:top}
.m-reveal .m-u>span,.m-reveal>[data-m-item]{display:inline-block;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s,clip-path .8s cubic-bezier(.65,0,.2,1)}
.m-reveal>[data-m-item]{display:block}
.m-up .m-u>span,.m-up>[data-m-item]{transform:translateY(40%);opacity:0}
.m-mask .m-u>span,.m-mask>[data-m-item]{transform:translateY(105%)}
.m-wipe .m-u>span,.m-wipe>[data-m-item]{clip-path:inset(0 100% 0 0)}
.m-reveal.in .m-u>span,.m-reveal.in>[data-m-item]{transform:none;opacity:1;clip-path:inset(0 0 0 0)}
/* carousel：滑动、吸附交给浏览器 */
[data-m="carousel"] [data-m-track]{position:relative;display:flex;gap:var(--m-gap,16px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
[data-m="carousel"] [data-m-track]::-webkit-scrollbar{display:none}
[data-m="carousel"] [data-m-item]{flex:0 0 auto;scroll-snap-align:start}
[data-m="carousel"][data-center] [data-m-item]{scroll-snap-align:center}
[data-m-dots]{display:flex;gap:8px}
[data-m-dots] button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:currentColor;opacity:.25;cursor:pointer;position:relative}
[data-m-dots] button::after{content:"";position:absolute;inset:-18px}   /* 视觉 8px，触控区 44px */
[data-m-dots] button[aria-current="true"]{opacity:1}
/* stack */
[data-m="stack"] [data-m-item]{transform-origin:50% 0;will-change:transform}
/* proximity */
[data-m="proximity"] [data-m-item]{transition:transform .15s ease-out;transform-origin:50% 100%}
/* trail */
canvas[data-m="trail"]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* morph-btn */
[data-m="morph-btn"]{transition:width .35s cubic-bezier(.65,0,.2,1),background .3s;overflow:hidden;white-space:nowrap}
[data-m="morph-btn"][data-state="busy"]{padding:0;justify-content:center}
.m-spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:m-spin .7s linear infinite;display:inline-block}
@keyframes m-spin{to{transform:rotate(1turn)}}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* drag */
[data-m="drag"]{position:relative}
[data-m="drag"] [data-m-item]{cursor:grab;-webkit-user-select:none;user-select:none}
[data-m="drag"] [data-m-item]:active{cursor:grabbing}
[data-m="drag"] [data-m-item]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* mesh：流动渐变背景（纯 CSS），--m-c1~c4 换色 */
.m-mesh{position:relative;overflow:hidden;isolation:isolate}
.m-mesh::before{content:"";position:absolute;inset:-30%;z-index:-1;filter:blur(60px);
  background:radial-gradient(40% 40% at 20% 30%,var(--m-c1,#ff9a62),transparent 70%),radial-gradient(35% 35% at 80% 20%,var(--m-c2,#7aa6ff),transparent 70%),
             radial-gradient(45% 45% at 60% 80%,var(--m-c3,#ffd36e),transparent 70%),radial-gradient(30% 30% at 30% 85%,var(--m-c4,#8fe0b8),transparent 70%);
  animation:m-mesh 18s ease-in-out infinite alternate}
@keyframes m-mesh{50%{transform:translate(6%,-4%) rotate(8deg) scale(1.08)}100%{transform:translate(-5%,5%) rotate(-6deg) scale(1.02)}}
/* glass：毛玻璃卡片 */
.m-glass{background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.28)}

@media (prefers-reduced-motion:reduce){
  .m-reveal .m-u>span,.m-reveal>[data-m-item]{transition:none}
  .m-mesh::before,.m-spin{animation:none}
  [data-m="morph-btn"],[data-m="proximity"] [data-m-item]{transition:none}

  [data-m="book"],.m-leaf,.m-leaf>.m-front,.m-leaf>.m-back,[data-m-step],[data-m="spotlight"] [data-m-item]{transition:none}
  [data-m="queue"]{--m-dur:0s}
  [data-m="marquee"] [data-m-track]{animation:none;flex-wrap:wrap;justify-content:center;width:auto}   /* 只限跑马灯：data-m-track 轮播也在用（2026-11-08 串过一次） */
  [data-m="marquee"] [data-m-track]>[aria-hidden]{display:none}
  [data-m="marquee"]{-webkit-mask:none;mask:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}