/*
 * 全站共用樣式。頁面各自的 <style> 只放該頁專屬的東西。
 * 注意：這個檔在 assets/ 底下，圖片路徑要用 ../image/
 */

/* ===== 設計 token ===== */
:root {
    --night-bg: #1a1a1a;
    --night-terminal-bg: #212121;
    --night-text: #dcdcdc;
    --night-accent: #39ff14;
    --night-secondary: #87ceeb;
    --night-border: rgba(57, 255, 20, 0.2);
    --projection-glow: 0 0 15px rgba(57, 255, 20, 0.5);

    --day-bg: #f0f0f0;
    --day-terminal-bg: #ffffff;
    --day-text: #333333;
    --day-accent: #2c7e0c;
    --day-secondary: #0077b6;
    --day-border: rgba(0, 0, 0, 0.1);
    --day-projection-glow: 0 0 15px rgba(44, 126, 12, 0.4);

    --tree-line-color: rgba(57, 255, 20, 0.85);
    --night-folder-name-color: #add8e6;
    --day-folder-name-color: #0077b6;

    /* Fira Code 沒有中文字符，後面接系統內建的 CJK 字型，避免各平台掉到不同的預設字體 */
    --font-family: 'Fira Code', 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans CJK TC', monospace;
    --transition-speed: 0.3s;

    --scrollbar-track-bg: #2c2c2c;
    --scrollbar-thumb-bg: var(--night-accent);
    --scrollbar-thumb-hover-bg: #8cff7a;
}
body.light-mode {
    --scrollbar-track-bg: #e9e9e9;
    --scrollbar-thumb-bg: var(--day-accent);
    --scrollbar-thumb-hover-bg: #3cb314;
}

/* ===== 基本版面 ===== */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: var(--font-family);
    background-color: var(--night-bg);
    color: var(--night-text);
    transition: background-color var(--transition-speed), color var(--transition-speed);

    display: flex;
    flex-direction: column;
}
body.light-mode {
    background-color: var(--day-bg);
    color: var(--day-text);
}
a { text-decoration: none; transition: color var(--transition-speed); }

/* 只鎖裝飾性元素的選取；內文、聯絡資訊要能複製 */
.navbar,
.terminal-header,
.particle,
.desktop-scene,
.page-transition-terminal {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 鍵盤操作時看得到焦點在哪 */
:focus-visible {
    outline: 2px solid var(--night-accent);
    outline-offset: 3px;
    border-radius: 3px;
}
body.light-mode :focus-visible { outline-color: var(--day-accent); }

/* ===== 導覽列 ===== */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px;
    background-color: var(--night-terminal-bg);
    border-bottom: 1px solid var(--night-border);
    z-index: 100;
}
body.light-mode .navbar { background-color: var(--day-terminal-bg); border-bottom-color: var(--day-border); }
.navbar .logo a { font-size: 24px; font-weight: 600; color: var(--night-accent); }
body.light-mode .navbar .logo a { color: var(--day-accent); }
.navbar .menu { display: flex; align-items: center; gap: 25px; }
.navbar .menu-links a { font-size: 16px; color: var(--night-text); margin: 0 10px; }
body.light-mode .navbar .menu-links a { color: var(--day-text); }
.navbar .menu a:hover { color: var(--night-accent); }
body.light-mode .navbar .menu a:hover { color: var(--day-accent); }
.switch-btn {
    cursor: pointer; padding: 5px 10px;
    border: 1px solid var(--night-border); border-radius: 5px;
    background: none; color: var(--night-text);
    font-family: inherit; /* button 不會繼承字型，不寫會掉回瀏覽器預設 UI 字體 */
    font-size: 14px;
}
body.light-mode .switch-btn { border-color: var(--day-border); color: var(--day-text); }

/* ===== 主要內容 ===== */
.main-content {
    flex-grow: 1;
    padding: 50px 20px;
    opacity: 0; transform: translateY(20px);
    animation: content-fade-in 0.8s forwards 0.2s;
}
@keyframes content-fade-in { to { opacity: 1; transform: translateY(0); } }

/* ===== 終端機外框 ===== */
/* 首頁的終端機是浮動動畫版本，會在該頁自行覆蓋 position / 尺寸 */
.terminal-container {
    width: 100%; max-width: 800px; margin: 0 auto;
    border: 1px solid var(--night-border);
    border-radius: 8px;
    background-color: var(--night-terminal-bg);
    box-shadow: var(--projection-glow);
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}
body.light-mode .terminal-container {
    background-color: var(--day-terminal-bg);
    border-color: var(--day-border);
    box-shadow: var(--day-projection-glow);
}
.terminal-header {
    background-color: #2c2c2c;
    padding: 5px 10px 0 10px;
    border-bottom: 1px solid #444;
    flex-shrink: 0;
}
body.light-mode .terminal-header { background-color: #e9e9e9; border-bottom-color: #ccc; }
.terminal-tab {
    display: inline-block; background-color: var(--night-terminal-bg);
    padding: 8px 15px; border-radius: 5px 5px 0 0;
    border: 1px solid var(--night-border); border-bottom: none;
    font-size: 14px; position: relative; bottom: -1px;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}
body.light-mode .terminal-tab { background-color: var(--day-terminal-bg); border-color: var(--day-border); }
.terminal-icon {
    display: inline-block; width: 16px; height: 16px;
    vertical-align: middle; margin-right: 8px;
    background-image: url('../image/terminal_icon.png');
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
}
.terminal-body { padding: 25px; }
.terminal-line { margin-bottom: 1.5em; }
.terminal-prompt { color: var(--night-accent); margin-right: 10px; }
body.light-mode .terminal-prompt { color: var(--day-accent); }
.command { color: #fff; }
body.light-mode .command { color: #000; }

/* ===== 頁腳 ===== */
.site-footer {
    text-align: center;
    padding: 10px 0;
    margin: 0 40px 10px 40px;
    border-top: 1px solid var(--night-border);
    font-size: 14px;
    color: #888;
    transition: border-color var(--transition-speed), color var(--transition-speed);
}
.site-footer a {
    color: var(--night-secondary);
    border-bottom: 1px dashed transparent;
    transition: border-color var(--transition-speed);
}
.site-footer a:hover { border-bottom-color: var(--night-secondary); }
body.light-mode .site-footer { border-top-color: var(--day-border); color: #666; }
body.light-mode .site-footer a { color: var(--day-secondary); }

/* ===== 點擊粒子 ===== */
.particle {
    position: absolute; pointer-events: none;
    color: var(--night-accent); font-size: 20px; font-weight: 600;
    opacity: 1; animation: particle-anim 1s forwards; z-index: 9999;
}
body.light-mode .particle { color: var(--day-accent); }
@keyframes particle-anim { to { transform: translateY(-100px) scale(0.5); opacity: 0; } }

/* ===== 跳頁時的打字提示 ===== */
.page-transition-terminal {
    position: fixed; top: 70px; right: 40px;
    background-color: #1a1a1a;
    border: 1px solid var(--night-border);
    padding: 10px 20px;
    font-size: 18px;
    z-index: 9999;
    border-radius: 6px;
    animation: command-appear-down 0.5s forwards ease-out;
}
body.light-mode .page-transition-terminal { background-color: #e9e9e9; border-color: var(--day-border); }
.page-transition-terminal .prompt { color: var(--night-accent); margin-right: 10px; }
body.light-mode .page-transition-terminal .prompt { color: var(--day-accent); }
.page-transition-terminal .cursor {
    display: inline-block; width: 10px; height: 1.1em;
    background-color: var(--night-accent); vertical-align: middle;
    animation: typing-cursor-blink 1s step-end infinite;
}
body.light-mode .page-transition-terminal .cursor { background-color: var(--day-accent); }
@keyframes command-appear-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes typing-cursor-blink { 50% { opacity: 0; } }

/* ===== 捲軸 ===== */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-bg);
    transition: background-color 0.3s;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--scrollbar-thumb-bg);
    border: 3px solid var(--scrollbar-track-bg);
    transition: background-color 0.3s;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-bg); }

/* ===== 降低動態偏好 ===== */
/* 用極短時間而非 none，animationend 才會照常觸發（首頁的導覽列靠它現身） */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}