body {
  background: #0f131e;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

body * {
  font-size: 1em;
}

.wrapper {
  position: relative;
  text-align: center;
}

.wrapper > * {
  z-index: 20;
}

.main {
  height: 650px;
  width: 650px;
  margin: auto;
  margin-top: 50px; // FIXME
  position: relative;
  .neos-pic {
    max-width: 100%;
    max-height: 100%;
    // z-index: 1;
    filter: drop-shadow(0 0 2rem #ffffff2a) drop-shadow(0 0 0.1rem #373737c6);
  }
  .neos-logo {
    filter: brightness(2) drop-shadow(0 0 0.75rem #ffffffb8)
      drop-shadow(0 0 0.1rem #373737c6);
    position: absolute;
    bottom: 10%;
    width: 70%;
    height: fit-content;
    left: 50%;
    transform: translateX(-50%);
  }
}

.start-btn {
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  white-space-collapse: collapse;
  text-wrap: nowrap;
  user-select: none;
  max-width: 100%;
  flex-shrink: 0;
  height: 48px;
  border-radius: 9999px;
  text-shadow: rgba(0, 0, 0, 0.25) 0px 3px 8px;
  gap: 4px;
  margin: 0px;
  padding: 0px 24px;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  background: linear-gradient(
    92.88deg,
    rgb(69, 94, 181) 9.16%,
    rgb(86, 67, 204) 43.89%,
    rgb(103, 63, 215) 64.72%
  );
  transition: 0.15s;
  &:hover {
    filter: brightness(1.2);
    box-shadow: 0px 7px 25px 0 #6041d2a8;
  }
}

// 以下是粒子动画的样式

.particles-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.particle-container {
  $particleNum: 200;
  $particleColor: hsl(180, 100%, 80%);

  position: absolute;
  transform: translateY(-10vh);
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  .particle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
    background-image: radial-gradient(
      hsl(180, 100%, 80%),
      hsl(180, 100%, 80%) 10%,
      hsla(180, 100%, 80%, 0) 56%
    );

    animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
  }

  @keyframes fadein-frames {
    0% {
      opacity: 1;
    }

    50% {
      opacity: 0.7;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes scale-frames {
    0% {
      transform: scale3d(0.4, 0.4, 1);
    }

    50% {
      transform: scale3d(2.2, 2.2, 1);
    }

    100% {
      transform: scale3d(0.4, 0.4, 1);
    }
  }

  $particleBaseSize: 10;

  @for $i from 1 to $particleNum {
    &:nth-child(#{$i}) {
      $particleSize: random($particleBaseSize);
      width: $particleSize + px;
      height: $particleSize + px;

      $startPositionY: random(10) + 80;
      $framesName: "move-frames" + $i;
      $moveDuration: 28000 + random(9000) + ms;

      animation-name: #{$framesName};
      animation-duration: $moveDuration;
      animation-delay: random(37000) + ms;

      @keyframes #{$framesName} {
        from {
          transform: translate3d(
            #{random(90) + vw},
            #{$startPositionY + vh},
            0
          );
        }

        to {
          transform: translate3d(
            #{random(90) + vw},
            #{- $startPositionY - random(30) + vh},
            0
          );
        }
      }

      .particle {
        animation-delay: random(4000) + ms;
      }
    }
  }
}
