html,
body {
    scrollbar-width: none;
    &::-webkit-scrollbar {
        width: 0px !important;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, 'PingFang SC', 'Noto Sans', 'Helvetica Neue', Helvetica,
        'Nimbus Sans L', Arial, 'Liberation Sans', 'Hiragino Sans GB', 'Noto Sans CJK SC',
        'Source Han Sans SC', 'Source Han Sans CN', 'Microsoft YaHei', 'Wenquanyi Micro Hei',
        'WenQuanYi Zen Hei', 'ST Heiti', SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
}

input,
select,
button,
textarea {
    padding: 0px;
    margin: 0px;
    border: none;
    outline: none;
    user-select: auto;
}

p,
ul,
li {
    margin: 0px;
    padding: 0px;
}

ul {
    list-style-position: inside;
}

input:focus {
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type='number'] {
    appearance: textfield; /* Firefox */
}

button {
    border: none;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.nav-container {
    transition: height 448ms cubic-bezier(0.4, 0, 0.6, 1) 80ms,
        background 448ms cubic-bezier(0.4, 0, 0.6, 1) 80ms;
}

.nav-menus-wrapper {
    pointer-events: none;
}

#globalnav.active .nav-menus-wrapper {
    pointer-events: auto;
}

#globalnav-logo {
    transition: opacity 0.3s ease;
}
#globalnav-logo.mobile-hidden {
    opacity: 0;
    pointer-events: none;
}

#globalnav-back {
    transition: opacity 0.3s ease;
}
#globalnav-back.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}
#globalnav.active .nav-container {
    height: 100dvh;
}

/* 移除旧的 visibility 控制，改用 opacity 和 transition */

.nav-item {
    opacity: 0; /* 默认隐藏 */
    transform: translateY(-8px); /* 默认位置偏上 */
    /* 收起时的过渡：快速淡出，无需延迟 */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out,
        color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

/* 大菜单激活时，所有 item 默认状态 (主要用于一级菜单) */
#globalnav.active .nav-item {
    opacity: 1;
    transform: translateY(0);
    /* 展开时的过渡：慢速下落淡入 */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}

/* 为每个菜单项设置递增的延迟，仅在展开时生效 */
/*
   修改逻辑：
   只在 .active.opening 状态下应用 delay。
   当 opening 类被移除后（动画播完后），delay 也就消失了。
   这样从二级菜单返回一级菜单时，就不会触发这个 delay。
*/
#globalnav.active.opening .nav-item:nth-child(1) {
    transition-delay: 0.1s;
}
#globalnav.active.opening .nav-item:nth-child(2) {
    transition-delay: 0.14s;
}
#globalnav.active.opening .nav-item:nth-child(3) {
    transition-delay: 0.18s;
}
#globalnav.active.opening .nav-item:nth-child(4) {
    transition-delay: 0.22s;
}
#globalnav.active.opening .nav-item:nth-child(5) {
    transition-delay: 0.26s;
}
#globalnav.active.opening .nav-item:nth-child(6) {
    transition-delay: 0.3s;
}
#globalnav.active.opening .nav-item:nth-child(7) {
    transition-delay: 0.34s;
}
#globalnav.active.opening .nav-item:nth-child(8) {
    transition-delay: 0.38s;
}
#globalnav.active.opening .nav-item:nth-child(9) {
    transition-delay: 0.42s;
}
#globalnav.active.opening .nav-item:nth-child(10) {
    transition-delay: 0.46s;
}
#globalnav.active.opening .nav-item:nth-child(11) {
    transition-delay: 0.5s;
}

/*
   二级菜单动画优化：
   1. 容器只负责背景/显隐，不负责位移（避免整体移动的僵硬感）
   2. 内部 items 负责 Staggered 进场动画
*/

/* 基础容器样式 */
.nav-menu {
    padding: 2rem 2.5rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;

    /* 容器默认状态：可见 */
    opacity: 1;
    visibility: visible;
    /* 容器的 transition 只控制 opacity/visibility，不控制 transform */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/*
   二级菜单容器默认状态：
   在原地，但透明不可见
   注意：这里必须加上 !important 覆盖默认的 opacity: 1 和 visibility: visible，
   因为 .nav-menu 和 .nav-menu-secondary 是同一个元素上的类，
   如果 .nav-menu 权重更高或者书写顺序在后，就会覆盖这里的样式。
*/
.nav-menu-secondary {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
}

/* 二级菜单 items 默认状态（未激活时）：在右侧偏移 */
#globalnav.active .nav-menu-secondary .nav-item {
    opacity: 0;
    transform: translateX(20px); /* 从右侧来，减小位移到 20px */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s; /* 重置 delay */
}

/*
   状态类
*/

/* 一级菜单滑出状态 */
.slide-out-left {
    /* 容器本身变透明 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.4s;
}

/* 一级菜单滑出时，里面的 items 向左偏移 */
#globalnav.active .slide-out-left .nav-item {
    transform: translateX(-20px); /* 向左偏移，减小位移到 20px */
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* 退出时不需要 delay，整体快速离开 */
    transition-delay: 0s !important;
}

/* 二级菜单激活状态 */
.nav-menu-secondary.slide-in-from-right {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

/* 二级菜单激活时，里面的 items 归位 */
#globalnav.active .nav-menu-secondary.slide-in-from-right .nav-item {
    opacity: 1;
    transform: translateX(0);
    /* 移除交错延迟，统一进场 */
    transition-delay: 0s !important;
}

/* 关闭总菜单时也让二级菜单按与一级相同的方式淡出 */
#globalnav.closing .nav-menu-secondary.slide-in-from-right {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}
#globalnav.closing .nav-menu-secondary.slide-in-from-right .nav-item {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    transition-delay: 0s !important;
}

/* PC 子菜单容器动画 */
#pc-submenu-container {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: height 0.4s cubic-bezier(0.32, 0, 0.08, 1),
        opacity 0.32s cubic-bezier(0.32, 0, 0.08, 1), transform 0.4s cubic-bezier(0.32, 0, 0.08, 1);
    will-change: height, opacity, transform;
}
#pc-submenu-container.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Banner 动态效果 (Ken Burns Effect) */
@keyframes ken-burns {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.animate-ken-burns {
    animation: ken-burns 20s ease-in-out infinite alternate;
}

/* Text Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s; /* Slight delay for better effect */
}

/* PC 子菜单动画 */
.submenu-content {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.35s cubic-bezier(0.32, 0, 0.08, 1),
        transform 0.35s cubic-bezier(0.32, 0, 0.08, 1);
}
.submenu-content.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 初始状态：隐藏并偏移 */
/* 增加优先级 !important 以覆盖 UnoCSS 的可能影响 */
.submenu-content .nav-subitem {
    opacity: 0 !important;
    transform: translateY(-8px) !important; /* 初始向上偏移，模仿移动端一级菜单 */
    display: block;
    /* 使用与移动端一致的缓动函数和时长 */
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease-in-out !important;
}

/* 激活状态：显示并归位 */
.submenu-content.animate-in .nav-subitem {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 错落延时 - 沿用移动端一级菜单的延时逻辑 */
.submenu-content.animate-in .nav-subitem:nth-child(1) {
    transition-delay: 0s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(2) {
    transition-delay: 0.03s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(3) {
    transition-delay: 0.06s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(4) {
    transition-delay: 0.09s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(5) {
    transition-delay: 0.12s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(6) {
    transition-delay: 0.15s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(7) {
    transition-delay: 0.18s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(8) {
    transition-delay: 0.21s !important;
}
.submenu-content.animate-in .nav-subitem:nth-child(9) {
    transition-delay: 0.24s !important;
}

/* PC 菜单模糊遮罩 */
#pc-menu-blur-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
    background: rgba(1, 2, 5, 0.6) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    transition: opacity 0.45s cubic-bezier(0.32, 0, 0.08, 1), visibility 0s linear 0.45s !important;
}
#pc-menu-blur-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
    transition: opacity 0.45s cubic-bezier(0.32, 0, 0.08, 1), visibility 0s linear 0s !important;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 14px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid white;
    animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
}
@keyframes l20-1 {
    0% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }
    12.5% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
    }
    25% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
    }
    50% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }
    62.5% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }
    75% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
    }
}
@keyframes l20-2 {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    49.99% {
        transform: scaleY(1) rotate(135deg);
    }
    50% {
        transform: scaleY(-1) rotate(0deg);
    }
    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}