@charset "UTF-8";

:root {
    --bg-color: #0c0c10;
    /* Darker, slightly blueish background */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-hover-bg: rgba(99, 102, 241, 0.08);
    /* Purple tint on hover */
    --text-main: #ffffff;
    --text-muted: #a5b4fc;
    /* Cool muted text */
    --accent-color: #6366f1;
    --accent-glow: 0 0 20px rgba(99, 102, 241, 0.5);
    /* Vibrant gradients for modern feel */
    --accent-gradient: linear-gradient(135deg, #6366f1, #a855f7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    /* Optimized for Mainland China: System fonts priority */
    --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", Arial, sans-serif;
}

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

html {
    background-color: var(--bg-color); /* Fix overscroll white block */
}

body {
    font-family: var(--font-family);
    /* Background moved to .background-animation to prevent covering it */
    background: transparent;
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Dynamic Background */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* Lowest layer */
    overflow: hidden;
    background-color: var(--bg-color);
    /* Applied here */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.15), transparent 40%);
    transition: background-color 0.5s ease;
}

.container {
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    z-index: 1;
    /* Keep content on top */
    position: relative;
    /* Needed for z-index */
}

/* Header */
.site-header {
    text-align: center;
    animation: fadeInDown 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-logo-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    /* Fully round to remove 'box' feel */
    margin-bottom: 1.2rem;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-logo-img:hover {
    transform: rotate(10deg) scale(1.1);
}

.logo {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 20%, #6366f1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 0.5rem;
    letter-spacing: -1.5px;
    text-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.tagline {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.tagline .heart {
    font-size: 0.8em;
    color: var(--accent-color);
    margin: 0 5px;
    animation: heartbeat 1.5s infinite;
    display: inline-block;
}

@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

/* Grid */
.nav-grid {
    display: grid;
    /* Reduced min-width to 280px to fit smaller mobile screens (like iPhone SE) without overflow */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    width: 100%;
    max-width: 900px;
}

/* Cards */
.nav-card {
    text-decoration: none;
    color: var(--text-main);
    background: var(--card-bg);
    border: var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 3rem;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.nav-card:hover {
    background: var(--card-hover-bg);
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(99, 102, 241, 0.15);
    /* Purple glow */
    border-color: rgba(99, 102, 241, 0.3);
}

/* Shine effect */
.nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: 0.5s;
}

.nav-card:hover::before {
    left: 100%;
    transition: 0.7s;
}

.card-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 1.5rem;
    color: var(--text-main);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 0 transparent);
}

.nav-card:hover .card-icon {
    transform: scale(1.1) translateY(-5px);
    color: #6366f1;
    filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.6));
}

.nav-card h2 {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: -0.5px;
}

.nav-card p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.arrow {
    margin-top: auto;
    font-size: 1.8rem;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s ease;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nav-card:hover .arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Xiaohongshu Popup */
.xhs-hover-popup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 5, 8, 0.95);
    /* Match dark theme bg with opacity */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
    padding: 2rem;
}

.nav-card:hover .xhs-hover-popup {
    opacity: 1;
    visibility: visible;
}

.xhs-hover-popup img {
    width: 180px;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.4s ease;
}

.nav-card:hover .xhs-hover-popup img {
    transform: scale(1);
}

.xhs-hover-popup p {
    font-size: 1.2rem;
    color: var(--text-main);
    margin-bottom: 0;
    font-weight: 500;
}

/* Light mode adjustment for popup */
/* Light mode adjustment for popup */
html.light-mode .xhs-hover-popup {
    background: rgba(255, 255, 255, 0.95);
}

/* Footer */
.site-footer {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    opacity: 0.7;
    letter-spacing: 1px;
}

/* Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
        filter: blur(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .site-header {
        margin-top: 2rem;
    }

    .nav-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    .heart {
        opacity: 0.4;
        /* lighter on mobile */
    }
}

/* Light Mode Support */
/* Light Mode Support */
html.light-mode {
    --bg-color: #fff0f5;
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-hover-bg: rgba(255, 255, 255, 0.9);
    --text-main: #2d3436;
    --text-muted: #636e72;
    --glass-border: 1px solid rgba(99, 102, 241, 0.15);
}

html.light-mode .background-animation {
    background:
        radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.08), transparent 40%);
}

html.light-mode .nav-card {
    box-shadow: 0 10px 30px rgba(162, 162, 162, 0.1);
}

html.light-mode .nav-card p {
    color: #636e72;
}

html.light-mode .logo {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Language Toggle Button */
#lang-toggle {
    position: fixed !important;
    top: 1.5rem;
    right: 5rem;
    /* Offset from theme toggle */
    background: transparent;
    border: 2px solid var(--text-muted);
    color: var(--text-main);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 2000;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

#lang-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
    border-color: var(--text-main);
}

html.light-mode #lang-toggle {
    color: #2d3436;
    border-color: rgba(45, 52, 54, 0.5);
}

html.light-mode #lang-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: #2d3436;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed !important;
    /* Force fixed positioning */
    top: 1.5rem;
    right: 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 2000;
    /* Ensure on top of everything */
    -webkit-tap-highlight-color: transparent;
    /* Remove mobile tap highlight */
}

#theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
}

html.light-mode #theme-toggle {
    color: #2d3436;
}

html.light-mode #theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sun-icon {
    display: none;
    width: 24px;
    height: 24px;
}

.moon-icon {
    display: block;
    /* Default shows Moon (to switch to Dark) or Sun (to switch to Light)? Actually, usually icon shows target state or current state symbol. Let's show Sun if we are dark (to switch to light) and Moon if we are light. */
    width: 24px;
    height: 24px;
}

/* Logic: Default is Dark. So show Sun icon to switch to Light. */
.sun-icon {
    display: block;
}

.moon-icon {
    display: none;
}

/* When in Light Mode, show Moon icon to switch back to Dark. */
html.light-mode .sun-icon {
    display: none;
}

html.light-mode .moon-icon {
    display: block;
}

@media (max-width: 768px) {
    #theme-toggle {
        top: 1.5rem;
        right: 1.5rem;
    }

    #lang-toggle {
        top: 1.5rem !important;
        right: auto !important;
        left: 1.5rem !important;
    }

    .nav-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }
}