body {
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.ready {
    opacity: 1;
  }
  .logo-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: -40px;
  }
  .letters {
    position: relative;
    display: flex;
    width: 682px;
    height: 162px;
  }
  .letter {
    position: relative;
    width: 162px;
    height: 162px;
  }
  .letter:not(:first-child) {
    margin-left: -42px;
  }
  .letter-i {
    z-index: 1;
    width: 82px;
    transform-origin: 100% 50%;
  }
  .dot {
    position: absolute;
    width: 42px;
    height: 42px;
    transform: scale(0);
  }
  .dot-i {
    top: 0;
    left: 240px;
  }
  .dot-e {
    bottom: 0;
    right: 0;
  }
  .logo-icon {
    display: flex;
    position: absolute;
    left: 230px;
    top: -10px;
    width: 222px;
    height: 62px;
  }
  .icon {
    width: 62px;
    height: 62px;
    opacity: 0;
  }
  .icon-text {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 160px;
    height: 62px;
  }
  .icon-text path,
  .icon-text polygon {
    opacity: 0;
  }