/* ============================================================
   WorkQuest — Page Transition Animations
   Fade + slide-up enter; fade + slide-up exit (200-300ms)
   ============================================================ */

/* --- Enter animation --- */
@keyframes wq-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Exit animation --- */
@keyframes wq-fade-slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Body starts hidden so the fade-in is clean */
body {
    opacity: 0;
}

body.wq-page-entering {
    animation: wq-fade-slide-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

body.wq-page-exiting {
    animation: wq-fade-slide-out 0.18s ease-in forwards;
    pointer-events: none;
}

/* --- Navigation link active feedback --- */
a.wq-nav-active {
    opacity: 0.65 !important;
    transition: opacity 0.1s !important;
}

/* --- Progress bar at top of page --- */
#wq-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #33aaff, #1a2a5e);
    z-index: 999999;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.2s ease;
    border-radius: 0 2px 2px 0;
    pointer-events: none;
}

#wq-progress-bar.wq-progress-visible {
    opacity: 1;
}

#wq-progress-bar.wq-progress-indeterminate {
    width: 72%;
}

#wq-progress-bar.wq-progress-done {
    width: 100%;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.3s ease 0.15s;
}