/* Shared nav bar for mount.yashyp.com
   Everything is scoped under #site-nav so it cannot collide with the
   bare-element rules (h1, button, div) the animation pages declare. */

#site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  box-sizing: border-box;
  background: rgba(13, 17, 23, 0.82);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid #1f2733;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  user-select: none;
}

#site-nav .mark {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e8ebf1;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

#site-nav .mark .glyph {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: #f0a03c;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

#site-nav .mark:hover .glyph {
  transform: rotate(135deg);
}

#site-nav .links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

#site-nav .links a {
  position: relative;
  color: #7d8798;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

#site-nav .links a:hover {
  color: #e8ebf1;
  background: #171e29;
}

#site-nav .links a[aria-current="page"] {
  color: #f0a03c;
  background: rgba(240, 160, 60, 0.09);
}

#site-nav a:focus-visible {
  outline: 2px solid #f0a03c;
  outline-offset: 2px;
}

/* Key hint, hidden when there is no room for it */
#site-nav .keys {
  color: #4e5765;
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 780px) {
  #site-nav .keys {
    display: none;
  }
}

@media (max-width: 520px) {
  #site-nav {
    gap: 10px;
    padding: 0 12px;
  }
  #site-nav .mark .label {
    display: none;
  }
  #site-nav .links a {
    padding: 6px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-nav .mark .glyph,
  #site-nav .links a {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Offset shim.

   The animation pages position their own UI with fixed coordinates measured
   from the top of the viewport. These rules push those elements below the bar.
   The canvas is left alone, so it stays full-bleed underneath the translucent
   bar. Bottom-anchored elements (#hint, #bar, #trace, #note) need no change.
   --------------------------------------------------------------------------- */

html[data-page="dock"] #panel,
html[data-page="spring"] #panel {
  top: 44px;
}

html[data-page="dock"] #facts,
html[data-page="spring"] #facts {
  top: 62px;
}

html[data-page="spring"] #contact {
  top: 66px;
}

html[data-page="mount"] #hud {
  padding-top: 60px;
}