/* Decorative effects cannot intercept clicks or form input. */
body { isolation: isolate; }
.starfield { position: fixed; inset: 0; height: 100%; overflow: hidden; }
.star-canvas { display: block; width: 100%; height: 100%; }
.universe.is-orbiting .satellite {
    left: 50%; top: 49%; right: auto; bottom: auto;
    transition: border-color .2s, background .2s;
    will-change: transform;
}
.universe.is-orbiting .satellite:hover,
.universe.is-orbiting .satellite:focus-visible {
    border-color: var(--accent); background: #151b29;
}
.motion-toggle {
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%); z-index: 3;
    padding: 6px 12px; border: 1px solid #e9bb7033; border-radius: 5px;
    background: #0b101be8; color: #c6bcaa; font-size: 12px;
    white-space: nowrap;
}
.motion-toggle:hover { color: var(--gold); border-color: #e9bb7066; }
.universe.is-orbiting .orbit-star { animation: orbit-twinkle 6s ease-in-out infinite; }
.universe.is-orbiting .star-two { animation-delay: -2s; animation-duration: 9s; }
.universe.is-orbiting .star-three { animation-delay: -4s; animation-duration: 7s; }
.universe.motion-paused .orbit-star { animation-play-state: paused; }
@keyframes orbit-twinkle {
    0%, 100% { opacity: .2; transform: scale(.85); }
    50% { opacity: .85; transform: scale(1.08); }
}
.universe:has(.motion-toggle:not([hidden])) .universe-coordinate { bottom: 39px; }
@media (prefers-reduced-motion: reduce) {
    .motion-toggle { display: none; }
    .star-canvas { opacity: .65; }
}