@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;700&family=JetBrains+Mono&display=swap');

:root {
    --brand-green: #39FF14;
    --brand-pink: #FF6EC7;
    --brand-blue: #00BFFF;
    --brand-bg: #0A0A0A;
    --brand-surface: #1A1A2E;
    --brand-fg: #FFFFFF;
    --brand-border: #333333;
    
    --bg: oklch(14% 0.005 264);
    --surface: oklch(20% 0.02 264);
    --fg: oklch(98% 0.005 264);
    --accent: var(--brand-green);
    --pink: var(--brand-pink);
    --blue: var(--brand-blue);
    --crt-line: rgba(18, 16, 16, 0.1);
}

.light-theme {
    --brand-green: #008800; 
    --brand-pink: #D01080;
    --brand-blue: #0055FF;
    --brand-bg: #F4F4F5; /* Light zinc background */
    --brand-surface: #FFFFFF; /* Pure white cards */
    --brand-fg: #27272A; /* Dark zinc text */
    --brand-border: #D4D4D8; /* Zinc-300 borders */
    
    --bg: #F4F4F5;
    --surface: #FFFFFF;
    --fg: #27272A;
    --accent: var(--brand-green);
    --crt-line: rgba(0, 0, 0, 0.03);
}

.nav-glass {
    background-color: color-mix(in srgb, var(--brand-surface) 85%, transparent);
}

body {
    background-color: var(--brand-bg);
    color: var(--brand-fg);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

.pixel-font { font-family: 'Press Start 2P', cursive; }
.mono-font { font-family: 'JetBrains Mono', monospace; }

/* CRT Effect */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(var(--crt-line) 50%, transparent 50%);
    background-size: 100% 4px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.15;
}

.crt-glow {
    text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
}

.neon-border {
    border: 2px solid var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

/* Brutalist Card */
.pixel-card {
    background: var(--surface);
    border: 4px solid #000;
    box-shadow: 4px 4px 0px #000;
    image-rendering: pixelated;
    transition: all 0.2s ease-in-out;
}

.pixel-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--accent);
}

.pixel-card-pink:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px var(--pink);
}

/* Character */
.hero-character {
    width: 64px; height: 64px;
    background: url('https://api.dicebear.com/7.x/pixel-art/svg?seed=OLELAB') no-repeat;
    background-size: contain;
    display: inline-block;
}

.hero-character-large {
    width: 128px; height: 128px;
    background: url('https://api.dicebear.com/7.x/pixel-art/svg?seed=OLELAB') no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.mask-linear {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Loader */
.loading-indicator {
    text-align: center;
    padding: 3rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--fg);
}

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 10, 10, 0.8); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center;
    z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }

/* --- Animations --- */

/* Float animation for the hero character */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Glitch text effect */
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(2px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0); }
}
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: var(--accent);
}

/* Blinking cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.animate-blink {
    animation: blink 1s step-end infinite;
}

/* Slide up entrance */
@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-entrance {
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}