/* 3D Paper Snake ***********************************************/
.splitting.paper {
  top: 20%;
}
.splitting.paper .char {
  font-family: 'Amatic SC', helvetica;
  background: #ffb500;
  padding: 5px;
  color: #fff;
  display: inline-block;
  transition: all ease-out 0.3s;
}
.splitting.paper .char:nth-child(odd) {
  moz-transform: skewY(-10deg);
  -webkit-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  transform: skewY(-10deg);
}
.splitting.paper .char:nth-child(even) {
  background: #f15b14;
  color: #fff;
  moz-transform: skewY(10deg);
  -webkit-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  transform: skewY(10deg);
}
.splitting.paper:hover .char {
  background: #fff;
  moz-transform: skewY(0deg);
  -webkit-transform: skewY(0deg);
  -o-transform: skewY(0deg);
  -ms-transform: skewY(0deg);
  transform: skewY(0deg);
}
.splitting.paper:hover .char:nth-child(odd) {
  color: #ffb500;
}
.splitting.paper:hover .char:nth-child(even) {
  color: #f15b14;
}

/* 3D Rainbow ***************************************************/
.splitting.color {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
.splitting.color .char:nth-child(1),
.splitting.color .char:nth-child(9) {
  color: #c44032;
  text-shadow: 0px 0px 0 #8b2d23, 1px -1px 0 #832b21, 2px -2px 0 #7b281f, 3px -3px 0 #73251d, 4px -4px 0 #6b231b, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(2),
.splitting.color .char:nth-child(10) {
  color: #e36b23;
  text-shadow: 0px 0px 0 #a94d16, 1px -1px 0 #a04914, 2px -2px 0 #974513, 3px -3px 0 #8e4112, 4px -4px 0 #853c11, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(3),
.splitting.color .char:nth-child(11) {
  color: #ffd300;
  text-shadow: 0px 0px 0 #b89800, 1px -1px 0 #ad8f00, 2px -2px 0 #a38700, 3px -3px 0 #997f00, 4px -4px 0 #8f7600, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(4),
.splitting.color .char:nth-child(12) {
  color: #5da028;
  text-shadow: 0px 0px 0 #3c671a, 1px -1px 0 #375f18, 2px -2px 0 #325716, 3px -3px 0 #2e4e14, 4px -4px 0 #294612, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(5),
.splitting.color .char:nth-child(13) {
  color: #4584be;
  text-shadow: 0px 0px 0 #31608b, 1px -1px 0 #2e5a83, 2px -2px 0 #2b557c, 3px -3px 0 #295074, 4px -4px 0 #264b6d, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(6),
.splitting.color .char:nth-child(14) {
  color: #7073cf;
  text-shadow: 0px 0px 0 #3e42b9, 1px -1px 0 #3c3fb2, 2px -2px 0 #393daa, 3px -3px 0 #373aa2, 4px -4px 0 #34379b, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(7),
.splitting.color .char:nth-child(15) {
  color: #a870cf;
  text-shadow: 0px 0px 0 #873eb9, 1px -1px 0 #813cb2, 2px -2px 0 #7c39aa, 3px -3px 0 #7637a2, 4px -4px 0 #71349b, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color .char:nth-child(8),
.splitting.color .char:nth-child(16) {
  color: #c73e9f;
  text-shadow: 0px 0px 0 #932b75, 1px -1px 0 #8b286e, 2px -2px 0 #832668, 3px -3px 0 #7b2462, 4px -4px 0 #73215b, 5px -5px 1px rgba(0, 0, 0, 0.5);
}
.splitting.color b .char {
  color: #efefef !important;
  text-shadow: 0px 0px 0 #cbcbcb, 1px -1px 0 #c6c6c6, 2px -2px 0 #c1c1c1, 3px -3px 0 #bcbcbc, 4px -4px 0 #b7b7b7, 5px -5px 1px rgba(0, 0, 0, 0.5) !important;
}
.splitting.color:last-child .char:last-child {
  color: #c44032;
  text-shadow: 0px 0px 0 #8b2d23, -0.5px -1px 0 #6f241c, -1px -2px 0 #65211a, -1.5px -3px 0 #5a1e17, -2px -4px 0 #501a14, -2.5px -5px 1px rgba(0, 0, 0, 0.5);
}

/* Rainbow ******************************************************/
.splitting.rainbow .char {
  color: hsl(calc(360deg * var(--char-percent)), 90%, 65%);
}

/* Animated Rainbow *********************************************/
.splitting.animated .char {
  color: hsl(calc(360deg * var(--char-percent)), 90%, 65%);
  animation: rainbow-colors 2s linear infinite;
  animation-delay: calc(-2s * var(--char-percent));
}

@keyframes rainbow-colors {
  0% {
    color: hsl(0turn, 90%, 65%);
  }
  25% {
    color: hsl(.25turn, 90%, 65%);
  }
  50% {
    color: hsl(.5turn, 90%, 65%);
  }
  75% {
    color: hsl(.75turn, 90%, 65%);
  }
  100% {
    color: hsl(1turn, 90%, 65%);
  }
}

/* Blooming Words ***********************************************/
.splitting.blooming .word:nth-of-type(n) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+18) .char:nth-child(1) {
  color: #c44032;
}
.splitting.blooming .word:nth-of-type(n+2) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+20) .char:nth-child(1) {
  color: #e36b23;
}
.splitting.blooming .word:nth-of-type(n+4) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+22) .char:nth-child(1) {
  color: #ffd300;
}
.splitting.blooming .word:nth-of-type(n+6) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+24) .char:nth-child(1) {
  color: #5da028;
}
.splitting.blooming .word:nth-of-type(n+8) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+26) .char:nth-child(1) {
  color: #49da9a;
}
.splitting.blooming .word:nth-of-type(n+10) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+28) .char:nth-child(1) {
  color: #4584be;
}
.splitting.blooming .word:nth-of-type(n+12) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+30) .char:nth-child(1) {
  color: #7073cf;
}
.splitting.blooming .word:nth-of-type(n+14) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+32) .char:nth-child(1) {
  color: #a870cf;
}
.splitting.blooming .word:nth-of-type(n+16) .char:nth-child(1),
.splitting.blooming .word:nth-of-type(n+14) .char:nth-child(1) {
  color: #c73e9f;
}

/* Letter Overlap ***********************************************/
.splitting.overlap .char {
  margin-right: -0.12em;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  animation: slide-in 2.5s cubic-bezier(0, 0.65, 0.29, 1) 0s both, fade-in 1.25s linear both;
  animation-delay: calc(1s + (0.5s * var(--distance-percent)));
}
@keyframes slide-in {
  0% {
    transform: translateX(1em);
    transform: translateX(calc(0.12em * var(--char-offset))) translateZ(0px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.splitting.overlap b {
  display: inline-block;
  color: #cf4647;
  animation-name: slide-in-v, fade-in;
  animation-fill-mode: both;
  animation-delay: 1s;
  animation-duration: 1.75s, 1s;
  animation-timing-function: cubic-bezier(0, 0.7, 0.1, 1), linear;
}
@keyframes slide-in-v {
  0% {
    opacity: 0;
    transform: translateX(1em);
    transform: translateY(-50vh);
  }
}
.splitting.overlap b ~ * .char {
  z-index: calc(1 * (var(--char-total) - var(--char-index)));
}

/* Peeled Text **************************************************/
.splitting.peeled {
  color: #e3e5ff;
}
.splitting.peeled .char {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
  -webkit-font-smoothing: antialiased;
  margin-right: 1px;
}
.splitting.peeled .char::before,
.splitting.peeled .char::after {
  display: none;
  position: absolute;
  top: 0;
  left: -1px;
  transform-origin: left top;
  transition: all ease-out 0.3s;
  content: attr(data-char);
  visibility: visible;
}
.splitting.peeled .char::before {
  z-index: 1;
  color: rgba(0, 0, 0, 0.3);
  transform: scale(1.1, 1) skew(0deg, 30deg);
}
.splitting.peeled .char::after {
  z-index: 2;
  color: #00043c;
  text-shadow: -1px 0 1px #00043c, 1px 0 1px rgba(0, 0, 0, 0.8);
  transform: rotateY(-40deg);
}
.splitting.peeled .char:hover::before {
  transform: scale(1.1, 1) skew(0deg, 5deg);
}
.splitting.peeled .char:hover::after {
  transform: rotateY(-10deg);
}
@media (min-width: 20em) {
  .splitting.peeled .char::before,
  .splitting.peeled .char::after {
    display: block;
  }
}