body {
  margin: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #FFFDDC;
  color: #1a2a3a;
}

/* loading 文字样式 */
#loading {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eaf9ff;
  z-index: 9999;
}
#loading canvas { display: block; }
.loading-text {
    font-size: 2.5rem;       
    font-weight: bold;
    color: #1a2a3a;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/*进度条*/
#progress-bar {
    position: fixed;
    top: 0vh;
    left: 0vw;
    width: 0;
    height: 0.5vh;
    background: linear-gradient(to right, #7fb4ea, #ffc107);
    z-index: 150;
    transition: width 0.25s ease-out;
}

/* to-top 图片切换 */

/* 默认图片 */
#toTopButton img {
  content: url("https://static.igem.wiki/teams/5974/icons/to-top.webp");
  transition: transform 0.3s ease-in-out;
}

/* 鼠标悬停时替换图片 */
#toTopButton:hover img {
  content: url("https://static.igem.wiki/teams/5974/icons/to-top-hover.webp");
  transform: scale(1.2); /* 可选：悬停时放大一点 */
}

/* 顶部导航栏 */
header {
  background: #ccecf9;
  padding: 0 40px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 999;
}
header img {
  height: 100%;
  object-fit: contain;
  margin-left: -250px;
}
nav {
  display: flex;
  gap: 80px;
  margin-left: 200px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 80px;
}
nav ul li {
  position: relative;
}
nav a {
  text-decoration: none;
  font-weight: bold;
  color: #1a2a3a;
  font-size: 20px;
  line-height: 80px;
  display: block;
}
nav a:hover {
  color: #0078a6;
}

/* 下拉菜单 */
nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #dff3fb, #b8e3f6);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 5px 0;
  z-index: 1000;
}
nav ul li:hover ul {
  display: block;
}
nav ul li ul li a {
  padding: 4px 8px;
  font-size: 16px;
  color: #1a2a3a;
  white-space: nowrap;
  transition: all 0.25s ease;
  line-height: normal;
}
nav ul li ul li a:hover {
  background: linear-gradient(135deg, #7fd3ec, #3eaedb);
  color: white;
  border-radius: 4px;
  transform: translateX(15px);
}

/* === 鼠标指针自定义 === */
body {
    cursor: url("https://static.igem.wiki/teams/5974/icons/cursor.webp") 2 2, auto;
}

a:hover,
.sidebarTab:hover {
    cursor: url("https://static.igem.wiki/teams/5974/icons/cursor.webp") 2 2, auto;
}
/* === 主页大图样式 === */
.hero {
  position: relative; /* 为绝对定位的装饰图提供定位上下文 */
  width: 100%;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.hero img{
  position: relative;
  height: auto;
  width: 100%;
  display: block;
  z-index: -2;
}
.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%; /* 覆盖 hero 的高度，也随 img 自适应 */
  background-size: cover;
  background-position: center;
  z-index: -1;
}

/* 背景图和动画 */
.hero-bg1 { background-image: url('https://static.igem.wiki/teams/5974/background/photo4.webp'); animation: float1 4s linear infinite; }
.hero-bg2 { background-image: url('https://static.igem.wiki/teams/5974/background/photo2.webp'); animation: float2 6s linear infinite; }
.hero-bg3 { background-image: url('https://static.igem.wiki/teams/5974/background/photo3.webp'); animation: float3 10s linear infinite; }
.hero-bg4 { background-image: url('https://static.igem.wiki/teams/5974/background/photo5.webp'); animation: float4 5s linear infinite; }
.hero-bg5 { background-image: url('https://static.igem.wiki/teams/5974/background/photo6.webp'); animation: float5 5s linear infinite; }


.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;
  text-align: center;
  color: white;
  pointer-events: none; /* 不阻挡鼠标 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* 飘动动画 */
@keyframes float1 { 0% { transform: translate(0,0); } 50% { transform: translate(40px,30px); } 100% { transform: translate(0,0); } }
@keyframes float2 { 0% { transform: translate(0,-20); } 50% { transform: translate(-10px,20px); } 100% { transform: translate(0,-20); } }
@keyframes float3 { 0% { transform: translate(0,0); } 50% { transform: translate(30px,-40px); } 100% { transform: translate(0,0); } }
@keyframes float4 { 0% { transform: translate(0,0); } 50% { transform: translate(-10px,-15px); } 100% { transform: translate(0,0); } }
@keyframes float5 { 0% { transform: translate(0,0); } 25% {transform: translate(25px,-15px); } 50% { transform: translate(50px,0px); } 75% { transform: translate(25px,-15px); } 100% { transform: translate(0,0); } }
/* 文本层 */
.hero-text {
  position: absolute;      /* 相对于 .hero 容器定位 */
  top: 35%;                /* 垂直居中 */
  left: 50%;               /* 水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  padding: 0 20px;
  max-width: 800px;
  text-align: center;      /* 文字居中 */
}

.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
color: #fff;
}
.hero h2 {
font-size: 2rem;
margin-bottom: 10px;
color: #fff;
}
.hero p {
font-size: 2.25rem;
line-height: 1.6;
color: #fff;
font-weight: 700;
}

/* === 内容区样式 === */
.content {
padding: 0px;
max-width: 100%;
margin: 0 0;
background: #FFFDDC;
}

.content-section {
margin-bottom: 50px;
}

.content-section h2 {
color: #0078a8;
font-size: 2.2rem;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #ccecf9;
}

.content-section p {
font-size: 1.1rem;
line-height: 1.7;
color: #333;
}

.content-section a {
color: #00a2e8;
text-decoration: none;
font-weight: 500;
}

.content-section a:hover {
text-decoration: underline;
}

.news {
  position: absolute;
  top: 74.8%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  }
  .news .left p {
    margin: 0;
    height: 70px;
    width: 300px;
  }
  .news .left p:nth-child(1) {
    background-color: #FFF;
    color: #13AAC6;;
  }
  .news .left p:nth-child(2) {
    background-color: #13AAC6;
    color: #FFF;
  }
  .news .left p:nth-child(3) {
    background-color: #627886;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
.news .right {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 140px;
  display: flex;
  flex-direction: column;
}

/* 滚动容器包装器 */
.marquee-wrapper {
  overflow: hidden;
  height: 70px;
  position: relative;
}

/* 滚动内容 */
.marquee {
  display: flex;
  width: max-content;               /* ✅ 自适应宽度 */
  animation: marquee 15s linear infinite;
}

.marquee p {
  margin: 0;
  padding-right: 600px;
  white-space: nowrap;
  height: 70px;
  line-height: 70px;
}

/* 动画 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

  
footer {
    background-color: #feeeba;
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.6;
    padding: 30px 0;
    text-align: center;
}

footer a {
    color: #00a2e8;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}