/* 刘橙绿 · studio layer (2026-10) — 全站共用动效与交互。只叠加，不改原有内容。 */
:root{--sx-ease:cubic-bezier(.16,1,.3,1);--sx-ease-io:cubic-bezier(.65,0,.35,1);--sx-glow:color-mix(in srgb,var(--accent) 22%,transparent)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:var(--sx-ease)}
html.sx-theme-vt::view-transition-old(root){animation:none}
html.sx-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* 滚动入场：只用一种方式——淡入 + 上移 12px */
html.sx-js [data-sx-reveal]{opacity:0;transform:translateY(12px);transition:opacity .7s var(--sx-ease),transform .7s var(--sx-ease);transition-delay:var(--sx-delay,0s)}
html.sx-js [data-sx-reveal].sx-in{opacity:1;transform:none}

/* 阅读进度细线 */
.sx-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* 卡片：轻抬 + 跟随鼠标的橙色微光 */
.sx-spot{position:relative;isolation:isolate;transition:transform .45s var(--sx-ease),border-color .3s ease,box-shadow .45s var(--sx-ease)}
.sx-spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s ease;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),var(--sx-glow),transparent 62%)}
@media (hover:hover){.sx-spot:hover{transform:translateY(-3px)}.sx-spot:hover::after{opacity:1}}

/* ⌘K 快捷搜索 */
.sx-kbd{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;line-height:1;padding:.35em .5em;border-radius:6px;cursor:pointer;align-self:center;transition:color .2s,border-color .2s}
.sx-kbd:hover{color:var(--accent);border-color:var(--accent)}
@media (hover:none),(max-width:820px){.sx-kbd{display:none}}
.sx-cmdk{border:0;padding:0;background:transparent;width:min(640px,calc(100vw - 32px));max-height:min(70vh,560px);margin:12vh auto auto;color:var(--ink);overflow:visible}
.sx-cmdk::backdrop{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(6px)}
.sx-cmdk[open]{animation:sx-pop .32s var(--sx-ease)}
@keyframes sx-pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.sx-cmdk-box{background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(29,28,26,.18);overflow:hidden;display:flex;flex-direction:column;max-height:inherit}
.sx-cmdk-in{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line)}
.sx-cmdk-in input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:1.05rem;outline:none}
.sx-cmdk-in kbd,.sx-cmdk-foot kbd{font-family:var(--font-mono);font-size:.68rem;border:1px solid var(--line);border-radius:5px;padding:.15em .4em;color:var(--ink-2)}
.sx-cmdk-list{list-style:none;margin:0;padding:.4rem;overflow:auto}
.sx-cmdk-group{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:var(--ink-2);padding:.6rem .7rem .3rem}
.sx-cmdk-item a{display:block;padding:.6rem .75rem;border-radius:9px;text-decoration:none;color:var(--ink)}
.sx-cmdk-item a .t{display:block;font-size:.98rem;line-height:1.5}
.sx-cmdk-item a .x{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sx-cmdk-item a .x mark{background:var(--selection);color:inherit}
.sx-cmdk-item[aria-selected=true] a{background:var(--bg-raised)}
.sx-cmdk-item[aria-selected=true] a .t{color:var(--accent)}
.sx-cmdk-empty{padding:1.2rem;color:var(--ink-2);font-size:.9rem}
.sx-cmdk-foot{display:flex;gap:1rem;justify-content:flex-end;padding:.55rem 1rem;border-top:1px solid var(--line);font-size:.72rem;color:var(--ink-2)}

/* 橙瓣小角色（光尘实验室入口） */
.dust-launch .sx-mascot{width:34px;height:34px;flex:none;overflow:visible}
.sx-mascot .sx-eye{transition:transform .12s linear}
.sx-mascot .sx-eyes{transform-box:fill-box;transform-origin:center;animation:sx-blink 5.2s infinite}
@keyframes sx-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.12)}}
.sx-mascot .sx-zz{opacity:0}
:root[data-theme=night] .sx-mascot .sx-open{opacity:0}
:root[data-theme=night] .sx-mascot .sx-shut{opacity:1}
:root[data-theme=night] .sx-mascot .sx-zz{opacity:1;animation:sx-zz 2.6s ease-in-out infinite}
.sx-mascot .sx-shut{opacity:0}
@keyframes sx-zz{0%{transform:translate(0,0);opacity:0}30%{opacity:1}100%{transform:translate(6px,-10px);opacity:0}}
.sx-mascot .sx-leaf{transform-box:fill-box;transform-origin:20% 90%}
@media (hover:hover){.dust-launch:hover .sx-leaf{animation:sx-wiggle .7s var(--sx-ease)}}
@keyframes sx-wiggle{30%{transform:rotate(-14deg)}65%{transform:rotate(8deg)}}

/* 404：挥手的小角色 */
.sx-lost-mascot{display:block;width:120px;height:120px;margin:0 auto 1.2rem;overflow:visible}
.sx-lost-mascot .sx-leaf{animation:sx-wave 1.6s ease-in-out infinite}
@keyframes sx-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-18deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-12deg)}}

@media (prefers-reduced-motion:reduce){
  html.sx-js [data-sx-reveal]{opacity:1;transform:none;transition:none}
  .sx-spot,.sx-spot:hover{transform:none}
  .sx-mascot .sx-eyes,.sx-lost-mascot .sx-leaf,:root[data-theme=night] .sx-mascot .sx-zz{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
html.sx-theme-vt *,html.sx-theme-vt *::before,html.sx-theme-vt *::after{transition:none!important}
.sx-cmdk-in input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}