@import './linear.less';
@import './circles.less';

.welcome {
  position: relative;
  height: 100%;
  background-image: linear-gradient(to right, #80808012 1px, transparent 1px), linear-gradient(to bottom, #80808012 1px, transparent 1px);
  background-size: 50px 50px;

  .slogan {
    position: absolute;
    min-width: 300px;
    top: 50%;
    left: 10%;

    &.fin {

      .path-1,
      .path-2,
      .path-3 {
        stroke-dashoffset: 0;
      }

      .path-4 {
        stroke-width: 18px;
      }
    }

    .path {
      fill: none;
      stroke: var(--color-font);
      stroke-width: 18px;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .path-1 {
      stroke-dasharray: 1850 2000;
      stroke-dashoffset: 1851;
      transition: 5s linear;
    }

    .path-2 {
      stroke-dasharray: 260 1000;
      stroke-dashoffset: 261;
      transition: 1.2s linear 5.2s;
    }

    .path-3 {
      stroke-dasharray: 100 1000;
      stroke-dashoffset: 101;
      transition: 1s linear 6.5s;
    }

    .path-4 {
      stroke-width: 0;
      transition: 0.1s linear 7.5s;
    }
  }

  .icp {
    color: var(--color-font-1);
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1999;
    font-size: calc(var(--font-size) * .8);
  }
}