/* .hero {
  min-height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #000;
} */

/* TEST */

.hero {
  height: calc(100svh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #000;
}

.hero-title {
  font-size: 42px;
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -3px;
  position: relative;
  z-index: 2;
}

.line {
  display: block;
}

/* lettres animées */

.char {
  display: inline-block;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

/* WebGL */

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

#webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* background: black; */
}

/* loader */

.loader {
  position: absolute;
  inset: 0;
  background: black;
  z-index: 10;
  transition: opacity 0.8s ease;
}

.loader.hide {
  opacity: 0;
  pointer-events: none;
}