/**
 * EDEN01 2026 Upgrade: Navigation
 * Glass morphism with precision hairline
 * Date: 2026-01-14
 * 
 * QA Checklist:
 * ✅ Glass effect: Blur performance tested (no jank)
 * ✅ Contrast: Text readable against all backgrounds
 * ✅ Touch targets: Links min 44px height
 * ✅ Focus states: Visible keyboard navigation
 */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);

    /* Initial: Transparent */
    background: transparent;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;

    transition:
        background var(--motion-slow) var(--ease-luxury),
        backdrop-filter var(--motion-slow) var(--ease-luxury),
        border-color var(--motion-slow) var(--ease-luxury),
        box-shadow var(--motion-slow) var(--ease-luxury);
}

/* ========================================
   Scroll Progress Bar - Award Feature
   Goldene Linie zeigt Scroll-Fortschritt
   ======================================== */

.nav__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--color-accent-gold) 0%,
        var(--color-accent-gold-bright, #d4b876) 50%,
        var(--color-accent-gold) 100%
    );
    box-shadow: 0 0 8px rgba(184, 148, 74, 0.6), 0 0 16px rgba(184, 148, 74, 0.3);
    width: var(--scroll-progress, 0%);
    transform-origin: left;
    transition: width 0.05s linear;
    opacity: 0;
    z-index: 10;
}

.nav--scrolled .nav__progress {
    opacity: 1;
}

/* Scrolled: Glass effect */
.nav--scrolled {
    background: rgba(10, 15, 10, 0.95) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--color-hairline) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Scrolled: Compact container padding */
.nav--scrolled .nav__container {
    padding: 1rem var(--padding-inline) !important;
}

/* Nav Container */
.nav__container {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--space-md) var(--padding-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo: Slightly bigger */
.nav__logo-img {
    height: 50px;
    transition: height var(--motion-base) var(--ease-luxury);
}

.nav--scrolled .nav__logo-img {
    height: 42px;
}

/* Nav Links: Refined spacing */
.nav__links {
    display: flex;
    gap: var(--space-2xl);
    align-items: center;
}

.nav__link {
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    text-decoration: none;
    position: relative;
    padding: var(--space-sm) 0;
    transition: color var(--motion-base) var(--ease-luxury);
}

/* Hover: Gold underline */
.nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-accent-gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--motion-base) var(--ease-luxury);
}

.nav__link:hover {
    color: var(--color-accent-gold);
    cursor: url('../images/Papagei-cursor.png') 32 32, pointer !important;
}

.nav__link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Focus states for accessibility */
.nav__link:focus {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 4px;
}

.nav__link:focus:not(:focus-visible) {
    outline: none;
}

.nav__link:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 4px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    /* Logo in der Hero-Nav ausblenden — Hero-Logo übernimmt */
    .nav__logo {
        display: none;
    }

    /* Ab Atmosphere (nav--scrolled): Logo wieder einblenden */
    .nav--scrolled .nav__logo {
        display: inline-flex;
    }

    /* Hamburger immer rechts — auch ohne Logo im Hero */
    .nav__menu-toggle {
        margin-left: auto;
    }

    .nav__links {
        gap: var(--space-lg);
    }

    .nav__link {
        font-size: var(--fs-meta);
    }
}

/* ========================================
   Safari Performance — backdrop-filter fix
   Chrome animiert blur problemlos.
   Safari erstellt auch für blur(0px) einen Compositing-Layer
   und ist bei animiertem backdrop-filter sehr langsam.
   ======================================== */

html.is-safari .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        background var(--motion-slow) var(--ease-luxury),
        border-color var(--motion-slow) var(--ease-luxury),
        box-shadow var(--motion-slow) var(--ease-luxury);
}

html.is-safari .nav--scrolled {
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
}