/* Shared site nav for the Showspring preview pages. ONE source of truth so the
   nav is byte-identical on every page and can never drift again. Injected by
   nav.js into <div id="site-nav">. Colours use the page theme vars (defined
   identically on every preview page); spacing is literal so a page without the
   --s-* scale still renders correctly. */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg), transparent 15%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max, 1200px); margin: 0 auto;
  padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
}
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 24px; align-items: center; font-size: 14px; }
.nav-links a { color: var(--text-mute); font-weight: 500; text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--amber); }

/* ── Ambient-soundtrack toggle (right of the links) ── */
.audio-toggle {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-mute);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.audio-toggle:hover { border-color: var(--border-hi); color: var(--text); }
.audio-toggle.playing { border-color: var(--amber); color: var(--amber); background: color-mix(in oklch, var(--amber), transparent 92%); }
/* Discoverability toast — lives right of the audio-toggle, fades up when ambient starts */
.audio-toast {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: color-mix(in oklch, var(--bg-elev) 92%, var(--amber));
  border: 1px solid color-mix(in oklch, var(--amber), transparent 55%);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), visibility 420ms linear;
  z-index: 20;
}
.audio-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.audio-toast-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 10px color-mix(in oklch, var(--amber), transparent 40%);
  animation: audio-toast-pulse 1.1s ease-in-out infinite;
}
@keyframes audio-toast-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@media (max-width: 720px) {
  .audio-toast {
    position: fixed;
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px);
  }
  .audio-toast.show { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .audio-toast { transition: none; }
  .audio-toast-dot { animation: none; }
}
.audio-toggle.awaiting { border-color: var(--amber-dim); color: var(--amber); animation: wink 2.4s ease-in-out infinite; }
@keyframes wink { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.audio-toggle svg { width: 14px; height: 14px; }
.audio-toggle .bars line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.audio-toggle.playing .bars line { animation: eq 1.2s ease-in-out infinite; }
.audio-toggle.playing .bars line:nth-child(1) { animation-delay: 0s; }
.audio-toggle.playing .bars line:nth-child(2) { animation-delay: -0.4s; }
.audio-toggle.playing .bars line:nth-child(3) { animation-delay: -0.8s; }
@keyframes eq { 0%,100% { transform: scaleY(0.6); transform-origin: center; } 50% { transform: scaleY(1); } }

@media (max-width: 760px) { .nav-links a:not(.active) { display: none; } }