/* =========================================================
   Shared site navigation — DRAFT upgrade layer (2026-09-26)
   Loaded after assets/nav/site-nav.css; overrides only.
   Relies on draft-enhance.js toggling .is-scrolled on .site-header.
   ========================================================= */

.site-header {
    background: linear-gradient(180deg, rgba(3, 10, 28, 0.55) 0%, rgba(3, 10, 28, 0.25) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition:
        background 350ms cubic-bezier(0.25, 1, 0.5, 1),
        border-color 350ms ease,
        box-shadow 350ms ease,
        -webkit-backdrop-filter 350ms ease,
        backdrop-filter 350ms ease;
}

/* Condensed, more opaque state once the user scrolls past the hero top */
.site-header.is-scrolled {
    background: rgba(5, 13, 36, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom-color: rgba(148, 190, 255, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -12px rgba(1, 6, 22, 0.6);
}

/* gradient hairline that fades in with the scrolled state */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.55), rgba(34, 211, 238, 0.55), transparent);
    opacity: 0;
    transition: opacity 350ms ease;
    pointer-events: none;
}

.site-header.is-scrolled::after {
    opacity: 0.7;
}

.site-header__logo img {
    transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1), filter 300ms ease;
}

.site-header__logo:hover img {
    transform: translateY(-1px);
    filter: drop-shadow(0 4px 14px rgba(59, 130, 246, 0.55));
}

/* Links: centre-out animated gradient underline + active section state */
.site-nav-link {
    position: relative;
    color: rgba(201, 215, 240, 0.85);
    font-weight: 550;
    letter-spacing: -0.005em;
    border-bottom: 0;
    padding: 0.4rem 0.15rem;
    transition: color 200ms ease;
}

.site-header__nav .site-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #22d3ee);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
    /* v2: compositor-only (scaleX) instead of animating left/right */
    transform: scaleX(0);
    transform-origin: 50% 50%;
    opacity: 0;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}

.site-nav-link:hover,
.site-nav-link.is-active {
    color: #ffffff;
    border-color: transparent;
}

.site-header__nav .site-nav-link:hover::after,
.site-header__nav .site-nav-link.is-active::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Audience pills in the header */
.site-header__usecase.usecase-selector {
    background: rgba(3, 10, 28, 0.45);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(148, 190, 255, 0.2);
}

/* Language toggle */
.site-header .language-selector,
.site-nav-lang {
    background: rgba(3, 10, 28, 0.45) !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(148, 190, 255, 0.22) !important;
    transition: box-shadow 200ms ease, background 200ms ease !important;
}

.site-header .language-selector:hover,
.site-nav-lang:hover {
    background: rgba(14, 34, 80, 0.6) !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.55) !important;
}

/* Primary CTA: gradient pill with glow + light sweep */
.site-header__cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 45%, #06b6d4 100%);
    color: #ffffff;
    font-weight: 650;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 8px 22px -8px rgba(59, 130, 246, 0.8);
    transition: transform 200ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 300ms ease, filter 200ms ease;
}

.site-header__cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
    transform: translateX(-130%);
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header__cta:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 45%, #06b6d4 100%);
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 12px 30px -8px rgba(34, 211, 238, 0.7);
}

.site-header__cta:hover::after {
    transform: translateX(130%);
}

/* Mobile menu button + drawer */
.site-header__menu-btn {
    background: rgba(3, 10, 28, 0.45);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(148, 190, 255, 0.25);
    transition: box-shadow 200ms ease, background 200ms ease;
}

.site-header__menu-btn:hover {
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.6);
}

/* Fix (also present on production): the drawer sits inside the
   backdrop-filtered header, so its own backdrop-filter has nothing to
   blur and page content bled through. Use an opaque surface instead. */
.site-nav-drawer {
    background: linear-gradient(180deg, #06112c 0%, #040b1e 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(148, 190, 255, 0.14);
    box-shadow: 0 24px 48px -12px rgba(1, 6, 22, 0.7);
    transition: max-height 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fix (also present on production): the "hide CTA below 1200px" rule
   in site-nav.css also hid the CTA copy inside the mobile drawer. */
#site-header-root[data-nav-mode="home"] .site-nav-drawer .site-nav-drawer__cta {
    display: block;
    margin-top: 0.5rem;
}

.site-nav-drawer__links .site-nav-link {
    border-bottom: 1px solid rgba(148, 190, 255, 0.10);
    transition: color 200ms ease, padding-left 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.site-nav-drawer__links .site-nav-link:hover {
    padding-left: 0.5rem;
}

/* staggered drawer-item entrance */
.site-header.is-open .site-nav-drawer__links .site-nav-link {
    animation: hxNavItemIn 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(2) { animation-delay: 40ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(3) { animation-delay: 80ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(4) { animation-delay: 120ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(5) { animation-delay: 160ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(6) { animation-delay: 200ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(7) { animation-delay: 240ms; }
.site-header.is-open .site-nav-drawer__links .site-nav-link:nth-child(8) { animation-delay: 280ms; }

@keyframes hxNavItemIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
    border-radius: 999px;
}

/* v2: hamburger -> X morph with a proper in-out curve (was 250ms linear-ish ease) */
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
    transition:
        transform 380ms cubic-bezier(0.65, 0, 0.35, 1),
        top 380ms cubic-bezier(0.65, 0, 0.35, 1),
        background 200ms ease,
        opacity 200ms ease;
}

.site-header__cta:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
    .site-header.is-open .site-nav-drawer__links .site-nav-link {
        animation: none;
    }

    .site-header__cta::after {
        display: none;
    }

    .site-header__nav .site-nav-link::after,
    .site-header__menu-icon,
    .site-header__menu-icon::before,
    .site-header__menu-icon::after {
        transition-duration: 1ms;
    }
}