:root{
  --dark-alpha: 0;
}

html,body{height:100%;}
body{
  margin:0;
  background:#000;
}

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

.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:opacity 900ms ease;
}

.hero-bg-light{
  background-image:url("assets/light-hero.png");
  opacity:calc(1 - var(--dark-alpha));
}

.hero-bg-dark{
  background-image:url("assets/dark-hero.png");
  opacity:var(--dark-alpha);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:radial-gradient(60% 65% at 50% 35%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.80) 100%);
  opacity:calc(0.12 + (var(--dark-alpha) * 0.55));
  transition:opacity 900ms ease;
}

/* Invisible Click Overlay Positioned Over Hero Tabs */
.click-nav{
  position:absolute;
  bottom:0;
  width:100%;
  height:100px;
  display:flex;
  justify-content:center;
  gap:70px;
}

.click-nav a{
  width:120px;
  height:100%;
  display:block;
}