/**
 * Sticky Header Optimierungen - Issue #49
 * VR-Infotainment Ticketshop
 *
 * Features:
 * - Header bleibt beim Scrollen sichtbar (fixed)
 * - Kompakt beim Scrollen (scrolled state)
 * - Smooth transitions
 */

/* ========================================
   HEADER SCROLL STATE
   Kompakt beim Scrollen
   ======================================== */

#header,
.site-header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolled state - kompakter Header */
#header.header-scrolled,
.site-header.header-scrolled {
    /* Leicht kompakter */
}

#header.header-scrolled nav,
.site-header.header-scrolled nav {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#header.header-scrolled .nav-glass,
.site-header.header-scrolled .nav-glass {
    padding: 0.375rem;
    /* Etwas stärkerer Blur beim Scrollen */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(4, 6, 15, 0.85);
}

@media (min-width: 768px) {
    #header.header-scrolled .nav-glass,
    .site-header.header-scrolled .nav-glass {
        padding: 0.5rem;
    }
}

/* Logo etwas kleiner beim Scrollen */
#header.header-scrolled .logo-placeholder,
.site-header.header-scrolled .logo-placeholder {
    width: 32px;
    height: 32px;
}

@media (max-width: 767px) {
    #header.header-scrolled .logo-placeholder,
    .site-header.header-scrolled .logo-placeholder {
        width: 28px;
        height: 28px;
    }

    /* Text etwas kleiner auf Mobile beim Scrollen */
    #header.header-scrolled .text-xl,
    .site-header.header-scrolled .text-xl {
        font-size: 1rem;
    }
}

/* ========================================
   HIDE/SHOW ON SCROLL DIRECTION (optional)
   Header verstecken beim Nach-unten-Scrollen
   ======================================== */

#header.header-hidden,
.site-header.header-hidden {
    transform: translateY(-100%);
}

/* ========================================
   REDUCED MOTION PREFERENCE
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    #header,
    .site-header {
        transition: none !important;
    }
}