site/docs/assets/scss/_intro.scss

.intro {
  background-image: url(../img/bg-intro.svg);
  background-size: 140em 23em;
  background-position: center bottom -1em;
  background-repeat: repeat-x;
  padding: 3em $m-s 13.75em;

  &__content {
    max-width: $max-width-m;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 24em;
    position: relative;
  }

  &__body {
    font-size: 1.75em;
    line-height: 1.5714;
    font-family: 'Livvic', sans-serif;
    max-width: 45ch;
    font-weight: 300;
    position: relative;
    z-index: 2;
  }

  &__logo {
    width: 22.75em;
    height: 22.75em;
    opacity: 0.3;
    position: absolute;
    top: 0.625em;
    left: 50%;
    transform: translateX(-27.1em);
  }

  &:not(.animate):hover .ani-logo,
  &.animate .ani-logo {
    animation: rotate 2s ease-in-out;
    .item {
      animation: trans 0.8s ease-out both alternate 2;

      &.right,
      &.left {
        animation: shrinkx 2s ease-in-out;
      }
      &.top,
      &.bottom {
        animation: shrinky 2s ease-in-out;
      }
    }
  }
}

.ani-logo {
  .item {
    fill: #03043E;
    opacity: 1;
    will-change: transform;
  }

  .ul { transform: translate(-7px, -7px); }
  .ur { transform: translate(7px, -7px); }
  .lr { transform: translate(7px, 7px); }
  .ll { transform: translate(-7px, 7px); }

  .top {
    transform: scaleY(1);
    transform-origin: 41px 24px;
  }
  .right {
    transform: scaleX(1);
    transform-origin: 58px 41px;
  }
  .bottom {
    transform: scaleY(1);
    transform-origin: 41px 58px;
  }
  .left {
    transform: scaleX(1);
    transform-origin: 24px 41px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .item {
    animation: none!important;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0) scale(1);
  }
  60% {
    transform: rotate(0) scale(0.6);
  }
  70% {
    transform: rotate(90deg) scale(0.6);
    animation-timing-function: cubic-bezier(.21,1.85,.72,1);
  }
  100% {
    transform: rotate(90deg) scale(1);
  }
}

@keyframes trans {
  50%, 100% { transform: none; }
}

@keyframes shrinkx {
  0%, 80% {
    transform: none;
  }

  15%, 70% {
    transform: scaleX(0);
  }
}

@keyframes shrinky {
  0%, 80% {
    transform: none;
  }

  15%, 70% {
    transform: scaleY(0);
  }
}