/* Keep the scroll geometry stationary while the glass surface changes shape. */
.header-shell {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 96px;
  pointer-events: none;
}
.header-shell > .site-header {
  --header-duration: .48s;
  --header-ease: cubic-bezier(.22,.68,0,1);
  position: relative;
  top: 0;
  margin-inline: auto;
  pointer-events: auto;
  transform: translateY(0);
  /* A consistent blur avoids a visible filter change at the state boundary. */
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  transition-property: height,width,padding,border-radius,transform,background,box-shadow,border-color,gap;
  transition-duration: var(--header-duration);
  transition-timing-function: var(--header-ease);
}
.header-shell > .site-header.is-scrolled {
  top: 0;
  transform: translateY(12px);
  /* Animate the actual radius, not 9999px (which stays clamped until the end). */
  border-radius: 28px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
.header-shell :is(.identity,.monogram,.identity span:last-child,nav,.header-contact,.header-contact span,.menu-toggle) {
  transition-duration: var(--header-duration);
  transition-timing-function: var(--header-ease);
}
.header-shell .menu-toggle {
  transition-property: padding,margin,font-size,background,border-color,box-shadow,border-radius;
}
@media(max-width:760px) {
  .header-shell { height: 78px; }
  .header-shell > .site-header.is-scrolled { transform: translateY(8px); border-radius: 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .header-shell > .site-header,.header-shell .site-header * { transition: none!important; }
}
@media print {
  .header-shell { position: static; }
  .header-shell > .site-header { transform: none; }
}