/* Preserve layout slots so the logo and language selector never move. */
.header.header--hero {
  isolation: isolate;
  height: 88px;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.header--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f7f5f0fa;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 700ms ease, transform 750ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.header--hero :is(#navigation, .account-links, .menu-toggle) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 700ms;
}
.header--hero.is-revealed::before { opacity: 1; transform: translateY(0); }
.header--hero.is-revealed :is(#navigation, .account-links, .menu-toggle) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 70ms, 70ms, 0s;
}
@media (max-width: 600px) { .header.header--hero { height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .header--hero::before, .header--hero :is(#navigation, .account-links, .menu-toggle) { transition: none; }
}