/* 
* model from: https://codepen.io/jh3y/pen/VwLdVoZ
* pug to html: https://pughtml.com/
* stylus to css: https://www.cssportal.com/stylus-to-css/
*/

:root {
  --movement: 0.85;
  --stop: 0.5;
  --duration: calc((var(--movement) * (1 / var(--stop))));
  --stagger: 0.1125;
  --perspective: 500;
  --size: 50;
  --hue: 23;
  --saturation: 100;
  --lightness: 55;
  --ease: cubic-bezier(1, -0.52, 0.26, 0.89);
}

.scene {
  perspective: calc(var(--perspective) * 5px);
  width: 100%;
  height: 100vh;
  align-items: center;
  align-items: center;
  background: var(--bg);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  position: absolute;
  z-index: 99999;
  top: 0;
  left: 0;
}

.word {
  display: flex;
  transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg)
    rotateY(45deg);
  transform-style: preserve-3d;
}

@media (max-width: 900px) {
  .word {
    transform: translate(calc(var(--size) * 0.5px), 0) rotateX(-30deg) rotateY(45deg) scale(.7);
  }  
}


.letter__wrap {
  animation: jump calc(var(--duration) * 1s)
    calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
  transform-origin: bottom center;
  transform-style: preserve-3d;
}

.letter__wrap .letter {
  animation: rotate calc(var(--duration) * 4s)
    calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
}

.letter {
  color: var(--color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 2rem;
  font-weight: bold;
  height: calc(var(--size) * 1px);
  margin-right: calc(var(--size) * 0.2px);
  position: relative;
  text-transform: uppercase;
  transform-style: preserve-3d;
  width: calc(var(--size) * 1px);
}

.letter__panel {
  align-items: center;
  background: var(--panel);
  border: 5px
    hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%))
    solid;
  display: flex;
  height: calc(var(--size) * 1px);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  width: calc(var(--size) * 1px);
}

.letter__panel:nth-of-type(1) {
  transform: translate3d(-50%, -50%, 0)
    translate3d(0, 0, calc(var(--size) * 0.5px));
}

.letter__panel:nth-of-type(2) {
  transform: translate3d(-50%, -50%, 0) rotateX(90deg)
    translate3d(0, 0, calc(var(--size) * 0.5px));
}

.letter__panel:nth-of-type(3) {
  transform: translate3d(-50%, -50%, 0) rotateX(180deg)
    translate3d(0, 0, calc(var(--size) * 0.5px));
}

.letter__panel:nth-of-type(4) {
  transform: translate3d(-50%, -50%, 0) rotateX(-90deg)
    translate3d(0, 0, calc(var(--size) * 0.5px));
}

.letter__panel:nth-of-type(5) {
  transform: translate3d(-50%, -50%, 0) rotateY(-90deg)
    translate3d(0, 0, calc(var(--size) * 0.5px));
}

@-moz-keyframes rotate {
  0%,
  30.625% {
    transform: rotateX(0deg);
  }
  33.125%,
  81.625% {
    transform: rotateX(90deg);
  }
  83.125%,
  100% {
    transform: rotateX(180deg);
  }
}

@-webkit-keyframes rotate {
  0%,
  30.625% {
    transform: rotateX(0deg);
  }
  33.125%,
  81.625% {
    transform: rotateX(90deg);
  }
  83.125%,
  100% {
    transform: rotateX(180deg);
  }
}

@-o-keyframes rotate {
  0%,
  30.625% {
    transform: rotateX(0deg);
  }
  33.125%,
  81.625% {
    transform: rotateX(90deg);
  }
  83.125%,
  100% {
    transform: rotateX(180deg);
  }
}

@keyframes rotate {
  0%,
  30.625% {
    transform: rotateX(0deg);
  }
  33.125%,
  81.625% {
    transform: rotateX(90deg);
  }
  83.125%,
  100% {
    transform: rotateX(180deg);
  }
}

@-moz-keyframes jump {
  0%,
  50%,
  100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}

@-webkit-keyframes jump {
  0%,
  50%,
  100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}

@-o-keyframes jump {
  0%,
  50%,
  100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}

@keyframes jump {
  0%,
  50%,
  100% {
    transform: scaleX(1) scaleY(1) translate(0, 0);
  }
  15% {
    transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
  }
  25% {
    transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
  }
}