/* ==========================================================================
   Base Styles - Variables, Reset, Typography, Animations
   ========================================================================== */

:root {
    --space: 1rem;
    --bg: #09090b;
    --fg: #e3e3e3;
    --surface-1: #101012;
    --surface-2: #27272a;
    --surface-3: #52525b;
    --ease-out: cubic-bezier(0.5, 1, 0.89, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

    --primary: #2563eb;
    --secondary: #0ea5e9;
    --accent: #7c3aed;
    --text: var(--fg);
    --card-bg: var(--surface-1);

    --animation-primary: #e0f2fe, #7dd3fc, #0ea5e9;
    --animation-secondary: #fef08a, #fde047, #eab308;
    --animation-accent: #fecdd3, #fda4af, #e11d48;
    --animation-neutral: var(--fg), #a1a1aa, #52525b;
}

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

html,
body {
    height: 100%;
    scroll-behavior: smooth;
}

html {
    scroll-padding-top: 80px;
}

body {
    color: var(--fg);
    background: var(--bg);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space);
}

/* Animations */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

/* Pixel Canvas Element Styling */
pixel-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}