/* ===== 基础共享样式：全局重置、导航栏、头部布局、section 容器 ===== */
/* 这是引入了一些字体 */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=block');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时 */
  scroll-behavior: smooth; 
}

body {
  min-height: 100vh;
  overflow: scroll;
  background: linear-gradient(#000000, #0d0136);
}

::-webkit-scrollbar {
  display: none; /* 不显示滚动条 */
}

a {
  text-decoration: none; /* 去除链接下划线 */
  color: inherit; /* 继承父元素颜色，避免链接变成默认的蓝色 */
}

.info-box {
  position: fixed; /* 固定定位，使其在屏幕右侧 */
  top: 8.75vw; /* 垂直居中 */
  left: 2vw; /* 距离右侧20px */
  width: 25vw; /* 容器宽度 */
  height:75vh; /* 容器高度 */

  background-image: url('../images/bg_index.png'); /* 背景图片 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 1.25vw;
  border-radius: 0.625vw; /* 圆角 */
  box-shadow: 0px 0.25vw 0.375 rgba(0, 0, 0, 0.1); /* 给框加点阴影 */
  overflow-y: scroll; /* 允许垂直滚动 */
  overflow-x: hidden; /* 禁止水平滚动 */
  z-index: 30;
  transition: left 0.4s ease; /* 收拢动画 */
}

/* 收拢状态 — 向左滑出屏幕 */
.info-box.collapsed {
  left: -27vw;
}

/* 收拢切换按钮 */
.info-toggle {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 31;
  width: 2vw;
  height: 5vw;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1vw;
  cursor: pointer;
  border-radius: 0 0.5vw 0.5vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, color 0.3s;
  padding: 0;
  line-height: 1;
}
.info-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.info-box img {
    width: 21.875vw; /* 图片宽度 */
    border-radius: 0.625vw; /* 图片圆角 */
    margin-bottom: 0.98vw; /* 图片和文字之间的间距 */
    opacity: 0.7;
}

.info-box ul {
    color: #f3e7e7; /* 文字颜色 */
    font-size: 1.125vw; /* 字体大小 */
    word-wrap: break-word; /* 允许单词超出容器宽度时换行 */
    word-break: break-all; /* 强制在任何字符间断行，避免内容溢出 */
    list-style-type: none;
    padding-left: 0;
}

.info-box h1 {
  color: #ffffff; /* 文字颜色 */
  font-size: 2.1875vw; /* 字体大小 */
  margin: 0; /* 去掉m标签默认的外边距 */
  text-align: center; /* 水平居中 */
  display: block; /* 确保m元素是块级元素，能占满一行 */
  width: 100%; /* 设置宽度为100%确保居中效果 */
  letter-spacing: 0.625vw; /* 字符间距 */
  margin-bottom: 1.875vw; /* 增加标题和下面文字的间距 */
}

.info-box h2 {
  color: #eae6e6; /* 文字颜色 */
  font-size: 0.98vw; /* 字体大小 */
  margin: 0; /* 去掉m标签默认的外边距 */
  letter-spacing: 0px; /* 字符间距 */
  margin-bottom: 0.625vw; 
  text-decoration: none; /* 去掉下划线 */
  color: #eff4f5;        /* 设置链接文字颜色 */
  cursor: pointer;
  padding-left: 1.25vw;
}

.info-box h2:hover {
  color: #07fff7;        /* 鼠标悬停时更改颜色 */
}

.info-box a:hover {
    color: #ed0973; /* 鼠标悬停时的颜色 */
  }

/* ===== info-box 排版优化 ===== */

/* 分隔线 */
.info-box .info-divider {
    height: 0;
    margin: 0.6vw 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    list-style: none;
}

/* 分组标题 */
.info-box .info-section-title {
    color: rgba(243, 231, 231, 0.9);
    font-size: 1.05vw;
    font-weight: 600;
    letter-spacing: 0.08vw;
    padding: 0.3vw 0 0.15vw 0;
    list-style: none;
}

/* 内容项 — 微调行高 */
.info-box ul li:not(.info-divider):not(.info-section-title) {
    font-size: 0.95vw;
    line-height: 1.6;
    padding: 0.1vw 0;
    color: rgba(243, 231, 231, 0.8);
}

/* 内容项里的链接 */
.info-box ul li a {
    font-size: 0.95vw;
    color: rgba(180, 200, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.info-box ul li a:hover {
    color: #ed0973;
}

.blog-box {
  position:relative; /* 使left生效 */
  display: flex;
  width: 62.5vw; /* 容器宽度 */
  height: 15vw; /* 容器高度 */
  background-color: rgba(235, 241, 242, 0.299);
  padding: 1.25vw;
  margin: 1.25vw 0;
  border-radius: 0.98vw; /* 圆角 */
  left: 10px; /* 距离右侧20px */
  z-index: 10;
}

.blog-box .left {
  flex: 3;
  max-width: 31.25vw;
  margin-right: 1.25vw;
}

.blog-box .left img {
  width: 100%;
  height: auto;
  border-radius: 0.98vw; /* 圆角 */
}

.blog-box .right {
  flex: 4;
  word-wrap: break-word; /* 自动换行 */
}

header {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.875vw 6.25vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

header .logo img {
  width: 4.5vw;
  height: auto;
  border-radius: 50%;
  transition: transform 0.3s, box-shadow 0.3s;
}
header .logo img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255,33,192,0.3);
}

.welcome {
  font-weight: 700;
  text-decoration: none;
  font-size: 2vw;
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  background: linear-gradient(90deg, #fff, #21ebff, #ff21c0, #fff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: welcomeGlow 4s ease-in-out infinite;
  text-shadow: none;
  filter: drop-shadow(0 0 12px rgba(33,235,255,0.15));
}
@keyframes welcomeGlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

header ul li {
  list-style: none;
  margin-left: 1.25vw;
}

header ul li a {
  text-decoration: none;
  padding: 0.375vw 0.98vw;
  color: #fff;
  border-radius: 1.25vw;
}

header ul li a:hover,
header ul li a.active {
  background: #fff;
  color: #2b1055;
}

/* ===== 导航下拉菜单 ===== */
.nav-dropdown {
  position: relative;
  cursor: pointer;
}
.nav-dropdown > a {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  background: rgba(20, 10, 30, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 33, 192, 0.2);
  border-radius: 12px;
  padding: 0.4rem 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 2000;
  margin-top: 0.35rem;
}
/* 隐形桥接层：填补导航按钮与下拉菜单之间的空隙，防止鼠标移过时菜单消失 */
.dropdown-content::before {
  content: '';
  position: absolute;
  top: -0.35rem;
  left: 0;
  right: 0;
  height: 0.35rem;
}
.dropdown-content a {
  display: block;
  padding: 0.4rem 1.2rem;
  color: rgba(255,255,255,0.85);
  font-size: 1vw;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  text-align: center;
  border: none;
  background: none;
}
.dropdown-content a:hover {
  background: rgba(255, 33, 192, 0.15);
  color: #ff21c0;
}
.nav-dropdown:hover .dropdown-content {
  display: block;
}
/* 下拉小三角 */
.nav-dropdown > a::after {
  content: " ▾";
  font-size: 0.7em;
  opacity: 0.6;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 6.25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 6.25vw;
  background: linear-gradient(to top, #000000, transparent);
  z-index: 20;
}

section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框。 */
  object-fit: cover;
  pointer-events: none;
}

section img#moon {
  /* mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 */ 
  mix-blend-mode: screen;
}

section img#mountains_front {
  z-index: 10;
}

#text {
  font-size: 3.125vw;
  position: relative;
  letter-spacing:1.875vw;
  text-transform:uppercase;
  text-align: center;
  line-height:0.2vw;
  outline: none;
  -webkit-box-reflect: below 1px linear-gradient(transparent,#0008);
  animation: textanimate 5s linear infinite;
}
@keyframes textanimate{
  0%,21%,31%,51%,60%,80%,90%,92%{
    color: #0e3742;
  }
  20%,30%,50%,60%,80%,90%,100%{
    color:#fff;
    text-shadow: 0 0 0.625vw #03bcf4,0 0 1.25vw #03bcf4,
    0 0 2.5vw #03bcf4,0 0 5vw #03bcf4;
  }
}

#road{
    z-index: 2;
}

#btn {
  text-decoration: none;
  display: inline-block;
  padding: 0.5vw 1.875vw;
  border-radius: 2.5vw;
  background: 
  linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  color: #2b1055;
  font-size: 1.5vw;
  z-index: 9;
  transform: translateY(15.6vw);
}
#btn:hover{
  animation: animate 8s linear infinite;
}
#btn::before{
  content: '';
  position: absolute;
  inset: -0.3125vw;
  z-index: -1;
  background: 
  linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 2.5vw;
  opacity: 0;
}
#btn:hover::before{
  filter: blur(1.25vw);
  opacity: 1;
  animation: btnanimate 8s linear infinite;
}

@keyframes btnanimate{
  from{
    background-position: 0%;
  }
  to{
    background-position: 400%;
  }
}

.sec {
  position: relative;
  padding: 20px;
  background: #ffffff00;
  right: -30vw;
  top:0;
  width: 70vw;
}

.sec h2 {
    font-size: 2vw;
    margin-bottom: 0.625vw;
    text-align: center;
    
    /* 渐变效果 */
    background: linear-gradient(90deg, #fac003, #ff00b7, #ffdd00);
    background-clip: text;
    color: transparent;
  
    /* 文字阴影 */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out, color 0.3s ease;  /* 添加过渡 */
  }

.sec p {
  font-size: 1.2vw;
  color: #fff;
  margin-bottom: 0.5vw; /* 增加标题和下面文字的间距 */
  letter-spacing: 0.125vw; /* 字符间距 */
}

#particles {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

#snowCanvas {
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* ===== 移动端适配 (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* --- Header --- */
    header {
        padding: 3vw 2vw 1.2vw;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1vw;
    }
    header .logo {
        order: 1;
    }
    header .logo img {
        width: 9vw;
        min-width: 34px;
    }
    header ul {
        order: 2;
        gap: 0.5vw;
        flex-shrink: 0;
        margin-left: auto;
    }
    .welcome {
        order: 3;
        width: 100%;
        max-width: 100%;
        font-size: 2.6vw;
        letter-spacing: 0.15vw;
        flex-shrink: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        text-align: center;
        margin: 0.5vw 0 0;
    }
    header ul li {
        margin-left: 0;
    }
    header ul li a {
        font-size: 2.6vw;
        padding: 0.8vw 1.8vw;
        border-radius: 3vw;
        white-space: nowrap;
    }

    /* 下拉菜单移动端适配 */
    .nav-dropdown {
        position: relative;
    }
    .dropdown-content {
        left: 50%;
        transform: translateX(-50%);
        min-width: 80px;
        margin-top: 0.2rem;
    }
    .dropdown-content a {
        font-size: 2.6vw;
        padding: 0.6rem 1rem;
    }

    /* --- section (explore 视差 + index canvas) --- */
    section {
        height: 80vh;
        min-height: 400px;
        padding: 4vw;
    }
    #text {
        font-size: 5vw;
        letter-spacing: 1.5vw;
        line-height: 1.4;
    }
    #btn {
        font-size: 3.5vw;
        padding: 1.5vw 4vw;
        transform: translateY(20vw);
    }

    /* --- info-box — 移动端改为全屏底部抽屉，可交互 --- */
    .info-box {
        display: block;
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 50vh;
        max-height: 50vh;
        z-index: 100;
        border-radius: 4vw 4vw 0 0;
        padding: 3vw 4vw;
        overflow-y: auto;
        overflow-x: hidden;
        background: rgba(10, 5, 30, 0.95);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 33, 192, 0.15);
        border-bottom: none;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
        transform: translateY(calc(100% - 12vw));
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .info-box.open {
        transform: translateY(0);
    }
    /* 抽屉把手 */
    .info-box::before {
        content: '';
        position: sticky;
        top: 0;
        display: block;
        width: 12vw;
        height: 1.2vw;
        background: rgba(255,255,255,0.2);
        border-radius: 1vw;
        margin: 0 auto 2vw;
        cursor: pointer;
        z-index: 2;
    }
    .info-box ul {
        padding-bottom: 4vw;
    }
    .info-box .info-section-title {
        font-size: 3.2vw;
    }
    .info-box ul li:not(.info-divider):not(.info-section-title) {
        font-size: 2.8vw;
        line-height: 1.5;
    }
    .info-box ul li a {
        font-size: 2.8vw;
    }
    .info-box .info-divider {
        margin: 0.8vw 0;
    }

    /* 收拢按钮 — 移动端隐藏（用抽屉把手代替） */
    .info-toggle {
        display: none;
    }
    /* 抽屉把手更大，方便点击 */
    .info-box::before {
        width: 18vw;
        height: 2.5vw;
        margin: 0 auto 3vw;
    }
    .info-box {
        transform: translateY(calc(100% - 10vw));
    }

    /* --- .sec 主内容区 (explore) --- */
    .sec {
        right: 0;
        width: 100%;
        padding: 4vw 3vw 55vh;
    }
    .sec h2 {
        font-size: 4.5vw;
    }
    .sec p {
        font-size: 3.2vw;
        letter-spacing: 0.2vw;
    }

    /* --- blog-box 卡片 --- */
    .blog-box {
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 3vw;
        margin: 3vw 0;
        left: 0;
    }
    .blog-box .left {
        flex: none;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 2vw;
    }
    .blog-box .left img {
        width: 100%;
        height: auto;
        max-height: 40vw;
        object-fit: cover;
        border-radius: 2vw;
    }
    .blog-box .right {
        flex: none;
    }
}