/*
 * Enhanced Animations — 丰富的过渡和动效
 * 当动画开关开启时，为全站注入各类过渡和动画效果
 */

/* ============================================================
 * 1. 页面加载淡入
 * ============================================================ */

body:not(.animations-disabled) .main-container {
    animation: none;
    opacity: 1;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
 * 2. 卡片悬浮效果
 * ============================================================ */

body:not(.animations-disabled) .card {
    transition: box-shadow 0.16s ease,
                border-color 0.16s ease,
                background-color 0.3s ease;
}

body:not(.animations-disabled) .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

body:not(.animations-disabled) .feature-card {
    transition: box-shadow 0.16s ease,
                border-color 0.16s ease,
                background-color 0.16s ease;
}

body:not(.animations-disabled) .feature-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
    border-color: rgba(148, 163, 184, 0.36);
}

/* ============================================================
 * 3. 按钮动效
 * ============================================================ */

body:not(.animations-disabled) .btn {
    transition: background-color 0.16s ease,
                border-color 0.16s ease,
                color 0.16s ease,
                opacity 0.16s ease;
}

body:not(.animations-disabled) .btn:hover {
    transform: none;
    box-shadow: none;
}

body:not(.animations-disabled) .btn:active {
    transform: none;
}

/* ============================================================
 * 4. 导航栏动效
 * ============================================================ */

body:not(.animations-disabled) .navbar {
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

body:not(.animations-disabled) .navbar-item {
    transition: color 0.16s ease, background-color 0.16s ease;
    position: relative;
}

body:not(.animations-disabled) .navbar-item:hover {
    color: var(--text-primary);
    transform: none;
}

body:not(.animations-disabled) .navbar-item:active {
    transform: none;
}

/* 主题切换图标旋转 */
body:not(.animations-disabled) .theme-switcher i {
    transition: opacity 0.2s ease,
                color 0.3s ease;
}

body:not(.animations-disabled) .theme-switcher:hover i {
    transform: none;
}

body:not(.animations-disabled) .theme-switcher:active i {
    transform: none;
}

/* ============================================================
 * 5. 下拉菜单动画
 * ============================================================ */

body:not(.animations-disabled) .dropdown-menu {
    transition: opacity 0.16s ease,
                visibility 0.16s ease,
                background-color 0.16s ease,
                border-color 0.16s ease;
}

body:not(.animations-disabled) .dropdown-menu.open {
    transform: none;
}

body:not(.animations-disabled) .dropdown-menu:not(.open) {
    transform: none;
}

body:not(.animations-disabled) .dropdown-item {
    transition: background-color 0.16s ease, color 0.16s ease;
}

body:not(.animations-disabled) .dropdown-item:hover {
    padding-left: inherit;
}

/* ============================================================
 * 6. 表单输入动效
 * ============================================================ */

body:not(.animations-disabled) .form-group input,
body:not(.animations-disabled) .form-group textarea,
body:not(.animations-disabled) .form-group select {
    transition: border-color 0.16s ease,
                box-shadow 0.16s ease,
                background-color 0.16s ease;
}

body:not(.animations-disabled) .form-group input:focus,
body:not(.animations-disabled) .form-group textarea:focus,
body:not(.animations-disabled) .form-group select:focus {
    transform: none;
}

/* ============================================================
 * 7. 背景色块动画（微浮动）
 * ============================================================ */

body:not(.animations-disabled) .background-colors .color:nth-child(1) {
    animation: none;
}

body:not(.animations-disabled) .background-colors .color:nth-child(2) {
    animation: none;
}

body:not(.animations-disabled) .background-colors .color:nth-child(3) {
    animation: none;
}

@keyframes bgFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -15px) scale(1.05); }
    66% { transform: translate(-10px, 10px) scale(0.97); }
}

@keyframes bgFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-15px, 20px) scale(1.03); }
    66% { transform: translate(15px, -10px) scale(0.96); }
}

@keyframes bgFloat3 {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    33% { transform: translate(calc(-50% + 15px), -12px) scale(1.04); }
    66% { transform: translate(calc(-50% - 12px), 8px) scale(0.98); }
}

/* ============================================================
 * 8. 列表项渐入动画
 * ============================================================ */

body:not(.animations-disabled) .navbar-menu .navbar-item {
    transition: color 0.16s ease, background-color 0.16s ease;
}

/* ============================================================
 * 9. 模态框动画
 * ============================================================ */

body:not(.animations-disabled) .modal-overlay {
    transition: opacity 0.16s ease;
}

body:not(.animations-disabled) .modal-content {
    transition: opacity 0.16s ease,
                border-color 0.16s ease;
}

/* ============================================================
 * 10. 头像悬浮效果
 * ============================================================ */

body:not(.animations-disabled) .avatar,
body:not(.animations-disabled) .user-profile {
    transition: opacity 0.16s ease, background-color 0.16s ease;
}

body:not(.animations-disabled) .user-profile:hover .avatar {
    transform: none;
}

body:not(.animations-disabled) .avatar:hover {
    transform: none;
}

/* ============================================================
 * 11. 设置通知滑入
 * ============================================================ */

body:not(.animations-disabled) .settings-notification {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body:not(.animations-disabled) .settings-notification.show {
    transform: translateY(0);
}

body:not(.animations-disabled) .settings-notification:not(.show) {
    transform: translateY(20px);
}

/* ============================================================
 * 12. 切换开关滑块动画
 * ============================================================ */

body:not(.animations-disabled) .toggle-slider {
    transition: background-color 0.3s ease;
}

body:not(.animations-disabled) .toggle-slider::before {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
}

body:not(.animations-disabled) .toggle-slider:hover::before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================================
 * 13. 页脚淡入
 * ============================================================ */

body:not(.animations-disabled) .footer {
    animation: none;
    opacity: 1;
}

@keyframes footerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================
 * 14. 统计数字弹性缩放（首页）
 * ============================================================ */

body:not(.animations-disabled) .home-stat__value {
    transition: color 0.16s ease;
}

body:not(.animations-disabled) .home-stat__value:hover {
    transform: none;
}

/* Stability override: never move interactive controls during hover/active. */
html body:not(.animations-disabled) .card:hover,
html body:not(.animations-disabled) .feature-card:hover,
html body:not(.animations-disabled) .question-row:hover,
html body:not(.animations-disabled) .forum-post:hover,
html body:not(.animations-disabled) .ranking-item:hover,
html body:not(.animations-disabled) .member-card:hover,
html body:not(.animations-disabled) .duty-member-card:hover,
html body:not(.animations-disabled) .home-panel:hover,
html body:not(.animations-disabled) .btn:hover,
html body:not(.animations-disabled) .btn:active,
html body:not(.animations-disabled) a.btn:hover,
html body:not(.animations-disabled) a.btn:active,
html body:not(.animations-disabled) button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):hover,
html body:not(.animations-disabled) button:not(.navbar-toggle):not(.theme-switcher):not(.navbar-more-btn):not(.password-toggle):not(.toggle-password):active,
html body:not(.animations-disabled) button.home-button:hover:not(:disabled),
html body:not(.animations-disabled) button.home-button:active:not(:disabled),
html body:not(.animations-disabled) .home-button:hover:not(:disabled),
html body:not(.animations-disabled) .home-button:active:not(:disabled),
html body:not(.animations-disabled) .home-link:hover,
html body:not(.animations-disabled) .home-link:active,
html body:not(.animations-disabled) .page-link:hover,
html body:not(.animations-disabled) .page-link:active,
html body:not(.animations-disabled) .upload-btn-text-icon:hover,
html body:not(.animations-disabled) .upload-btn-text-icon:active,
html body:not(.animations-disabled) .upload-btn:hover,
html body:not(.animations-disabled) .upload-btn:active,
html body:not(.animations-disabled) .take-photo-btn:hover,
html body:not(.animations-disabled) .take-photo-btn:active,
html body:not(.animations-disabled) .jump-to-question-card .btn:hover,
html body:not(.animations-disabled) .jump-to-question-card .btn:active,
html body:not(.animations-disabled) .search-box .btn:hover,
html body:not(.animations-disabled) .role-controls .btn:hover,
html body:not(.animations-disabled) .form-actions .btn:hover {
    transform: none !important;
}

html body:not(.animations-disabled) .btn:hover,
html body:not(.animations-disabled) .btn:active,
html body:not(.animations-disabled) a.btn:hover,
html body:not(.animations-disabled) a.btn:active,
html body:not(.animations-disabled) .home-button:hover:not(:disabled),
html body:not(.animations-disabled) .home-button:active:not(:disabled),
html body:not(.animations-disabled) .home-link:hover,
html body:not(.animations-disabled) .home-link:active {
    box-shadow: none !important;
}