h1(style='--x: 6; --y: -6;')
  for letter, index in 'Waaave'.split('')
    span(style=`--index: ${index}; --alpha-l: 0.125; --alpha-u: 0.25;`)= letter
h1(style='--x: 3; --y: -3;')
  for letter, index in 'Waaave'.split('')
    span(style=`--index: ${index}; --alpha-l: 0.25; --alpha-u: 0.5;`)= letter
h1
  for letter, index in 'Waaave'.split('')
    span(style=`--index: ${index}; --alpha-l: 0.5; --alpha-u: 1;`)= letter

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap");
:root {
  --lower: 100;
  --upper: 700;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #70c9db;
}
h1 {
  font-family: 'Roboto Mono', monospace;
  font-size: 7rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
  font-variation-settings: 'wght' var(--lower);
  margin: 0;
}
h1 span {
  color: hsla(180, 100%, 90%, var(--alpha-l));
  animation: rise 2.25s infinite ease-in-out;
  animation-delay: calc((var(--index) - 6) * 0.225s);
  display: inline-block;
}
@keyframes rise {
  50% {
    font-variation-settings: 'wght' var(--upper);
    color: hsla(180, 100%, 100%, var(--alpha-u));
    transform: translate(0, -15%);
  }
}