/* ===========================
   PAGE TRANSITIONS
   Smooth fade-in/fade-out effects
   =========================== */

/* Initial page state - hidden before JS loads */
html,
body {
    overflow-x:hidden;
    /* Prevent horizontal scroll globally */
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
}

/* Page is ready to be shown */
body.page-ready {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page is fading out (navigating away) */
body.page-exit {
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
    transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fallback for no-JS: show page immediately */
body.no-js {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}