*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  background-color: #fff;
}

section {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7.5vw;
  z-index: 5;
  color: #fff;
  mix-blend-mode: difference;
}

.container-sticks {
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  display: flex;
  z-index: -1;
  background-color: #fff;
  animation: changeBg 8.5s linear 1 both;

  .stick {
    height: 100%;
    width: 10%;
    background-color: #000;
    transform: scaleY(0);
    animation: growAndReduce 4s linear 1 alternate;
    animation-delay: calc(var(--d) * 0.4s);

    &:nth-child(even) {
      transform-origin: bottom;
    }
    &:nth-child(odd) {
      transform-origin: top;
    }
  }
}

@keyframes growAndReduce {
  0% {
    transform: scaleY(0);
  }
  10%,
  90% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes changeBg {
  0%,
  50% {
    mix-blend-mode: normal;
  }
  50%,
  100% {
    mix-blend-mode: difference;
  }
}