/* nav star · baa.business
   A small "pulsar eye" in the top-right of the nav. Clicking it launches the
   tip.js saucer flyby (button[data-tip-ufo]; tip.js flies it in every TIP_MODE).
   js/star-icon.js draws the SVG into the empty button and plays the click flare.
   Motion is transform/opacity only; prefers-reduced-motion gets a still icon. */

.star-ufo {
  --star-size: 32px;
  --star-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--star-size);
  height: var(--star-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  isolation: isolate;
}
.star-ufo:not(.is-ready) { visibility: hidden; } /* no JS: no dead button */
.star-ufo::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* 44px touch target */
.star-ufo:focus-visible { box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.7), 0 0 0 5px rgba(168, 85, 247, 0.16); }

.star-ufo svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform 0.45s var(--star-ease), filter 0.45s var(--star-ease);
}
.star-ufo:hover svg,
.star-ufo:focus-visible svg {
  transform: scale(1.14);
  filter: brightness(1.22) drop-shadow(0 0 5px rgba(192, 132, 252, 0.55));
}
.star-ufo:active svg { transform: scale(0.93); transition-duration: 0.08s; }

/* ---- placement ----
   desktop: after the last nav item. The wordmark takes the free space so the
   links + star sit together on the right. */
.site-nav .wordmark { margin-right: auto; }
.site-nav .container > .star-ufo { margin-left: 2px; }

/* mobile (styles.css collapses the links at 860px): just left of the hamburger */
@media (max-width: 860px) {
  .site-nav .container > .star-ufo { order: 1; margin-left: 0; margin-right: -6px; }
  .site-nav .container > .nav-toggle { order: 2; }
}

/* pages whose nav has no hamburger (starlink tracker): when the links wrap
   under the wordmark, the star stays top-right on the wordmark row */
@media (max-width: 860px) {
  .site-nav .container:not(:has(> .nav-toggle)) { flex-wrap: wrap; row-gap: 6px; }
  .site-nav .container:not(:has(> .nav-toggle)) > .star-ufo { margin-right: 0; }
  .site-nav .container:not(:has(> .nav-toggle)) > .nav-links { order: 2; flex: 1 1 100%; flex-wrap: wrap; }
}
@media (max-width: 860px) and (min-width: 641px) {
  .site-nav .container:not(:has(> .nav-toggle)) { padding: 10px 0; }
  .site-nav:has(.container:not(:has(> .nav-toggle))) { height: auto; min-height: var(--nav-h); }
}

/* ---- pulsar eye: beams sweep, core beats, iris breathes with the pulse ---- */
.star-ufo .su-o { transform-box: view-box; transform-origin: 16px 16px; }
.star-ufo .su-beams { animation: su-spin 6.5s linear infinite; }
.star-ufo .su-core { animation: su-beat 1.6s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.star-ufo .su-pulse { opacity: 0; animation: su-pulse 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.star-ufo .su-iris { animation: su-dilate 1.6s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.star-ufo .su-fibers { animation: su-spin 28s linear infinite reverse; }
.star-ufo .su-focus { transition: transform 0.6s var(--star-ease); }
.star-ufo .su-lid { opacity: 0.8; transition: opacity 0.45s; }
.star-ufo:hover .su-focus, .star-ufo:focus-visible .su-focus { transform: scale(0.88); } /* the eye focuses */
.star-ufo:hover .su-lid, .star-ufo:focus-visible .su-lid { opacity: 1; }

@keyframes su-spin { to { transform: rotate(360deg); } }
@keyframes su-beat { 0%, 100% { transform: scale(1); opacity: 0.88; } 8% { transform: scale(1.3); opacity: 1; } 30% { transform: scale(1); opacity: 0.92; } }
@keyframes su-pulse { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
@keyframes su-dilate { 0%, 100% { transform: scale(1); } 8% { transform: scale(1.07); } 30% { transform: scale(1); } }

/* ---- click flare (js adds .is-flaring ~0.9s while the saucer launches) ---- */
.star-ufo .su-flash, .star-ufo .su-ring { opacity: 0; pointer-events: none; }
.star-ufo.is-flaring svg { animation: su-pop 0.62s var(--star-ease); }
.star-ufo.is-flaring .su-flash { animation: su-flash 0.6s ease-out both; }
.star-ufo.is-flaring .su-ring { animation: su-ring 0.85s cubic-bezier(0.15, 0.75, 0.25, 1) both; }
.star-ufo.is-flaring .su-fan { animation: su-fan 0.8s var(--star-ease); }
@keyframes su-pop { 0% { transform: scale(0.9); } 30% { transform: scale(1.26); filter: brightness(1.6) drop-shadow(0 0 9px rgba(192, 132, 252, 0.9)); } 100% { transform: scale(1); } }
@keyframes su-flash { 0% { opacity: 0; transform: scale(0.3); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes su-ring { 0% { opacity: 0.95; transform: scale(0.25); stroke-width: 1.4; } 100% { opacity: 0; transform: scale(2.7); stroke-width: 0.15; } }
@keyframes su-fan { 0% { transform: scale(1); } 28% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes su-glow { 0% { opacity: 0; } 25% { opacity: 0.9; } 100% { opacity: 0; } }

/* ---- reduced motion: still icon, glow-only hover and flare
   (tip.js already swaps the flyby for a short in-place fade) ---- */
@media (prefers-reduced-motion: reduce) {
  .star-ufo *, .star-ufo svg { animation: none !important; transition: none !important; }
  .star-ufo .su-pulse { opacity: 0; }
  .star-ufo .su-beams { transform: rotate(28deg); }
  .star-ufo:hover svg, .star-ufo:focus-visible svg { transform: none; filter: brightness(1.3) drop-shadow(0 0 4px rgba(192, 132, 252, 0.5)); }
  .star-ufo:hover .su-focus, .star-ufo:focus-visible .su-focus, .star-ufo:active svg { transform: none; }
  .star-ufo.is-flaring .su-flash { animation: su-glow 0.6s ease-out both !important; }
}