/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image: var(--hero-bg, url("../img/hero/hero-bg.webp"));
  background-size:cover;
  background-position:center;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.88));
}

.hero__inner{
  position:relative;
  z-index:3;
  display:grid;
  gap:14px;
  place-items:center;
  padding: 0 4vw;
}

.hero__logo{
  width:min(1020px, 86vw);
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.55));
  transition: opacity .12s linear;
}

.hero__copy{
  font-size:14px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.86);
}

.hero__scrollHint{
  margin-top: 6px;
  display:grid;
  gap:10px;
  place-items:center;
  color:rgba(255,255,255,.65);
}
.hero__scrollText{
  font-size:11px;
  letter-spacing:.30em;
  opacity:.9;
}
.hero__scrollArrow{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  box-shadow: 0 0 18px rgba(212,175,55,.25);
  display:grid;
  place-items:center;
  animation: scroll-bob 1.5s ease-in-out infinite;
}
@keyframes scroll-bob{
  0%,100%{ transform: translateY(0); opacity:.75; }
  50%{ transform: translateY(4px); opacity:1; }
}