/* SILENTPATTERN — responsive corrections.
 *
 * The delivered design overflows horizontally in the header at every width
 * below 1024px: the logo, the desktop link row and the three right-hand
 * controls together exceed the viewport, so the page scrolls sideways and the
 * Access button is cut off. Measured at 390px the document was 438px wide, and
 * at 834px it was 927px.
 *
 * Nothing here changes the desktop appearance. Every rule is inside a
 * max-width media query, so at 1024px and above the design renders exactly as
 * delivered. !important is required because Tailwind's CDN build injects its
 * utilities at runtime, after this sheet.
 */

/* ---- Tablet and below: use the mobile menu instead of the full link row.
        The links were set to appear at md (768px) but do not fit until 1024. */
@media (max-width: 1023.98px) {
  nav > .hidden.md\:flex { display: none !important; }
  nav #mobile-menu-btn   { display: flex !important; }
}

/* ---- Small screens: tighten the header so the Access button fits. */
@media (max-width: 639.98px) {
  nav.px-8 { padding-left: 1rem !important; padding-right: 1rem !important; }
  nav #access-btn {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    font-size: 0.875rem !important;
  }
  nav .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.5rem !important;
  }
  nav .text-xl { font-size: 1.0625rem !important; }
}

@media (max-width: 380px) {
  /* The Lab Navigator glyph duplicates what the mobile menu already offers. */
  nav #lab-nav-btn { display: none !important; }
}

/* ---- A final guard: nothing may cause sideways scrolling on any page. */
html, body { max-width: 100%; }
@media (max-width: 1023.98px) {
  body { overflow-x: hidden; }
}

/* ---- Touch targets. Several controls render below the 24px minimum on
        phones; this lifts them without altering their visual size on
        desktop. */
@media (max-width: 639.98px) and (pointer: coarse) {
  nav a, nav button,
  footer a,
  #mobile-menu a, #mobile-menu button { min-height: 44px; }
  #mobile-menu a { display: flex; align-items: center; }
}

/* ---- Reduced motion.
 *
 * The previous rule here used a universal selector with !important, which
 * stopped every animation on the site: the orb's heartbeat and glow, the
 * neuron paths, and the section reveals. Combined with the runtime skipping
 * the 3D background entirely, a visitor with Windows animation effects
 * switched off saw a flat page and a frozen orb.
 *
 * Reduced motion should mean calmer, not dead. The orb keeps breathing at a
 * slower rate because it is the primary affordance telling people it can be
 * clicked and spoken to. Only travel-based and looping decorative motion is
 * removed.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  /* Decorative motion that serves no signalling purpose. */
  .animate-pulse,
  .neuron-path,
  [class*="animate-"] {
    animation: none !important;
  }

  /* Long transitions become instant, short ones stay for feedback. */
  *, *::before, *::after {
    transition-duration: 0.15s !important;
  }

  /* The orb stays alive, at roughly half speed and reduced travel. */
  #conscious-orb-container {
    animation-duration: 9s, 6s !important;
  }
}