/* iOS WebKit has native blur/saturation, but no reliable SVG backdrop lens.
   Keep a clear core and use specular bevels instead of an unsupported URL. */
@supports (-webkit-touch-callout: none) {
  .site-header .header-glass,
  .site-header .header-glass.has-refraction {
    -webkit-backdrop-filter: blur(4px) saturate(1.85) contrast(1.06) brightness(1.04);
    backdrop-filter: blur(4px) saturate(1.85) contrast(1.06) brightness(1.04);
    background: linear-gradient(180deg,
      rgba(var(--glass-highlight), .42) 0%,
      rgba(var(--glass-highlight), .12) 10%,
      rgba(var(--glass-tint), .36) 28%,
      rgba(var(--glass-tint), .29) 65%,
      rgba(var(--glass-highlight), .16) 91%,
      rgba(var(--glass-highlight), .42) 100%);
    border-color: rgba(var(--glass-highlight), .66);
    box-shadow: 0 8px 26px rgba(2,15,30,.16),
      inset 0 1px 1px rgba(var(--glass-highlight), .95),
      inset 0 3px 5px rgba(var(--glass-highlight), .22),
      inset 2px 0 2px rgba(var(--glass-highlight), .42),
      inset -2px 0 3px rgba(var(--glass-highlight), .24),
      inset 0 -1px 1px rgba(var(--glass-highlight), .73),
      inset 0 -4px 6px rgba(2,15,30,.12);
  }
  html[data-theme="dark"] .site-header .header-glass {
    -webkit-backdrop-filter: blur(5px) saturate(1.6) brightness(.86);
    backdrop-filter: blur(5px) saturate(1.6) brightness(.86);
  }
  .site-header .header-glass::after {
    background:
      radial-gradient(ellipse 55% 120% at 24% -65%, rgba(var(--glass-highlight), .9), transparent 95%),
      linear-gradient(112deg, transparent 34%, rgba(var(--glass-highlight), .03) 42%,
        rgba(var(--glass-highlight), .28) 49%, rgba(var(--glass-highlight), .045) 54%, transparent 64%);
    background-size: 100% 100%, 260% 100%;
    background-position: 0 0, 10% 50%;
  }
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-brand-intro]) .site-header.is-scrolled .header-glass:not(.mobile-menu-glass)::after {
      animation: safari-glass-light 12s ease-in-out infinite alternate;
    }
  }
  /* The open menu needs more diffusion for text contrast than the narrow bar. */
  .site-header .mobile-menu .mobile-menu-glass,
  .site-header .mobile-menu .mobile-menu-glass.has-refraction {
    -webkit-backdrop-filter: blur(22px) saturate(1.65);
    backdrop-filter: blur(22px) saturate(1.65);
    background: linear-gradient(155deg,
      rgba(var(--glass-tint), .88), rgba(var(--glass-tint), .78) 48%, rgba(var(--glass-tint), .9));
  }
  .site-header .mobile-menu .mobile-menu-glass::after {
    background: radial-gradient(ellipse 90% 35% at 15% 0%, rgba(var(--glass-highlight), .22), transparent 85%);
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-theme] .site-header .header-glass,
    html[data-theme] .site-header .header-glass.has-refraction,
    .site-header .header-glass,
    .site-header .header-glass.has-refraction,
    .site-header .mobile-menu .mobile-menu-glass,
    .site-header .mobile-menu .mobile-menu-glass.has-refraction {
      background: var(--brand-ivory);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .site-header .header-glass::after { animation: none; background: none; }
  }
}
@keyframes safari-glass-light {
  from { background-position: 0 0, 10% 50%; }
  to { background-position: 0 0, 88% 50%; }
}