/* css/base.css - 空間運算級液態玻璃變數 */

/* ✨ 炫技核心：CSS Houdini API 定義自訂變數動畫 */
@property --glass-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

:root { 
    /* 🌙 深色模式：深空 OLED 黑 */
    --bg-base: #020203; 
    
    /* 🌌 強化版極光網格 */
    --mesh-color-1: rgba(10, 132, 255, 0.25); 
    --mesh-color-2: rgba(94, 92, 230, 0.20);
    --mesh-color-3: rgba(255, 45, 85, 0.15);
    
    /* 🧊 空間運算級液態玻璃：常態就用「按下」質感 */
    --glass-bg: rgba(255, 255, 255, 0.12);  
    --glass-border: rgba(255, 255, 255, 0.22);
    --glass-border-light: rgba(255, 255, 255, 0.55);
    --glass-border-dark: rgba(255, 255, 255, 0.06);
    --glass-highlight: rgba(255, 255, 255, 0.45);
    
    /* 物理級內部折射光（模擬被按下去的厚度） */
    --glass-inner-glow: inset 0 2px 4px rgba(255, 255, 255, 0.28), 
                        inset 0 -3px 8px rgba(0, 0, 0, 0.55),
                        inset 1px 0 3px rgba(255, 255, 255, 0.12);
    
    --vibrant-text-grad: linear-gradient(135deg, #ffffff 20%, #a1a1a6 50%, #d2d2d7 80%);
    --text-main: #f5f5f7; 
    --text-muted: #86868b; 
    --primary: #0a84ff; 
    --secondary: #5e5ce6; 
    --toast-text: #f5f5f7;
    --solid-bg: #1c1c1e;
    --solid-border: #333336;
}

/* ==========================================
   ☀️ 明亮模式 (Light Mode) 專屬白玉液態玻璃
   ========================================== */
[data-theme="light"] { 
    --bg-base: #f5f5f7; 
    
    --mesh-color-1: rgba(0, 122, 255, 0.12); 
    --mesh-color-2: rgba(255, 45, 85, 0.08);
    --mesh-color-3: rgba(52, 199, 89, 0.08); 
    
    /* 白玉冰塊：常態就用厚重「按下」質感 */
    --glass-bg: rgba(255, 255, 255, 0.72);  
    --glass-border: rgba(255, 255, 255, 0.85);
    --glass-border-light: rgba(255, 255, 255, 0.95);
    --glass-border-dark: rgba(255, 255, 255, 0.35);
    --glass-highlight: rgba(255, 255, 255, 1);
    
    --glass-inner-glow: inset 0 2px 5px rgba(255, 255, 255, 0.95), 
                        inset 0 -2px 6px rgba(0, 0, 0, 0.08),
                        inset 1px 0 3px rgba(255, 255, 255, 0.6);
    
    --vibrant-text-grad: linear-gradient(135deg, #1d1d1f, #434344, #1d1d1f);
    --text-main: #1d1d1f; 
    --text-muted: #86868b; 
    --primary: #007aff;
    --secondary: #5856d6; 
    
    --toast-text: #1d1d1f;
    --solid-bg: #ffffff;
    --solid-border: #e5e5ea;
}


/* 🌙 動態網格背景核心 */
body { 
    margin: 0; padding: 0; min-height: 100vh;
    box-sizing: border-box; overflow-x: hidden; 
    
    /* 優化：加入 system-ui 達到真正的系統級適配，保留 Apple 信仰 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; 
    color: var(--text-main);
    background-color: var(--bg-base);
    
    /* 讓背景與文字顏色切換時，擁有 0.6 秒的絲滑漸變 */
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.6s ease;
}

/* ✨ 效能優化核心：將動畫移至偽元素，並開啟 GPU 加速 */
body::after {
    content: "";
    position: fixed;
    top: -50%; left: -50%; /* 放大畫布以容納位移 */
    width: 200%; height: 200%;
    background-image: 
        radial-gradient(circle at 25% 50%, var(--mesh-color-1), transparent 55%),
        radial-gradient(circle at 75% 30%, var(--mesh-color-2), transparent 55%),
        radial-gradient(circle at 50% 80%, var(--mesh-color-3), transparent 55%);
    animation: meshMovement 15s ease-in-out infinite alternate;
    z-index: -2;
    pointer-events: none;
    
    /* ✨ 關鍵：強制開啟硬體加速，消滅重繪卡頓 */
    transform: translateZ(0);
    will-change: transform;
}

/* ✨ 頂級磨砂雜訊 (Noise Texture) - 消除色帶，增加物理厚重感 */
body::before {
    content: "";
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
    
    /* ✨ 讓這層靜態雜訊不要參與任何重繪運算 */
    transform: translateZ(0);
}

/* 🚀 顛覆性的效能提升：改用 transform 位移取代 background-position */
@keyframes meshMovement {
    0% { transform: translate(0, 0) translateZ(0); }
    50% { transform: translate(-10%, -5%) translateZ(0); }
    100% { transform: translate(-5%, -15%) translateZ(0); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } 

.cyber-title { 
    color: var(--text-main); 
    margin-bottom: 20px; 
    font-size: 26px; 
    font-weight: 800; 
    letter-spacing: 0.5px; 
}

.hidden { display: none !important; }