/* Custom styles to supplement Tailwind */
    html {
        scroll-behavior: smooth;
    }

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

    /* Subtle fade-in for non-hero elements only */
    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        will-change: opacity, transform;
    }

    .reveal.active {
        opacity: 1;
        transform: translateY(0);
    }

    /* Mobile menu transition */
    #mobile-menu {
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    
    #mobile-menu.hidden {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
    }
    
    #mobile-menu.show {
        max-height: 300px;
        opacity: 1;
    }