.hero {
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@supports (animation-timeline: scroll()) {
  .hero.exit-while-scroll {
    will-change: filter, margin-top, margin-bottom, opacity, scale;
    animation-name: hero-exit;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll();
    animation-range: 0 50svh;
  }
  @keyframes hero-exit-with-blur {
    from {
      margin-top: 56px;
    }
    to {
      opacity: 0;
      margin-top: calc(50svh + 56px);
      margin-bottom: -50svh;
      scale: 0.9;
      filter: var(--filter-blur);
    }
  }
  @keyframes hero-exit {
    from {
      margin-top: 56px;
    }
    to {
      opacity: 0;
      margin-top: calc(50svh + 56px);
      margin-bottom: -50svh;
      scale: 0.9;
    }
  }
  .hero.exit-while-scroll.with-blur {
    animation-name: hero-exit-with-blur;
  }
}
.hero .sub {
  text-transform: uppercase;
  font-size: 24px;
  color: var(--color-text-secondary);
  font-weight: 100;
  margin-left: 0.4em;
  transition: font-size 0.5s;
}
@media (max-width: 800px) {
  .hero .sub {
    font-size: 16px;
  }
}
.hero .large {
  font-size: 128px;
  margin: 0;
  transition: font-size 0.5s;
}
@media (max-width: 800px) {
  .hero .large {
    font-size: 84px;
  }
}