/* ──────────────────────────────────────────────────────────
   Orbit Sigil — 3D site-wide menu trigger.
   Two crossing rings + two satellites on different orbital
   planes + a tiny central pip. Reuses the existing
   .nav-toggle / .soulsin-menu-toggle markup (3 spans) so no
   HTML changes are required.

   Layers:
     button::after       → centre pip
     span:nth-child(1)   → ring A  (self) + ring B (::before)
     span:nth-child(2)   → orbit A pivot + satellite A (::before)
     span:nth-child(3)   → orbit B pivot + satellite B (::before)

   Accent comes from --orbit-accent set per page.
────────────────────────────────────────────────────────── */

.nav-toggle,
.soulsin-menu-toggle {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 68px;
  height: 68px;
  position: relative;
  perspective: 320px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* central pip */
.nav-toggle::after,
.soulsin-menu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  opacity: .85;
  box-shadow: 0 0 4px var(--orbit-accent, #5EEAD4);
  pointer-events: none;
}

.nav-toggle span,
.soulsin-menu-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
}

/* ── Rings (span 1 = ring A, ::before = ring B) ── */
.nav-toggle span:nth-child(1),
.soulsin-menu-toggle span:nth-child(1) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 1px solid var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  background: transparent !important;
  transform: rotateX(60deg);
  opacity: .9;
  box-shadow: 0 0 6px rgba(0,0,0,0);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.nav-toggle span:nth-child(1)::before,
.soulsin-menu-toggle span:nth-child(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  transform: rotateZ(60deg) rotateX(60deg);
  opacity: .8;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

/* ── Orbit A — pivot (span 2) animates around its local Z axis,
      held inside a plane tilted by rotateX(65deg). Satellite A
      sits at the right edge via ::before. ── */
.nav-toggle span:nth-child(2),
.soulsin-menu-toggle span:nth-child(2) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  animation: orbit-a 5s linear infinite;
}
.nav-toggle span:nth-child(2)::before,
.soulsin-menu-toggle span:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--orbit-accent, #5EEAD4);
}

/* ── Orbit B — pivot (span 3) animates in a perpendicular plane.
      Different speed and direction so the dance is non-trivial. ── */
.nav-toggle span:nth-child(3),
.soulsin-menu-toggle span:nth-child(3) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  animation: orbit-b 6.8s linear infinite reverse;
}
.nav-toggle span:nth-child(3)::before,
.soulsin-menu-toggle span:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--orbit-accent, #5EEAD4);
  opacity: .85;
}

/* ── Hover — slow brighten, satellites speed up a touch ── */
.nav-toggle:hover span:nth-child(1),
.soulsin-menu-toggle:hover span:nth-child(1),
.nav-toggle:hover span:nth-child(1)::before,
.soulsin-menu-toggle:hover span:nth-child(1)::before {
  opacity: 1;
  box-shadow: 0 0 8px var(--orbit-accent, #5EEAD4);
}
.nav-toggle:hover span:nth-child(2),
.soulsin-menu-toggle:hover span:nth-child(2) {
  animation-duration: 2.4s;
}
.nav-toggle:hover span:nth-child(3),
.soulsin-menu-toggle:hover span:nth-child(3) {
  animation-duration: 3.2s;
}
.nav-toggle:hover::after,
.soulsin-menu-toggle:hover::after {
  opacity: 1;
}

/* ── Open state — flatten 3D to face-on, BUT keep both rings and
      both satellites in motion (now orbiting in 2D).
      !important wins over per-page inline body.menu-open hamburger rules. */

/* Outer ring — flatten to face-on, brighten */
body.menu-open .nav-toggle span:nth-child(1),
body.menu-open .soulsin-menu-toggle span:nth-child(1) {
  width: 52px !important;
  height: 52px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -26px 0 0 -26px !important;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
  border: 1px solid var(--orbit-accent, #5EEAD4) !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px var(--orbit-accent, #5EEAD4) !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1) !important;
}

/* Inner ring — also flat, smaller so it's visibly distinct */
body.menu-open .nav-toggle span:nth-child(1)::before,
body.menu-open .soulsin-menu-toggle span:nth-child(1)::before {
  inset: 7px !important;
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
  border: 1px solid var(--orbit-accent, #5EEAD4) !important;
  border-radius: 50% !important;
  opacity: .55 !important;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease !important;
}

/* Satellite A — keeps orbiting, now in a flat (face-on) plane */
body.menu-open .nav-toggle span:nth-child(2),
body.menu-open .soulsin-menu-toggle span:nth-child(2) {
  width: 52px !important;
  height: 52px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -26px 0 0 -26px !important;
  background: transparent !important;
  opacity: 1 !important;
  animation: orbit-a-flat 5s linear infinite !important;
  animation-play-state: running !important;
  transition: opacity .3s ease !important;
}
body.menu-open .nav-toggle span:nth-child(2)::before,
body.menu-open .soulsin-menu-toggle span:nth-child(2)::before {
  opacity: 1 !important;
}

/* Satellite B — keeps orbiting on the inner ring radius, opposite direction */
body.menu-open .nav-toggle span:nth-child(3),
body.menu-open .soulsin-menu-toggle span:nth-child(3) {
  width: 33px !important;
  height: 33px !important;
  top: 50% !important;
  left: 50% !important;
  margin: -16.5px 0 0 -16.5px !important;
  background: transparent !important;
  opacity: 1 !important;
  animation: orbit-b-flat 6.8s linear infinite reverse !important;
  animation-play-state: running !important;
  transition: opacity .3s ease !important;
}
body.menu-open .nav-toggle span:nth-child(3)::before,
body.menu-open .soulsin-menu-toggle span:nth-child(3)::before {
  opacity: 1 !important;
}

/* Animations.
   Each keeps its plane tilt fixed and animates rotateZ
   (rotation in the local plane). Plane tilts differ so the
   two orbits sweep different paths. */
@keyframes orbit-a {
  from { transform: rotateX(60deg) rotateZ(0deg); }
  to   { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes orbit-b {
  from { transform: rotateZ(60deg) rotateX(60deg) rotateZ(0deg); }
  to   { transform: rotateZ(60deg) rotateX(60deg) rotateZ(360deg); }
}

/* Flat orbits — used in the open state. Pure rotateZ, face-on. */
@keyframes orbit-a-flat {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes orbit-b-flat {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}


/* ── Standalone Orbit Sigil ── */
.orbit-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  position: relative;
  perspective: 320px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  background: transparent;
  border: none;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.orbit-sigil::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  opacity: .85;
  box-shadow: 0 0 4px var(--orbit-accent, #5EEAD4);
  pointer-events: none;
}
.orbit-sigil span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  background: transparent !important;
  box-shadow: none !important;
  transform-style: preserve-3d;
}
.orbit-sigil span:nth-child(1) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 1px solid var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  transform: rotateX(60deg);
  opacity: .9;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.orbit-sigil span:nth-child(1)::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  transform: rotateZ(60deg) rotateX(60deg);
  opacity: .8;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.orbit-sigil span:nth-child(2) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  animation: orbit-a 5s linear infinite;
}
.orbit-sigil span:nth-child(2)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--orbit-accent, #5EEAD4);
}
.orbit-sigil span:nth-child(3) {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  animation: orbit-b 6.8s linear infinite reverse;
}
.orbit-sigil span:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--orbit-accent, #5EEAD4);
  border-radius: 50%;
  box-shadow: 0 0 5px var(--orbit-accent, #5EEAD4);
  opacity: .85;
}
.orbit-sigil:hover span:nth-child(1),
.orbit-sigil:hover span:nth-child(1)::before {
  opacity: 1;
  box-shadow: 0 0 12px var(--orbit-accent, #5EEAD4);
}
.orbit-sigil:hover span:nth-child(2) { animation-duration: 2.4s; }
.orbit-sigil:hover span:nth-child(3) { animation-duration: 3.2s; }
.orbit-sigil:hover::after { opacity: 1; }

/* ── Orbit Backdrop — flat blueprint, colour-matched to page ── */
.ni-orbit-backdrop {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  margin-top: -90vmax;
  margin-left: -90vmax;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.04);
  transition: all 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When inside overlay, fill it absolutely */
.ni-overlay > .ni-orbit-backdrop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  margin-top: -90vmax;
  margin-left: -90vmax;
}

/* Expand behind menu */
body.menu-open .ni-orbit-backdrop {
  transform: scale(1);
  opacity: 0.6;
}

/* All wrapper divs fill the backdrop and centre their SVG */
.ni-orbit-backdrop .ob-blueprint,
.ni-orbit-backdrop .ob-sat-a,
.ni-orbit-backdrop .ob-sat-b,
.ni-orbit-backdrop .ob-sat-c,
.ni-orbit-backdrop .ob-dot-a,
.ni-orbit-backdrop .ob-dot-b,
.ni-orbit-backdrop .ob-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ni-orbit-backdrop svg {
  display: block;
  overflow: visible;
}

/* ── Blueprint — flat concentric rings, ticks, spokes ── */
.ob-blueprint {
  width: 1080px;
  height: 1080px;
  margin: -540px 0 0 -540px;
}
.ob-blueprint svg { width: 100%; height: 100%; }

/* ── Satellite A — large orbit ── */
.ob-sat-a {
  width: 1840px;
  height: 1840px;
  margin: -920px 0 0 -920px;
  animation: orbit-a-flat 5s linear infinite;
}
.ob-sat-a svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  margin-right: -26px;
}

/* ── Satellite B — medium orbit, reverse ── */
.ob-sat-b {
  width: 1400px;
  height: 1400px;
  margin: -700px 0 0 -700px;
  animation: orbit-b-flat 6.8s linear infinite reverse;
}
.ob-sat-b svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-right: -20px;
}

/* ── Satellite C — small orbit, slower ── */
.ob-sat-c {
  width: 1040px;
  height: 1040px;
  margin: -520px 0 0 -520px;
  animation: orbit-c-flat 8.5s linear infinite;
}
.ob-sat-c svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-right: -18px;
}

/* ── Dot A — small orbiting marker ── */
.ob-dot-a {
  width: 1560px;
  height: 1560px;
  margin: -780px 0 0 -780px;
  animation: orbit-a-flat 4.2s linear infinite reverse;
}
.ob-dot-a svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-right: -9px;
}

/* ── Dot B — tiny orbiting marker ── */
.ob-dot-b {
  width: 1200px;
  height: 1200px;
  margin: -600px 0 0 -600px;
  animation: orbit-b-flat 3.5s linear infinite;
}
.ob-dot-b svg {
  position: absolute;
  top: 50%;
  right: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-right: -7px;
}

/* ── Pulse — breathing ring at center ── */
.ob-pulse {
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  animation: blueprint-pulse 3s ease-in-out infinite;
}
.ob-pulse svg { width: 100%; height: 100%; }

/* ── Animations ── */
@keyframes orbit-a-flat {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes orbit-b-flat {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes orbit-c-flat {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes blueprint-pulse {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle span:nth-child(2),
  .soulsin-menu-toggle span:nth-child(2),
  .nav-toggle span:nth-child(3),
  .soulsin-menu-toggle span:nth-child(3),
  .ni-orbit-backdrop .ob-sat-a,
  .ni-orbit-backdrop .ob-sat-b,
  .ni-orbit-backdrop .ob-sat-c,
  .ni-orbit-backdrop .ob-dot-a,
  .ni-orbit-backdrop .ob-dot-b,
  .ni-orbit-backdrop .ob-pulse {
    animation: none;
  }
}