:root {
  --hero-progress: 0;
}

.hero-bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-layer img,
.hero-bg-shade,
.hero-bg-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg-layer img {
  object-fit: cover;
}

.hero-bg-shade {
  background:
    linear-gradient(rgba(30, 20, 12, 0.34), rgba(30, 20, 12, 0.5)),
    radial-gradient(circle at 50% 35%, rgba(255, 240, 194, 0.23), transparent 42%);
}

.hero-bg-mask {
  background:
    linear-gradient(
      180deg,
      rgba(255, 248, 236, 0.72) 0%,
      rgba(255, 248, 236, 0.46) 52%,
      rgba(255, 248, 236, 0.18) 100%
    );
  opacity: calc(var(--hero-progress) * 0.95);
  backdrop-filter: blur(calc(var(--hero-progress) * 14px));
}

.hero {
  background: transparent;
}

main {
  background: linear-gradient(to bottom, transparent 0 100vh, var(--bg) 100vh);
}

.about-section,
.milestones-section,
.drawer-section,
.site-footer {
  background: var(--bg);
}