/**
 * Apple-style navigation material — scroll-reactive glass (desktop + shared).
 * @see https://developer.apple.com/design/human-interface-guidelines/materials
 */

.site-header {
  --header-glass: 0;
  --material-opacity: 0;
  --material-blur: 0px;
  --material-tint-r: 255;
  --material-tint-g: 255;
  --material-tint-b: 255;
  --material-tint-a: 0.14;
  --material-saturate: 210%;
}

.header-material {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--material-opacity);
  background: rgba(
    var(--material-tint-r),
    var(--material-tint-g),
    var(--material-tint-b),
    calc(var(--material-tint-a) * var(--material-opacity))
  );
  -webkit-backdrop-filter:
    blur(var(--material-blur))
    saturate(var(--material-saturate))
    brightness(1.04);
  backdrop-filter:
    blur(var(--material-blur))
    saturate(var(--material-saturate))
    brightness(1.04);
  border-bottom: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 88%,
    transparent 100%
  );
}

.site-header:not(.is-glass) .header-material {
  opacity: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  visibility: hidden;
}

.header-material::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, calc(0.16 * var(--material-opacity))) 0%,
    rgba(255, 255, 255, calc(0.04 * var(--material-opacity))) 20%,
    transparent 48%
  );
}

.site-header.site-header--over-hero {
  --material-tint-a: 0.1;
  --material-saturate: 196%;
}

.site-header:not(.site-header--over-hero) {
  --material-tint-r: 246;
  --material-tint-g: 244;
  --material-tint-b: 241;
  --material-tint-a: 0.34;
  --material-saturate: 214%;
}

@media (prefers-reduced-transparency: reduce) {
  .header-material {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(246, 244, 241, calc(0.96 * var(--material-opacity)));
  }

  .header-material::before {
    display: none;
  }
}

.site-header::after {
  display: none;
}