.headline:nth-child(1) {

  --color: #e74c3c;

}

.headline:nth-child(2) {

  --color: #f5f6fa;

}

.headline:nth-child(3) {

  --color: #48dbfb;

}

.headline:nth-child(4) {

  --color: #9980FA;

}

.headline:nth-child(5) {

  --color: #F79F1F;

}

.headline:nth-child(6) {

  --color: #f8c291;

}



.headline--fade .char {

  --name: fade;

  --dur: 2s;

  --del: calc(var(--distance-percent) * 0.15s);

  --td: ease-in-out;

  -webkit-transform-origin: 0 100%;

          transform-origin: 0 100%;

}

@-webkit-keyframes fade {

  50% {

    opacity: 0;

  }

}

@keyframes fade {

  50% {

    opacity: 0;

  }

}

.headline--ghost .char {

  --name: rise;

  --dur: 3s;

  --del: calc(var(--distance-percent) * 0.125s);

  --tf: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  -webkit-transform-origin: 50% 100%;

          transform-origin: 50% 100%;

          font-family: "Impact";

}

.headline--ghost .char:after {

  -webkit-animation: ghost var(--dur) ease-in var(--del) infinite;

          animation: ghost var(--dur) ease-in var(--del) infinite;

  content: attr(data-char);

  opacity: 0;

  -webkit-transform-origin: 100% 50%;

          transform-origin: 100% 50%;

  visibility: visible;

}

@-webkit-keyframes rise {

  40% {

    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));

            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));

  }

  50% {

    -webkit-transform: translateY(6%);

            transform: translateY(6%);

  }

  55% {

    -webkit-transform: translateY(-4%);

            transform: translateY(-4%);

  }

  60% {

    -webkit-transform: translateY(2%);

            transform: translateY(2%);

  }

  65% {

    -webkit-transform: translateY(-1%);

            transform: translateY(-1%);

  }

  70% {

    -webkit-transform: translateY(0%);

            transform: translateY(0%);

  }

}

@keyframes rise {

  40% {

    -webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));

            transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));

  }

  50% {

    -webkit-transform: translateY(6%);

            transform: translateY(6%);

  }

  55% {

    -webkit-transform: translateY(-4%);

            transform: translateY(-4%);

  }

  60% {

    -webkit-transform: translateY(2%);

            transform: translateY(2%);

  }

  65% {

    -webkit-transform: translateY(-1%);

            transform: translateY(-1%);

  }

  70% {

    -webkit-transform: translateY(0%);

            transform: translateY(0%);

  }

}

@-webkit-keyframes ghost {

  8% {

    opacity: 0;

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

  40% {

    opacity: 0.25;

    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));

            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));

  }

  60%, 100% {

    opacity: 0;

    -webkit-transform: translateY(-200%);

            transform: translateY(-200%);

  }

}

@keyframes ghost {

  8% {

    opacity: 0;

    -webkit-transform: translateY(0);

            transform: translateY(0);

  }

  40% {

    opacity: 0.25;

    -webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));

            transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));

  }

  60%, 100% {

    opacity: 0;

    -webkit-transform: translateY(-200%);

            transform: translateY(-200%);

  }

}

.headline--rock .char {

  --name: rock;

  --dur: 2s;

  --td: ease-in-out;

  -webkit-transform-origin: 0 100%;

          transform-origin: 0 100%;

}

@-webkit-keyframes rock {

  0%, 100% {

    -webkit-transform: rotate(-10deg);

            transform: rotate(-10deg);

  }

  50% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

@keyframes rock {

  0%, 100% {

    -webkit-transform: rotate(-10deg);

            transform: rotate(-10deg);

  }

  50% {

    -webkit-transform: rotate(-18deg);

            transform: rotate(-18deg);

  }

}

.headline--sail .word {

  --dur: 5s;

}

.headline--sail .word:before, .headline--sail .word:after {

  -webkit-animation: wave var(--dur) linear infinite;

          animation: wave var(--dur) linear infinite;

  background-image: radial-gradient(circle at 20px -30px, transparent 40px, var(--color) 41px);

  background-repeat: repeat-x;

  background-size: 40px 100%;

  content: '';

  height: 150%;

  left: 0;

  position: absolute;

  top: 90%;

  width: 200%;

  z-index: 2;

}

.headline--sail .word:after {

  -webkit-animation-duration: calc(var(--dur) * 1.4);

          animation-duration: calc(var(--dur) * 1.4);

  opacity: 0.8;

  top: 70%;

}

.headline--sail .char {

  --name: sail;

  --del: calc(var(--char-index) * -0.15s);

  --tf: linear;

}

@-webkit-keyframes sail {

  25% {

    -webkit-transform: rotate(-1deg) translateY(2%);

            transform: rotate(-1deg) translateY(2%);

  }

  50% {

    -webkit-transform: rotate(0) translateY(0);

            transform: rotate(0) translateY(0);

  }

  75% {

    -webkit-transform: rotate(1deg) translateY(1%);

            transform: rotate(1deg) translateY(1%);

  }

}

@keyframes sail {

  25% {

    -webkit-transform: rotate(-1deg) translateY(2%);

            transform: rotate(-1deg) translateY(2%);

  }

  50% {

    -webkit-transform: rotate(0) translateY(0);

            transform: rotate(0) translateY(0);

  }

  75% {

    -webkit-transform: rotate(1deg) translateY(1%);

            transform: rotate(1deg) translateY(1%);

  }

}

@-webkit-keyframes wave {

  to {

    -webkit-transform: translateX(-200px);

            transform: translateX(-200px);

  }

}

@keyframes wave {

  to {

    -webkit-transform: translateX(-200px);

            transform: translateX(-200px);

  }

}

.headline--shiver .word {

  --name: shiver;

  --dur: 3s;

  --td: linear;

}

.headline--shiver .char {

  --name: shiver-letter;

  --del: calc(var(--char-index) * -0.0125s);

  --dur: 140ms;

  --td: linear;

}

@-webkit-keyframes shiver {

  1% {

    -webkit-transform: translateX(2%);

            transform: translateX(2%);

  }

  2% {

    -webkit-transform: translateX(-2%);

            transform: translateX(-2%);

  }

  3% {

    -webkit-transform: translateX(3%);

            transform: translateX(3%);

  }

  4% {

    -webkit-transform: translateX(-3%);

            transform: translateX(-3%);

  }

  5% {

    -webkit-transform: translateX(4%);

            transform: translateX(4%);

  }

  6% {

    -webkit-transform: translateX(-4%);

            transform: translateX(-4%);

  }

  7% {

    -webkit-transform: translateX(3%);

            transform: translateX(3%);

  }

  8% {

    -webkit-transform: translateX(-3%);

            transform: translateX(-3%);

  }

  9% {

    -webkit-transform: translateX(2%);

            transform: translateX(2%);

  }

  10% {

    -webkit-transform: translateX(-2%);

            transform: translateX(-2%);

  }

  11% {

    -webkit-transform: translateX(1%);

            transform: translateX(1%);

  }

  12% {

    -webkit-transform: translateX(0%);

            transform: translateX(0%);

  }

}

@keyframes shiver {

  1% {

    -webkit-transform: translateX(2%);

            transform: translateX(2%);

  }

  2% {

    -webkit-transform: translateX(-2%);

            transform: translateX(-2%);

  }

  3% {

    -webkit-transform: translateX(3%);

            transform: translateX(3%);

  }

  4% {

    -webkit-transform: translateX(-3%);

            transform: translateX(-3%);

  }

  5% {

    -webkit-transform: translateX(4%);

            transform: translateX(4%);

  }

  6% {

    -webkit-transform: translateX(-4%);

            transform: translateX(-4%);

  }

  7% {

    -webkit-transform: translateX(3%);

            transform: translateX(3%);

  }

  8% {

    -webkit-transform: translateX(-3%);

            transform: translateX(-3%);

  }

  9% {

    -webkit-transform: translateX(2%);

            transform: translateX(2%);

  }

  10% {

    -webkit-transform: translateX(-2%);

            transform: translateX(-2%);

  }

  11% {

    -webkit-transform: translateX(1%);

            transform: translateX(1%);

  }

  12% {

    -webkit-transform: translateX(0%);

            transform: translateX(0%);

  }

}

@-webkit-keyframes shiver-letter {

  25% {

    -webkit-transform: translateY(1%);

            transform: translateY(1%);

  }

  50% {

    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));

            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));

  }

  75% {

    -webkit-transform: translateY(1%);

            transform: translateY(1%);

  }

}

@keyframes shiver-letter {

  25% {

    -webkit-transform: translateY(1%);

            transform: translateY(1%);

  }

  50% {

    -webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));

            transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));

  }

  75% {

    -webkit-transform: translateY(1%);

            transform: translateY(1%);

  }

}

.headline--yell .char {

  --name: yell;

  --dur: 3s;

  --tf: ease;

  -webkit-transform-origin: 50% 100%;

          transform-origin: 50% 100%;

}

@-webkit-keyframes yell {

  3% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  6% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  12% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  18% {

    -webkit-transform: scaleY(1) translateY(-2%);

            transform: scaleY(1) translateY(-2%);

  }

  25% {

    -webkit-transform: scaleY(0.98);

            transform: scaleY(0.98);

  }

  50% {

    -webkit-transform: scaleY(1);

            transform: scaleY(1);

  }

  75% {

    -webkit-transform: scale(0.98);

            transform: scale(0.98);

  }

}

@keyframes yell {

  3% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  6% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  12% {

    -webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

            transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);

  }

  18% {

    -webkit-transform: scaleY(1) translateY(-2%);

            transform: scaleY(1) translateY(-2%);

  }

  25% {

    -webkit-transform: scaleY(0.98);

            transform: scaleY(0.98);

  }

  50% {

    -webkit-transform: scaleY(1);

            transform: scaleY(1);

  }

  75% {

    -webkit-transform: scale(0.98);

            transform: scale(0.98);

  }

}