/*
 * mainlab floating header — liquid glass layer.
 * Loaded after each page's own header styles; enhances .floating-nav-pill with:
 *  - richer glass (saturated blur + edge refraction highlights)
 *  - a light that follows the cursor across the glass and along the rim
 *  - a sliding hover lens between tabs
 *  - a one-off glint when the header docks on scroll
 *  - the active tab gliding between pages (cross-document View Transitions)
 */

@property --ng-x { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --ng-y { syntax: '<length-percentage>'; inherits: true; initial-value: -60%; }
@property --ng-lit { syntax: '<number>'; inherits: true; initial-value: 0; }

.floating-header .floating-nav-pill {
    --ng-ink: var(--text-primary, var(--ink, #1f1b18));
    --ng-rim-light: rgba(255, 255, 255, 0.9);
    --ng-rim-glow: rgba(193, 126, 93, 0.85);
    --ng-spot: rgba(255, 255, 255, 0.55);
    --ng-lens: rgba(31, 27, 24, 0.07);
    position: relative;
    isolation: isolate;
    backdrop-filter: blur(22px) saturate(185%);
    -webkit-backdrop-filter: blur(22px) saturate(185%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(255, 255, 255, 0.25),
        0 1px 2px rgba(60, 42, 30, 0.06),
        0 12px 32px -12px rgba(60, 42, 30, 0.22);
    transition: box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease, --ng-lit 0.45s ease;
}

[data-theme="dark"] .floating-header .floating-nav-pill {
    --ng-rim-light: rgba(255, 255, 255, 0.22);
    --ng-rim-glow: rgba(240, 186, 155, 0.9);
    --ng-spot: rgba(255, 222, 200, 0.09);
    --ng-lens: rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.03),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 14px 36px -12px rgba(0, 0, 0, 0.7);
}

/* Rim: a hairline of light that brightens where the cursor is. */
.floating-header .floating-nav-pill::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background:
        radial-gradient(90px 60px at var(--ng-x) var(--ng-y),
            color-mix(in srgb, var(--ng-rim-glow) calc(var(--ng-lit) * 100%), transparent), transparent 70%),
        linear-gradient(180deg, var(--ng-rim-light), transparent 42%, transparent 70%, color-mix(in srgb, var(--ng-rim-light) 40%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* Glass body: a soft caustic that follows the cursor. */
.floating-header .floating-nav-pill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(140px 90px at var(--ng-x) var(--ng-y), var(--ng-spot), transparent 72%);
    opacity: var(--ng-lit);
    pointer-events: none;
    z-index: -1;
}

.floating-header .floating-nav-pill.ng-lit { --ng-lit: 1; }

/* Glint when the header docks. */
.floating-nav-pill.ng-glint {
    animation: ng-glint 1.1s cubic-bezier(0.45, 0, 0.2, 1);
}

@keyframes ng-glint {
    0%   { --ng-x: -15%; --ng-y: 0%;   --ng-lit: 0; }
    20%  { --ng-lit: 0.9; }
    80%  { --ng-lit: 0.9; }
    100% { --ng-x: 115%; --ng-y: 100%; --ng-lit: 0; }
}

/* Sliding hover lens between tabs. */
.header-nav { position: relative; }

.header-nav .nav-tab {
    position: relative;
    z-index: 1;
}

.ng-lens {
    position: absolute;
    top: 0.2rem;
    left: 0;
    height: calc(100% - 0.4rem);
    width: 0;
    border-radius: 9999px;
    background: var(--ng-lens);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ng-lens) 60%, transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition:
        transform 0.42s cubic-bezier(0.34, 1.32, 0.64, 1),
        width 0.42s cubic-bezier(0.34, 1.32, 0.64, 1),
        opacity 0.25s ease;
}

.ng-lens.is-visible { opacity: 1; }

.header-nav .nav-tab:active { transform: scale(0.96); }

/* Active tab glides between pages (same-origin, supporting browsers only). */
@view-transition { navigation: auto; }

.header-nav .nav-tab.is-active { view-transition-name: ng-active-tab; }

::view-transition-group(ng-active-tab) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
}

::view-transition-old(ng-active-tab),
::view-transition-new(ng-active-tab) {
    height: 100%;
    width: auto;
    left: 50%;
    translate: -50% 0;
    object-fit: none;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.28s;
}

@media (prefers-reduced-motion: reduce) {
    .floating-nav-pill.ng-glint { animation: none; }
    .ng-lens { transition: opacity 0.2s ease; }
    @view-transition { navigation: none; }
}

@supports not (backdrop-filter: blur(1px)) {
    .floating-nav-pill { background: var(--header-bg-scrolled); }
}

/* Narrow phones: four tabs + languages + theme no longer fit on one row,
   so the pill wraps into tabs on top, controls below. */
@media (max-width: 520px) {
    .floating-header .floating-nav-pill {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.3rem;
        border-radius: 22px;
    }
    .floating-header .header-brand,
    .floating-header .nav-divider { display: none; }
    .floating-header .header-nav {
        flex-basis: 100%;
        justify-content: center;
    }
}