/*
 * Fixed header. It starts invisible; js/brand.js sets --dock (0 → 1) as the
 * logo flies in, which fades in the glass bar and the contact buttons.
 */
.site-header {
  --dock: 0;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 10;
  width: min(100%, var(--page-max));
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.site-header__bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: 10px 9px;
}

/* The glass layer fades in on its own so the logo can sit on top of it */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  opacity: var(--dock);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
}

/* Empty slots that mark where the flying logo parts land */
.site-header__slot--icon {
  width: 40px;
  aspect-ratio: 420 / 443;
}

.site-header__slot--name {
  height: 30px;
  aspect-ratio: 600 / 165;
}

.site-header__actions {
  display: flex;
  gap: 8px;
  opacity: var(--dock);
  transform: translateY(calc((1 - var(--dock)) * -6px));
}

.site-header.is-docked a {
  pointer-events: auto;
}

/*
 * The logo layer sits above the header. Without JS it simply shows at the top
 * of the landing page; js/brand.js pins each part over its landing-page spot
 * and moves it into the header slots as you leave the landing page.
 */
.brand {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 6svh);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.brand__part--icon {
  width: auto;
  height: clamp(96px, 17svh, 150px);
}

.brand__part--name {
  width: clamp(200px, 62vw, 280px);
  height: auto;
}

.brand-ready .brand__part {
  position: fixed;
  margin: 0;
  transform-origin: center;
  will-change: transform;
  animation: fade-in 0.9s ease both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}