/* Animated Verbs by Ryan Mulligan: https://codepen.io/hexagoncircle/pen/MWgbqON */
.e-add-headline {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.e-add-headline.headline--hide {
  overflow: hidden;
} 
.e-add-splitting.e-add-play .word,
.e-add-splitting.e-add-play .char {
  -webkit-animation-delay: var(--del);
          animation-delay: var(--del);
  -webkit-animation-direction: var(--dir, normal);
          animation-direction: var(--dir, normal);
  -webkit-animation-duration: var(--dur);
          animation-duration: var(--dur);
  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);
  -webkit-animation-name: var(--name);
          animation-name: var(--name);
  -webkit-animation-timing-function: var(--tf);
          animation-timing-function: var(--tf);
  -webkit-animation-fill-mode: var(--fill, forwards);
          animation-fill-mode: var(--fill, forwards);
  
  /* -webkit-animation-play-state: paused;
          animation-play-state: paused; */

  display: inline-block;
  position: relative;

  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  z-index: 1;
}

/* .e-add-splitting.play .word,
.e-add-splitting.play .char{
  -webkit-animation-play-state: running;
          animation-play-state: running;
} */
/* FALLING */
.headline--fall .char {
  --name: fall;
  --dur: 600ms;
  --del: calc(var(--char-index) * -0.05s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
}
@-webkit-keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}
@keyframes fall {
  0% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  25% {
    -webkit-transform: translateY(2%) rotateY(25deg);
            transform: translateY(2%) rotateY(25deg);
  }
  50% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
  75% {
    -webkit-transform: translateY(4%) rotateY(25deg);
            transform: translateY(4%) rotateY(25deg);
  }
  100% {
    -webkit-transform: rotateY(-25deg);
            transform: rotateY(-25deg);
  }
}

/* FLIPPING */
.headline--flip .char {
  --name: flip;
  --dur: 4000ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: linear;
}
@-webkit-keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
@keyframes flip {
  5% {
    -webkit-transform: rotateX(1turn);
            transform: rotateX(1turn);
  }
  10% {
    -webkit-transform: rotateX(2turn);
            transform: rotateX(2turn);
  }
  20% {
    -webkit-transform: rotateX(3turn);
            transform: rotateX(3turn);
  }
  40% {
    -webkit-transform: rotateX(4turn);
            transform: rotateX(4turn);
  }
  70%, 100% {
    -webkit-transform: rotateX(5turn);
            transform: rotateX(5turn);
  }
}
.headline--float .char {
  --name: float;
  --dur: 2200ms;
  --del: calc(var(--char-index) * -0.5s);
  --tf: ease-in-out;
  --dir: alternate;
}
.headline--float .char:nth-child(2n) {
  --name: float-alt;
}
@-webkit-keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@keyframes float {
  from {
    -webkit-transform: translate(2%, -10%) rotate(-1deg);
            transform: translate(2%, -10%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(-2%, 5%) rotate(3deg);
            transform: translate(-2%, 5%) rotate(3deg);
  }
}
@-webkit-keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
@keyframes float-alt {
  from {
    -webkit-transform: translate(0%, -5%) rotate(-1deg);
            transform: translate(0%, -5%) rotate(-1deg);
  }
  to {
    -webkit-transform: translate(2%, 10%) rotate(3deg);
            transform: translate(2%, 10%) rotate(3deg);
  }
}
.headline--jog .char {
  --name: jog;
  --dur: 500ms;
  --del: calc(var(--char-index) * -0.025s);
  --tf: linear;
}
@-webkit-keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
@keyframes jog {
  0% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
  25% {
    -webkit-transform: translate(5%, -5%) rotate(10deg);
            transform: translate(5%, -5%) rotate(10deg);
  }
  50% {
    -webkit-transform: translate(5%, 0) rotate(15deg);
            transform: translate(5%, 0) rotate(15deg);
  }
  75% {
    -webkit-transform: translate(10%, -5%) rotate(10deg);
            transform: translate(10%, -5%) rotate(10deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotate(5deg);
            transform: translate(0, 0) rotate(5deg);
  }
}
.headline--jump .char {
  --name: jump;
  --dur: 800ms;
  --del: calc(var(--char-index) * 0.075s);
  --tf: cubic-bezier(0.165, 0.44, 0.64, 1);
  --amo: -10%;
}
@-webkit-keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(var(--amo)) scaleY(1.2);
            transform: translateY(var(--amo)) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
@keyframes jump {
  20% {
    -webkit-transform: translateY(2%) scaleY(0.9);
            transform: translateY(2%) scaleY(0.9);
  }
  40% {
    -webkit-transform: translateY(var(--amo)) scaleY(1.2);
            transform: translateY(var(--amo)) scaleY(1.2);
  }
  50% {
    -webkit-transform: translateY(10%) scaleY(0.8);
            transform: translateY(10%) scaleY(0.8);
  }
  70% {
    -webkit-transform: translateY(-5%) scaleY(1);
            transform: translateY(-5%) scaleY(1);
  }
  80%, 100% {
    -webkit-transform: translateY(0) scaleY(1);
            transform: translateY(0) scaleY(1);
  }
}
.headline--twirl .char {
  --name: twirl;
  --dur: 6000ms;
  --del: calc(var(--char-index) * 0.025s);
  --tf: linear;
}
@-webkit-keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
@keyframes twirl {
  2.5% {
    -webkit-transform: rotateY(1turn);
            transform: rotateY(1turn);
  }
  5% {
    -webkit-transform: rotateY(2turn);
            transform: rotateY(2turn);
  }
  10% {
    -webkit-transform: rotateY(3turn);
            transform: rotateY(3turn);
  }
  20% {
    -webkit-transform: rotateY(4turn);
            transform: rotateY(4turn);
  }
  40% {
    -webkit-transform: rotateY(5turn);
            transform: rotateY(5turn);
  }
  70%, 100% {
    -webkit-transform: rotateY(6turn);
            transform: rotateY(6turn);
  }
}
/* verbs II */
.headline--blink .char {
  --dur: 0.8s;
  --del: calc(var(--char-index) * 0.0125s);
  --name: blink;
  --tf: steps(1, start);
  opacity: 0;
}
@-webkit-keyframes blink {
  50% {
    opacity: 1;
  }
}
@keyframes blink {
  50% {
    opacity: 1;
  }
}
.headline--break .char {
  --dur: 2s;
  --name: break-drop;
  --td: ease;
  color: transparent;
  overflow: visible;
}
.headline--break .char:before, .headline--break .char:after {
  color: black;
  visibility: visible;
}
.headline--break .char:before {
  -webkit-animation: break-left var(--dur) linear infinite;
          animation: break-left var(--dur) linear infinite;
  -webkit-clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
          clip-path: polygon(55% 0, 50% 25%, 55% 60%, 50% 120%, 0 100%, 0 0);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.headline--break .char:after {
  -webkit-animation: break-right var(--dur) linear infinite;
          animation: break-right var(--dur) linear infinite;
  -webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
          clip-path: polygon(50% 0%, 100% 0, 100% 100%, 44% 120%, 53% 68%, 46% 22%);
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
@-webkit-keyframes break-drop {
  20% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  22% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes break-drop {
  20% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  22% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  25% {
    -webkit-transform: translateY(-5%);
            transform: translateY(-5%);
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes break-left {
  22% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  28% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@keyframes break-left {
  22% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  28% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%, 100% {
    -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
  }
}
@-webkit-keyframes break-right {
  22% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  28% {
    -webkit-transform: rotate(10deg) translateY(10%);
            transform: rotate(10deg) translateY(10%);
  }
  30%, 100% {
    -webkit-transform: rotate(4deg) translateY(5%);
            transform: rotate(4deg) translateY(5%);
  }
}
@keyframes break-right {
  22% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  25% {
    -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
  }
  28% {
    -webkit-transform: rotate(10deg) translateY(10%);
            transform: rotate(10deg) translateY(10%);
  }
  30%, 100% {
    -webkit-transform: rotate(4deg) translateY(5%);
            transform: rotate(4deg) translateY(5%);
  }
}
.headline--hide {
  --dur: 4s;
}
.headline--hide .word:after {
  -webkit-animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
          animation: hide-cover calc(var(--dur) * 2) ease-out infinite;
  border-top: 1vmin solid black;
  background-color: var(--color);
  content: '';
  height: 150%;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 2;
}
.headline--hide .char {
  --name: hide-jump;
  --del: calc(var(--char-index) * 0.04s);
  --td: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dir: alternate;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.headline--hide .char[data-char="i"]:after {
  --name: hide-peek;
  --dir: alternate;
  -webkit-animation: var(--name) var(--dur) var(--td) infinite var(--dir);
          animation: var(--name) var(--dur) var(--td) infinite var(--dir);
  content: attr(data-char);
  visibility: visible;
}
@-webkit-keyframes hide-jump {
  0%, 10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  15% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  20%, 100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@keyframes hide-jump {
  0%, 10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  15% {
    -webkit-transform: translateY(-25%);
            transform: translateY(-25%);
  }
  20%, 100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}
@-webkit-keyframes hide-peek {
  0%, 35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40%, 60% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  70%, 90% {
    -webkit-transform: translateY(-45%) skewY(10deg);
            transform: translateY(-45%) skewY(10deg);
  }
  95%, 100% {
    -webkit-transform: translateY(-46%) skewY(-10deg);
            transform: translateY(-46%) skewY(-10deg);
  }
}
@keyframes hide-peek {
  0%, 35% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40%, 60% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  70%, 90% {
    -webkit-transform: translateY(-45%) skewY(10deg);
            transform: translateY(-45%) skewY(10deg);
  }
  95%, 100% {
    -webkit-transform: translateY(-46%) skewY(-10deg);
            transform: translateY(-46%) skewY(-10deg);
  }
}
@-webkit-keyframes hide-cover {
  0%, 7% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  8%, 95% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  98%, 100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes hide-cover {
  0%, 7% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  8%, 95% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  98%, 100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
.headline--retreat .word {
  -webkit-animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
          animation: retreat-shrink 2s cubic-bezier(0.25, 1, 0.35, 1) infinite;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.headline--retreat .char {
  --name: retreat-stretch;
  --dur: 2s;
  --td: ease-out;
  --amop: 2;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
@-webkit-keyframes retreat-shrink {
  15% {
    -webkit-transform: scale(1.001);
            transform: scale(1.001);
  }
  30%, 80% {
    -webkit-transform: scale(0.25);
            transform: scale(0.25);
  }
  100% {
    -webkit-transform: scale(1.001);
            transform: scale(1.001);
  }
}
@keyframes retreat-shrink {
  15% {
    -webkit-transform: scale(1.001);
            transform: scale(1.001);
  }
  30%, 80% {
    -webkit-transform: scale(0.25);
            transform: scale(0.25);
  }
  100% {
    -webkit-transform: scale(1.001);
            transform: scale(1.001);
  }
}
@-webkit-keyframes retreat-stretch {
  0%, 10% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  15% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  25% {
    -webkit-transform: scaleY(var(--amop)) rotate(calc(var(--distance-sine) * 65deg));
            transform: scaleY(var(--amop)) rotate(calc(var(--distance-sine) * 65deg));
  }
  35% {
    -webkit-transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
            transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
  }
  40% {
    -webkit-transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
            transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
  }
  44% {
    -webkit-transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
            transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
  }
  48% {
    -webkit-transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
            transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes retreat-stretch {
  0%, 10% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  15% {
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
  }
  25% {
    -webkit-transform: scaleY(var(--amop)) rotate(calc(var(--distance-sine) * 65deg));
            transform: scaleY(var(--amop)) rotate(calc(var(--distance-sine) * 65deg));
  }
  35% {
    -webkit-transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
            transform: scaleY(0.8) rotate(calc(var(--distance-sine) * -25deg));
  }
  40% {
    -webkit-transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
            transform: scaleY(1.1) rotate(calc(var(--distance-sine) * 15deg));
  }
  44% {
    -webkit-transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
            transform: scaleY(0.98) rotate(calc(var(--distance-sine) * -10deg));
  }
  48% {
    -webkit-transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
            transform: scaleY(1.01) rotate(calc(var(--distance-sine) * 5deg));
  }
  50% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
.headline--sway .char {
  --dur: 1s;
  --del: calc(var(--char-index) * -0.0125s);
  --name: sway;
  --td: linear;
  --dir: alternate;
}
@-webkit-keyframes sway {
  from {
    -webkit-transform: skew(-15deg) rotateX(10deg);
            transform: skew(-15deg) rotateX(10deg);
  }
  to {
    -webkit-transform: skew(15deg) rotateX(-10deg);
            transform: skew(15deg) rotateX(-10deg);
  }
}
@keyframes sway {
  from {
    -webkit-transform: skew(-15deg) rotateX(10deg);
            transform: skew(-15deg) rotateX(10deg);
  }
  to {
    -webkit-transform: skew(15deg) rotateX(-10deg);
            transform: skew(15deg) rotateX(-10deg);
  }
}
.headline--tumble .char {
  --dur: 0.8s;
  --name: bounce;
  --del: calc(var(--char-index) * -0.125s);
  --td: ease;
  --amo: -35%;
  color: transparent;
  overflow: visible;
}
.headline--tumble .char:after {
  -webkit-animation: tumble var(--dur) linear;
          animation: tumble var(--dur) linear;
  
  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);

  -webkit-animation-delay: calc(var(--char-index) * -0.125s);
          animation-delay: calc(var(--char-index) * -0.125s);
  
  color: black;
  visibility: visible;
  z-index: 2;
}
@-webkit-keyframes bounce {
  25% {
    -webkit-transform: translateY(var(--amo));
            transform: translateY(var(--amo));
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(var(--amo));
            transform: translateY(var(--amo));
  }
}
@keyframes bounce {
  25% {
    -webkit-transform: translateY(var(--amo));
            transform: translateY(var(--amo));
  }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  75% {
    -webkit-transform: translateY(var(--amo));
            transform: translateY(var(--amo));
  }
}
@-webkit-keyframes tumble {
  60% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes tumble {
  60% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* https://codepen.io/popoo/pen/MPaRrK */
.headline--wave .char {
  --dur: 0.87s;
  --name: wave-slide;
  --del: calc(50ms * var(--char-index));
  --td: cubic-bezier(.5, 0.2, .5, 1);
  --fill: both;
  --amo: -0.3em; 
}
@-webkit-keyframes wave-slide {
  50% {
    transform: translateY(var(--amo)) rotate(3.5deg);
    opacity: 0.7;
  }
}
@keyframes wave-slide {
  50% {
    transform: translateY(var(--amo)) rotate(3.5deg);
    opacity: 0.7;
  }
}

/* https://codepen.io/shshaw/pen/MWKEXJv */
.headline--stretch .char {
  visibility: hidden;
}
.headline--stretch.e-add-play .char::after {
  visibility: visible;
  animation: stretch-slide 4s linear both;
  animation-delay: calc((40ms * var(--char-index)));

  -webkit-animation-iteration-count: var(--it, infinite);
          animation-iteration-count: var(--it, infinite);
  
  transform-origin: top center;
}


@-webkit-keyframes stretch-slide {
  0%,
  50%,
  100% {
    transform: translateY(-130%) scaleY(4);
    animation-timing-function: cubic-bezier(1, 0, 0.4, 1);
  }
  20%,
  30% {
    transform: translateY(-110%) scaleY(1);
    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
  }
  70%,
  80% {
    transform: translateY(120%) scaleY(1);
    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
  }
}
@keyframes stretch-slide {
  0%,
  50%,
  100% {
    transform: translateY(-130%) scaleY(4);
    animation-timing-function: cubic-bezier(1, 0, 0.4, 1);
  }
  20%,
  30% {
    transform: translateY(-110%) scaleY(1);
    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
  }
  70%,
  80% {
    transform: translateY(120%) scaleY(1);
    animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
  }
}

/* https://codepen.io/michellebarker/pen/bPEWGK */
.headline--breathe {
	font-weight: 100;
	font-size: 10vw;
	line-height: 10vw;
	font-variation-settings: "wght" 100, "wdth" 85;
}
.headline--breathe .char {
	--delay: calc((var(--char-index) + 1) * 400ms);
	animation: breathe 4000ms infinite both;
	animation-delay: var(--delay);
}

/* .headline--breathe:hover span {
	animation-play-state: paused;
} */

@keyframes breathe {
	0% {
		font-variation-settings: "wght" 100, "wdth" 85;
		font-size: 10vw;
	}
	60% {
		font-variation-settings: "wght" 700, "wdth" 100;
		font-size: 11vw;
	}

	100% {
		font-variation-settings: "wght" 100, "wdth" 85;
		font-size: 10vw;
	}
}