@keyframes header-elevate {
  from {
    box-shadow: none;
    background: rgba(248, 250, 252, 0.55);
  }
  to {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    background: rgba(248, 250, 252, 0.8);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.6);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);

  @supports (animation-timeline: scroll()) {
    animation: header-elevate linear both;
    animation-timeline: scroll(root);
    animation-range: 0px 80px;
  }
  @media (prefers-reduced-motion: reduce) {
    animation: none !important;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;

  /* The free space sits right after the brand, so everything else - camera
     toggle, nav, accent picker, menu button - stays grouped on the right in
     DOM order. Putting the auto margin on the brand rather than on the first
     right-hand item keeps it working when that item isn't there: the camera
     toggle is feature-detected and stays [hidden] where it can't run, which
     would otherwise collapse the whole layout to the left. */
  & > .brand {
    margin-right: auto;
  }
}

.brand {
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;

  & span {
    color: var(--accent-on-light);
  }

  &:focus-visible {
    outline: 2px solid var(--accent-on-light);
    outline-offset: 4px;
  }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;

  & a {
    position: relative;
    font-size: 14px;
    color: var(--ink-700);
    border-radius: 4px;
    transition: color 160ms ease;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 2px;
      border-radius: 1px;
      background: var(--accent-on-light);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 200ms ease;
    }
    &:hover,
    &:focus-visible {
      color: var(--accent-on-light);
    }
    &:hover::after,
    &:focus-visible::after {
      transform: scaleX(1);
    }
    &:focus-visible {
      outline: 2px solid var(--accent-on-light);
      outline-offset: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;

      &::after {
        transition: none;
      }
    }
  }

  @media (max-width: 760px) {
    display: none;
  }
}

/* <accent-picker> builds its shadow DOM only after awaiting a dynamic import,
   so the element has no intrinsic size until that module resolves - and these
   rules live in the light DOM specifically so they apply before then, while
   the shadow root's own :host block doesn't exist yet.

   Without the reservation the nav reflows once the swatches appear. That's
   worse than it sounds now that .site-header is a named view-transition
   group: an incoming page whose picker hasn't upgraded yet snapshots a
   narrower header than the outgoing one, so the whole header appears to shift
   mid-navigation. It also keeps the layout honest if the module fails to load
   at all.

   Three 16px swatches plus two 10px gaps, matching the swatch geometry in
   accent-picker.js. Keep the count in step with the `colors` attribute in
   _includes/layouts/base.njk. */
accent-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: calc(3 * 16px + 2 * 10px);
  min-height: 16px;
}

.header-pixel-cam-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--ink-700);
  transition: color 160ms ease;

  &:hover,
  &:focus-visible {
    color: var(--accent-on-light);
  }
  &:focus-visible {
    outline: 2px solid var(--accent-on-light);
    outline-offset: 2px;
  }
  &[aria-pressed="true"] {
    color: var(--accent);
    animation: pixel-cam-pulse 1.6s ease-in-out infinite;
  }
  &[hidden] {
    display: none;
  }
}
@keyframes pixel-cam-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header-pixel-cam-toggle[aria-pressed="true"] {
    animation: none;
  }
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 4px;
  background: none;
  padding: 0;

  & span {
    display: block;
    height: 2px;
    background: var(--ink-950);
    border-radius: 2px;
  }

  &:focus-visible {
    outline: 2px solid var(--accent-on-light);
    outline-offset: 2px;
  }

  @media (max-width: 760px) {
    display: flex;
  }
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100%;
  margin: 0;
  border: none;
  max-width: none;
  max-height: none;
  width: min(80vw, 320px);
  background: var(--bg-dark);
  color: var(--ink-200);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);

  &.is-open {
    transform: translateX(0);

    & .mobile-nav-links a {
      opacity: 1;
      transform: none;
      transition-delay: calc(320ms + var(--i, 0) * 45ms);
    }
  }

  &::backdrop {
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 260ms ease;
  }
  &.is-open::backdrop {
    opacity: 1;
  }

  @media (min-width: 761px) {
    display: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    transition: none !important;

    &::backdrop {
      transition: none !important;
    }
  }
}

.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--ink-200);
  font-size: 28px;
  line-height: 1;

  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & a {
    display: inline-block;
    font-size: 18px;
    opacity: 0;
    transform: translateY(16px);
    border-radius: 4px;
    transition:
      opacity 220ms ease,
      transform 220ms ease;

    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none !important;
    }
  }
}