/* =====================================================
   Glass-lens nav — shared by the homepage, work and playground.
   The pill is a refractive glass capsule (bright top rim, faint
   red/blue split at the edges); a glass bubble rests on the active
   link, glides to whatever you point at, and "magnifies" the word
   under it. Light by default; add data-theme="dark" to nav.nav-wrap
   on dark pages. Spacing (link padding) stays with each page.
   ===================================================== */

nav.nav-wrap .nav-pill-only {
    --g-ink: #262A2E;
    --g-ink-dim: rgba(38, 42, 46, 0.5);
    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.3) 100%);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(20, 24, 40, 0.06),
        inset 1px 0 0 rgba(255, 120, 120, 0.2),
        inset -1px 0 0 rgba(110, 170, 255, 0.24),
        0 10px 30px rgba(20, 24, 40, 0.1),
        0 1px 3px rgba(20, 24, 40, 0.08);
}

/* a soft specular streak across the top of the capsule */
nav.nav-wrap .nav-pill-only::before {
    content: '';
    position: absolute;
    left: 4%; right: 4%; top: 1px;
    height: 60%;
    border-radius: 100px;
    background: radial-gradient(55% 100% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
    z-index: -1;
}

nav.nav-wrap .nav-pill-only a {
    position: relative;
    z-index: 1;
    color: var(--g-ink-dim);
    background: transparent !important;
    box-shadow: none !important;
    transition: color 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.4, 1), text-shadow 0.3s ease;
}
nav.nav-wrap .nav-pill-only a:hover:not(.active) { color: var(--g-ink); }
nav.nav-wrap .nav-pill-only a.active { color: var(--g-ink); font-weight: 600; }

/* the word under the lens: a touch larger, with the glass's colour split */
nav.nav-wrap .nav-pill-only a.is-lensed {
    color: var(--g-ink);
    transform: scale(1.09);
    text-shadow: -0.6px 0 rgba(255, 60, 60, 0.42), 0.6px 0 rgba(40, 140, 255, 0.42);
}

/* the bubble */
nav.nav-wrap .nav-lens {
    position: absolute;
    top: 5px; bottom: 5px; left: 0;
    width: var(--lw, 0px);
    transform: translateX(var(--lx, 0px));
    border-radius: 100px;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(130% 150% at 28% 12%,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.42) 34%,
        rgba(255, 255, 255, 0.1) 62%,
        rgba(255, 255, 255, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        inset 0 -5px 9px rgba(30, 40, 70, 0.1),       /* the droplet's shaded underside */
        inset 0 -1px 0 rgba(255, 255, 255, 0.8),
        inset 3px 0 4px rgba(255, 90, 90, 0.3),
        inset -3px 0 4px rgba(80, 150, 255, 0.36),
        0 6px 16px rgba(20, 24, 40, 0.16),
        0 1px 2px rgba(20, 24, 40, 0.12);
    backdrop-filter: blur(1.5px) saturate(180%) brightness(1.05);
    -webkit-backdrop-filter: blur(1.5px) saturate(180%) brightness(1.05);
    transition:
        transform 0.55s cubic-bezier(0.3, 1.35, 0.4, 1),
        width 0.55s cubic-bezier(0.3, 1.35, 0.4, 1),
        opacity 0.3s ease;
}
nav.nav-wrap .nav-lens.is-on { opacity: 1; }
/* a glint, like light caught on a droplet */
nav.nav-wrap .nav-lens::after {
    content: '';
    position: absolute;
    left: 14%; top: 16%;
    width: 18%; height: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}

/* ---------- dark pages ---------- */
nav.nav-wrap[data-theme="dark"] .nav-pill-only {
    --g-ink: #F4EFE6;
    --g-ink-dim: rgba(236, 231, 220, 0.5);
    background: linear-gradient(180deg, rgba(48, 52, 64, 0.55) 0%, rgba(14, 16, 22, 0.5) 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        inset 1px 0 0 rgba(255, 110, 110, 0.18),
        inset -1px 0 0 rgba(110, 170, 255, 0.22),
        0 12px 34px rgba(0, 0, 0, 0.45);
}
nav.nav-wrap[data-theme="dark"] .nav-pill-only::before {
    background: radial-gradient(55% 100% at 50% 0%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 72%);
}
nav.nav-wrap[data-theme="dark"] .nav-lens {
    background: radial-gradient(130% 150% at 28% 12%,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.14) 34%,
        rgba(255, 255, 255, 0.03) 62%,
        rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.35),
        inset 0 -3px 7px rgba(255, 255, 255, 0.12),
        inset 2px 0 3px rgba(255, 90, 90, 0.22),
        inset -2px 0 3px rgba(80, 150, 255, 0.28),
        0 4px 16px rgba(0, 0, 0, 0.4);
}
nav.nav-wrap[data-theme="dark"] .nav-pill-only a.is-lensed {
    color: #FFFFFF;
    text-shadow: -0.7px 0 rgba(255, 70, 70, 0.6), 0.7px 0 rgba(60, 150, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
    nav.nav-wrap .nav-lens,
    nav.nav-wrap .nav-pill-only a { transition: none; }
}