* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
}
.container {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  /* border: 1px solid #fff; */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header {
  position: relative;
  width: 100%;
  background: url(./bg1.png) no-repeat center center;
  background-size: contain; /* 完整显示图片，保持宽高比 */
  height: 0;
  padding-bottom: 65vh; /* 使用视口高度单位，限制在65%视口高度 */
  flex: 0 0 auto;
  margin-top: -45px;
}
.top {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 45vw;
  height: auto;
  opacity: 0;
  animation: fadeInDown 0.6s ease-out 0s forwards;
}
.ra {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 48vw;
  height: auto;
  opacity: 0;
}
.text {
  position: absolute;
  top: 77%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65vw;
  height: auto;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
}
.text2 {
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45vw;
  height: auto;
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.4s forwards;
}
.t1 {
  position: absolute;
  top: 91%;
  left: 30%;
  width: 20vw;
  height: auto;
  opacity: 0;
  animation: slideInLeft 0.5s ease-out 0.6s forwards;
}
.t2 {
  position: absolute;
  top: 90.5%;
  right: 31%;
  width: 17vw;
  height: auto;
  opacity: 0;
  animation: slideInRight 0.5s ease-out 0.7s forwards;
}

.t3 {
  position: absolute;
  top: 97%;
  left: 29%;
  width: 25vw;
  height: auto;
  opacity: 0;
  animation: slideInLeft 0.5s ease-out 0.8s forwards;
}
.t4 {
  position: absolute;
  top: 97%;
  right: 31%;
  width: 13vw;
  height: auto;
  opacity: 0;
  animation: slideInRight 0.5s ease-out 0.9s forwards;
}

.bottom-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vh 0;
  gap: 2vh;
  margin-top: -31vw;
}

.tips {
  width: 85%;
  height: 3vh;
  box-shadow: 0px 1px 22.5px -9px rgba(104, 104, 104, 1) inset;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vh;
  font-weight: 600;
  color: #fff;
  gap: 1vh;
  opacity: 0;
  animation: fadeInUpCentered 0.5s ease-out 1s forwards;
  text-align: center;
  /* background-color: #000; */
}
.apple {
  width: 1vh;
  /* height: 1vh; */
}
.and {
  width: 1vh;
  /* height: 1vh; */
}
.btn1 {
  background: linear-gradient(90deg, #f9752d 0%, #b744e3 100%);
  width: 85%;
  height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vh;
  font-weight: 600;
  color: #fff;
  border-radius: 30px;
  opacity: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn1:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(249, 117, 45, 0.4);
}

.btn2 {
  background: linear-gradient(90deg, #ff7b19 0%, #fe7a19 100%);
  width: 85%;
  height: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vh;
  font-weight: 600;
  color: #fff;
  border-radius: 30px;
  opacity: 0;
  animation: bounceIn 0.6s ease-out 1.2s forwards;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn2:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 123, 25, 0.4);
}

/* 视差滚动效果 */
.parallax-layer {
  transition: transform 0.1s linear;
}

.parallax-bg {
  transform: translateY(var(--parallax-bg));
}

.parallax-mid {
  transform: translateY(var(--parallax-mid));
}

.parallax-front {
  transform: translateY(var(--parallax-front));
}

/* 入场动画关键帧 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -20%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(50px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  70% {
    transform: scale(0.98) translateY(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 浮动动画 */
@keyframes float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0px);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* 添加浮动效果到logo */
.ra {
  animation: zoomIn 0.8s ease-out 0.1s forwards,
    float 3s ease-in-out 1s infinite;
}

/* 脉冲动画 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(249, 117, 45, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(249, 117, 45, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(249, 117, 45, 0);
  }
}

.btn1 {
  animation: bounceIn 0.6s ease-out 1.1s forwards, pulse 2s infinite 2s;
}

.imgbox {
  max-width: 850px;
  position: relative;
}

/* 专门为tips设计的居中动画 */
@keyframes fadeInUpCentered {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* PC端不显示 */
@media (min-width: 1024px) {
  .container {
    display: none;
  }
  .pc {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: #0f0f0f;
    position: relative;
  }
  .pc img {
    width: 850px;
  }
  .btn11 {
    width: 315px;
    height: 50px;
    /* background: #ffffffe7; */
    position: absolute;
    top: 61%;
    left: 60%;
    cursor: pointer;
    /* transform: translate(-50%, -50%); */
  }
  .btn22 {
    width: 315px;
    height: 50px;
    /* background: #bd0000; */
    position: absolute;
    top: 72%;
    left: 60%;
    cursor: pointer;
    /* transform: translate(-50%, -50%); */
  }
}

/* 手机端 */
@media screen and (max-width: 1024px) {
  .pc {
    display: none;
  }
  .container {
    display: flex;
  }
}