/* =========================================
   MOBILE SWIPE NAVIGATION TRANSITIONS
   ========================================= */

/* Only on mobile devices that support native view transitions */
@media (max-width: 768px) {
    @view-transition {
        navigation: none;
    }

    /* Mobile navigation between main pages is instant (no slide transition). */
    ::view-transition-group(root) {
        animation: none !important;
        animation-duration: 0s !important;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        animation-duration: 0s !important;
    }

    /* 
     * DIRECTION: LEFT-TO-RIGHT (PREVIOUS)
     * e.g. Clans -> Messages
     * Old view slides to RIGHT
     * New view slides from LEFT
     */
    html[data-transition-direction="right"]::view-transition-old(root) {
        animation-name: slide-out-to-right;
    }

    html[data-transition-direction="right"]::view-transition-new(root) {
        animation-name: slide-in-from-left;
    }

    /* 
     * DIRECTION: RIGHT-TO-LEFT (NEXT)
     * e.g. Home -> Messages
     * Old view slides to LEFT
     * New view slides from RIGHT
     */
    html[data-transition-direction="left"]::view-transition-old(root) {
        animation-name: slide-out-to-left;
    }

    html[data-transition-direction="left"]::view-transition-new(root) {
        animation-name: slide-in-from-right;
    }
}

/* --- Keyframes for Slide Animations --- */

@keyframes slide-out-to-left {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-20%);
        opacity: 0;
    }
}

@keyframes slide-in-from-right {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-to-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(20%);
        opacity: 0;
    }
}

@keyframes slide-in-from-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Ensure mobile nav items active state matches current page logic */
/* Logic handled primarily by backend active class, but ensures visual consistency */
.mobile-nav-item.active i,
.mobile-nav-item.active {
    color: var(--accent-primary);
}