/* === UI/UX Pro Max Motion Layer === */
:root {
    --motion-fast: 180ms cubic-bezier(0.32, 0.72, 0, 1);
    --motion-standard: 280ms cubic-bezier(0.22, 1, 0.36, 1);
    --motion-spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --motion-enter: 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 滚动入场：只使用 transform / opacity，避免布局抖动 */
.motion-item {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--motion-enter),
        transform var(--motion-enter);
    transition-delay: var(--motion-delay, 0ms);
}

.motion-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 事件卡片：入场后保持轻微的空间反馈 */
.event {
    will-change: transform;
    transition:
        transform var(--motion-standard),
        border-color var(--motion-standard),
        box-shadow var(--motion-standard),
        background-color var(--motion-standard);
}

.event::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.055) 48%, transparent 72%);
    border-radius: inherit;
    opacity: 0;
    transform: translateX(-35%);
    transition: opacity var(--motion-standard), transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.event > * {
    position: relative;
    z-index: 1;
}

.event:hover {
    transform: translateY(-4px);
}

.event:hover::after {
    opacity: 1;
    transform: translateX(35%);
}

.event:active {
    transform: translateY(-1px) scale(0.995);
}

/* 阵营标题的进入反馈 */
.section h2 {
    transition: color var(--motion-standard), transform var(--motion-standard);
}

.section h2::before {
    transition: transform var(--motion-spring), box-shadow var(--motion-standard);
}

.section h2:hover {
    transform: translateX(4px);
}

.section h2:hover::before {
    box-shadow: 0 0 22px var(--color-glow);
    transform: scale(1.35);
}

/* 更新日志抽屉：打开/关闭都保留空间连续性 */
.changelog-details {
    isolation: isolate;
}

.changelog-summary {
    position: relative;
    overflow: hidden;
    transform-origin: top center;
    transition:
        color var(--motion-standard),
        background-color var(--motion-standard),
        border-color var(--motion-standard),
        transform var(--motion-spring),
        border-radius var(--motion-standard);
}

.changelog-summary::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, 0.07) 50%, transparent 76%);
    opacity: 0;
    transform: translateX(-80%);
    transition: opacity var(--motion-standard), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.changelog-summary:hover {
    transform: translateY(-2px);
}

.changelog-summary:hover::before {
    opacity: 1;
    transform: translateX(80%);
}

.changelog-details[open] .changelog-summary {
    border-bottom-right-radius: var(--radius-md, 14px);
    border-bottom-left-radius: var(--radius-md, 14px);
}

.changelog-list {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
    transform-origin: top center;
    transition:
        opacity var(--motion-standard),
        transform var(--motion-standard);
    pointer-events: none;
}

.changelog-details[open] .changelog-list {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transition-delay: 70ms;
    pointer-events: auto;
}

.changelog-details.is-closing .changelog-list {
    opacity: 0;
    transform: translateY(-12px) scaleY(0.96);
    transition-delay: 0ms;
}

.changelog-item,
.highlight-container {
    transition:
        transform var(--motion-standard),
        opacity var(--motion-standard),
        background-color var(--motion-standard),
        border-color var(--motion-standard);
}

.changelog-item:hover,
.highlight-container:hover {
    transform: translateX(6px);
}

/* 搜索模态：从触发点附近的轻量缩放进入 */
.search-modal {
    transition:
        opacity var(--motion-standard),
        visibility var(--motion-standard),
        backdrop-filter 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-modal-content {
    transform: translateY(18px) scale(0.96);
    transition:
        transform var(--motion-enter),
        opacity var(--motion-standard);
}

.search-modal.active .search-modal-content {
    transform: translateY(0) scale(1);
}

.search-result {
    opacity: 0;
    transform: translateY(8px);
    animation: motion-result-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.search-result:nth-child(2) { animation-delay: 35ms; }
.search-result:nth-child(3) { animation-delay: 70ms; }
.search-result:nth-child(4) { animation-delay: 105ms; }
.search-result:nth-child(5) { animation-delay: 140ms; }

@keyframes motion-result-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 复制按钮：图标切换时给出明确的成功反馈 */
.copy-btn {
    transition:
        opacity var(--motion-standard),
        transform var(--motion-spring),
        color var(--motion-fast),
        background-color var(--motion-fast),
        border-color var(--motion-fast);
}

.copy-btn.copied {
    animation: copy-confirm 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes copy-confirm {
    0% { transform: scale(0.92); }
    65% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.copy-toast {
    transition:
        opacity var(--motion-standard),
        transform var(--motion-spring);
}

/* 返回顶部与主题切换 */
.scroll-top-btn {
    transition:
        opacity var(--motion-standard),
        transform var(--motion-spring),
        background-color var(--motion-fast),
        border-color var(--motion-fast),
        box-shadow var(--motion-standard);
}

#theme-toggle {
    transition:
        transform var(--motion-spring),
        color var(--motion-fast),
        background-color var(--motion-fast),
        border-color var(--motion-fast),
        box-shadow var(--motion-standard);
}

#theme-toggle:active,
.search-trigger:active,
.scroll-top-btn:active,
.copy-btn:active {
    transform: scale(0.95);
}

html.motion-theme-swap,
html.motion-theme-swap body,
html.motion-theme-swap .section,
html.motion-theme-swap .event,
html.motion-theme-swap .changelog-container {
    transition:
        background-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 420ms cubic-bezier(0.22, 1, 0.36, 1),
        color 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 轻微的页面初始化，不影响内容可读性 */
body.motion-loaded .search-trigger,
body.motion-loaded #scroll-to-top {
    animation: control-arrive 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.motion-loaded #scroll-to-top {
    animation-delay: 90ms;
}

@keyframes control-arrive {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-item,
    .event,
    .event::after,
    .section h2,
    .section h2::before,
    .changelog-summary,
    .changelog-summary::before,
    .changelog-list,
    .changelog-item,
    .highlight-container,
    .search-modal,
    .search-modal-content,
    .search-result,
    .copy-btn,
    .copy-toast,
    .scroll-top-btn,
    #theme-toggle {
        animation: none !important;
        transition: none !important;
    }

    .motion-item,
    .motion-item.is-visible,
    .changelog-list,
    .changelog-details[open] .changelog-list,
    .search-result {
        opacity: 1;
        transform: none;
    }
}