html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem; /* h-16 navbar offset */
}

/* Custom Selection */
::selection {
    background-color: rgba(9, 9, 11, 0.08);
    color: inherit;
}
.dark ::selection {
    background-color: rgba(250, 250, 250, 0.1);
    color: inherit;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e4e4e7;
    border-radius: 3px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #27272a;
}
::-webkit-scrollbar-thumb:hover {
    background: #d4d4d8;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Nav Link Animation */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}

/* Typewriter Animation */
.animate-typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    animation: 
        typing 3s steps(30, end) 0.5s both,
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: currentColor }
}

/* Section Fade-in Animation */
.section-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Progress Fill Animation */
.progress-fill {
    width: 0;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}