/* RESET & VARS */
:root {
    --bg-dark: #050505;
    --bg-panel: #0a0a0f;
    --accent: #8b5cf6; /* Violet */
    --accent-glow: rgba(139, 92, 246, 0.5);
    --text-main: #ffffff;
    --text-dim: #888888;
    --mouse-green: #10b981;
    --danger: #ef4444;
    --font-head: 'Syncopate', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; /* Hide default cursor */ }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow: hidden; /* Locked until entered */
    height: 100vh;
}

body.unlocked {
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- CUSTOM SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px; box-shadow: 0 0 10px var(--accent); }
::-webkit-scrollbar-thumb:hover { background: #fff; }

::selection { background: var(--accent); color: black; text-shadow: none; }

/* --- CRT SCANLINES --- */
.scanlines {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
    background-size: 100% 4px; pointer-events: none; z-index: 9997; opacity: 0.6;
}

/* --- CUSTOM CURSOR --- */
.cursor {
    width: 8px; height: 8px; background: white; border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
}
.cursor-follower {
    width: 40px; height: 40px; border: 1px solid var(--accent); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9998; transition: transform 0.1s ease;
}

/* --- BACKGROUND CANVAS --- */
#bg-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.4;
}

/* --- INTRO OVERLAY --- */
#intro-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 5000; display: flex; justify-content: center; align-items: center;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.intro-content { text-align: center; color: white; }
.pfp-preview img {
    width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--accent);
    margin: 20px 0; opacity: 0; transform: scale(0); animation: popIn 0.5s forwards 0.5s;
}
.credits { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 2rem; opacity: 0; animation: fadeIn 1s forwards 1s; }
#enter-btn {
    background: transparent; border: 1px solid var(--accent); color: var(--accent); padding: 15px 40px;
    font-family: var(--font-head); font-weight: bold; letter-spacing: 3px;
    transition: 0.3s; opacity: 0; animation: fadeIn 1s forwards 1.5s;
}
#enter-btn:hover { background: var(--accent); color: white; box-shadow: 0 0 30px var(--accent-glow); }

/* --- GLITCH TEXT --- */
.glitch { font-family: var(--font-head); font-size: 3rem; position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch::before { left: 2px; text-shadow: -1px 0 red; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -1px 0 blue; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-2 2s infinite linear alternate-reverse; }

/* --- MAIN LAYOUT --- */
main { opacity: 0; transition: opacity 1.5s ease; }
main.visible { opacity: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; position: relative; z-index: 10; }

.profile-header { display: flex; align-items: center; gap: 3rem; margin-bottom: 5rem; }
.pfp-container { width: 180px; height: 180px; position: relative; flex-shrink: 0; }
.pfp-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; border: 2px solid rgba(255,255,255,0.1); }
.status-indicator {
    width: 20px; height: 20px; background: #00ff00; border-radius: 50%;
    position: absolute; bottom: 10px; right: -5px; box-shadow: 0 0 10px #00ff00; border: 3px solid var(--bg-dark);
}
.bio h1 { font-family: var(--font-head); font-size: 4rem; line-height: 1; margin-bottom: 10px; text-transform: uppercase; }
.role-badge span { font-size: 0.9rem; color: var(--accent); letter-spacing: 2px; margin-right: 10px; }
.bio-text { margin-top: 20px; font-size: 1.1rem; line-height: 1.6; color: #ccc; }
.highlight { color: white; font-weight: bold; border-bottom: 2px solid var(--accent); }

/* --- LINKS GRID --- */
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; margin-bottom: 5rem; }
.link-card {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem; border-radius: 16px; position: relative; overflow: hidden;
    backdrop-filter: blur(10px); transition: transform 0.1s ease;
}
.link-card:hover { border-color: var(--accent); }
.link-card .icon { font-size: 2rem; margin-bottom: 1rem; color: var(--accent); }
.link-card h3 { font-family: var(--font-head); margin-bottom: 0.5rem; }
.link-card p { font-size: 0.9rem; color: var(--text-dim); }

/* --- MOUSELAND PROMO --- */
.mouseland-promo {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0,0,0,0));
    border: 1px solid var(--mouse-green); padding: 3rem; border-radius: 20px;
    text-align: center; position: relative; overflow: hidden;
}
.mouseland-promo h2 { color: var(--mouse-green); font-family: var(--font-head); margin-bottom: 1rem; }
.btn-glitch {
    background: var(--mouse-green); color: black; padding: 1rem 2rem;
    font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
    display: inline-block; margin-top: 1rem; transition: 0.2s;
}
.btn-glitch:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }

/* --- FLOATING MOUSE --- */
.floating-mouse {
    position: fixed; bottom: 50px; right: 50px; width: 80px; z-index: 50;
    animation: float 4s ease-in-out infinite; pointer-events: none;
}
.floating-mouse img { width: 100%; filter: drop-shadow(0 0 10px var(--accent)); }

/* --- ANIMATIONS --- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes popIn { 0% { opacity:0; transform: scale(0); } 70% { transform: scale(1.2); } 100% { opacity:1; transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 10px, 0); } 100% { clip: rect(80px, 9999px, 90px, 0); } }
@keyframes glitch-anim-2 { 0% { clip: rect(90px, 9999px, 100px, 0); } 100% { clip: rect(10px, 9999px, 15px, 0); } }

@media (max-width: 768px) { .profile-header { flex-direction: column; text-align: center; } .bio h1 { font-size: 2.5rem; } }