/**
 * JavaESPORTS - Smart Navbar Scroll Behavior
 * Auto-hide navbar on scroll down, show on scroll up
 * 
 * @version 1.0
 * @date 2025
 */

/* ============================================================================
   SCROLL-AWARE NAVBAR
   ============================================================================ */

.topbar {
    /* Smooth transition for hiding/showing */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
    transform: translateY(0);
}

/* Hide navbar when scrolling down */
.topbar.is-hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Show navbar when scrolling up */
.topbar.is-visible {
    transform: translateY(0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Enhanced shadow when scrolled */
.topbar.is-scrolled {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.98) 0%, rgba(49, 46, 129, 0.98) 50%, rgba(76, 29, 149, 0.98) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(139, 92, 246, 0.2) inset;
    border-bottom-color: rgba(139, 92, 246, 0.25);
}

/* Light theme adjustments */
[data-theme="light"] .topbar.is-scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
    border-bottom-color: rgba(139, 92, 246, 0.15);
}

/* Ensure smooth transitions */
.topbar * {
    transition-property: none; /* Prevent child elements from slowing down */
}

.topbar {
    transition-property: transform, box-shadow, background, border-bottom-color;
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .topbar.is-hidden {
        transform: translateY(-60px); /* Match mobile navbar height */
    }
}

/* Don't hide navbar when mobile menu is open */
.topbar.is-menu-open {
    transform: translateY(0) !important;
}

/* ============================================================================
   CONTENT ADJUSTMENT (No padding-top needed when navbar is hidden)
   ============================================================================ */

body {
    /* Smooth transition for content when navbar hides */
    transition: padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: Adjust page padding when navbar is hidden */
body.navbar-hidden {
    /* You can adjust padding if needed, but fixed navbar doesn't require this */
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

.topbar {
    /* Use GPU acceleration for smooth animations */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* ============================================================================
   ACCESSIBILITY - Don't hide navbar when user is tabbing through
   ============================================================================ */

.topbar:focus-within {
    transform: translateY(0) !important;
}

/* ============================================================================
   REDUCED MOTION SUPPORT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .topbar {
        transition-duration: 0.01ms !important;
    }
    
    .topbar.is-hidden {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   PRINT - Always show navbar
   ============================================================================ */

@media print {
    .topbar {
        transform: translateY(0) !important;
        position: static !important;
    }
}

/* ============================================================================
   ALTERNATIVE: Keep navbar always visible (uncomment if needed)
   ============================================================================ */

/*
.topbar.is-hidden {
    transform: translateY(0);
}
*/

/* ============================================================================
   SCROLLBAR COMPENSATION
   ============================================================================ */

/* Prevent layout shift when scrollbar appears/disappears */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}