/**
 * Page Transition System
 * 
 * Uses visibility + opacity + transform for smooth transitions
 * No display: none - uses position and pointer-events instead
 * 
 * Classes:
 * - .pages:  Base class for all page containers
 * - .show:  Makes element visible with entrance animation
 * - .hide: Makes element invisible with exit animation
 */

/* Base state for all pages - invisible and removed from flow */
.pages {
    opacity: 0;
    visibility: hidden;
    transform: translateY(120px);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 50vh;
    z-index: 1;
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.4s;
}

/* Entrance animation - fade in + slide up */
.pages.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
    z-index: 10;
    transition: 
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* Exit animation - fade out + slide down */
.pages.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(120px);
    pointer-events: none;
    position:  absolute;
    top: 0;
    left: 0;
    right:  0;
    z-index: 1;
    transition:  
        opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.4s;
}

/* Container for pages needs relative positioning */
#mainArea {
    position: relative;
    min-height: calc(100vh - 60px);
}

/* Generic show/hide classes for any element (modals, dropdowns, etc) */
[data-animate="enter"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: 
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

[data-animate="exit"] {
    opacity: 0 !important;
    visibility: hidden !important;
    transform:  translateY(100px) !important;
    pointer-events: none !important;
    transition: 
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .pages,
    .pages.show,
    .pages.hide {
        transition: none;
    }
    
    .page-loading-bar .bar-fill {
        animation: none;
    }
}