/* Prevent unstyled markup from flashing before Framework7 applies its theme class. */
html:not(.ios):not(.md) #app {
    visibility: hidden;
}

/* Animate same-origin full-page navigation where the View Transitions API is supported. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
    html.ios::view-transition-old(root) {
        animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both f7-ios-page-out;
    }

    html.ios::view-transition-new(root) {
        animation: 300ms cubic-bezier(0.32, 0.72, 0, 1) both f7-ios-page-in;
    }

    html.md::view-transition-old(root) {
        animation: 400ms cubic-bezier(0, 0.8, 0.3, 1) both f7-md-page-out;
    }

    html.md::view-transition-new(root) {
        animation: 400ms cubic-bezier(0, 0.8, 0.3, 1) both f7-md-page-in;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01ms;
    }
}

@keyframes f7-ios-page-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0.8;
        transform: translateX(-25%);
    }
}

@keyframes f7-ios-page-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes f7-md-page-out {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-24px, 0, 0);
    }
}

@keyframes f7-md-page-in {
    from {
        transform: translate3d(128px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* The bottom tabbar is position:fixed (56px tall). F7's own .page-content rule already
   accounts for this via --f7-page-toolbar-bottom-offset, but that variable is normally set
   by F7's JS page-lifecycle, which only runs under F7's own SPA router -- this app renders
   full server pages (data-turbo="false"), so it never gets set and defaults to 0, letting
   content (e.g. the stop prev/next buttons) sit underneath the tabbar. Set the variable F7
   already expects rather than overriding .page-content directly. */
:root {
    --f7-page-toolbar-bottom-offset: 56px;
}

/* Story detail page: every stop panel is rendered into the DOM at once (see
   stop_nav_controller.js) so stop-to-stop navigation is a pure visibility toggle, never a
   re-fetch. Only the active one is shown. */
.stop-panel {
    display: none;
}

.stop-panel.stop-panel-active {
    display: block;
}