#ai-intro {
  height: 350vh;
  position: relative;

  > .bg-wrapper {
    position: absolute;
    top: -100px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    > .bg {
      position: relative;
      width: 100vw;
      height: 100%;
      perspective: 1000px;

      background: linear-gradient(180deg, #0a0011 30%, transparent 100%);

      > .star-wrapper {
        position: absolute;
        height: 100vh;
        pointer-events: none;

        transform: translate3d(0, 0, 100px);
        animation: 1200ms fadeinStar ease;

        > .star {
          position: sticky;

          width: var(--size);
          height: var(--size);
          border-radius: var(--size);
          background-color: #ffffff;

          animation: 1200ms blinking linear infinite alternate;
        }
      }
    }
  }

  > .evi-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;

    > .video-wrapper {
      position: relative;
      height: 300px;
      animation: 1200ms blueberryLoad ease forwards;

      > video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: unset;
        transition: opacity 1000ms linear;
      }
    }

    > .msg-anchor {
      position: relative;
      width: 100%;
      height: 100px;

      > .msg {
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;

        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;

        border-radius: 8px;

        opacity: 0;

        transition: opacity 120ms linear filter 120ms linear;
        transform: translate(-50%, -50%);
        text-align: center;

        cursor: initial;
        user-select: none;
      }

      > .bubble {
        pointer-events: none;
        background-color: #ffbc11;
        border-radius: 16px;
        padding: 12px 28px;
        font-size: 16px;
        font-weight: 700;
        color: #250443;
        cursor: default;
        text-align: center;
      }
    }
  }

  > .scroll {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    opacity: 0.5;

    width: 150px;
    transition: opacity 500ms ease;
  }
}

@keyframes blueberryLoad {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeinStar {
  0% {
    opacity: 0;
    transform: translateZ(60px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes blinking {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}