/* ==========================================================================
   UI Lab — Liquid Glass Header — v3

   JS never paints the glass. It only updates CSS custom properties.
   CSS renders: blur, physical tilt reflection, scroll flare, edge
   refraction, corner highlights, scale-on-scroll.

   Two separate scroll variables, not one:
   --scroll-shrink : 0→1 over ~40px — reaches 1 almost immediately, drives
                     the width/scale pull-in right as scrolling starts.
   --scroll-flare  : 0→1 over the FULL page scroll range — drives the
                     flare sweep continuing all the way to the bottom.
   ========================================================================== */

.uilab-glass-nav {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    height: 76px;

    /* ---------- Glass ---------- */
    --glass-blur: 12px;
    --glass-saturation: 220%;

    /* ---------- Physical tilt (hover) ---------- */
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --tilt-light-x: 0px;
    --tilt-light-y: 0px;

    /* ---------- Scroll ---------- */
    --scroll-shrink: 0;
    --scroll-flare: 0;

    transform:
        perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(calc(1 - (var(--scroll-shrink) * 0.05)));
    /* 100% → 95% */

    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        backdrop-filter 0.8s ease,
        background 0.8s ease;

    background: rgba(12, 12, 14, 0.72);
}

.uilab-glass-nav--ready {
    background: rgba(69, 59, 85, 0.35);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}

/* Retired — blur lives directly on .uilab-glass-nav above */
.uilab-glass-nav__blur {
    display: none;
}

/* ---------- Shared layer setup + explicit stacking order ---------- */
.uilab-glass-nav__blur,
.uilab-glass-nav__specular,
.uilab-glass-nav__edge {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none;
    border-radius: 15px !important;
}

.uilab-glass-nav__blur {
    z-index: 1;
}

.uilab-glass-nav__specular {
    z-index: 2;
}

.uilab-glass-nav__edge {
    z-index: 3;
}

.uilab-glass-nav__content {
    z-index: 10;
}

/* --------------------------------------------------------------------------
   Specular reflection — reacts to surface tilt, not raw mouse position
   -------------------------------------------------------------------------- */
.uilab-glass-nav__specular {
    opacity: 0;
    transition: opacity 0.8s ease, background-position 0.6s ease;
    background: radial-gradient(circle at calc(30% - var(--tilt-light-x)) calc(18% - var(--tilt-light-y)),
    rgba(223, 199, 255, 0.1) 10%,
    rgba(202, 146, 255, 0.04) 30%,
    rgba(82, 41, 158, 0.07) 60%);
    mix-blend-mode: screen;
}

.uilab-glass-nav--ready .uilab-glass-nav__specular {
    opacity: 1;
}

/* Scroll flare — soft shimmer sweep, spans the FULL page via --scroll-flare */
.uilab-glass-nav__specular::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(115deg,
            transparent 25%,
            rgba(255, 255, 255, 0.06) 46%,
            rgba(255, 255, 255, 0.16) 50%,
            rgba(255, 255, 255, 0.06) 54%,
            transparent 75%);
    mix-blend-mode: screen;
    /* independent of the parent's blend context */
    transform: translateX(calc(var(--scroll-flare) * 140% - 20%));
    transition: transform 0.15s linear;
    opacity: 0.9;
    
}

/* --------------------------------------------------------------------------
   Edge / refraction + corner highlights (hug the border-radius curve)
   -------------------------------------------------------------------------- */
.uilab-glass-nav__edge {
    border-radius: inherit;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.uilab-glass-nav__edge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 12%, transparent 30%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05) 12%, transparent 30%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 35%);
    mix-blend-mode: screen;
}

.uilab-glass-nav__edge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05), transparent 28%);
    opacity: 0.65;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.uilab-glass-nav__content {
    position: relative;
}

/* --------------------------------------------------------------------------
   Reduced motion / fallback
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .uilab-glass-nav {
        transition: none;
        transform: none;
    }

    .uilab-glass-nav__specular {
        display: none;
    }
}

@supports not (backdrop-filter: blur(1px)) {
    .uilab-glass-nav--ready {
        background: rgba(12, 12, 14, 0.88);
    }

    .uilab-glass-nav__blur,
    .uilab-glass-nav__specular,
    .uilab-glass-nav__edge {
        display: none;
    }
}