.site-header {
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}

@media (min-width: 981px) {
  .site-header {
    background: color-mix(in srgb, var(--bg) 64%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(1.12);
    backdrop-filter: blur(26px) saturate(1.12);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--bg);
  }
}

.site-header.is-scroll-hidden {
  transform: translate3d(0, calc(-100% - 1px), 0);
  transition-duration: 360ms;
  transition-timing-function: cubic-bezier(.4, 0, .6, 1);
  pointer-events: none;
}

.site-header.is-scroll-hidden.is-scroll-revealing {
  transform: translate3d(0, var(--header-reveal-y, calc(-100% - 1px)), 0);
  transition: none;
}

/* Lenis recommended base CSS, kept local so the smooth-scroll integration has
   no stylesheet dependency at runtime. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition-duration: .001ms;
  }
}