:root {
    --accent: #ffffff;
    --bg: #000000;
    --muted: #111111;
    --border: rgba(255,255,255,0.1);
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--accent);
}

section {
    scroll-margin-top: 100px;
}

.font-heading { 
    font-family: 'Space Grotesk', sans-serif; 
}

[v-cloak] { 
    display: none; 
}

.reveal {
    animation: reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reveal {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.bento-card {
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: all 0.5s ease;
    overflow: hidden;
    position: relative;
}

.bento-card:hover {
    border-color: rgba(255,255,255,0.3);
    background: #161616;
}

.img-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.path-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 3s ease forwards infinite;
}

@keyframes draw { 
    to { 
        stroke-dashoffset: 0; 
    } 
}

.cursor-follower {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    position: fixed;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
}

.modal-overlay {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

input, 
textarea {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white !important;
    transition: all 0.3s ease;
}

input:focus, 
textarea:focus {
    border-color: white !important;
    outline: none;
}