/* motion.css —— 全站动效 + GPU 优化层（可选，与 motion.js 配套；各页面删掉这两个引用即完全还原）
   1 滚动入场  2 卡片指针光晕  3 按钮按压反馈  4 键盘焦点环  5 GPU 优化  6 细节美化  7 状态码浮动  8 移动端弱化  9 减弱动效时全关
   不用 will-change：十几个元素同时提成合成层，占的显存反而更多；卡片靠 isolation 让 z-index:-1 的 ::before 落在背景之上、内容之下。
   按钮那组 font-family:inherit 很关键：<button> 不继承字体（浏览器给 Arial），<a class="btn"> 继承页面字体，两者中文回退字体度量不同，同一行里文字会差 1.5~2px。
   本文件与 common.css / common.js 一样按单行压缩排版，改动后记得把各页面的 ?v= 版本号 +1。 */
@media (prefers-reduced-motion: no-preference){
html.motion-ready [data-reveal]{transition:opacity 0.65s cubic-bezier(0.22,1,0.36,1),transform 0.65s cubic-bezier(0.22,1,0.36,1);transition-delay:var(--reveal-delay,0s)}
html.motion-ready [data-reveal]:not(.is-in){opacity:0;transform:translateY(18px)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
.card-hover,.info-card,.download-card{position:relative;isolation:isolate}
.card-hover::before,.info-card::before,.download-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;pointer-events:none;transition:opacity 0.3s ease;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.card-hover:hover::before,.info-card:hover::before,.download-card:hover::before{opacity:1}
}
.btn:active,.download-btn:active,.join-pill:active,.copy-pill:active{transform:translateY(0) scale(0.985)}
.btn:focus-visible,.download-btn:focus-visible,.join-pill:focus-visible,.copy-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.download-page .panel{backdrop-filter:none;-webkit-backdrop-filter:none}
.cards .card{content-visibility:auto;contain-intrinsic-size:auto 110px}
.section-heading{text-align:center}
.section-heading p:not(.section-kicker){max-width:62ch;margin-inline:auto}
.detail-head{flex-direction:column;align-items:center;text-align:center}
.detail-head .sub{justify-content:center}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 42%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 42%,transparent);background-clip:content-box;border:3px solid transparent;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 55%,transparent);background-clip:content-box}
::selection{background:color-mix(in srgb,var(--accent) 26%,transparent);color:var(--text)}
h1,.section-heading h2,.edition-title,.platform-name,.error-title{text-wrap:balance}
.btn,.download-btn,.join-pill,.copy-pill,.cp{font-family:inherit;justify-content:center;text-align:center}
.step-num{box-shadow:0 0 0 3px var(--soft)}
.info-value.copyable{border-bottom:1px dashed color-mix(in srgb,var(--accent) 40%,transparent)}
.info-value.copyable:hover{border-bottom-color:var(--accent)}
.empty{padding:40px 20px;border:1px dashed var(--border);border-radius:var(--inner-card-radius);background:var(--soft)}
@media (prefers-reduced-motion: no-preference){
.status-code{animation:statusFloat 7s ease-in-out infinite alternate}
@keyframes statusFloat{from{transform:translateY(-5px)}to{transform:translateY(5px)}}
}
@media (max-width:640px) and (prefers-reduced-motion: no-preference){
html.motion-ready [data-reveal]:not(.is-in){transform:translateY(12px)}
}
@media (prefers-reduced-motion: reduce){
html.motion-ready [data-reveal],html.motion-ready [data-reveal]:not(.is-in){transition:none !important;opacity:1 !important;transform:none !important}
.card-hover::before,.info-card::before,.download-card::before{display:none}
}