/* Навигация сайта. Техника «жидкого стекла» — по разбору примера из CodePen:
   индикатор едет за активным пунктом и на лету растягивается по горизонтали
   (transform-origin переключается по направлению движения), а объём даёт длинный
   стек inset-теней: тонкое кольцо, яркий блик сверху-слева, мягкий снизу-справа,
   широкая засветка по нижней кромке и тёмные тени для глубины.

   Отличие от оригинала: фон плотнее. В примере стекло 12% на светлой странице,
   у нас шапка едет поверх тёмного контента — на такой прозрачности текст не читается. */

.site-nav {
    --glass-light: rgba(255, 255, 255, 1);
    --glass-dark: rgba(0, 0, 0, 1);

    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 999px;

    background-color: rgba(13, 18, 32, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.10),
        inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.55),
        inset -2px -2px 0 -2px rgba(255, 255, 255, 0.40),
        inset -3px -8px 1px -6px rgba(255, 255, 255, 0.28),
        inset -0.3px -1px 4px 0 rgba(0, 0, 0, 0.18),
        inset 0 3px 4px -2px rgba(0, 0, 0, 0.22),
        0 1px 5px rgba(0, 0, 0, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.30);

    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
                box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* Прокрутили вниз — под шапкой уже контент, поэтому стекло становится плотнее. */
.site-nav.is-scrolled {
    background-color: rgba(11, 15, 26, 0.82);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 1.8px 3px 0 -2px rgba(255, 255, 255, 0.5),
        inset -2px -2px 0 -2px rgba(255, 255, 255, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 10px 30px rgba(0, 0, 0, 0.45);
}

.site-nav .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: none;
    padding-inline: 6px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--text);
}
.site-nav .brand:hover { text-decoration: none; }
.site-nav .brand .moon { font-size: 19px; }

.nav-links {
    position: relative;
    display: flex;
    gap: 2px;
    margin-left: auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 15px;
    color: var(--dim);
    transition: color 220ms ease;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.is-active { color: var(--text); }

/* Сам индикатор: плотнее самой панели, поэтому читается как отдельная линза. */
.nav-ind {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;

    background-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 2px 1px 0 -1px rgba(255, 255, 255, 0.65),
        inset -1.5px -1px 0 -1px rgba(255, 255, 255, 0.45),
        inset -2px -6px 1px -5px rgba(255, 255, 255, 0.30),
        inset -1px 2px 3px -1px rgba(0, 0, 0, 0.18),
        0 3px 6px rgba(0, 0, 0, 0.12);

    transition: translate 400ms cubic-bezier(1, 0, 0.4, 1),
                width 400ms cubic-bezier(1, 0, 0.4, 1),
                opacity 220ms ease;
}

/* Растяжение на лету: точка опоры — со стороны, откуда индикатор уезжает,
   поэтому он «тянется» к цели, а не раздувается симметрично. */
.nav-ind.move-right { transform-origin: left; animation: navStretch 440ms ease; }
.nav-ind.move-left  { transform-origin: right; animation: navStretch 440ms ease; }

@keyframes navStretch {
    0%   { scale: 1 1; }
    50%  { scale: 1.18 1; }
    100% { scale: 1 1; }
}

@media (max-width: 860px) {
    .site-nav { gap: 6px; }
    .site-nav .brand span:not(.moon) { display: none; }
    .nav-links a { font-size: 14px; padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-ind { transition: opacity 220ms ease; animation: none !important; }
}