/* Hero background, 21 Oct 2026 (owner): no network lines; dots drift slowly and a few glow in turn.
   Transform and opacity only, paused while the hero is off screen, still for reduced motion. */

/* Lines out: the link paths, orbit, route and travelling streaks on desktop, and the phone constellation's paths.
   Every dot stays, including the pulse that travels the route. */
.hero :is(.logic-links, .logic-orbit, .logic-route, .logic-route__glow, .logic-flow),
.hero .plane__drift > g[stroke],
.hero__constellation path,
.hero .flow__gate, .hero .flow > b { display: none; }

.motes { position: absolute; inset-block: 0; left: 0; width: var(--seam); overflow: hidden; pointer-events: none; }
.motes i {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c); opacity: var(--o);
  animation: mote-drift var(--t) ease-in-out var(--dl) infinite alternate;
}
.motes i.g {
  box-shadow: 0 0 calc(var(--s) * 3) var(--c);
  animation: mote-drift var(--t) ease-in-out var(--dl) infinite alternate, mote-glow var(--p) ease-in-out var(--pd) infinite;
}
@keyframes mote-drift { to { transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)); } }
@keyframes mote-glow { 0%, 100% { opacity: var(--o); } 45%, 55% { opacity: 1; } }
.motes.is-paused i { animation-play-state: paused; }

@media (max-width: 900px) {
  .motes { width: 100%; height: 62%; inset-block: 0 auto; }
  .motes i:nth-child(n+29) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .motes i { animation: none; } }

/* Wireframe globe (owner, 21 Oct 2026): a canvas drawn and placed by js/globe.js; hidden until it finds room. */
.globe { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity 1200ms var(--e-out); }
.globe.is-on { opacity: 1; }