/* 1. Entry: New page slides subtly into position */
body {
    margin: 0;
    animation: lateralEntry 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    will-change: transform, opacity;
    background-color: #fff;
    backface-visibility: hidden; /* Helps Chrome stay buttery smooth */
}

/* 2. Exit: Current page shifts slightly and vanishes */
body.snap-exit {
    animation: lateralExit 0.06s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}

@keyframes lateralEntry {
    0% { 
        opacity: 0; 
        transform: translate3d(-20px, 0, 0); 
    }
    100% { 
        opacity: 1; 
        transform: translate3d(0, 0, 0); 
    }
}

/* Enable view transitions for same-origin navigations */
@view-transition {
    navigation: auto;
}

/* Optional: Customize the animation to match your lateral slide */
::view-transition-old(root) {
    animation: lateralExit 0.06s cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(root) {
    animation: lateralEntry 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Optional: Customize the animation to match your lateral slide */
::view-transition-old(root) {
    animation: lateralExit 0.06s cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(root) {
    animation: lateralEntry 0.06s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes lateralExit {
    0% { 
        opacity: 1; 
        transform: translate3d(0, 0, 0); 
    }
    100% { 
        opacity: 0; 
        transform: translate3d(20px, 0, 0); 
    }
}

/* Keeps the background clean during the snap */
html {
    background-color: #f8f8f8; 
    overflow-x: hidden;
}