/* Chapter 6: the orbit. A fixed 680px world, scaled with --k. */

.orb { padding: 16vh var(--gutter); }
.orb__inner { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4vw; align-items: center; }
.orb__copy { display: grid; gap: 24px; }
.orb__search { display: flex; align-items: center; gap: 10px; max-width: 420px; height: 52px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 12px 30px -20px rgba(20, 20, 30, 0.35); margin-top: 8px; color: var(--grey-2); transition: box-shadow 200ms var(--ease-out); }
.orb__search:focus-within { box-shadow: 0 0 0 1.5px var(--gold-deep), 0 0 0 5px var(--gold-soft); }
.orb__search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.orb__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 15.5px var(--sans); color: var(--ink); }
.orb__search input::placeholder { color: var(--grey-3); }
.orb__count { color: var(--grey-2); min-height: 1.4em; }

.orb__field { --k: 1; position: relative; width: 100%; aspect-ratio: 1; max-width: 680px; justify-self: center; }
.orb__field > * { position: absolute; left: 50%; top: 50%; }
.orb__dust { width: 680px; height: 680px; margin: -340px 0 0 -340px; transform: scale(var(--k)); animation: spin 260s linear infinite; }
.orb__rings { width: 0; height: 0; transform: scale(var(--k)); }
.orb__core { width: 190px; height: 190px; margin: -95px 0 0 -95px; transform: scale(var(--k)); color: var(--ink); }
.orb__core .monad-svg { width: 100%; height: 100%; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes spin-back { to { rotate: -360deg; } }

.or { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 0; width: 0; height: 0; animation: spin var(--dur) linear infinite; animation-direction: var(--dirn, normal); }
.or[style*='--dir:-1'] { --dirn: reverse; }
.or::before { content: ''; position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); border-radius: 50%; border: 1px solid rgba(10, 10, 10, 0.07); }
.ol { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)); }
.ol__chip {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 22px -12px rgba(20, 20, 30, 0.35); color: var(--ink);
  animation: spin var(--dur) linear infinite; animation-direction: var(--dirn-inv, reverse);
  transition: box-shadow 250ms var(--ease-out), scale 400ms var(--spring), opacity 250ms;
}
.or[style*='--dir:-1'] .ol__chip { --dirn-inv: normal; }
.ol__chip svg { width: 20px; height: 20px; fill: currentColor; }
.ol__chip em { position: absolute; top: 50px; left: 50%; translate: -50% 0; font: 500 11px var(--sans); font-style: normal; white-space: nowrap; color: var(--ink); background: #fff; padding: 3px 8px; border-radius: 999px; box-shadow: 0 0 0 1px var(--hairline); opacity: 0; pointer-events: none; transition: opacity 200ms; }
.ol__chip:hover em, .ol__chip:focus-visible em, .is-hit .ol__chip em { opacity: 1; }
.ol__chip:hover { scale: 1.15; }
.is-searching .ol:not(.is-hit) .ol__chip { opacity: 0.25; }
.is-hit .ol__chip { scale: 1.3; box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 6px var(--gold-soft), 0 14px 26px -12px rgba(20, 20, 30, 0.4); z-index: 2; }

@media (max-width: 900px) {
  .orb { padding: 96px var(--gutter); }
  .orb__inner { grid-template-columns: 1fr; gap: 40px; }
  .orb__field { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .or, .ol__chip, .orb__dust { animation: none; } }