:root {
    --color-background: #fbf9f8;
    --color-primary: #000000;
    --color-on-background: #1b1c1c;
    --color-surface-container: #efeded;
    --color-outline-variant: #c4c7c7;
    --color-on-surface-variant: #4a4a45;
    --color-on-primary: #ffffff;
}
html.dark {
    --color-background: #111111;
    --color-primary: #f2f2eb;
    --color-on-background: #e0e0e0;
    --color-surface-container: #1a1a1a;
    --color-outline-variant: #333333;
    --color-on-surface-variant: #a3a3a3;
    --color-on-primary: #000000;
}

html.dark .bg-nav-blur {
    background-color: rgba(17, 17, 17, 0.9);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

body {
    background-color: var(--color-background);
    color: var(--color-on-background);
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.5s ease, color 0.5s ease;
    min-height: max(884px, 100dvh);
}

.editorial-line {
    height: 1px;
    background-color: var(--color-outline-variant);
    width: 100%;
    transition: background-color 0.5s ease;
}

.image-overlay-reveal {
    transition: opacity 0.5s ease;
}

.project-card:hover .image-overlay-reveal {
    opacity: 1;
}

/* Utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Spotlight Cursor */
#spotlight {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;
    background: radial-gradient(circle 150px at var(--x, 50vw) var(--y, 50vh), transparent 0%, rgba(27, 28, 28, 0.95) 100%);
    opacity: 0; transition: opacity 0.3s ease; mix-blend-mode: difference;
}

body.spotlight-active #spotlight { opacity: 1; }

/* Typewriter Effect */
.typewriter-target { opacity: 0; }
.typewriter-target.typed { opacity: 1; }
.char-span {
    position: relative;
    top: 10px;
    opacity: 0;
    transition: opacity 0.4s ease, top 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.char-span.revealed {
    opacity: 1;
    top: 0;
}
.typing-cursor {
    display: inline-block;
    font-weight: 300;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.bg-nav-blur {
    background-color: rgba(251, 249, 248, 0.9);
    transition: background-color 0.5s ease;
}

/* Fade Up Effect */
.fade-up-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.fade-up-target.revealed {
    opacity: 1;
    transform: translateY(0);
}