:host {
  --animation-duration: 20s;
}

.frame {
  width: 512px;
  @media screen and (max-width: 860px) {
    width: 90vw
  }
  position: relative;
}

.brand {
  position: absolute;
  left: 0;
  animation: var(--animation-duration) brand ease-in-out forwards;
  opacity: 0;
  @media screen and (max-width: 860px) {
    animation: var(--animation-duration) brand-mobile ease-in-out forwards;
  }
}

.text {
  position: absolute;
  left: 0;
  transform: translateX(50%);
  @media screen and (max-width: 860px) {
    transform: translateX(0) translateY(120%);
  }
  color: #fff;
  margin-top: 60px;

  .welcome {
    opacity: 0;
    font-size: 80px;
    @media screen and (max-width: 860px) {
      font-size: 40px;
    }
    animation: var(--animation-duration) welcome ease-in-out forwards;
  }

  .name {
    opacity: 0;
    font-size: 50px;
    @media screen and (max-width: 860px) {
      font-size: 30px;
    }
    animation: var(--animation-duration) name ease-in-out forwards;
  }

  .roles {
    opacity: 0;
    font-size: 20px;
    margin-top: 40px;
    animation: var(--animation-duration) roles ease-in-out forwards;
  }
}


@keyframes brand {
  10% {
    opacity: 0;
    transform: translateX(0) translateY(0%);
    filter: blur(30px);
  }
  15% {
    opacity: 1;
    transform: translateX(0) translateY(0%);
    filter: blur(0px);
  }
  20% {
    opacity: 1;
    transform: translateX(0) translateY(0%);
  }
  25% {
    opacity: 1;
    transform: translateX(-50%) translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0%);
  }
}

@keyframes brand-mobile {
  10% {
    opacity: 0;
    transform: translateX(-25%) translateY(25%);
    filter: blur(30px);
  }
  15% {
    opacity: 1;
    transform: translateX(-25%) translateY(25%);
    filter: blur(0px);
  }
  20% {
    opacity: 1;
    transform: translateX(-25%) translateY(25%);
  }
  25% {
    opacity: 1;
    transform: translateX(-25%) translateY(0%);
  }

  100% {
    opacity: 1;
    transform: translateX(-25%) translateY(0%);
  }
}

@keyframes welcome {
  30% {
    opacity: 0;
    transform: scale(1.4);
    filter: blur(30px);
  }
  40% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes name {
  50% {
    opacity: 0;
    transform: scale(1.4);
    filter: blur(30px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes roles {
  70% {
    opacity: 0;
    transform: scale(1.4);
    filter: blur(30px);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}