/* Custom Styles & Reset */
    :root {
        --color-charcoal: #121212;
        --color-offwhite: #F5F5F0;
        --color-coral: #F97316;
        --font-serif: 'Playfair Display', serif;
        --font-sans: 'Inter', sans-serif;
    }

    body {
        background-color: var(--color-charcoal);
        color: var(--color-offwhite);
        font-family: var(--font-sans);
    }

    h1, h2, h3, h4, .font-serif {
        font-family: var(--font-serif);
    }

    /* Smooth Scrolling */
    html {
        scroll-behavior: smooth;
    }

    /* Selection Color */
    ::selection {
        background-color: var(--color-coral);
        color: var(--color-charcoal);
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
        width: 10px;
    }
    ::-webkit-scrollbar-track {
        background: var(--color-charcoal);
    }
    ::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 5px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: var(--color-coral);
    }

    /* Animations */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .reveal-up {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s ease-out;
    }
    .reveal-up.active {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-left {
        opacity: 0;
        transform: translateX(-30px);
        transition: all 0.8s ease-out;
    }
    .reveal-left.active {
        opacity: 1;
        transform: translateX(0);
    }

    .reveal-right {
        opacity: 0;
        transform: translateX(30px);
        transition: all 0.8s ease-out;
    }
    .reveal-right.active {
        opacity: 1;
        transform: translateX(0);
    }

    /* Hero Animations */
    .hero-text {
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .hero-img {
        transition: transform 1.5s ease-out;
    }

    /* Active State for Hero */
    .loaded .hero-text {
        transform: translateY(0);
    }
    .loaded .hero-img {
        transform: scale(1);
    }
    .loaded .hero-btn {
        opacity: 1;
        transform: translateY(0);
        transition: all 0.8s ease 0.5s;
    }

    /* Mobile Menu Transition */
    #mobile-menu {
        transition: opacity 0.3s ease;
    }
    #mobile-menu.open {
        opacity: 1;
        pointer-events: all;
    }