*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:-apple-system, BlinkMacSystemFont, sans-serif;
  background:#05070b;
  color:#fff;
  overflow-x:hidden;
}

/* ===== WebGL Background ===== */

#bg{
  position:fixed;
  inset:0;
  z-index:-2;
}

/* ===== Progress bar ===== */

.progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0%;
  background:#fff;
  z-index:10;
}

/* ===== Scenes ===== */

.scene{
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 10vw;
  opacity:0.2;
  transform:translateY(40px);
  transition:1s ease;
}

.scene.active{
  opacity:1;
  transform:translateY(0);
}

.scene h1{
  font-size:clamp(40px,6vw,110px);
  line-height:1;
  letter-spacing:-0.05em;
}

.scene p{
  margin-top:20px;
  max-width:600px;
  color:rgba(255,255,255,0.7);
  font-size:18px;
}

.hero-img{
  width:80%;
  max-width:700px;
  margin-top:40px;
  border-radius:20px;
  opacity:0;
  transform:translateY(40px);
  transition:1s ease;
}

.scene.active .hero-img{
  opacity:1;
  transform:translateY(0);
}


.end{
  text-align:center;
  align-items:center;
}