/* Shared resilience and accessibility layer for every DiffSwarm page. */

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent-primary, #c9982a);
  outline-offset: 3px;
}

/* Content is readable even when JavaScript or IntersectionObserver fails. */
.reveal,
.reveal.active {
  opacity: 1 !important;
  transform: none !important;
}

.site-menu-button {
  display: none;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(201, 152, 42, 0.35);
  border-radius: 7px;
  background: rgba(201, 152, 42, 0.08);
  color: var(--accent-primary, #c9982a);
  font: 600 0.78rem/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-inner {
    position: relative;
  }

  /* No-JS fallback: keep the navigation available as a compact scroll row. */
  .nav-links {
    display: flex !important;
    max-width: min(62vw, 28rem);
    gap: 1rem !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .nav-links > * {
    flex: 0 0 auto;
  }

  html.site-menu-ready .site-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  html.site-menu-ready .nav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 0.85rem);
    right: 1rem;
    width: min(20rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100vh - 7rem);
    padding: 0.75rem;
    overflow: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(10, 15, 24, 0.98);
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  html.site-menu-ready .nav-links.site-menu-open {
    display: flex !important;
  }

  html.site-menu-ready .nav-link,
  html.site-menu-ready .nav-cta {
    display: block;
    width: 100%;
    padding: 0.8rem 0.9rem;
    text-align: left;
    border-radius: 7px;
  }

  html.site-menu-ready .nav-link:hover,
  html.site-menu-ready .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  #swarm-canvas {
    display: none;
  }
}