/**
 * Fitness Coach Pro Theme — Swup Gold Fade Page Transition Engine
 * 
 * Features:
 * - Luxury Gold Fade (200ms) with subtle micro-elevation (4px translateY)
 * - Ultra-thin 2px royal gold progress bar (#C5A059) with ambient glow
 * - Hardware accelerated compositing (will-change: opacity, transform)
 * - WCAG / Reduced-motion accessibility fallback
 * 
 * @package FitnessCoachProTheme
 * @version 1.0.0
 */

/* ── 1. Ultra-Thin Royal Gold Progress Bar ───────────────────────────────── */
.fcp-swup-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: 0%;
    height: 2.5px;
    background: linear-gradient(90deg, #C5A059 0%, #F5E6C8 50%, #C5A059 100%);
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.8), 0 0 4px rgba(245, 230, 200, 0.9);
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transform: translateZ(0);
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

[dir="rtl"] .fcp-swup-progress-bar {
    left: auto;
    right: 0;
}

.fcp-swup-progress-bar.is-active {
    opacity: 1;
}

.fcp-swup-progress-bar.is-done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.12s ease-out, opacity 0.25s ease 0.12s;
}

/* ── 2. Gold Fade Page Container Transitions ─────────────────────────────── */
.site-main {
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateZ(0);
}

/* While old content is fading out AND while new content is inserted before animate-in */
html.is-animating .site-main {
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
}


/* ── 3. Accessibility: Prefers-Reduced-Motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .site-main,
    html.is-animating .site-main,
    html.is-rendering .site-main {
        transform: none !important;
        transition-duration: 0.01ms !important;
    }
    
    .fcp-swup-progress-bar {
        display: none !important;
    }
}