src/page/home/components/text/text.scss
@import '@c/globalcss/color.scss';

.text{
  font-size: 106px;
  color:#ffff;
  line-height: 1.2;
  padding-top: 54px;
  span{
    position: relative;
    z-index: 1;
    color: $whilte0;
    strong{
      font-size:.6em;
      padding-left: 1rem;
    }
    &::before{
      content: '';
      position: absolute;
      width: 100%;
      height: 90%;
      transform: scaleX(0);
      transform-origin: left;
      top: 6%;
      left: 0;
      z-index: 2;
      background: $color_main
    }
    i{
      width: 2px;
      background: $whilte0;
      height: 80%;
      position: absolute;
      right: -4px;
      top: 15%;
      &.cursor{
        animation: cursoring 1s steps(1) infinite;       
      }
    }
  }
}
.animate{
  animation: textAnimate 0.8s ease-in-out forwards;
  &::before{
    animation: bgAnimate 0.8s ease-in-out forwards;
  }
}

@keyframes cursoring{
   0%{background: $whilte1;}
   50%{background: $whilte0;}
   100%{background: $whilte1;}
}


@keyframes textAnimate{
  0%{
    color: $whilte0
  }
  40%{
    color: $whilte0
  }
  60%{
    color: $whilte1
  }
  100%{
    color: $whilte1
  }
}

@keyframes bgAnimate{
  0%{
      transform: scaleX(0);
      transform-origin: left;
  }
  40%{
      transform: scaleX(1);
      transform-origin: left;
  }
  60%{
      transform: scaleX(1);
      transform-origin: right;
  }
  100%{
      transform: scaleX(0);
      transform-origin: right;
  }
}

@media screen and (max-width: 1440px) {
  .text{
      font-size: 96px
  }
}

@media screen and (max-width: 960px) {
  .text{
      font-size: 80px
  }
}
@media screen and (max-width: 768px) {
  .text{
      font-size: 60px
  }
}
@media screen and (max-width: 480px) {
  .text{
      font-size: 42px;
      padding-top: 19rem;
  }
}
@media screen and (max-width: 360px) {
  .text{
      font-size: 32px;
      padding-top: 16rem;
  }
}
