.hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center
}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.12;
  background-image:radial-gradient(circle at 30% 70%,rgba(255,255,255,.03) 0,transparent 35%),
    radial-gradient(circle at 70% 30%,rgba(255,255,255,.02) 0,transparent 45%),
    repeating-linear-gradient(45deg,transparent,transparent 80px,rgba(255,255,255,.01) 80px,rgba(255,255,255,.01) 81px);
  mix-blend-mode:screen;animation:geoDrift 18s linear infinite
}
@keyframes geoDrift{0%{background-position:0 0}100%{background-position:120px 120px}}
.hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.38;
  filter:grayscale(.7) contrast(1.15) brightness(.7);
  animation:hero-zoom 12s ease-out forwards
}
@keyframes hero-zoom{
  0%{transform:scale(1.12);opacity:0}
  100%{transform:scale(1);opacity:.38}
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(11,11,11,.15) 0%,rgba(11,11,11,.7) 50%,#0b0b0b 100%);
  pointer-events:none
}
.hero-text{
  position:relative;z-index:3;text-align:center;padding:0 var(--pad)
}
.hero-text .char-top{
  display:block;
  font-size:clamp(5rem,22vw,16rem);
  font-weight:100;
  color:#1a1a1a;
  line-height:.8;
  opacity:0;
  animation:fade-in 2s .3s ease forwards;
  pointer-events:none;user-select:none
}
.hero-text h1{
  font-size:clamp(2.5rem,9vw,9rem);
  font-weight:300;
  letter-spacing:.1em;
  color:#e0e0e0;
  line-height:1.1;
  opacity:0;transform:translateY(30px);
  animation:slide-up 1.4s .8s ease forwards
}
.hero-text h1 small{
  display:block;
  font-size:clamp(.75rem,1.8vw,2rem);
  font-weight:300;
  letter-spacing:.35em;
  color:#5a5a5a;
  margin-top:.6rem
}
.hero-text .sub{
  font-size:clamp(.7rem,.9vw,.9rem);
  color:#4a4a4a;
  letter-spacing:.25em;
  margin-top:2rem;
  text-transform:uppercase;
  opacity:0;transform:translateY(20px);
  animation:slide-up 1s 1.6s ease forwards
}
.hero-scroll{
  position:absolute;bottom:5vh;left:0;right:0;text-align:center;z-index:2;
  color:#2a2a2a;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;animation:fade-in 1s 2.5s ease forwards
}
@keyframes fade-in{to{opacity:1}}
@keyframes slide-up{to{opacity:1;transform:translateY(0)}}