.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  padding-top: 100px;
  padding-bottom: 100px;
  white-space: pre-wrap;
}
@supports (animation-timeline: scroll()) {
  .hero.exit-while-scroll {
    --range: calc(var(--current-hero-height) * 0.5px);
  }
  @keyframes hero-exit-with-blur {
    0% {
      margin-top: 56px;
    }
    100% {
      opacity: 0;
      margin-top: calc(var(--range) + 56px);
      margin-bottom: calc(-1 * var(--range));
      scale: 0.9;
      filter: var(--filter-blur);
    }
  }
  @keyframes hero-exit {
    0% {
      margin-top: 56px;
    }
    100% {
      opacity: 0;
      margin-top: calc(var(--range) + 56px);
      margin-bottom: calc(-1 * var(--range));
      scale: 0.9;
    }
  }
  .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 var(--range);
    transform-origin: left -100%;
  }
  .hero.exit-while-scroll.with-blur {
    animation-name: hero-exit-with-blur;
  }
}
.hero .title {
  font-size: 30px;
  color: rgb(213, 225, 255);
  font-weight: 400;
  margin: 0;
  margin-left: 6px;
  transition: font-size 0.5s;
}
.hero .description {
  font-size: 105px;
  color: rgb(0, 37, 132);
  font-weight: 700;
  margin: 0;
  line-height: 0.55;
  transition: font-size 0.5s;
}
.hero .hero-text {
  display: inline-block;
  transform: skewX(0deg) scaleY(0.95);
  transform-origin: left;
}

.index-bg {
  position: relative;
}

.index-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
}

.index-bg > .container {
  position: relative;
  z-index: 1;
}