/* Base Setup */
html, body { height: 100%; margin: 0; overflow: hidden; transition: background-color 0.5s ease, color 0.5s ease; }

:root {
    --bg-color: #111111;
    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.4);
    --line-color: rgba(255, 255, 255, 0.1);
    --card-bg: rgba(255, 255, 255, 0.03);
}

.light-theme {
    --bg-color: #f4f4f4;
    --text-main: #111111;
    --text-muted: rgba(0, 0, 0, 0.5);
    --line-color: rgba(0, 0, 0, 0.1);
    --card-bg: rgba(0, 0, 0, 0.05);
}

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

.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}
.snap-container::-webkit-scrollbar { display: none; }

/* Adjusted section padding to prevent sidebar overlap */
section { 
    height: 100vh; 
    scroll-snap-align: start; 
    scroll-snap-stop: always; 
    position: relative; 
    display: flex; 
    align-items: center; 
    padding-left: 10%; 
    padding-right: 10%; 
}

.grain {
    position: fixed; top: 0; left: 0; height: 100%; width: 100%;
    pointer-events: none; z-index: 50; opacity: 0.02;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
}

.nav-link { color: var(--text-muted); transition: color 0.3s ease; }
.nav-link.active { color: var(--text-main) !important; position: relative; }
.nav-link.active::after {
    content: ''; position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 2px; background-color: #ef4444;
}

.glass-card { background: var(--card-bg); border: 1px solid var(--line-color); transition: all 0.3s ease; }
.indicator-line { background-color: var(--line-color); }
.indicator-line.active { background-color: var(--text-main); }