.logoCon {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;

  .logo {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    width: 200px;
    height: auto;
  }
  .line,
  .silicon,
  .lt,
  .rb {
    will-change: opacity, transform;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
  }

  .line {
    opacity: 0;
    animation: lineAni 1.2s 0.5s ease-in-out 1 forwards;
  }
  .lt,
  .rb {
    opacity: 0.5;
  }
  .lt {
    animation: ltAni 0.4s 0.1s cubic-bezier(0, 0.84, 1, 1.01) 1 forwards;
  }
  .rb {
    animation: rbAni 0.4s 0.1s cubic-bezier(0, 0.84, 1, 1.01) 1 forwards;
  }
  .silicon {
    opacity: 0;
    animation: siliconAni 0.35s 1s linear 1 forwards;
  }
}

@keyframes lineAni {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  75% {
    opacity: 0.2;
    transform: translateY(10px);
  }
  100% {
    opacity: 0.2;
    transform: translateY(0px);
  }
}
@keyframes ltAni {
  from {
    transform: translate(12px, 10px);
    opacity: 0.5;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes rbAni {
  from {
    transform: translate(-12px, -10px);
    opacity: 0.5;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes siliconAni {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}