/**
 * SPA Transitions and Loading States
 * Styles for PageRouter navigation animations and states
 *
 * @version 1.0.0
 * @author Chief Architect - SPA Transition Implementation
 */

/* ========================================
   Loading Indicator
   ======================================== */

.router-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.router-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* ========================================
   Content Loading States
   ======================================== */

#mainContent {
    transition: opacity 0.3s ease, filter 0.3s ease;
    min-height: 60vh; /* Prevent layout shift during load */
}

#mainContent.loading {
    opacity: 0.6;
    filter: blur(2px);
    pointer-events: none;
}

/* Smooth fade in for new content */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mainContent:not(.loading) > * {
    animation: fadeInContent 0.4s ease-out;
}

/* ========================================
   Navigation Link States
   ======================================== */

a[data-ajax-nav] {
    position: relative;
    transition: opacity 0.2s ease;
}

a[data-ajax-nav]:hover {
    opacity: 0.8;
}

/* Visual feedback for active navigation */
a[data-ajax-nav].navigating {
    opacity: 0.5;
    pointer-events: none;
}

a[data-ajax-nav].navigating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* ========================================
   Persistent Audio Player Zone
   ======================================== */

#audioPlayerPersistent {
    /* Ensure player zone is not affected by content transitions */
    position: relative;
    z-index: 100;
    transition: none !important;
}

/* Prevent any animations on audio elements */
#audioPlayerPersistent audio,
#audioPlayerPersistent .amplitude-player {
    transition: none !important;
    animation: none !important;
}

/* ========================================
   Page-Specific Transitions
   ======================================== */

/* Track page transitions */
.track-page-content {
    animation: fadeInContent 0.5s ease-out;
}

/* Grid page transitions */
.grid-page-content {
    animation: fadeInContent 0.4s ease-out;
}

.content-grid > * {
    animation: fadeInUp 0.5s ease-out backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation for grid items */
.content-grid > *:nth-child(1) { animation-delay: 0.05s; }
.content-grid > *:nth-child(2) { animation-delay: 0.1s; }
.content-grid > *:nth-child(3) { animation-delay: 0.15s; }
.content-grid > *:nth-child(4) { animation-delay: 0.2s; }
.content-grid > *:nth-child(5) { animation-delay: 0.25s; }
.content-grid > *:nth-child(6) { animation-delay: 0.3s; }

/* ========================================
   Smooth Scroll to Top
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* Override for instant scroll when needed */
html.instant-scroll {
    scroll-behavior: auto;
}

/* ========================================
   Error States
   ======================================== */

.navigation-error {
    padding: 20px;
    text-align: center;
    animation: shakeError 0.5s ease-out;
}

@keyframes shakeError {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ========================================
   Mobile Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Lighter transitions on mobile for performance */
    #mainContent.loading {
        filter: none; /* Remove blur on mobile */
    }

    .content-grid > * {
        animation: none; /* Disable stagger on mobile */
        opacity: 1;
    }

    /* Simpler loading indicator on mobile */
    .router-loading {
        background: rgba(0, 0, 0, 0.95);
        padding: 15px;
    }

    .router-loading .spinner-border {
        width: 2rem;
        height: 2rem;
    }
}

/* ========================================
   Accessibility
   ======================================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    #mainContent,
    #mainContent:not(.loading) > *,
    .content-grid > *,
    .track-page-content,
    .grid-page-content {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }

    #mainContent.loading {
        filter: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   Dark Mode Support
   ======================================== */

@media (prefers-color-scheme: dark) {
    .router-loading {
        background: rgba(30, 30, 30, 0.95);
    }

    a[data-ajax-nav].navigating::after {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* Use GPU acceleration for transitions */
#mainContent,
.router-loading,
.content-grid > * {
    will-change: opacity, transform;
}

/* Clean up will-change after animations */
#mainContent:not(.loading),
.content-grid > *:not(:hover) {
    will-change: auto;
}

/* ========================================
   Debug Mode Styles
   ======================================== */

body.spa-debug #mainContent {
    border: 2px dashed red;
}

body.spa-debug #audioPlayerPersistent {
    border: 2px dashed green;
}

body.spa-debug [data-ajax-nav] {
    outline: 1px dotted blue;
}

/* ========================================
   Fallback Styles
   ======================================== */

/* When JavaScript is disabled */
.no-js a[data-ajax-nav] {
    /* Links work normally without JS */
    pointer-events: auto !important;
    opacity: 1 !important;
}

.no-js .router-loading {
    display: none;
}

.no-js #mainContent {
    opacity: 1 !important;
    filter: none !important;
}