:root {
    --bg-color: #0a0a0a;
    --accent-color: #ffffff;
    --text-color: rgba(255, 255, 255, 0.7);
    --blur-amount: 0px;
    --distortion: 0;
    --animation-speed: 20s;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    /* `cursor: none` was set with no replacement ever drawn, so the pointer
       simply vanished and the page felt broken. The soft cursor below is the
       replacement that comment was waiting for. */
    cursor: none;
}

#soft-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 70%);
    pointer-events: none;
    z-index: 4;
    transition: width .4s ease, height .4s ease, margin .4s ease;
    will-change: transform;
}

.anxious #soft-cursor { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.overwhelmed #soft-cursor { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

#experience {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#atmosphere {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(255, 255, 255, 0.05) 0%, 
                transparent 50%);
    transition: background 1s ease-out;
    filter: blur(var(--blur-amount));
    z-index: 1;
}

#vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
    z-index: 3;
}

#content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 600px;
    padding: 2rem;
}

#thought-marker {
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0;
    transition: opacity 2s ease, transform 2s ease, filter 1s ease;
    filter: blur(var(--text-blur, 0px));
}

#thought-marker.visible {
    opacity: 1;
    transform: translateY(-10px);
}

/* State Specific Animations */
@keyframes vibrate {
    0% { transform: translate(0,0); }
    25% { transform: translate(1px, 1px); }
    50% { transform: translate(-1px, -1px); }
    75% { transform: translate(1px, -1px); }
    100% { transform: translate(0,0); }
}

.anxious #content {
    animation: vibrate 0.1s infinite;
}

.calm #content {
    transition: all 5s ease;
}