.gradient-background {
    position: absolute;
    /* 使用linear-gradient创建从上到下的渐变 */
    background: linear-gradient(to bottom,rgb(234, 238, 238), rgb(84,189,195), rgb(12,52,54));
    /* 从红色渐变到蓝色 */
    /* 确保背景覆盖整个元素 */
    width: 100%;
    height: 8000px;
    /* 可选：添加一些内边距或边框以美化效果 */
    padding: 20px;
    box-sizing: border-box;
    left: 0px;
}
section.marquee {
    overflow: hidden;
    height: 10vw;
}

h1.marquee {
    white-space: nowrap;
    position: relative;
    top: 5vw;
    font-family: 'marmelad', sans-serif;
    font-weight: 800;
    color: #e2dfec;
    text-shadow: 0px 0px 3px #ffa3d780;
    animation: title-marquee 10S linear infinite;
    font-size: 3.14vw;

}

@keyframes title-marquee {
    from {
        transform: translateX(0);
        clip-path: polygon(6.2vw 0, 95vw 0, 95vw 100vw, 6.2vw 100vw);
    }

    to {
        transform: translateX(-46.1vw);
        clip-path: polygon(52.3vw 0, 141.1vw 0, 141.1vw 100vw, 52.3vw 100vw);
    }
}
.homepage-cover {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    z-index: 0;
    padding: 2rem 9%;
    margin-top: -65px;
    
}

.homepage-cover .bg-container img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
h1.home-page-title {
    --mid-title-transform: translateX(0) translateY(0);
    transition: 1s transform;
    height: fit-content;
    margin: 0;
    z-index: 20;
    position: relative;
    margin-left: 2vw;
    top: -20vw;
    font-family: "marmelad";
    font-size: 8vw;
    color: transparent;
    text-align: center;
    line-height: 150%;
    background: linear-gradient(20deg,
        #d1dadb 0%, #80b2c0 33%,
        transparent 33%, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #ffa3d780);
  }

  h1.home-page-title::before {
    text-align: center;
    transition: 1s transform;
    transform: var(--mid-title-transform);
    content: 'We are OMVs';
    color: transparent;
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(20deg,
        transparent 0%, transparent 33%,
        #67657f 33%, #404093 66%,
        transparent 66%, transparent 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #FB96FF80);
  }

  h1.home-page-title::after {
    text-align: center;
    content: 'We are OMVs';
    color: transparent;
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: linear-gradient(20deg,
        transparent 66%,
        #3d83bd 66%, #0c78dc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #C696FF80);
  }

  /*标题旁边的碎片*/
  img.triangle-1 {
    z-index: 30;
    position: relative;
    width: 5.36vw;
    left: 39vw;
    top: -17vw;
    opacity: 0;
    transform: translateY(1.82vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #7a949780);
  }

  img.triangle-2 {
    z-index: 30;
    position: relative;
    width: 2.7vw;
    left: 60vw;
    top: -25vw;
    opacity: 0;
    transform: translateX(-2vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #FB96FF80);
  }

  img.triangle-3 {
    z-index: 30;
    position: relative;
    width: 4.35vw;
    left: 78vw;
    top: -16vw;
    opacity: 0;
    transform: translateY(1.82vw);
    transition: 1s transform;
    filter: drop-shadow(0px 0px 2px #C696FF80);
  }

  @keyframes fade-in {
    0% {
      opacity: 0
    }

    70% {
      opacity: 1
    }

    100% {
      opacity: 1
    }
  }
  h3.home-text-3 {
    font-family: "marmelad";
    padding:10vw;
    font-size: 6vw;
    color:#f8f2f6;
    text-shadow:0 0 2px #312f30;
    z-index:0;
}
@keyframes typing {
  from {
      width: 0;
  }

  to {
      width: 100%;
  }
}


#omv1 {
  animation: omv1 2s infinite alternate-reverse ease;
  transform-origin: 70% 10% 0;
}

@keyframes omv1 {
  from {
      transform: rotate(-0.5deg)
  }

  to {
      transform: rotate(0deg) translateX(-0.3%)
  }
}

#omv2 {
  animation: omv2 2s infinite alternate-reverse ease;
  transform-origin: 70% 10% 0;
}

@keyframes omv2 {
  from {
      transform: rotate(-0.3deg) translateX(-0.3%)
  }

  to {
      transform: rotate(-0.7deg)
  }
}

#omv3 {
  animation: omv3 3s infinite alternate;
  transform-origin: 70% 10% 0;
}

@keyframes omv3 {
  from {
      transform: rotate(-1deg) translatey(-0.3%)
  }

  to {
      transform: rotate(1deg)
  }
}