/* ============================================================
   Taro Cake · 界面动效层（motion.css）
   ------------------------------------------------------------
   设计约定（改之前先读这三条）：
   1) 所有规则都包在 :where() 里 = 零优先级。页面自己的写法永远赢，
      这一层只负责「原本什么都没写」的元素，绝不会把已有样式顶掉。
   2) 只用 opacity / transform / filter / box-shadow —— 不触发布局重排。
   3) 内容不能因为动效而丢失：JS 没跑、关掉动效、用户开了「减少动态效果」，
      所有东西都必须是完整可见的。
   一键关：偏好设置「界面动效」→ html[data-tc-motion="off"]。
   ============================================================ */

:root {
    --mo-ease: cubic-bezier(.22, 1, .36, 1);
    --mo-ease-io: cubic-bezier(.45, 0, .25, 1);
    --mo-fast: .16s;
    --mo-mid: .26s;
    --mo-slow: .5s;
    --mo-rise: 16px;
    --mo-ring: rgba(96, 165, 250, .22);
    --mo-lift: 0 16px 38px rgba(30, 58, 138, .14);
}

/* ============ 1. 关键帧 ============ */
@keyframes mo-page { from { opacity: 0 } to { opacity: 1 } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(var(--mo-rise, 16px)) } to { opacity: 1; transform: none } }
@keyframes mo-pop { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes mo-blur-in { from { opacity: 0; filter: blur(6px) } to { opacity: 1; filter: none } }
@keyframes mo-badge { 0%, 100% { transform: none } 38% { transform: scale(1.24) } }
@keyframes mo-dot {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5) }
    70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0) }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0) }
}
@keyframes mo-vt-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes mo-vt-out { to { opacity: 0 } }

/* ============ 2. 整页进场（只做透明度，避免给固定定位的子元素换参照物） ============ */
:where(body) { animation: mo-page .34s var(--mo-ease-io) both; }

/* ============ 3. 滚动进场（由 motion.js 上膛；没 JS 就不存在 .mo-rv） ============ */
html.mo-on .mo-rv {
    transition: opacity var(--mo-slow) var(--mo-ease),
                transform var(--mo-slow) var(--mo-ease);
    transition-delay: var(--mo-d, 0s);
}
html.mo-on .mo-rv:not(.mo-in) {
    opacity: 0;
    transform: translateY(var(--mo-rise, 16px));
    pointer-events: none;
}
html.mo-on .mo-rv.mo-in { opacity: 1; transform: none; pointer-events: auto; }

/* ============ 4. 所有可点元素：补齐过渡 + 按下反馈 ============ */
:where(a, button, [role="button"], summary, select,
       input[type="button"], input[type="submit"], input[type="reset"],
       .btn, .in-btn, .bico, .go, .pill, .sbtn, .mn-btn, .addbtn) {
    transition: color var(--mo-fast) var(--mo-ease-io),
                background-color var(--mo-fast) var(--mo-ease-io),
                border-color var(--mo-fast) var(--mo-ease-io),
                box-shadow var(--mo-mid) var(--mo-ease-io),
                transform var(--mo-fast) var(--mo-ease),
                opacity var(--mo-fast) var(--mo-ease-io),
                filter var(--mo-mid) var(--mo-ease-io);
}
:where(button, [role="button"], .btn, .go, .pill, .in-btn, .sbtn, .mn-btn, .addbtn,
       input[type="submit"], input[type="button"], input[type="reset"]):active {
    transform: scale(.965);
}
/* 图标跟着手一起“点一下” */
:where(.go, .btn, .in-btn, .pill, .mn-btn, .addbtn) :where(i) {
    transition: transform var(--mo-mid) var(--mo-ease);
}
:where(.go, .btn, .in-btn, .pill, .mn-btn, .addbtn):hover :where(i) {
    transform: scale(1.12);
}

/* ============ 5. 卡片 / 面板：悬停轻抬 ============ */
@media (hover: hover) and (pointer: fine) {
    :where(.card, .v3-door, .donor, .w, .bk-cover, .tcp-card, .channels > a, article, .fe-card) {
        transition: transform var(--mo-mid) var(--mo-ease),
                    box-shadow var(--mo-mid) var(--mo-ease-io),
                    border-color var(--mo-mid) var(--mo-ease-io);
    }
    :where(.card, .v3-door, .donor, .w, .bk-cover, .channels > a, article):hover {
        transform: translateY(-3px);
        box-shadow: var(--mo-lift);
    }
    /* 首页四扇门：图标浮一下、箭头推一格 */
    :where(.v3-door) :where(.ico, i) { transition: transform var(--mo-mid) var(--mo-ease) }
    :where(.v3-door):hover :where(.ar, .fa-angle-right) { transform: translateX(4px) }
    /* 频道卡片：图标转一点 */
    :where(.channels > a):hover :where(.ch-ico, i) { transform: rotate(-6deg) scale(1.06) }
}

/* ============ 5b. 列表行：悬停轻微右移 + 头像放大 ============ */
:where(.v3-people > *, .v3-feed > *, .cm-row, .fr-row, .ch-list > *) {
    transition: transform var(--mo-mid) var(--mo-ease),
                background-color var(--mo-fast) var(--mo-ease-io);
}
@media (hover: hover) and (pointer: fine) {
    :where(.v3-people > *, .v3-feed > *, .cm-row, .fr-row, .ch-list > *):hover {
        transform: translateX(3px);
    }
}
:where(img.avatar, .av-pop-h img, .fr-row img, .v3-people img, .bk-cover img) {
    transition: transform var(--mo-mid) var(--mo-ease), box-shadow var(--mo-mid) var(--mo-ease-io);
}
@media (hover: hover) and (pointer: fine) {
    :where(.v3-people > *):hover :where(img), :where(.fr-row):hover :where(img) {
        transform: scale(1.07);
    }
    :where(a):hover :where(img.avatar) { transform: scale(1.05); }
}

/* ============ 6. 表单：聚焦时轻微抬起 + 光环 ============ */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea, select) {
    transition: border-color var(--mo-fast) var(--mo-ease-io),
                box-shadow var(--mo-mid) var(--mo-ease-io),
                background-color var(--mo-fast) var(--mo-ease-io);
}
:where(input:focus, textarea:focus, select:focus) {
    box-shadow: 0 0 0 3px var(--mo-ring);
}
:where(.fld, .field, .form-row) {
    transition: transform var(--mo-mid) var(--mo-ease), box-shadow var(--mo-mid) var(--mo-ease-io);
}
:where(.fld, .field, .form-row):focus-within { transform: translateY(-1px); }

/* ============ 7. 表格行 / 评论行：悬停底色 ============ */
:where(table) :where(tbody) :where(tr) {
    transition: background-color var(--mo-fast) var(--mo-ease-io);
}
:where(table) :where(tbody) :where(tr:hover) { background-color: rgba(96, 165, 250, .07); }
:where(.cm-row, .cm-sub) {
    transition: background-color var(--mo-fast) var(--mo-ease-io),
                transform var(--mo-mid) var(--mo-ease);
}
:where(.cm-row):hover { background-color: rgba(96, 165, 250, .05); }

/* ============ 8. 正文链接：悬停轻微变淡（不抢语义色） ============ */
:where(p, .post-body, .ann-body, .bk-intro, .sig, .bio) :where(a) {
    transition: color var(--mo-fast) var(--mo-ease-io), opacity var(--mo-fast) var(--mo-ease-io);
}
:where(p, .post-body, .ann-body, .bk-intro, .sig, .bio) :where(a):hover { opacity: .8; }

/* ============ 9. 细节：在线呼吸灯 / 未读角标 ============ */
:where(.av-dot-online, .tcstat-online i, .fr-dot.on) {
    animation: mo-dot 2.6s var(--mo-ease-io) infinite;
}
:where(.bdg, .nu) { animation: mo-badge .5s var(--mo-ease) .15s both; }

/* ============ 10. 弹层打开时淡入（不写 transform：公告窗靠 translate 居中） ============ */
:where(.tc-panel) { animation: mo-blur-in .24s var(--mo-ease-io) both; }

/* ============ 11. 换页：Chrome 的跨文档转场；顶栏单独命名，让它“不动” ============ */
@view-transition { navigation: auto; }
:where(#barWrap) { view-transition-name: tcbar; }
::view-transition-old(root) { animation: mo-vt-out .13s linear both; }
::view-transition-new(root) { animation: mo-vt-in .28s var(--mo-ease) both; }
::view-transition-old(tcbar), ::view-transition-new(tcbar) { animation: none; }

/* ============ 12. 关闭动效 / 用户要求减少动态效果 ============ */
@media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html.mo-on .mo-rv:not(.mo-in) { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
}

html[data-tc-motion="off"] :where(*, *::before, *::after) {
    animation: none !important;
    transition: none !important;
}
html[data-tc-motion="off"] .mo-rv,
html[data-tc-motion="off"] .mo-rv:not(.mo-in) {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}
html[data-tc-motion="off"] #barWrap { view-transition-name: none !important; }