.galaxy-scene {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  height: 100svh;
  overflow: hidden;
  background: center center / cover no-repeat rgb(5, 11, 18);
}

.galaxy-scene canvas { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }

.galaxy-scene::after {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(5, 11, 18) 0%, transparent 7%, transparent 94%, rgba(5, 11, 18, 0.4));
}

[hidden] { display: none !important; }

.galaxy-pointer {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 0px;
  height: 0px;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  will-change: transform;
}

.galaxy-pointer.is-visible { opacity: 1; }

.galaxy-pointer span { position: absolute; display: block; pointer-events: none; }

.pointer-aura {
  width: 240px;
  height: 240px;
  left: -120px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 207, 255, 0.082) 0%, rgba(108, 158, 211, 0.035) 35%, transparent 70%);
}

.pointer-star {
  width: 11px;
  height: 11px;
  left: -5.5px;
  top: -5.5px;
  background: rgb(23, 53, 77);
  clip-path: polygon(50% 0px, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0px 50%, 39% 38%);
  filter: drop-shadow(rgb(168, 216, 255) 0px 0px 4px);
  transition: scale 0.18s, background 0.18s;
}

.pointer-star::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--star-color,#E6F7FF);
  clip-path: inherit;
}

.pointer-orbit {
  width: 30px;
  height: 30px;
  left: -15px;
  top: -15px;
  border: 1px solid rgba(169, 215, 251, 0.4);
  border-radius: 50%;
  box-shadow: rgba(113, 181, 236, 0.086) 0px 0px 20px;
  transform: translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0);
  transition: width 0.22s, height 0.22s, left 0.22s, top 0.22s, border-color 0.22s, background 0.22s, scale 0.15s;
}

.pointer-orbit::before {
  content: "";
  position: absolute;
  inset: 6px -4px;
  border: 1px solid rgba(154, 202, 231, 0.23);
  border-radius: 50%;
  transform: rotate(-34deg);
}

.pointer-orbit::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(226, 190, 149);
  box-shadow: rgba(228, 187, 139, 0.5) 0px 0px 7px;
}

.galaxy-pointer.is-link .pointer-orbit {
  width: 48px;
  height: 48px;
  left: -24px;
  top: -24px;
  border-color: rgba(187, 228, 255, 0.65);
  background: rgba(143, 201, 242, 0.1);
  box-shadow: rgba(113, 181, 236, 0.145) 0px 0px 28px;
}

.galaxy-pointer.is-link .pointer-star { --star-color: #FFF; scale: 0.8; }

.galaxy-pointer.is-down .pointer-orbit { scale: 0.78; }

.galaxy-pointer.is-down .pointer-star { scale: 0.65; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.galaxy-cursor, body.galaxy-cursor * { cursor: none !important; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .galaxy-pointer { display: none; }
}

body:has(dialog[open]) .galaxy-pointer { display: none; }

body:has(dialog[open]), body:has(dialog[open]) * { cursor: auto !important; }