/**
 * CFRO Component — PJAX Navigation Transitions
 *
 * @package CFRO
 * @since   2.0.0
 */

/* Top loading bar — visible while fetch is in progress */
.cfro-pjax-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--cfro-forest);
    z-index: 10000;
    animation: cfro-pjax-bar 1.2s ease-in-out infinite;
}

@keyframes cfro-pjax-bar {
    0%   { transform: scaleX(0); transform-origin: left; }
    50%  { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* Content fade-out before swap (120 ms) */
#main-content.cfro-pjax-exit {
    opacity: 0.3;
    transition: opacity 120ms ease-out;
}

/* Content fade-in after swap */
#main-content.cfro-pjax-enter {
    animation: cfro-pjax-fadein 200ms ease-in forwards;
}

@keyframes cfro-pjax-fadein {
    from { opacity: 0.3; transform: translateY(6px); }
    to   { opacity: 1;   transform: translateY(0); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .cfro-pjax-loading::before { animation: none; }
    #main-content.cfro-pjax-exit { transition: none; }
    #main-content.cfro-pjax-enter { animation: none; }
}