/* 文字慢慢显示 / 打字机感 — 叠加在原有动效之上，不替换 */

@keyframes tr-char-in {
    from {
        opacity: 0;
        transform: translateY(0.35em);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes tr-block-in {
    from {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
    }
}

@keyframes tr-cursor-blink {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes tr-row-in {
    from {
        opacity: 0;
        transform: translateX(18px);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

@keyframes tr-cell-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 逐字：仅改 opacity/transform，GPU 友好，避免中途卡顿 */
.tr-chars {
    display: inline-block;
    /* 打字过程中先停掉会改字距的呼吸动效，防止卡顿 */
    animation: none !important;
}

.tr-char {
    display: inline-block;
    opacity: 0;
    will-change: opacity, transform;
    animation: tr-char-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--tr-base, 0ms) + var(--i, 0) * 28ms);
    backface-visibility: hidden;
}

/* 标题等：整块擦入（像打字机扫过，不拆字、不卡顿，兼容渐变字） */
.tr-block.tr-running {
    animation:
        tr-block-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both,
        ui-gradient-shift 7s ease-in-out infinite,
        ui-float-soft 4.5s ease-in-out infinite !important;
    animation-delay: var(--tr-base, 0ms), 0s, 0s !important;
}

.tr-block.tr-running:not(h1):not(h2):not(h3):not(.h1):not(.title):not(.brand) {
    animation: tr-block-in 1.05s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

/* 标题打字结束后恢复原有渐变呼吸（原有效果保留） */
h1.tr-done, h2.tr-done, h3.tr-done, .h1.tr-done,
.login-card h2.tr-done, .panel h3.tr-done,
.titlebar .title.tr-done, .menubar .brand.tr-done {
    animation: ui-gradient-shift 7s ease-in-out infinite, ui-float-soft 4.5s ease-in-out infinite;
}

/* 打字进行中暂停段落呼吸，结束后恢复 */
.login-card p.tr-running,
.content .sub.tr-running,
.login-wrap p.tr-running {
    animation: none !important;
}

.login-card p.tr-done,
.content .sub.tr-done,
.login-wrap p.tr-done {
    animation: ui-text-breathe 6s ease-in-out infinite;
}

/* 标题右侧轻量光标（仅短标题逐字时） */
.tr-chars.tr-running::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: -0.1em;
    background: currentColor;
    opacity: 0.55;
    animation: tr-cursor-blink 0.7s steps(1, end) infinite;
}

/* 管理后台表格行 / 单元格 —— 仅在 running 时隐藏，避免播完仍不可见 */
.content tbody tr.tr-row.tr-running {
    opacity: 0;
    animation: tr-row-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

.content tbody tr.tr-row.tr-done {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.content tbody td.tr-cell.tr-running,
.content tbody td.tr-block.tr-running {
    opacity: 0;
    animation: tr-cell-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

.content tbody td.tr-cell.tr-done,
.content tbody td.tr-block.tr-done {
    opacity: 1 !important;
    transform: none !important;
}

.content thead th.tr-block.tr-running {
    animation: tr-block-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

.nav-item.tr-block.tr-running,
.chip.tr-block.tr-running,
.stat-row.tr-block.tr-running {
    animation: tr-block-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

/* 后台面板 / 表格容器入场后再播内容（与 ui-motion 叠加） */
.content > .panel.tr-block.tr-running,
.content > .table-wrap.tr-block.tr-running {
    animation: tr-block-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    animation-delay: var(--tr-base, 0ms) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tr-char,
    .tr-block.tr-running,
    .tr-chars.tr-running::after,
    .tr-row.tr-running,
    .tr-cell.tr-running {
        animation: none !important;
        opacity: 1 !important;
        clip-path: none !important;
        filter: none !important;
        transform: none !important;
    }
}