@charset "UTF-8";
/* ==========================================================================
   崩坏三官网复刻 · head.css
   职责：固定顶部导航（logo 左 / 菜单右 / 悬停下划线 / 滚动后加深）
        以及 <768px 的折叠汉堡菜单
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 头部外壳：默认半透明渐变，滚动后加 .is-scrolled 变实
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    background: linear-gradient(
        180deg,
        rgba(10, 13, 20, 0.78) 0%,
        rgba(10, 13, 20, 0.32) 62%,
        rgba(10, 13, 20, 0) 100%
    );
    transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
        box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}

.site-header.is-scrolled {
    border-bottom-color: var(--c-line);
    background: rgba(8, 11, 18, 0.9);
    box-shadow: 0 18px 44px -34px #000000;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

/* 顶部滚动进度条（由页面 JS 更新 transform） */
.nav-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--grad-accent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.site-header.is-scrolled .nav-progress {
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. 导航条本体
   -------------------------------------------------------------------------- */
.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: var(--nav-h);
}

/* ---- 左侧：logo + 站名 ---- */
.nav-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    flex: 0 1 auto;
}

.nav-logo {
    flex: none;
    height: 38px;
    width: auto;
    max-width: 40vw;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(var(--c-accent-rgb), 0.4));
    transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
}

.nav-brand:hover .nav-logo {
    transform: translateY(-1px) scale(1.03);
    filter: drop-shadow(0 6px 18px rgba(var(--c-accent-rgb), 0.62));
}

.nav-brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    line-height: 1.14;
}

.nav-brand-text strong {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.nav-brand-text em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10px;
    letter-spacing: 0.26em;
    color: var(--c-text-3);
    white-space: nowrap;
}

/* ---- 右侧：菜单 ---- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.5vw, 20px);
}

.nav-link {
    position: relative;
    display: block;
    padding: 10px 6px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--c-text-2);
    white-space: nowrap;
    transition: color 0.25s var(--ease);
}

/* 悬停下划线：从左侧展开 */
.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.32s var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.is-active {
    color: var(--c-text);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}

.nav-menu-cta {
    margin-left: var(--sp-3);
}

/* ---- 汉堡按钮（默认隐藏，窄屏出现） ---- */
.nav-toggle {
    position: relative;
    display: none;
    flex: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav-toggle:hover {
    border-color: rgba(var(--c-accent-rgb), 0.55);
    background: rgba(var(--c-accent-rgb), 0.08);
}

.nav-toggle-bar {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: var(--c-text);
    transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle-bar:nth-child(1) {
    top: 14px;
}

.nav-toggle-bar:nth-child(2) {
    top: 20px;
}

.nav-toggle-bar:nth-child(3) {
    top: 26px;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-active .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   3. 窄屏折叠菜单（<768px）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .nav-toggle {
        display: block;
    }

    /* 注意：绝对定位以 .nav 的 padding box 为参照，所以左右各留一个 gutter */
    .nav-menu {
        position: absolute;
        top: calc(var(--nav-h) - 4px);
        left: var(--gutter);
        right: var(--gutter);
        z-index: 2;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - var(--nav-h) - 24px);
        padding: var(--sp-2);
        overflow-y: auto;
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        background: rgba(10, 14, 22, 0.97);
        box-shadow: var(--shadow-2);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
        /* 收起状态 */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) scale(0.99);
        transition: opacity 0.28s var(--ease), transform 0.28s var(--ease),
            visibility 0.28s var(--ease);
    }

    .nav-menu.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-link {
        padding: 14px 12px;
        font-size: 16px;
        border-bottom: 1px solid var(--c-line);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link.is-active {
        color: var(--c-accent);
    }

    .nav-menu li:last-child .nav-link {
        border-bottom: 0;
    }

    .nav-menu-cta {
        margin: var(--sp-3) 0 var(--sp-1);
        padding-inline: var(--sp-2);
    }

    .nav-menu-cta .btn {
        width: 100%;
        padding-block: 12px;
    }

    .nav-brand-text em {
        display: none;
    }

    .nav-logo {
        height: 34px;
    }
}

@media (max-width: 380px) {
    .nav-brand-text strong {
        font-size: 15px;
        letter-spacing: 0.1em;
    }
}