/**
 * Mode Switch - 模式切换动画样式（增强版）
 * 使用CSS transform和opacity实现高性能切换动画
 * 支持不同模式的专属过渡效果
 */

/* =====================================================================
   CSS变量定义 - 动画配置
   ===================================================================== */
:root {
    --pn-mode-transition-duration: 0.35s;
    --pn-mode-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --pn-mode-transition-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pn-mode-transition-easing-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =====================================================================
   模式容器基础样式
   ===================================================================== */
.pn-mode-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px) scale(0.98);
    transition: opacity var(--pn-mode-transition-duration) var(--pn-mode-transition-easing),
                transform var(--pn-mode-transition-duration) var(--pn-mode-transition-easing),
                visibility var(--pn-mode-transition-duration);
    will-change: opacity, transform;
    contain: layout style paint;
    /* GPU加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 激活状态 */
.pn-mode-container.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1) translateZ(0);
    z-index: 1; /* 🔧 修复：确保不覆盖侧边栏（侧边栏z-index: 1000） */
}

/* 非激活状态（确保完全隐藏） */
.pn-mode-container:not(.active) {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

/* =====================================================================
   引导界面兼容样式（旧代码兼容）
   ===================================================================== */
.pn-guide-interface {
    transition: opacity var(--pn-mode-transition-duration) var(--pn-mode-transition-easing),
                transform var(--pn-mode-transition-duration) var(--pn-mode-transition-easing);
    will-change: opacity, transform;
}

.pn-mode-container.active .pn-guide-interface {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pn-mode-container:not(.active) .pn-guide-interface {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

/* =====================================================================
   模式专属过渡动画
   ===================================================================== */

/* 1. 搜索模式 - 淡入 + 轻微缩放 */
.pn-mode-container[data-mode="search"].active {
    animation: pn-mode-search-enter var(--pn-mode-transition-duration) var(--pn-mode-transition-easing) forwards;
}

@keyframes pn-mode-search-enter {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 2. 智能推荐模式 - 从右侧滑入 */
.pn-mode-container[data-mode="smart_recommendation"].active {
    animation: pn-mode-smart-enter var(--pn-mode-transition-duration) var(--pn-mode-transition-easing) forwards;
}

@keyframes pn-mode-smart-enter {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* 3. 快速匹配模式 - 从下方弹出 */
.pn-mode-container[data-mode="quick_match"].active {
    animation: pn-mode-quick-enter var(--pn-mode-transition-duration) var(--pn-mode-transition-easing-bounce) forwards;
}

@keyframes pn-mode-quick-enter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.94);
    }
    60% {
        transform: translateY(-5px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 4. 步骤引导模式 - 淡入 + 向上滑动 */
.pn-mode-container[data-mode="step_by_step"].active {
    animation: pn-mode-step-enter var(--pn-mode-transition-duration) var(--pn-mode-transition-easing-smooth) forwards;
}

@keyframes pn-mode-step-enter {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 5. 专家模式 - 淡入 + 轻微缩放（侧边栏展开） */
.pn-mode-container[data-mode="expert"].active {
    animation: pn-mode-expert-enter var(--pn-mode-transition-duration) var(--pn-mode-transition-easing) forwards;
}

@keyframes pn-mode-expert-enter {
    0% {
        opacity: 0;
        transform: scale(0.96) translateX(-10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

/* =====================================================================
   退出动画（可选，用于更流畅的切换）
   ===================================================================== */
.pn-mode-container:not(.active)[data-mode="search"] {
    animation: pn-mode-search-exit 0.2s var(--pn-mode-transition-easing) forwards;
}

@keyframes pn-mode-search-exit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
}

/* =====================================================================
   性能优化
   ===================================================================== */
.pn-mode-container {
    contain: layout style paint;
    /* 优化重绘 */
    isolation: isolate;
}

/* =====================================================================
   移动端优化：减少动画复杂度
   ===================================================================== */
@media (max-width: 768px) {
    :root {
        --pn-mode-transition-duration: 0.25s;
    }
    
    .pn-mode-container {
        transition: opacity 0.25s ease,
                    visibility 0.25s;
        /* 移动端简化动画，只使用opacity */
        transform: none !important;
        animation: none !important;
    }
    
    .pn-mode-container.active {
        transform: none !important;
        position: relative;
        opacity: 1;
    }
    
    .pn-mode-container:not(.active) {
        transform: none !important;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
    
    /* 移动端：确保模式容器不占用空间 */
    .pn-mode-container:not(.active) {
        height: 0;
        overflow: hidden;
    }
    
    /* 移动端禁用复杂动画 */
    .pn-guide-interface {
        transition: opacity 0.25s ease;
        transform: none !important;
    }
}

/* 桌面端：侧边栏启用时的布局调整 */
@media (min-width: 769px) {
    body:has(.pn-sidebar) .pn-mode-container,
    body.pn-sidebar-active .pn-mode-container {
        /* 确保模式容器在侧边栏存在时正常显示 */
    }
    
    /* 隐藏顶部模式选择器（如果侧边栏启用） */
    body:has(.pn-sidebar) .pn-mode-selector-premium,
    body.pn-sidebar-active .pn-mode-selector-premium {
        display: none !important;
    }
}

/* 触摸优化 */
@media (hover: none) and (pointer: coarse) {
    .pn-mode-container {
        touch-action: pan-y;
    }
}

/* =====================================================================
   可访问性：减少动画（用户偏好）
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --pn-mode-transition-duration: 0.01s;
    }
    
    .pn-mode-container,
    .pn-guide-interface {
        transition: opacity 0.01s !important;
        transform: none !important;
        animation: none !important;
    }
    
    .pn-mode-container.active {
        transform: none !important;
    }
}

/* =====================================================================
   动画性能优化类（用于大量内容时）
   ===================================================================== */
.pn-mode-container.performance-mode {
    --pn-mode-transition-duration: 0.2s;
}

.pn-mode-container.performance-mode.active {
    animation: none !important;
    transition: opacity var(--pn-mode-transition-duration) ease,
                transform var(--pn-mode-transition-duration) ease;
}

/* 打印时隐藏所有模式容器（只显示当前激活的） */
@media print {
    .pn-mode-container:not(.active) {
        display: none !important;
    }
}

/* =====================================================================
   🎉 彩蛋效果动画
   ===================================================================== */

/* 粒子浮动动画（基础版本，具体动画由JS动态生成） */
@keyframes pn-particle-float {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(50px, -50px) scale(0);
    }
}

/* 闪光动画 */
@keyframes pn-sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* 彩纸下落动画 */
@keyframes pn-confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) rotate(720deg);
    }
}

/* 发光效果 */
.pn-easter-egg-glow {
    animation: pn-glow-pulse 1s ease-out;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

@keyframes pn-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 50px rgba(59, 130, 246, 0.8);
    }
}

/* 涟漪扩散动画 */
@keyframes pn-ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* 彩蛋容器基础样式 */
.pn-easter-egg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* 移动端：简化彩蛋效果 */
@media (max-width: 768px) {
    .pn-easter-egg {
        display: none; /* 移动端禁用彩蛋以提升性能 */
    }
}

/* 减少动画时禁用彩蛋 */
@media (prefers-reduced-motion: reduce) {
    .pn-easter-egg {
        display: none !important;
    }
}