/* Custom styles for editorial feel and animations */
    
    html {
        scroll-behavior: smooth;
    }

    body {
        /* Prevent layout shift on load */
        opacity: 1;
    }

    /* Typography tweaks */
    h1, h2, h3, h4 {
        line-height: 1.1;
    }

    /* Reveal Animations - Progressive Enhancement via JS */
    .reveal-text {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .reveal-text.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .reveal-image {
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .reveal-image.visible {
        opacity: 1;
        transform: scale(1);
    }

    /* Staggered delays */
    .delay-100 { transition-delay: 0.1s; }
    .delay-200 { transition-delay: 0.2s; }
    .delay-300 { transition-delay: 0.3s; }
    .delay-400 { transition-delay: 0.4s; }

    /* Mobile menu transitions */
    #mobile-menu.open {
        opacity: 1;
        pointer-events: all;
    }
    
    #mobile-menu.closed {
        opacity: 0;
        pointer-events: none;
    }

    /* Hamburger animation */
    #line1.open {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    
    #line2.open {
        transform: rotate(45deg) translate(-3px, -4px);
        width: 2rem; /* Match w-8 */
    }

    /* Scrollbar styling */
    ::-webkit-scrollbar {
        width: 10px;
    }
    
    ::-webkit-scrollbar-track {
        background: #f7f3eb;
    }
    
    ::-webkit-scrollbar-thumb {
        background: #2c4a2c;
        border-radius: 5px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background: #1d301d;
    }

    /* Focus visible for accessibility */
    *:focus-visible {
        outline: 2px solid #2c4a2c;
        outline-offset: 2px;
    }