html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
}

.process-bar {
  position: fixed;
  background-color: #2cf619;
  width: calc(var(--process) * 100%);
  height: 2px;
}

canvas {
  position:fixed;
  top: 0;
  left: 0;
  
}

@keyframes rotate {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(50vh) scale(0.5, 0.5) rotate(90deg);
  }

  100% {
    transform: translateY(100vh) rotate(180deg);
  }
}

* {
  animation-duration: 1s;
  animation-play-state: paused;
  animation-delay: calc(var(--process) * -1s);
}

section {
  width: 100%;
  height: 100vh;
  z-index: 0;
}

[data-tick-id-0] {
  background-color: rgba(25, 0, 255, 1);
}

[data-tick-id-1] {
  background-color: rgba(255, 64, 0, 1);

}

[data-tick-id-2] {
  background-color: rgba(255, 0, 204, 1);
}