/* Apply the reference's glass and slide to the existing header. */
html body .site-header[data-ban-glass-header] {
  background: rgb(255 255 255 / 10%) !important;
  border-bottom: 1px solid rgb(150 177 190 / 20%) !important;
  box-shadow: 0 3px 18px rgb(14 39 53 / 5%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  transition: transform 200ms ease-in-out;
}

html body .site-header[data-ban-glass-header] .main-nav:not(.is-open) {
  background: transparent !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html body .site-header[data-ban-glass-header].ban-nav-hidden:not(:has(:focus-visible, .main-nav.is-open)) {
    transform: translateY(calc(-100% - 18px));
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header[data-ban-glass-header] {
    transition: none;
  }
}

.site-header .brand .ban-brand-globe {
  position: relative;
  display: inline-grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.site-header .brand .ban-brand-globe img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  animation: none;
}
.site-header .brand .ban-brand-globe img.ban-brand-shell {
  animation: ban-brand-spin 34s linear infinite;
}
@keyframes ban-brand-spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
  .site-header .brand .ban-brand-globe { width: 45px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand .ban-brand-globe img.ban-brand-shell { animation: none; }
}