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

#main{
  width:100%;
}

/* HERO */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

/* TEXT */
.hero-wordmark{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1;
  pointer-events:none;
}

.hero-wordmark h1{
  font-family:"Syne", sans-serif;
  font-weight:700;
  font-size:clamp(80px,18vw,150px);
  white-space:nowrap;
  margin:0;
  padding:0;
  color:#1D1D1F;
  will-change:transform, opacity, filter;
}

/* 3D */
.hero-3d{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  will-change:transform;
}

.hero-3d canvas{
  width:100%;
  height:100%;
  display:block;
}

/* SCROLL SPACE */
.after{
  height:100vh;
  background:#111;
}

/* RESPONSIVE */
@media (max-width:1024px){
  .hero-wordmark h1{
    font-size:clamp(64px,14vw,160px);
  }
}

@media (max-width:640px){
  .hero-wordmark h1{
    font-size: 10px;
    text-align:center;
  }
}