/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #FAFAFA;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAFAFA;
}
::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #E86A3A;
}

/* Typography Utilities */
h1, h2, h3, .font-serif {
    font-family: 'Instrument Serif', serif;
}

/* Navigation States */
.nav-scrolled {
    background-color: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* Hero Animations */
.hero-title {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

.hero-subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s cubic-bezier(0.2, 0.6, 0.2, 1) 0.2s forwards;
}

.hero-cta {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s cubic-bezier(0.2, 0.6, 0.2, 1) 0.4s forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Menu Transitions */
#mobile-menu {
    /* Initial state handled by JS class */
}

.menu-open #line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.menu-open #line2 {
    opacity: 0;
}