/* 深色样式 */

/* 全局重置：消除默认样式差异，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", sans-serif;
}

/* 根元素变量：统一管理简约深色主题样式，保持简洁配色 */
:root {
    --header-bg: #1c1c1c; /* 顶栏背景色（简约深色） */
    --text-color: #e5e5e5; /* 普通文字色 */
    --text-active: #ffffff; /* 高亮文字色（Logo主标题） */
    --text-placeholder: #999999; /* 搜索框占位符文字色 */
    --border-color: #333333; /* 边框色（低调不突兀） */
    --shadow-color: rgba(0, 0, 0, 0.15); /* 轻微阴影，增加层次感不浮夸 */
    --search-bg: rgba(44, 44, 44, 0.2); /* 搜索框背景色 */
    /* 简洁下拉菜单变量 */
    --dropdown-bg: #252525; /* 下拉菜单背景色（纯净深色） */
    --dropdown-hover-bg: #303030; /* 菜单项悬停背景色（柔和过渡） */
    --dropdown-border: #3a3a3a; /* 下拉菜单边框色（细腻分隔） */
    --dropdown-column-title-color: #ffffff; /* 列标题文字色（突出分类） */
    --dropdown-item-color: #e0e0e0; /* 菜单项文字色 */
    --dropdown-item-hover-color: #ffffff; /* 菜单项悬停文字色 */
    --dropdown-title-icon-color: #888888; /* 大分区标题图标色 */
    --hover-blue: #016fff; /* 普通按钮悬停蓝色 */
    --select-hover-accent: #01bbff;
    /* 动画变量：控制速度 */
    --slow-duration: 0.6s; /* 慢速展开/收回动画时长 */
    --fast-duration: 0.2s; /* 快速渐隐动画时长（快速切换时） */
    --player-animation-duration: 0.3s; /* 播放器切换动画时长 */
}

@font-face {
  /* 给字体起个名字（自定义，比如叫myFont） */
  font-family: 'EnglishFont';
  /* 字体文件路径：从CSS文件所在目录指向fonts/a.ttf */
  src: url('../../media/fonts/CascadiaCode_VTT.ttf') format('truetype');
  /* 可选：字体权重/样式，保持默认即可 */
  font-weight: normal;
  font-style: normal;
  /* 可选：提升加载性能，优先使用本地已安装的同名字体 */
  font-display: swap;
}

@font-face {
  /* 给字体起个名字（自定义，比如叫myFont） */
  font-family: 'ChineseFont';
  /* 字体文件路径：从CSS文件所在目录指向fonts/a.ttf */
  src: url('../../media/fonts/STXINGKA.TTF') format('truetype');
  /* 可选：字体权重/样式，保持默认即可 */
  font-weight: normal;
  font-style: normal;
  /* 可选：提升加载性能，优先使用本地已安装的同名字体 */
  font-display: swap;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto !important;
}

/* 页面主体样式：避免内容被固定顶栏遮挡 */
body {
    background-color: #202020;
    color: var(--text-color);
    padding-top: 72px; /* 与顶栏高度一致 */
    overflow: auto !important;
}


/* 顶栏核心样式：固定顶部+三栏布局（Logo左-导航中-搜索右） */
.hea {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    background: 
        linear-gradient(to right, 
            transparent 0%,
            transparent 3%,
            #fff 50%,
            transparent 97%,
            transparent 100%
        ) bottom center / 100% 2px no-repeat,
        rgba(12, 12, 12, 0.4); /* 半透明背景 ✅ */

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 1000;
    backdrop-filter: blur(8px)
}

/* Logo区域：图片+文字横向排列，垂直居中 */
.hea-logo {
    display: flex;
    align-items: center; /* 图片与文字容器垂直居中 */
    gap: 12px; /* 图片与文字的间距，简约不拥挤 */
}

/* 文字容器：纵向排列（碧海博客 + BIHAI BLOG） */
.logo-text-group {
    display: flex;
    flex-direction: column; /* 两行文字垂直换行 */
    gap: 2px; /* 两行文字间距，紧凑简约 */
    justify-content: center; /* 文字在容器内垂直居中 */
}

/* Logo主标题样式 */
.hea-text {
    font-size: 20px;
    font-weight: 600; /* 适度加粗，突出主标题 */
    color: var(--text-active);
    letter-spacing: 1px; /* 轻微字间距，更显整洁 */
    line-height: 1; /* 消除冗余行高，排版紧凑 */
    transform: translateY(2px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Logo副标题样式 */
.hea-subtext {
    font-size: 10px; /* 小号字体，区分主副标题 */
    color: var(--text-placeholder);
    letter-spacing: 0.5px;
    line-height: 1; /* 消除冗余行高 */
    transform: translateY(2px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.hea-nav {
    display: flex;
    align-items: center; /* 按钮垂直居中 */
    /* 核心：每增加≈47.33px（284/6），间距增加1px */
    gap: clamp(
        18px,          /* 最小间距（宽度≤1244px时） */
        calc(18px + (100vw - 1244px) / (284/6)), /* 线性增长：(宽度-1244)÷47.33=新增间距 */
        28px           /* 最大间距（宽度足够大时） */
    );
    position: relative; /* 为下拉菜单提供定位上下文 */
    flex-wrap: wrap;    /* 防止宽度过小时间距挤压 */
    padding: 0 10px;
    margin: 0 auto;
    width: fit-content;
}

/* 导航按钮通用样式：无交互效果，简约整洁 */
.hea-btn {
    background-color: transparent; /* 透明背景，简约风格 */
    color: var(--text-color);
    border: none; /* 去掉默认边框 */
    outline: none; /* 去掉聚焦轮廓 */
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px; /* 合适内边距，保证视觉均衡 */
    cursor: default; /* 去掉手型光标，无交互提示 */
    line-height: 1;
    text-align: center;
    border-radius: 2px; /* 极轻微圆角，不夸张 */
    transition: color 0.3s ease, background-color 0.3s ease; /* 加入颜色过渡动画 */
}

/* 普通按钮悬停样式：文字变为蓝色（016fff），仅对非选中态生效 */
.hea-btn:not(.hea-btn-select):hover {
    color: #018dff; /* 悬停变蓝字 */
    cursor: pointer; /* 可选：恢复手型光标，提示用户可交互 */
}

.hea-btn-vip {
    background-color: transparent; /* 透明背景，简约风格 */
    color: var(--text-color);
    border: none; /* 去掉默认边框 */
    outline: none; /* 去掉聚焦轮廓 */
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px; /* 合适内边距，保证视觉均衡 */
    cursor: default; /* 去掉手型光标，无交互提示 */
    line-height: 1;
    text-align: center;
    border-radius: 2px; /* 极轻微圆角，不夸张 */
    transition: color 0.3s ease, background-color 0.3s ease; /* 加入颜色过渡动画 */
}

/* 普通按钮悬停样式：文字变为蓝色（016fff），仅对非选中态生效 */
.hea-btn-vip:not(.hea-btn-select):hover {
    color: #ffb300; /* 悬停变字 */
    cursor: pointer; /* 可选：恢复手型光标，提示用户可交互 */
}

/* 导航项容器（包含按钮和下拉菜单）- 增加鼠标进出监听类 */
.hea-nav > div {
    position: relative; /* 为下拉菜单提供定位上下文 */
    /* 记录鼠标离开时间，用于判断是否快速切换 */
    --mouse-leave-time: 0;
}

/* -------------------------- 智能动画下拉菜单（慢速展开/收回+快速切换渐隐） -------------------------- */
/* 一级下拉菜单：默认双列布局，简洁规整 */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: 4px; /* 火绒风格小圆角，简洁低调 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* 火绒式柔和阴影 */
    display: flex;
    gap: 0;
    min-width: 440px; /* 双列默认宽度，保证布局规整 */
    z-index: 1001;
    visibility: hidden;
    max-height: 0; /* 初始高度为0，隐藏内容 */
    overflow: hidden;
    opacity: 1; /* 正常状态下不渐隐，仅快速切换时改变 */
    /* 默认慢速动画：仅过渡max-height（上下展开/收回） */
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear var(--slow-duration); /* 延迟隐藏，等待高度过渡完成 */
}

/* 单列下拉菜单样式（适用于内容较少的导航项，无标题更简洁） */
.dropdown-menu.single-column {
    min-width: 220px;
    max-width: 300px;
}

/* 下拉菜单列容器：双列均分，布局清晰 */
.dropdown-column {
    flex: 1;
    padding: 16px 0;
    border-right: 1px solid var(--dropdown-border); /* 列之间分隔线，清晰区分 */
}

/* 单列模式下的全宽列（取消分隔线，无标题更简洁） */
.dropdown-column.full-width {
    border-right: none;
    padding: 16px;
    width: 100%;
}

/* 最后一列取消右侧分隔线 */
.dropdown-menu > .dropdown-column:last-child {
    border-right: none;
}

/* 列标题样式：仅大分区显示，带图标（简洁大气） */
.dropdown-column-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dropdown-column-title-color);
    padding: 0 20px 12px 20px;
    margin: 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px; /* 图标与标题间距，紧凑简洁 */
}

/* 大分区标题图标样式 */
.dropdown-column-title i {
    font-size: 14px;
    color: var(--dropdown-title-icon-color);
    width: 16px;
    text-align: center;
}

/* 下拉菜单项样式：无图标，简洁规整 */
.dropdown-item {
    display: block; /* 取消flex，纯文字更简洁 */
    padding: 10px 20px;
    color: var(--dropdown-item-color);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.4;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* 菜单项悬停效果：火绒风格，柔和背景变化 */
.dropdown-item:hover {
    background-color: var(--dropdown-hover-bg);
    color: var(--dropdown-item-hover-color);
}

/* 1. 正常状态：鼠标悬停 - 慢速向下展开 */
.hea-nav > div:hover > .dropdown-menu {
    visibility: visible;
    max-height: 500px; /* 足够大的高度，容纳所有内容 */
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear 0s; /* 立即显示，同步展开高度 */
}

/* 2. 正常状态：鼠标移开 - 慢速向上收回（无渐隐） */
.hea-nav > div:not(:hover) > .dropdown-menu {
    max-height: 0;
    visibility: hidden;
    /* 仅过渡高度，不过渡opacity，保持无渐隐效果 */
    transition: max-height var(--slow-duration) ease-in-out,
                visibility 0s linear var(--slow-duration);
}

/* 3. 快速切换状态：给导航容器添加hover快速切换检测（通过相邻兄弟选择器实现） */
/* 当鼠标快速从一个导航项移到另一个导航项时，触发快速渐隐动画 */
.hea-nav > div:hover + div > .dropdown-menu,
.hea-nav > div:hover ~ div > .dropdown-menu,
.hea-nav > div:has(+ div:hover) > .dropdown-menu,
.hea-nav > div:has(~ div:hover) > .dropdown-menu {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    /* 快速渐隐动画：同时过渡max-height和opacity，取消延迟 */
    transition: max-height var(--fast-duration) ease-in-out,
                opacity var(--fast-duration) ease-in-out,
                visibility 0s linear 0s;
}

/* ---------------------------------------------------------------------------------------- */

/* 选中态按钮样式 */
.hea-btn-select {
    font-weight: 600;
    color: var(--text-active);
    position: relative;
    transition: background-color 0.3s ease, border-radius 0.3s ease;
    padding: 8px 12px;
}

/* 用伪元素实现底部蓝色下划线 */
.hea-btn-select::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;
    height: 3px;
    background-color: #018dff;
    border-radius: 1px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease, background-color 0.3s ease, height 0.3s ease;
}

/* 第一个按钮（选中态）悬停时下划线变化 */
.hea-btn-select:first-child:hover::after {
    width: 95%;
    background-color: var(--select-hover-accent);
    height: 2.5px;
}

/* 右侧功能区：搜索框容器，垂直居中 */
.hea-actions {
    display: flex;
    align-items: center;
    gap: 16px; /* 预留间距，后续扩展不拥挤 */
}

/* 搜索框组件：一体化简约样式 */
.hea-search {
    position: relative;
    width: 240px; /* 搜索框宽度，简约适中 */
}

/* 搜索输入框样式 */
.hea-search-input {
    width: 100%;
    height: 36px;
    background: var(--search-bg);
    color: var(--text-active);
    border: 1px solid var(--border-color);
    border-radius: 18px; /* 圆形搜索框，简约美观 */
    padding: 0 16px 0 40px; /* 左侧预留搜索图标位置 */
    outline: none; /* 去掉聚焦轮廓，无交互提示 */
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 搜索框聚焦效果 */
.hea-search-input:focus {
    border-color: #018dff;
    box-shadow: 0 0 0 2px rgba(1, 141, 255, 0.1);
}

/* 搜索框占位符文字样式 */
.hea-search-input::placeholder {
    color: var(--text-placeholder);
    font-size: 13px;
}

/* 搜索按钮样式：无交互，简约图标 */
.hea-search-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: var(--text-placeholder);
    border: none;
    outline: none;
    font-size: 14px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; /* 手型光标提示可点击 */
    transition: color 0.2s ease;
}

/* 搜索按钮悬停效果 */
.hea-search-btn:hover {
    color: #018dff;
}

/* 页脚样式 */
footer {
    background-color: var(--header-bg);
    padding: 20px 24px;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-placeholder);
    font-size: 14px;
}

/* 动画关键帧：保留备用 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 使用关键帧动画的类（可选） */
.fade-in-down {
    animation: fadeInDown 0.3s ease forwards;
}

.fade-in-right {
    animation: fadeInRight 0.3s ease forwards;
}

.video-container {
    width: 100%;
    height: 100vh; /* 关键：只占一屏高度 */
    position: relative;
    overflow: hidden;
}

#bgVideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.content {
    position: relative;
    z-index: 1;
    padding: 100px 20px;
    text-align: center;
    color: white;
    background: #111;
}