/* ============================================================
   HEADER-SCROLL.CSS — Glassmorphism effect on scroll
   Complète header.css sans le modifier
   ============================================================ */

/*
   État par défaut : le header est transparent (défini dans header.css)
   On ajoute juste les propriétés de transition manquantes
*/
.menu {
    transition:
        background 0.35s ease,
        backdrop-filter 0.35s ease,
        -webkit-backdrop-filter 0.35s ease,
        border-bottom-color 0.35s ease,
        box-shadow 0.35s ease;
    border-bottom: 1px solid transparent;
}

/* ── État "scrollé" : ajouté via JS quand scrollTop > 10px ── */
.menu.scrolled {
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.35);
}

/*
   On masque la pseudo-ligne ::after quand scrolled
   (elle est remplacée par border-bottom)
*/
.menu.scrolled::after {
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* ── Optionnel : léger scan-line décoratif au survol ── */
.menu.scrolled .inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 229, 255, 0.18) 40%,
        rgba(0, 229, 255, 0.18) 60%,
        transparent 100%
    );
    pointer-events: none;
}