/* ============================================
   style.css — 全局样式（高级版）
   包含：CSS Reset、配色变量、字体、通用组件
   ============================================ */

:root {
    --bg-primary: #030306;
    --bg-secondary: #0e0e14;
    --bg-card: rgba(16, 16, 22, 0.7);
    --color-accent: #c9a84c;
    --color-accent-bright: #e0c068;
    --color-gold: #d4a843;
    --color-gold-bright: #f0d060;
    --color-silver: #c0c0cc;
    --color-silver-bright: #e0e0ee;
    --color-copper: #c87850;
    --color-bronze: #b08850;
    --color-text: #f0ece4;
    --color-text-secondary: #ddd8d0;
    --color-muted: #a8a49c;
    --color-warm: #d4a050;
    --color-rose: #c87868;
    --color-violet: #9088a8;
    --gradient-gold: linear-gradient(135deg, #f0d060, #c89030, #a87828);
    --gradient-silver: linear-gradient(135deg, #e0e0ee, #a0a0b0, #c8c8d8);
    --gradient-copper: linear-gradient(135deg, #e0a070, #c87850, #a06040);
    --gradient-metallic: linear-gradient(135deg, #f0d060, #e0c060, #c8a040, #e0c868, #f0d870);
    --gradient-warm-metal: linear-gradient(135deg, #e0a060, #d09040, #c88038, #d4a050);
    --gradient-steel: linear-gradient(135deg, #a0a8b8, #808898, #b0b8c8);
    --font-serif: 'ZCOOL XiaoWei', 'Noto Serif SC', serif;
    --font-sans: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
    --font-display: 'Ma Shan Zheng', cursive;
    --font-mono: 'JetBrains Mono', monospace;
    --nav-height: 60px;
    --page-padding: 40px;
    --transition-fast: 0.3s;
    --transition-normal: 0.6s;
    --breath-cycle: 4s;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow: hidden; font-size: 16px; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--color-text);
    line-height: 1.6;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* Noise texture overlay - disabled for cleaner look */
/* body::after removed */

a { color: var(--color-accent-bright); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-gold); }
h1, h2, h3, h4 { font-family: var(--font-serif); line-height: 1.3; }

#particle-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    opacity: 0.8;
}

/* ========== GLASS MORPHISM ========== */
.glass {
    background: rgba(14, 14, 35, 0.55);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(201, 168, 76, 0.12);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.03);
}
.glass-strong {
    background: rgba(14, 14, 35, 0.8);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}
.glow-accent { box-shadow: 0 0 20px rgba(201, 168, 76, 0.35), 0 0 60px rgba(201, 168, 76, 0.1); }
.glow-gold { box-shadow: 0 0 20px rgba(240, 208, 96, 0.35), 0 0 60px rgba(240, 208, 96, 0.1); }

/* ========== GRADIENT TEXT ========== */
.gradient-text-accent {
    background: var(--gradient-metallic);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-warm {
    background: var(--gradient-warm-metal);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-cosmic {
    background: var(--gradient-copper);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-silver {
    background: var(--gradient-silver);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.gradient-text-steel {
    background: var(--gradient-steel);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========== BUTTONS ========== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px; border: 1px solid rgba(201, 168, 76, 0.35); border-radius: 10px;
    background: rgba(201, 168, 76, 0.08);
    color: var(--color-accent-bright);
    font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition-fast); user-select: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    position: relative; overflow: hidden;
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 208, 96, 0.1), transparent);
    transition: left 0.5s;
}
.btn:hover::before { left: 100%; }
.btn:hover {
    background: rgba(201, 168, 76, 0.15); border-color: var(--color-accent);
    box-shadow: 0 0 24px rgba(201, 168, 76, 0.25), 0 4px 16px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}
.btn-gold {
    border-color: rgba(240, 208, 96, 0.35); background: rgba(240, 208, 96, 0.08);
    color: var(--color-gold-bright);
}
.btn-gold::before {
    background: linear-gradient(90deg, transparent, rgba(240, 208, 96, 0.1), transparent);
}
.btn-gold:hover {
    background: rgba(240, 208, 96, 0.15); border-color: var(--color-gold);
    box-shadow: 0 0 24px rgba(240, 208, 96, 0.3), 0 4px 16px rgba(0,0,0,0.3);
}

/* ========== UTILITY CLASSES ========== */
.text-accent { color: var(--color-accent-bright); }
.text-gold { color: var(--color-gold-bright); }
.text-muted { color: var(--color-muted); }
.text-warm { color: var(--color-warm); }
.text-rose { color: var(--color-rose); }
.text-violet { color: var(--color-violet); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }
.hidden { display: none !important; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.6s ease forwards; }
@keyframes breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.breathe { animation: breathe var(--breath-cycle) ease-in-out infinite; }
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.text-shimmer {
    background: linear-gradient(90deg, var(--color-accent), var(--color-gold), var(--color-rose), var(--color-accent));
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
}

/* ========== GLOBAL NAV ========== */
#global-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
    z-index: 100; display: flex; align-items: center; justify-content: center;
    padding: 0 30px;
    background: rgba(3, 3, 6, 0.65);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(201, 168, 76, 0.06);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.nav-inner { display: flex; align-items: center; gap: 4px; }
.nav-link {
    padding: 8px 18px; color: var(--color-muted); font-size: 0.82rem;
    border-radius: 10px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); cursor: pointer; user-select: none;
    position: relative; letter-spacing: 0.04em;
}
.nav-link:hover { color: var(--color-text-secondary); background: rgba(201, 168, 76, 0.06); }
.nav-link.active {
    color: var(--color-accent-bright); background: rgba(201, 168, 76, 0.1);
    box-shadow: 0 0 16px rgba(201, 168, 76, 0.1);
}
.nav-link.active::after {
    content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 16px; height: 2px; border-radius: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.nav-divider { width: 1px; height: 18px; background: rgba(201, 168, 76, 0.1); margin: 0 4px; }
.nav-logo {
    font-family: var(--font-serif); font-size: 1.1rem; margin-right: 16px; white-space: nowrap;
    background: linear-gradient(135deg, #f0d78c, #c9a84c, #f0d78c);
    background-size: 200% 200%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logoShimmer 4s ease infinite;
}
@keyframes logoShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ========== PAGE FLIP BUTTONS ========== */
#page-buttons {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 10; display: flex; align-items: center; gap: 14px;
}
.page-flip-btn {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.15);
    background: rgba(3, 3, 6, 0.6);
    backdrop-filter: blur(12px); color: var(--color-accent-bright);
    font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
.page-flip-btn:hover:not(:disabled) {
    background: rgba(201, 168, 76, 0.1);
    border-color: rgba(201, 168, 76, 0.3);
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.15), 0 4px 20px rgba(0,0,0,0.3);
    transform: scale(1.1);
}
.page-flip-btn:active:not(:disabled) {
    transform: scale(0.95);
}
.page-flip-btn:disabled {
    opacity: 0.15; cursor: not-allowed;
    border-color: rgba(201, 168, 76, 0.06);
}
.page-label {
    font-size: 0.55rem; color: rgba(201, 168, 76, 0.4);
    font-family: var(--font-mono); letter-spacing: 0.15em;
    user-select: none; white-space: nowrap;
}
.page-progress {
    width: 60px; height: 2px; border-radius: 1px;
    background: rgba(201, 168, 76, 0.1);
    overflow: hidden; position: relative;
}
.page-progress-bar {
    height: 100%; border-radius: 1px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-bright));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.4);
}

/* ========== PAGE INDICATOR DOTS ========== */
#page-indicator {
    position: fixed; right: 30px; top: 50%; transform: translateY(-50%);
    z-index: 10; display: flex; flex-direction: column; gap: 14px;
}
.page-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(152, 152, 184, 0.3); cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: 0 0 0 0 transparent;
}
.page-dot.active {
    background: var(--color-accent);
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
    transform: scale(1.4);
}
.page-dot:hover { background: rgba(201, 168, 76, 0.5); }

/* ========== LOADING SCREEN ========== */
#loading-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-primary); z-index: 10000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s, visibility 0.8s;
}
#loading-screen.hidden { opacity: 0; visibility: hidden; }
#loading-screen .loading-text {
    font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 2rem;
    background: var(--gradient-metallic);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: breathe var(--breath-cycle) ease-in-out infinite;
}
#loading-screen .loading-bar {
    width: 200px; height: 2px; background: rgba(201, 168, 76, 0.08);
    position: relative; overflow: hidden; border-radius: 1px;
}
#loading-screen .loading-bar::after {
    content: ''; position: absolute; left: -50%; width: 50%; height: 100%;
    background: var(--gradient-metallic);
    animation: loading-slide 1.5s ease-in-out infinite;
}
@keyframes loading-slide { 0% { left: -50%; } 100% { left: 100%; } }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .nav-inner { gap: 2px; }
    .nav-link { padding: 6px 10px; font-size: 0.7rem; }
    .nav-logo { font-size: 0.9rem; margin-right: 10px; }
    #page-indicator { right: 10px; }
    .page-flip-btn { width: 42px; height: 42px; font-size: 0.9rem; }
}