body {
    margin: 0;
    padding: 2rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8eef8 0%, #e6f7f0 100%);
    position: relative;
    overflow-x: hidden;
  }
  
  /* 文本样式 */
  .main-text {
    font-family: 'Arial Rounded MT Bold', sans-serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    color: #ff69b4;
    text-align: center;
    max-width: 800px;
    margin: 4rem auto;
    line-height: 1.5;
    z-index: 10;
    position: relative;
  }
  
  /* 图案容器 */
  .pattern-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 60vh;
  }
  
  /* 图案通用样式 */
  .pattern {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease;
    max-width: 90%;
  }

  
  
  /* 汉堡图案 */
  .burger {
    width: 450px;
    height: 300px;
    top: 120%;
    left: -10%;
    transform: translateY(-50%) translateX(-50px);
    animation: slideInLeft 1s 0.3s forwards;
    z-index: 5;
  }
  
  /* 糖果图案 */
  .candy {
    width: 500px;
    height: auto;
    /* width: 400px;
    height: 300px; */
    top: 15%;
    right: -15%;
    transform: translateX(50px);
    animation: slideInRight 1s 0.6s forwards;
  }
  .bin {
    width: 450px;
    height: auto;
    /* width: 400px;
    height: 300px; */
    top: 45%;
    right: 15%;
    transform: translateX(50px);
    animation: slideInRight 1s 0.6s forwards;
  }

  .what {
    width: 400px;
    height: auto;
    top: 15%;
    left: -15%;
    transform: translateX(50px);
    animation: slideInRight 1s 0.6s forwards;
  }
  .D {
    width: 700px;
    height: auto;
    top: 35%;
    left: 0%;
    transform: translateX(50px);
    animation: slideInRight 1s 0.6s forwards;
  }
  /* 叉子图案 */
  .fork {
    width: 250px;
    height: auto;
    /* width: 250px;
    height: 250px; */
    top: 55%;
    left: -5%;
    transform: rotate(60deg) translateY(-50px);
    animation: slideInTop 1s 0.9s forwards;
  }
  
  /* 重量标签图案 */
  .weight-tag {
    width: 200px;
    height: 320px;
    top: 100%;
    right: 0%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
  }
  .wenzi1 {
    width:60%;
    height: auto;
    /* width: 540px;
    height: 300px; */
    top: 40%;
    left: 12%;
    
    transform: rotate(15deg) translateY(-50px);
    animation: slideInTop 1s 0.9s forwards;
    z-index: 6;
    
  }
  .wenzi2 {
    width:45%;
    height: auto;
    /* width: 500px;
    height: 400px; */
    top: 85%;
    right: 20%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
    z-index: 6;
  }
  .wenzi3 {
    width:100%;
    height: auto;
    /* width: 500px;
    height: 400px; */
    top: 55%;
    right: 0%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
    z-index: 6;
  }
  .wenzi4 {
    width:45%;
    height: auto;
    /* width: 500px;
    height: 400px; */
    top: 118%;
    right: 5%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
    z-index: 10;
  }
  .mogu {
    width:25%;
    height: auto;
    /* width: 500px;
    height: 400px; */
    top: 50%;
    right: 30%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
    z-index: 6;
  }
  .alo {
    width:60%;
    height: auto;
    /* width: 500px;
    height: 400px; */
    top: 50%;
    right: 30%;
    transform: translateY(50px);
    animation: slideInBottom 1s 1.2s forwards;
    z-index: 6;
  }
    .pro {
        width: 200px;
        height: auto;
        top: 50%;
        left: 0%;
        transform: translateY(-50%) translateX(-50px);
        animation: slideInLeft 1s 0.3s forwards;
        z-index: 5;
      }
    
    .team {
        width: 200px;
        height: auto;
        top: 50%;
        left: 47%;
        transform: translateY(-50%) translateX(-50px);
        animation: slideInLeft 1s 0.3s forwards;
        z-index: 5;
      }
      .dry {
        width: 200px;
        height: auto;
        top: 110%;
        left: -15%;
        transform: translateY(-50%) translateX(-50px);
        animation: slideInLeft 1s 0.3s forwards;
        z-index: 5;
      }.hp {
        width: 200px;
        height: auto;
        top: 110%;
        left: 25%;
        transform: translateY(-50%) translateX(-50px);
        animation: slideInLeft 1s 0.3s forwards;
        z-index: 5;
      }.wet {
        width: 200px;
        height: auto;
        top: 110%;
        left: 65%;
        transform: translateY(-50%) translateX(-50px);
        animation: slideInLeft 1s 0.3s forwards;
        z-index: 5;
      }
      .xuanwo {
        width: 60%;
        height: auto;
        /* width: 400px;
        height: 300px; */
        top: -10%;
        right: -15%;
        transform: translateX(50px);
        animation: slideInRight 1s 0.6s forwards;
      }
      .wenzi7 {
        width:70%;
        height: auto;
        /* width: 540px;
        height: 300px; */
        top: 5%;
        left: 20%;
        
        transform: rotate(15deg) translateY(-50px);
        animation: slideInTop 1s 0.9s forwards;
        
      }    















  /* 入场动画关键帧 */
  @keyframes slideInLeft {
    to {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
  }
  
  @keyframes slideInRight {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInTop {
    to {
      opacity: 1;
      transform: rotate(-15deg) translateY(0);
    }
  }
  
  @keyframes slideInBottom {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .burger {
      width: 200px;
      height: 160px;
      left: 5%;
    }
    
    .candy {
      width: 160px;
      height: 120px;
      right: 5%;
    }
    
    .fork {
      width: 140px;
      height: 140px;
    }
  }

  .pattern {
    /* 移除原来的自动动画，改为默认隐藏 */
    opacity: 0;
    transition: all 0.8s ease-out;
}

/* 当元素进入视口时添加此类来触发动画 */
.pattern.animate-in {
    opacity: 1;
}

/* 为不同元素定义进入动画 */
.pattern.animate-in.slide-left {
    transform: translateX(0);
}

.pattern.animate-in.slide-right {
    transform: translateX(0);
}

.pattern.animate-in.slide-top {
    transform: translateY(0) rotate(-15deg);
}

.pattern.animate-in.slide-bottom {
    transform: translateY(0);
}

/* 为元素设置初始位置（在视口外） */
.slide-left {
    transform: translateX(-100px);
}

.slide-right {
    transform: translateX(100px);
}

.slide-top {
    transform: translateY(-100px) rotate(-15deg);
}

.slide-bottom {
    transform: translateY(100px);
}

/* 页面布局调整 */
.section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

 
  .titleimg0{
      background-image: url("https://static.igem.wiki/teams/5890/wiki-background/1-4.webp");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg1{
      background-image: url("https://static.igem.wiki/teams/5890/wiki-background/home1.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg2{
      background-image: url("https://static.igem.wiki/teams/5890/wiki-background/1-2.webp");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg3{
      background-image: url("https://static.igem.wiki/teams/5890/home/home-home/home-home.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg4{
      background-image: url("https://static.igem.wiki/teams/5890/home-4-7/home-4-1-new-4x.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg5{
      background-image: url("https://static.igem.wiki/teams/5890/home-4-7/home-5-1-new-4x.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg61{
      background-image: url("https://static.igem.wiki/teams/5890/home-4-7/home-6-1-new-4x.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg62{
      background-image: url("https://static.igem.wiki/teams/5890/home-4-7/home-6-2-new-4x.avif");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  .titleimg7{
      background-image: url("https://static.igem.wiki/teams/5890/wiki-background/1-4.webp");
      height: 100vh;
      background-repeat: no-repeat;
      background-size: 1750px;
      background-attachment: fixed;
      width: 100vw;
      transition: 0.5s ease 0s;
      animation: load 3s;
  }
  
  
  .main{
      scroll-snap-type: y mandatory;
      overflow: scroll;
      overflow-x: hidden;
      height: 100vh;
  }
  
  .sec{
      height: 100vh;
      width: 100vw;
      scroll-snap-align: start;
  }
  
  
  
  @keyframes load{
      0%{
          background-position-y: 50px;
          opacity: 0;
      }
      100%{
          background-position-y: 0px;
          opacity: 1;
      }
  }