@charset "UTF-8";

:root {
    --bg-color: #0f0508;
    /* Darker, slightly reddish background */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-hover-bg: rgba(255, 46, 99, 0.08);
    /* Pink tint on hover */
    --text-main: #ffffff;
    --text-muted: #d0a9b0;
    /* Warm muted text */
    --accent-color: #ff2e63;
    --accent-glow: 0 0 20px rgba(255, 46, 99, 0.5);
    /* Vibrant gradients for modern feel */
    --accent-gradient: linear-gradient(135deg, #ff2e63, #ff0f7b);
    --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;
}

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(255, 46, 99, 0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 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%, #ff2e63 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(255, 46, 99, 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(255, 46, 99, 0.15);
    /* Pink glow */
    border-color: rgba(255, 46, 99, 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: #ff2e63;
    filter: drop-shadow(0 0 15px rgba(255, 46, 99, 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);
}

/* 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 */
body.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(255, 46, 99, 0.15);
}

body.light-mode .background-animation {
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 46, 99, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.08), transparent 40%);
}

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

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

body.light-mode .logo {
    background: linear-gradient(135deg, #ff2e63 0%, #ff0f7b 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* 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);
}

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

body.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. */
body.light-mode .sun-icon {
    display: none;
}

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

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