/* css/transitions.css - Luxury Minimal Transitions */

/* =========================================
   1. 基礎設定 & 進場 (Fade In)
   ========================================= */
body {
    opacity: 0;
    /* 初始稍微放大一點點 (1.02)，進場時縮回正常 (1.0)，製造「落地」感 */
    transform: scale(1.02); 
    
    /* 豪華緩動曲線：慢->快->極慢收尾 */
    transition: 
        opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.6s ease;
    
    /* 避免動畫時字體模糊 */
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* 進場狀態：回復正常 */
body.page-loaded {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
}

/* =========================================
   2. 內容層次感 (Stagger) - 讓 Sidebar 跟內容稍微分開進場
   ========================================= */
.sidebar, .fixed-header-left, .chat-page-container, .main-content-area {
    opacity: 0;
    transform: translateY(20px); /* 從下方 20px 浮上來 */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* 非常滑順的曲線 */
}

body.page-loaded .sidebar,
body.page-loaded .fixed-header-left,
body.page-loaded .chat-page-container,
body.page-loaded .main-content-area {
    opacity: 1;
    transform: translateY(0);
}

/* 錯落進場 (Stagger) */
body.page-loaded .sidebar { transition-delay: 0.05s; }
body.page-loaded .chat-page-container { transition-delay: 0.15s; }

/* =========================================
   3. 退場 (Fade Out)
   ========================================= */
body.page-exiting {
    opacity: 0;
    
    /* 退場時：稍微縮小 (0.98) + 輕微模糊 */
    transform: scale(0.98); 
    filter: blur(3px) grayscale(20%); /* 變模糊且稍微去色 */
    
    pointer-events: none;
    
    /* 退場稍微快一點，不要拖泥帶水 */
    transition: 
        opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.5s ease;
}