/* Only index.html loads this file. The shared panel design stays in style.css. */
@media (max-width: 767px) {
    .index-page .hero {
        min-height: calc(100svh - var(--index-mobile-header-height, 53px));
    }

    /* Hide before navigation.js creates the panel, avoiding a flash over hero. */
    .index-page .mobile-bottom-nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 330ms ease-out,
                    visibility 0s linear 480ms;
    }

    .index-page .mobile-bottom-nav[data-visible="true"] {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    @media (prefers-reduced-motion: reduce) {
        .index-page .mobile-bottom-nav {
            transition: none;
        }
    }
}