/* Small, opt-in interaction layer. The base page remains fully usable without it. */
.motion-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 2px;
  pointer-events: none;
  background: transparent;
}

.motion-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 10px #74e8ef66;
  transform-origin: left center;
}

.motion-orbit {
  transform: translate3d(var(--motion-orbit-x, 0), var(--motion-orbit-y, 0), 0)
    perspective(900px)
    rotateX(var(--motion-orbit-rotate-x, 0deg))
    rotateY(var(--motion-orbit-rotate-y, 0deg))
    rotateZ(var(--motion-orbit-rotate-z, 0deg));
  transform-origin: 50% 50%;
  transition: transform .16s cubic-bezier(.2,.8,.2,1);
}

.motion-orbit .orbit { width: 100%; }

.orbit-nav {
  position: absolute;
  inset: 3% 4%;
  z-index: 2;
  min-height: 94%;
  color: var(--muted);
}

.orbit-destinations { position: absolute; inset: 0; }
.orbit-destination {
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 2px;
  color: #aebdd1;
  font: 12px ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .18s ease, text-shadow .18s ease;
}
.orbit-destination:hover,
.orbit-destination:focus-visible,
.orbit-destination.is-selected {
  color: var(--cyan);
  text-shadow: 0 0 16px #74e8ef70;
}
.orbit-destination::before {
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  content: "";
  flex-shrink: 0;
  opacity: 0;
}
.orbit-destination.is-selected::before { opacity: 1; }
.orbit-destination-profile { top: 6%; left: 50%; transform: translateX(-50%); }
.orbit-destination-software { top: 50%; right: 1%; transform: translateY(-50%); }
.orbit-destination-decodes { bottom: 6%; left: 50%; transform: translateX(-50%); }
.orbit-destination-connect { top: 50%; left: 1%; transform: translateY(-50%); }
.orbit-current {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #445472;
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  transform: translate(-50%, -50%);
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.orbit-current:hover, .orbit-current:focus-visible { border-color: var(--cyan); color: var(--cyan); background: #0a1620b8; }
.orbit-current span { color: var(--cyan); font-size: 17px; line-height: 1; }

.motion-project-card {
  position: relative;
  isolation: isolate;
}

.motion-project-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--motion-glow-x, 50%) var(--motion-glow-y, 50%), #74e8ef18, transparent 48%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.motion-enabled .motion-project-card {
    transition: border-color .2s ease, box-shadow .25s ease;
  }

  html.motion-enabled .motion-project-card:hover,
  html.motion-enabled .motion-project-card:focus-within {
    border-color: #617893;
    box-shadow: 0 14px 36px #02050d55;
  }

  html.motion-enabled .motion-project-card:hover::after,
  html.motion-enabled .motion-project-card:focus-within::after { opacity: 1; }

  html.motion-enabled .motion-project-card:nth-child(1) .project-visual img,
  html.motion-enabled .motion-project-card:nth-child(2) .project-visual img,
  html.motion-enabled .motion-project-card:nth-child(3) .project-visual img {
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
  }

  html.motion-enabled .motion-project-card:nth-child(1):hover .project-visual img { transform: rotate(-1.2deg) scale(1.025); }
  html.motion-enabled .motion-project-card:nth-child(2):hover .project-visual img { transform: translateY(-2px) scale(1.025); }
  html.motion-enabled .motion-project-card:nth-child(3):hover .project-visual img { transform: translateY(-2px) scale(1.02); }
  html.motion-enabled .motion-project-card:focus-within:nth-child(1) .project-visual img { transform: rotate(-1.2deg) scale(1.025); }
  html.motion-enabled .motion-project-card:focus-within:nth-child(2) .project-visual img { transform: translateY(-2px) scale(1.025); }
  html.motion-enabled .motion-project-card:focus-within:nth-child(3) .project-visual img { transform: translateY(-2px) scale(1.02); }
}

html.motion-enabled nav a[aria-current="location"] { color: var(--text); }
html.motion-enabled nav a.nav-connect[aria-current="location"] { border-color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .motion-orbit { transform: none !important; transition: none; }
  .motion-project-card::after { display: none; }
  .motion-project-card:hover .project-visual img,
  .motion-project-card:focus-within .project-visual img { transform: none !important; }
}

@media (max-width: 600px) {
  .orbit-nav { position: relative; inset: auto; min-height: 0; margin-top: 8px; }
  .orbit-destinations { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2px 16px; }
  .orbit-destination,
  .orbit-destination-profile,
  .orbit-destination-software,
  .orbit-destination-decodes,
  .orbit-destination-connect { position: relative; inset: auto; transform: none; justify-content: center; white-space: normal; overflow-wrap: anywhere; }
  .orbit-current { display: none; }
  .hero-art .orbit-coordinate { display: none; }
}