/* ===========================================================================
 * 导航图标动效 · 外层接入样式
 * 配合 js/nav-icon-motion.js 使用。
 *
 * 三段职责：
 *   1. 跨文档页面切换过渡（View Transitions API）——消除生硬跳转
 *   2. 图标在导航项内的尺寸与交互反馈
 *   3. 下拉后进入紧凑态：图标收起，只留文字
 * =========================================================================== */

/* ===========================================================================
 * 1. 页面切换过渡
 * 导航栏单独命名 view-transition-name ⇒ 浏览器把它当作"同一个元素"跨页保持，
 * 切页时图标不会被重新渲染，自然也就不会重播动画。
 * =========================================================================== */
@view-transition {
    navigation: auto;
}

.top-nav {
    view-transition-name: sua-topnav;
}

/* 导航栏原地保持：不做淡入淡出，避免"整页刷新"的观感 */
::view-transition-old(sua-topnav),
::view-transition-new(sua-topnav) {
    animation: none;
    mix-blend-mode: normal;
}

/* 页面内容：旧页轻微上移淡出，新页自下方淡入 */
::view-transition-old(root) {
    animation: nm-page-out 0.26s cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: nm-page-in 0.4s cubic-bezier(0.18, 0.72, 0.22, 1) both;
}

@keyframes nm-page-out {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@keyframes nm-page-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ===========================================================================
 * 2. 图标尺寸与交互反馈
 * 尺寸/display 放在外层：:host 里不写，避免与导航样式优先级互相覆盖。
 * =========================================================================== */
.nav-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

sua-nav-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    transform-origin: left center;
    transition:
        width 0.34s cubic-bezier(0.25, 0.1, 0.25, 1),
        margin-right 0.34s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.34s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav-menu a .nm-label {
    white-space: nowrap;
}

/* 悬停只做轻微浮起（纯 CSS），完整 3D 建构动画留给"点击"独占 */
.nav-menu a:hover sua-nav-icon,
.nav-menu a:focus-visible sua-nav-icon {
    transform: translateY(-1.5px) scale(1.06);
}

/* 下拉后：图标收起，只显示文字 */
.top-nav.scrolled sua-nav-icon {
    width: 0;
    margin-right: 0;
    opacity: 0;
    transform: scale(0.55);
}

/* 紧凑态下悬停不再浮起（已经被收起） */
.top-nav.scrolled .nav-menu a:hover sua-nav-icon,
.top-nav.scrolled .nav-menu a:focus-visible sua-nav-icon {
    transform: scale(0.55);
}

/* 当前页 */
.nav-menu a.active {
    opacity: 1;
    color: #55807f;
    font-weight: 500;
}

/* ===========================================================================
 * 3. 响应式
 * =========================================================================== */
@media (max-width: 768px) {
    sua-nav-icon {
        width: 17px;
        height: 17px;
        margin-right: 3px;
    }
}

@media (max-width: 480px) {
    sua-nav-icon {
        width: 15px;
        height: 15px;
        margin-right: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    sua-nav-icon {
        transition: none;
    }
}