/* ========== Page Transitions ========== */

/* Base state for transition */
body {
    overflow-x: hidden;
    /* Prevent scrollbars during slide */
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Ensure HTML background matches body to avoid white flash */
html {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
    overflow-x: hidden;
    /* Fix for horizontal scrollbar during slide */
    width: 100%;
}

html.dark-mode {
    background-color: #1a1a1a;
}

/* Keyframes for sliding */
/* Removed opacity fade to ensure content is visible immediately */
@keyframes slideOutToLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slideOutToRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Animation Classes */
/* Apply animation to body when class is on html */
html.slide-out-to-left body {
    animation: slideOutToLeft 0.5s ease forwards;
}

html.slide-out-to-right body {
    animation: slideOutToRight 0.5s ease forwards;
}

html.slide-in-from-right body {
    animation: slideInFromRight 0.5s ease forwards;
}

html.slide-in-from-left body {
    animation: slideInFromLeft 0.5s ease forwards;
}