/**
 * 下拉菜单和抽屉面板关闭动画残影修复
 *
 * 修复父主题用户下拉菜单和抽屉面板关闭时的视觉残影问题
 * 通过添加 GPU 加速和优化动画属性来解决
 *
 * @package    Hui
 * @since      1.5.0
 */

/* ============================================================================
 * 核心修复：用户下拉菜单 GPU 加速（头部右侧用户头像点击后的下拉菜单）
 * ============================================================================ */

/* 用户菜单容器 */
.xun-user-menu {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* 用户下拉菜单 - 核心修复 */
.xun-user-dropdown {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* 强制 GPU 渲染 */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* 优化动画性能 */
    will-change: opacity, visibility, transform;
}

/* 用户下拉菜单隐藏状态 - 确保完全隐藏无残影 */
.xun-user-menu:not(:hover):not(:focus-within) .xun-user-dropdown {
    /* 使用 GPU 加速的 transform */
    -webkit-transform: translateY(-10px) scale(.96) translateZ(0) !important;
    transform: translateY(-10px) scale(.96) translateZ(0) !important;
    /* 确保完全透明 */
    opacity: 0 !important;
    /* 确保不可见 */
    visibility: hidden !important;
    /* 禁用指针事件 */
    pointer-events: none !important;
}

/* 用户下拉菜单显示状态 */
.xun-user-menu:hover .xun-user-dropdown,
.xun-user-menu:focus-within .xun-user-dropdown {
    -webkit-transform: translateY(0) scale(1) translateZ(0) !important;
    transform: translateY(0) scale(1) translateZ(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 用户下拉菜单内部元素 GPU 加速 */
.xun-user-dropdown .xun-user-card,
.xun-user-dropdown .xun-user-stats,
.xun-user-dropdown .xun-user-menu-items {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* 用户头像按钮 */
.xun-user-btn {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================================================
 * 核心修复：抽屉面板 GPU 加速
 * ============================================================================ */

/* 抽屉面板基础优化 */
.drawer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* ============================================================================
 * 核心修复：社区圈子抽屉 GPU 加速（圈子管理/详情抽屉）
 * ============================================================================ */

/* 圈子管理抽屉容器 */
.hui-circle-manage-drawer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 圈子管理抽屉内容 - 核心修复 */
.hui-circle-manage-drawer-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 使用 flat 而不是 preserve-3d，避免影响子元素渲染 */
    -webkit-transform-style: flat;
    transform-style: flat;
    /* 强制 GPU 渲染 */
    will-change: transform;
}

/* 圈子管理抽屉关闭状态 - 确保完全隐藏无残影 */
.hui-circle-manage-drawer:not(.is-active) .hui-circle-manage-drawer-content {
    /* 使用 GPU 加速的 transform */
    -webkit-transform: translateX(100%) translateZ(0) !important;
    transform: translateX(100%) translateZ(0) !important;
}

/* 圈子管理抽屉打开状态 */
.hui-circle-manage-drawer.is-active .hui-circle-manage-drawer-content {
    -webkit-transform: translateX(0) translateZ(0) !important;
    transform: translateX(0) translateZ(0) !important;
}

/* 圈子管理抽屉遮罩层 */
.hui-circle-manage-drawer-overlay {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

/* 圈子管理抽屉关闭时遮罩层 */
.hui-circle-manage-drawer:not(.is-active) .hui-circle-manage-drawer-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ============================================================================
 * 核心修复：创建圈子抽屉 GPU 加速
 * ============================================================================ */

/* 创建圈子抽屉容器 */
.hui-create-board-drawer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 创建圈子抽屉内容 - 核心修复 */
.hui-create-board-drawer-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    /* 强制 GPU 渲染 */
    will-change: transform;
}

/* 创建圈子抽屉关闭状态 - 确保完全隐藏无残影 */
.hui-create-board-drawer:not(.is-active) .hui-create-board-drawer-content {
    /* 使用 GPU 加速的 transform */
    -webkit-transform: translateX(100%) translateZ(0) !important;
    transform: translateX(100%) translateZ(0) !important;
}

/* 创建圈子抽屉打开状态 */
.hui-create-board-drawer.is-active .hui-create-board-drawer-content {
    -webkit-transform: translateX(0) translateZ(0) !important;
    transform: translateX(0) translateZ(0) !important;
}

/* 创建圈子抽屉遮罩层 */
.hui-create-board-drawer-overlay {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: opacity;
}

/* 创建圈子抽屉关闭时遮罩层 */
.hui-create-board-drawer:not(.is-active) .hui-create-board-drawer-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 右侧抽屉关闭动画修复 - 核心修复 */
.drawer-right.closing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    /* 使用 visibility 配合动画，避免残影 */
    animation-fill-mode: forwards !important;
}

/* 左侧抽屉关闭动画修复 */
.drawer-left.closing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    animation-fill-mode: forwards !important;
}

/* 底部抽屉关闭动画修复 */
.drawer-bottom.closing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    animation-fill-mode: forwards !important;
}

/* 顶部抽屉关闭动画修复 */
.drawer-top.closing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, opacity;
    animation-fill-mode: forwards !important;
}

/* ============================================================================
 * 遮罩层修复
 * ============================================================================ */

/* 遮罩层基础优化 */
.mask {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 遮罩层关闭状态 */
.mask.closing {
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ============================================================================
 * Bottom Sheet 修复
 * ============================================================================ */

.bottom-sheet-overlay {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bottom-sheet-overlay.closing {
    will-change: opacity;
}

.bottom-sheet,
.bottom-sheet-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.bottom-sheet.closing,
.bottom-sheet-content.closing {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-fill-mode: forwards !important;
}

/* ============================================================================
 * 抽屉内容区域优化
 * ============================================================================ */

.drawer-content,
.drawer-body,
.drawer-header,
.drawer-footer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.bottom-sheet-scroll,
.bottom-sheet-body,
.bottom-sheet-header {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ============================================================================
 * 重写关闭动画 - 确保动画结束时完全隐藏
 * ============================================================================ */

/* 右侧抽屉关闭动画 */
@keyframes huiDrawerSlideOutRight {
    0% {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateZ(0);
        opacity: 0;
        visibility: hidden;
    }
}

/* 左侧抽屉关闭动画 */
@keyframes huiDrawerSlideOutLeft {
    0% {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%) translateZ(0);
        opacity: 0;
        visibility: hidden;
    }
}

/* 底部抽屉关闭动画 */
@keyframes huiDrawerSlideOutBottom {
    0% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%) translateZ(0);
        opacity: 0;
        visibility: hidden;
    }
}

/* 顶部抽屉关闭动画 */
@keyframes huiDrawerSlideOutTop {
    0% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%) translateZ(0);
        opacity: 0;
        visibility: hidden;
    }
}

/* 应用自定义动画（覆盖父主题） */
.drawer-right.closing {
    animation: huiDrawerSlideOutRight 0.25s ease-out forwards !important;
}

.drawer-left.closing {
    animation: huiDrawerSlideOutLeft 0.25s ease-out forwards !important;
}

.drawer-bottom.closing {
    animation: huiDrawerSlideOutBottom 0.25s ease-out forwards !important;
}

.drawer-top.closing {
    animation: huiDrawerSlideOutTop 0.25s ease-out forwards !important;
}

/* ============================================================================
 * 动画完成后清理
 * ============================================================================ */

.drawer:not(.closing):not(.opening),
.bottom-sheet:not(.closing):not(.opening) {
    will-change: auto;
}

/* ============================================================================
 * 深色模式适配
 * ============================================================================ */

.dark .drawer,
.dark .bottom-sheet,
.dark .bottom-sheet-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 深色模式下用户下拉菜单修复 */
.dark .xun-user-dropdown {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* ============================================================================
 * 移动端优化
 * ============================================================================ */

@media (max-width: 768px) {
    .drawer,
    .bottom-sheet,
    .bottom-sheet-content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    .drawer.closing,
    .bottom-sheet.closing {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* 移动端用户下拉菜单修复 */
    .xun-user-dropdown {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
}

/* ============================================================================
 * 用户下拉菜单过渡动画优化
 * ============================================================================ */

/* 重写过渡动画，使用更平滑的曲线 */
.xun-user-dropdown {
    transition: 
        opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 确保关闭时 visibility 立即生效，避免残影 */
.xun-user-menu:not(:hover):not(:focus-within) .xun-user-dropdown {
    transition: 
        opacity 0.15s cubic-bezier(0.4, 0, 1, 1),
        visibility 0s linear 0.15s,
        transform 0.15s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* ============================================================================
 * 社区抽屉过渡动画优化
 * ============================================================================ */

/* 圈子管理抽屉容器 - 添加 visibility 过渡延迟 */
.hui-circle-manage-drawer {
    transition: visibility 0s linear 0.25s !important;
}

/* 圈子管理抽屉打开时立即显示 */
.hui-circle-manage-drawer.is-active {
    transition: visibility 0s linear 0s !important;
}

/* 圈子管理抽屉过渡动画 */
.hui-circle-manage-drawer-content {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 圈子管理抽屉关闭时使用更快的动画 */
.hui-circle-manage-drawer:not(.is-active) .hui-circle-manage-drawer-content {
    transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* 圈子管理抽屉遮罩层过渡 */
.hui-circle-manage-drawer-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 圈子管理抽屉关闭时遮罩层快速消失 */
.hui-circle-manage-drawer:not(.is-active) .hui-circle-manage-drawer-overlay {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* 创建圈子抽屉容器 - 添加 visibility 过渡延迟 */
.hui-create-board-drawer {
    transition: visibility 0s linear 0.25s !important;
}

/* 创建圈子抽屉打开时立即显示 */
.hui-create-board-drawer.is-active {
    transition: visibility 0s linear 0s !important;
}

/* 创建圈子抽屉过渡动画 */
.hui-create-board-drawer-content {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 创建圈子抽屉关闭时使用更快的动画 */
.hui-create-board-drawer:not(.is-active) .hui-create-board-drawer-content {
    transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* 创建圈子抽屉遮罩层过渡 */
.hui-create-board-drawer-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 创建圈子抽屉关闭时遮罩层快速消失 */
.hui-create-board-drawer:not(.is-active) .hui-create-board-drawer-overlay {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1) !important;
}

/* ============================================================================
 * 社区抽屉深色模式适配
 * ============================================================================ */

.dark .hui-circle-manage-drawer-content,
.dark .hui-create-board-drawer-content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* ============================================================================
 * 社区抽屉移动端优化
 * ============================================================================ */

@media (max-width: 768px) {
    .hui-circle-manage-drawer-content,
    .hui-create-board-drawer-content {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
}