/**
 * motion.css — 全局交互动效样式（与 js/sr-motion.js 配套，可独立复用）
 *
 * 状态机（由 sr-motion.js 切换类名）：
 *   默认           隐藏（仅在 html.motion-ready 下生效，避免 JS 失效时内容不可见）
 *   .is-in         播放入场动画
 *   .is-done       落定：显示且不占用 animation（保证悬停 transform 等交互正常）
 *
 * 速度档位由 <html data-motion-speed="fast|normal|slow"> 控制。
 */

/* ========== 设计令牌 ========== */
:root {
    --motion-dur: .5s;
    --motion-step: .06s;
    --motion-ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-motion-speed="fast"] { --motion-dur: .3s; --motion-step: .04s; }
html[data-motion-speed="slow"] { --motion-dur: .72s; --motion-step: .1s; }

/* ========== 入场：初始状态 ========== */
/* 只有 JS 就绪（html.motion-ready）才隐藏，脚本未加载/报错时内容照常可见 */
html.motion-ready [data-motion]:not(.is-in):not(.is-done) {
    opacity: 0;
}
html.motion-ready [data-motion="up"]:not(.is-in):not(.is-done) { transform: translateY(18px); }
html.motion-ready [data-motion="down"]:not(.is-in):not(.is-done) { transform: translateY(-18px); }
html.motion-ready [data-motion="left"]:not(.is-in):not(.is-done) { transform: translateX(-20px); }
html.motion-ready [data-motion="right"]:not(.is-in):not(.is-done) { transform: translateX(20px); }
html.motion-ready [data-motion="zoom"]:not(.is-in):not(.is-done) { transform: scale(.96); }
html.motion-ready [data-motion="blur"]:not(.is-in):not(.is-done) { filter: blur(5px); }

/* 落定态：仅作为「隐藏规则不再匹配」的标记，不声明 opacity/transform/filter，
   否则会以同等优先级覆盖元素自身的 :hover 变换（如卡片悬停上浮） */

/* ========== 入场：播放动画 ========== */
[data-motion].is-in {
    animation-duration: var(--motion-dur);
    animation-timing-function: var(--motion-ease);
    animation-delay: var(--motion-delay, 0s);
    animation-fill-mode: both;
}
[data-motion="fade"].is-in  { animation-name: srMotionFade; }
[data-motion="up"].is-in    { animation-name: srMotionUp; }
[data-motion="down"].is-in  { animation-name: srMotionDown; }
[data-motion="left"].is-in  { animation-name: srMotionLeft; }
[data-motion="right"].is-in { animation-name: srMotionRight; }
[data-motion="zoom"].is-in  { animation-name: srMotionZoom; }
[data-motion="blur"].is-in  { animation-name: srMotionBlur; }

@keyframes srMotionFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes srMotionUp    { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes srMotionDown  { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes srMotionLeft  { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes srMotionRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes srMotionZoom  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes srMotionBlur  { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }

/* ========== 全局微交互（悬停 / 按下 / 聚焦） ========== */

/* 按下反馈：轻微缩放，触屏与鼠标一致 */
.sr-btn:active,
.btn:active,
.tabs a:active,
.pager a:active,
.social-btn:active,
.back-top:active,
.com-reply:active,
.tag:active,
.theme-pop button:active {
    transform: scale(.96);
}

/* 键盘可达性：统一聚焦环
 * 说明：a / button 等用 outline 环；
 * 表单控件（input / textarea / select）在 style.css 中另有
 * 「强调色描边 + 柔和光晕」的单层聚焦态，这里不再叠加，避免出现双框。 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 导航：滑入下划线（比单纯变色更有反馈感） */
.nav-list > li > .nav-link {
    position: relative;
}
.nav-list > li > .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s var(--motion-ease);
}
.nav-list > li > .nav-link:hover::after,
.nav-list > li > .nav-link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* 分类色带 / 分页：悬停时轻微上浮已有样式，这里补一层颜色过渡 */
.tabs a {
    transition: background .18s var(--motion-ease), color .18s var(--motion-ease),
                border-color .18s var(--motion-ease), transform .18s var(--motion-ease);
}

/* 标签贴纸：悬停微浮 */
.tag {
    transition: transform .18s var(--motion-ease), background .18s var(--motion-ease),
                color .18s var(--motion-ease);
}
.tag:hover { transform: translateY(-2px); }

/* 侧栏分类行：悬停时前方小方块轻微放大 */
.cat-row .cat-dot {
    transition: transform .18s var(--motion-ease);
}
.cat-row:hover .cat-dot { transform: scale(1.25); }

/* 侧栏小工具：悬停时描边染上强调色（克制的反馈） */
.widget {
    transition: border-color .22s var(--motion-ease), box-shadow .22s var(--motion-ease);
}
.widget:hover {
    border-color: var(--accent-tint);
}

/* 头像 / 封面：悬停轻推 */
.p .img img,
.post-cover img {
    transition: transform .35s var(--motion-ease);
}
.p:hover .img img { transform: scale(1.035); }

/* 文章正文里的图片：悬停轻微提亮 */
.markdown img {
    transition: filter .25s var(--motion-ease);
}
.markdown img:hover { filter: brightness(1.03); }

/* ========== 无障碍：系统要求减少动态效果 ========== */
@media (prefers-reduced-motion: reduce) {
    html.motion-ready [data-motion]:not(.is-in):not(.is-done) {
        opacity: 1;
        transform: none;
        filter: none;
    }
    [data-motion].is-in { animation: none; }

    .tabs a,
    .tag,
    .cat-row .cat-dot,
    .p .img img,
    .post-cover img,
    .markdown img,
    .nav-list > li > .nav-link::after {
        transition: none;
    }
    .tag:hover,
    .p:hover .img img,
    .cat-row:hover .cat-dot {
        transform: none;
    }
    .sr-btn:active,
    .tabs a:active,
    .pager a:active,
    .social-btn:active,
    .back-top:active,
    .com-reply:active,
    .tag:active {
        transform: none;
    }
}

/* 总开关关闭：解除隐藏与入场动画，但保留悬停/按下等即时反馈 */
html.motion-off [data-motion] {
    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
}