/**
 * SPA Navigation Transitions — Witness21
 * ========================================
 * Smooth fade transitions + loading bar for SPA video navigation.
 *
 * @version 1.0.0
 * @author  Cody (AI) & John Wadie
 */

/* ─── Fade Out ─── */
.w21-spa-fade-out {
    opacity: 0 !important;
    transition: opacity 200ms ease-out !important;
    pointer-events: none;
}

/* ─── Fade In ─── */
.w21-spa-fade-in {
    opacity: 1 !important;
    transition: opacity 200ms ease-in !important;
}

/* ─────────────────────────────────────
 * Loading Bar (top of viewport)
 * ───────────────────────────────────── */
.w21-spa-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
}

.w21-spa-loader.active {
    opacity: 1;
}

.w21-spa-loader-bar {
    height: 100%;
    width: 0;
    background: linear-gradient( 90deg, #d4a842, #f0c35a, #d4a842 );
    box-shadow: 0 0 8px rgba( 212, 168, 66, 0.6 );
    border-radius: 0 2px 2px 0;
    animation: w21SpaLoaderAnim 1.8s ease-in-out infinite;
}

.w21-spa-loader.active .w21-spa-loader-bar {
    animation: w21SpaLoaderAnim 1.8s ease-in-out infinite;
}

@keyframes w21SpaLoaderAnim {
    0%   { width: 0;    }
    25%  { width: 45%;  }
    50%  { width: 70%;  }
    75%  { width: 88%;  }
    100% { width: 95%;  }
}

/* When loading finishes, snap to 100% and fade out */
.w21-spa-loader:not(.active) .w21-spa-loader-bar {
    width: 100%;
    transition: width 150ms ease, opacity 200ms ease 100ms;
    opacity: 0;
}

/* ─────────────────────────────────────
 * Smooth content transitions
 * ───────────────────────────────────── */

/* Player swap — slight scale effect */
.section-player {
    transition: opacity 200ms ease;
}

/* Post content sections */
#post-bottom,
.comments-list-lg {
    transition: opacity 200ms ease;
}

/* Ensure no layout shift during swap */
.w21-spa-fade-out .player-wrapper,
.w21-spa-fade-out .player-embed {
    min-height: 200px;
}