/* Site-wide directional header: visible at the top and while scrolling upward. */
.scroll-header {
  --scroll-header-surface: rgba(4, 6, 6, 0.9);
  will-change: translate;
  transition: translate 0.42s cubic-bezier(.16, 1, .3, 1);
}

.scroll-header.scroll-header--floating {
  z-index: 2147481900 !important;
  background-color: var(--scroll-header-surface) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow: 0 1px 0 rgba(127, 137, 134, 0.14), 0 12px 38px rgba(0, 0, 0, 0.08);
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
}

.scroll-header.scroll-header--hidden {
  pointer-events: none !important;
  translate: 0 calc(-100% - 10px);
}

.scroll-header:not(.scroll-header--hidden) {
  translate: 0 0;
}

.scroll-header-spacer {
  flex: 0 0 auto;
  width: 100%;
  height: 0;
  display: block;
}

.scroll-header.scroll-header--floating + .scroll-header-spacer {
  height: var(--scroll-header-height, 0px);
}

/* The intro header keeps its ghost/failure animation; only its vertical reveal changes. */
.observatory-ghost-header.scroll-header {
  transition:
    translate 0.52s cubic-bezier(.16, 1, .3, 1),
    opacity 1.15s cubic-bezier(.16, 1, .3, 1),
    visibility 1.15s linear;
}

.observatory-ghost-header.scroll-header.scroll-header--floating {
  background-color: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

/* The intro keeps its intermittent ghost/failure pulse even when upward
   scrolling brings the header back into view. */
.observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__brand,
.observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__nav a,
.observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__core {
  animation-play-state: running !important;
}

@media (max-width: 760px) {
  .observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__nav {
    width: calc(100vw - max(96px, calc(env(safe-area-inset-right) + 96px)));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__nav::-webkit-scrollbar {
    display: none;
  }

  .observatory-ghost-header.scroll-header--engaged .observatory-ghost-header__nav a:nth-child(n + 4) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-header {
    transition-duration: 0.01ms !important;
  }
}