<div>
  <div class="bg-rainbow"></div>
  <div class="bg-rainbow bg-rainbow2"></div>
  <div class="bg-rainbow bg-rainbow3"></div>
  <div class="content">
    <div class="perfection" data-splitting>
      Progress over perfection
    </div>
    <div class="" data-splitting="words"></div>
    <div class="" data-splitting="chars"></div>
    <div class="" data-splitting="items"></div>
    <div class="" data-splitting="lines"></div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

$delay: 1s;

html {
  height: 100%;
  display: flex;
}

body {
  margin: auto;
}

/* Rainbow background */
.bg-rainbow {
  animation: none;
  background-image: linear-gradient(-60deg, #66cc33 50%, #086cff 50%);
  bottom: 0;
  left: -50%;
  opacity: 0.5;
  position: fixed;
  right: -50%;
  top: 0;
  z-index: -1;
}

@keyframes slide {
  0% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(25%);
  }
}

.content {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0.25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.5);
  left: 50%;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Text */
.perfection {
  font-size: 5.5vw;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  color: #1fac00;
  position: relative;
  padding: 4rem 5rem 5rem;
  text-decoration: none;
  display: flex;
  line-height: 1.3;

  span {
    display: inline-block;
    white-space: pre;
  }

  .word {
    overflow: hidden;

    .char {
      position: relative;
      animation: none;
    }
  }

  [data-word="perfection"] {
    overflow: visible;
    animation: none;

    .char {
      animation: none;
      visibility: hidden;
    }

    .char:before,
    .char:after {
      visibility: visible;
      color: #9933ff;
      overflow: hidden;
      height: 60%;
      width: 2em;
      text-indent: 0.25em;
      margin-left: -0.25em;
      transform: translateY(-0.2em) scaleY(1);
      animation: none;
    }

    .char:after {
      height: 2.2em;
      transform: translateY(0.11em) scaleY(1);
      clip-path: polygon(-100% 37%, 100% 37%, 100% 100%, -100% 100%);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bg-rainbow {
    animation: slide 9s ease-in-out infinite alternate;
  }

  .bg-rainbow2 {
    animation-direction: alternate-reverse;
    animation-duration: 10s;
  }

  .bg-rainbow3 {
    animation-duration: 11s;
  }

  .perfection {
    .word {
      .char {
        position: relative;
        animation: slide-down 1s cubic-bezier(0.75, 0, 0.25, 1) both;
        animation-delay: calc(#{$delay} + (0.5s * var(--word-index)));
        animation-play-state: var(--playState, running);
        @keyframes slide-down {
          from {
            transform: translateY(-100%);
          }
        }
      }
    }

    [data-word="perfection"] {
      animation: slide-over 1.5s cubic-bezier(0.5, 0, 0.25, 1) both;
      animation-delay: $delay; //.5s * var(--word-index) );
      @keyframes slide-over {
        from {
          transform: translateX(-50%);
        }
      }

      .char {
        animation: none;
        visibility: hidden;
      }

      .char:before,
      .char:after {
        animation: split-in 1.5s cubic-bezier(0.75, 0, 0.25, 1) both alternate;
        animation-delay: calc(
          3s + -0.2s * (var(--char-total) - var(--char-index))
        );
        @keyframes split-in {
          from {
            transform: translateY(0%) scaleY(1);
          }
        }
      }
    }
  }
}

@media (prefers-contrast: more) {
  .content {
    background-color: rgba(255, 255, 255, 1);
  }

  .perfection {
    color: #fc00ff;
  }

  .perfection [data-word="perfection"] .char:before,
  .perfection [data-word="perfection"] .char:after {
    color: #0069ff;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  .content {
    background-color: rgba(51, 51, 51, 1);
  }

  .perfection {
    color: #16ff00;
  }

  .perfection [data-word="perfection"] .char:before,
  .perfection [data-word="perfection"] .char:after {
    color: #fffd00;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: no-preference) {
  .content {
    background: #333333;
  }

  .perfection {
    color: #cfcfcf;
  }

  .perfection [data-word="perfection"] .char:before,
  .perfection [data-word="perfection"] .char:after {
    color: #2f7fff;
  }
}

console.clear();
Splitting();