html {
  overflow-x: clip;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  width: 100vw;
  margin-left: calc(50% - 50vw);

  padding-inline: max(1.25rem, calc(50vw - 23.75rem));

  padding-block: 0.1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
}

@supports (animation-timeline: scroll()) {
  .site-header {
    --mb-rest: 2rem;
    --mb-scroll: 1.6rem;

    -webkit-backdrop-filter: url(#liquid-glass-header);
    backdrop-filter: url(#liquid-glass-header);

    animation: site-header-glass linear both;
    animation-timeline: scroll(root);
    animation-range: 0 72px;
  }

  @media (max-width: 40rem) {
    .site-header {
      --mb-rest: 1.5rem;
      --mb-scroll: 1.1rem;
    }
  }

  @keyframes site-header-glass {
    from {
      padding-block: 0.1rem;
      margin-bottom: var(--mb-rest);
      background-color: transparent;
      border-bottom-color: transparent;
      box-shadow:
        inset 0 1px 0 transparent,
        0 6px 22px transparent;
    }

    to {
      padding-block: 0.3rem;
      margin-bottom: var(--mb-scroll);
      background-color: rgba(255, 255, 255, 0.014);
      border-bottom-color: rgba(255, 255, 255, 0.06);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 22px rgba(0, 0, 0, 0.18);
    }
  }
}