/* Page Transition Styles */

/* 
   "Lift-up" Entry Animation 
   The #page-content starts slightly lower and invisible.
   When the 'is-loaded' class is added to the body (via JS), 
   it transitions to visible and its natural position.
*/

#page-content {
    opacity: 0;
    transform: translateY(60px);
    /* Start from below */
    will-change: transform, opacity;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.0s ease-out;
}

/* State: Loaded (Animate in) */
body.is-loaded #page-content {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure body background prevents flashes */
body {
    overflow-x: hidden;
    background-color: var(--bg-color, #0f0f0f);
}

/* Optional: Accessible preference check */
@media (prefers-reduced-motion: reduce) {
    #page-content {
        transition: none;
        opacity: 1;
        transform: none;
    }
}