/* The open galaxy never intercepts the page outside its own small objects. */
.cosmic-sky{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden}
.cosmic-object{position:absolute;left:0;top:0;width:54px;height:54px;will-change:transform,opacity;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .38s ease,visibility 0s linear .38s}.cosmic-object.is-ready:not(.is-blocked):not(.is-hidden){opacity:1;visibility:visible;transition:opacity .38s ease,visibility 0s}
.cosmic-object button{position:relative;width:100%;height:100%;padding:4px;display:grid;place-items:center;border:0;background:transparent;cursor:pointer;border-radius:50%;pointer-events:auto;filter:drop-shadow(0 3px 8px rgba(255,181,242,.5));transition:filter .2s,scale .2s}
.cosmic-object button:hover,.cosmic-object button:focus-visible{filter:drop-shadow(0 0 14px rgba(255,214,252,.95));scale:1.16}
.cosmic-object button:focus-visible{outline:3px solid #fce3ff;outline-offset:2px}
.cosmic-object svg{width:100%;height:100%;display:block}
.cosmic-object--star,.cosmic-object--spark{width:46px;height:46px}.cosmic-object--ufo,.cosmic-object--planet{width:66px;height:62px}.cosmic-object--asteroid{width:53px;height:53px}.cosmic-object--moon{width:48px;height:48px}.cosmic-object--visitor{width:57px;height:51px}
.cosmic-sparks{pointer-events:none;position:absolute;left:50%;top:50%;width:118px;height:118px;transform:translate(-50%,-50%) scale(.25);opacity:0;border-radius:50%}
.cosmic-sparks::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 12%,#fff3a8 0 4px,transparent 5px),radial-gradient(circle at 78% 21%,#ffb4df 0 4px,transparent 5px),radial-gradient(circle at 90% 50%,#fff4cf 0 3px,transparent 4px),radial-gradient(circle at 77% 78%,#d9b3ff 0 5px,transparent 6px),radial-gradient(circle at 49% 88%,#ffe8a6 0 4px,transparent 5px),radial-gradient(circle at 20% 77%,#ffb1dc 0 4px,transparent 5px),radial-gradient(circle at 10% 49%,#dfc2ff 0 3px,transparent 4px),radial-gradient(circle at 21% 21%,#fff4ca 0 5px,transparent 6px),radial-gradient(circle at center,rgba(255,216,252,.7) 0 9%,rgba(233,159,255,.24) 24%,transparent 50%);filter:drop-shadow(0 0 7px rgba(246,183,255,.8))}
.cosmic-sparks::after{content:'poof!';position:absolute;left:50%;top:8px;transform:translateX(-50%) rotate(-7deg);padding:4px 9px;border:1px solid #f9daff;border-radius:999px;background:#4a176a;color:#fff8ff;font:800 14px/1.1 Manrope,Arial,sans-serif;letter-spacing:.02em;text-shadow:0 1px 2px #260b3e;box-shadow:0 3px 10px rgba(25,8,48,.45);white-space:nowrap}
.cosmic-object.is-popping button svg{animation:cosmic-pop .48s ease-out forwards}.cosmic-object.is-popping .cosmic-sparks{animation:cosmic-burst 1.4s ease-out forwards}.cosmic-object.is-hidden,.cosmic-object.is-blocked{opacity:0;visibility:hidden;pointer-events:none}.cosmic-object.is-hidden button,.cosmic-object.is-blocked button{pointer-events:none}
.cosmic-play__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes cosmic-pop{0%{transform:scale(1);opacity:1}36%{transform:scale(1.32);opacity:1}100%{transform:scale(.05);opacity:0}}@keyframes cosmic-burst{0%{transform:translate(-50%,-50%) scale(.7);opacity:1}18%{transform:translate(-50%,-50%) scale(1);opacity:1}62%{transform:translate(-50%,-50%) scale(1.06);opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}
@media(max-width:520px){.cosmic-object--ufo,.cosmic-object--planet{width:54px;height:51px}.cosmic-object--visitor{width:49px;height:47px}.cosmic-object--asteroid,.cosmic-object--moon,.cosmic-object--star,.cosmic-object--spark{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.cosmic-object.is-popping button svg,.cosmic-object.is-popping .cosmic-sparks{animation:none!important}.cosmic-object,.cosmic-object button{transition:none!important}}

/* Keep the acknowledgement visible, but still, when motion is paused. */
html[data-motion='paused'] .cosmic-object.is-popping button svg{animation:none!important;opacity:0}
html[data-motion='paused'] .cosmic-object.is-popping .cosmic-sparks{animation:none!important;opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.cosmic-object.is-popping button svg{opacity:0}.cosmic-object.is-popping .cosmic-sparks{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Small, layered highlights make each traveller feel like part of the same sky. */
.cosmic-object button{filter:drop-shadow(0 4px 9px rgba(137,72,189,.45)) drop-shadow(0 0 8px rgba(248,198,255,.28))}
.cosmic-object--star{width:56px;height:56px}
.cosmic-object--star button{filter:drop-shadow(0 0 8px rgba(228,172,255,.8))}
@media(prefers-reduced-motion:no-preference){
  .cosmic-object:not(.is-popping) svg{animation:cosmic-gentle-roll 8s ease-in-out infinite alternate;transform-origin:center}
  .cosmic-object--planet:not(.is-popping) svg,.cosmic-object--moon:not(.is-popping) svg{animation-duration:12s;animation-direction:alternate-reverse}
  .cosmic-object--star:not(.is-popping) svg{animation-duration:6s}
}
@keyframes cosmic-gentle-roll{from{transform:rotate(-5deg) scale(.97)}to{transform:rotate(6deg) scale(1.04)}}
@media(max-width:600px){.cosmic-object--star{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.cosmic-object svg{animation:none!important}}
