/* A quiet invitation fills only while the visitor holds it. */
.contact-invitation{position:absolute;z-index:11;left:50%;bottom:89px;transform:translateX(-50%);display:block;isolation:isolate;overflow:hidden;min-height:52px;max-width:calc(100% - 36px);padding:0;border:1px solid #d5d5c645;border-radius:999px;background:#22251fe8;color:var(--paper);font-size:12px;line-height:1.35;letter-spacing:-.1px;box-shadow:0 8px 25px #0003;backdrop-filter:blur(12px);animation:contact-in 1.1s cubic-bezier(.16,1,.3,1) both;transition:background .3s,border-color .3s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.contact-invitation-base,.contact-invitation-fill{display:flex;align-items:center;justify-content:center;gap:22px;min-height:52px;padding:6px 7px 6px 24px}
.contact-invitation-fill{position:absolute;inset:0;color:#141513;background:var(--galaxy-color);clip-path:inset(0 calc((1 - var(--contact-charge,0))*100%) 0 0);transition:clip-path .28s ease-out;pointer-events:none}
.contact-invitation.is-holding .contact-invitation-fill{transition:none}
.contact-invitation-copy{display:flex;flex-direction:column;gap:2px;text-align:left;white-space:nowrap}
.contact-invitation-duration{font:8px monospace;letter-spacing:.04em;opacity:.65}
.contact-invitation-arrow{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--galaxy-color);color:#141513;font-size:17px;transition:transform .3s}
.contact-invitation-fill .contact-invitation-arrow{background:#141513;color:var(--galaxy-color)}
.contact-invitation:hover,.contact-invitation:focus-visible,.contact-invitation.is-holding{border-color:var(--galaxy-color);background:#2b2e26}
.contact-invitation.is-holding .contact-invitation-arrow{transform:rotate(45deg)}
.contact-rift{position:fixed;inset:0;z-index:60;pointer-events:none;isolation:isolate;overflow:hidden}
.contact-rift>canvas{position:absolute;inset:0;opacity:1!important;width:100%;height:100%;transition:none}

.contact-departing .world{pointer-events:none}
@keyframes contact-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:700px){.contact-invitation{bottom:58px;font-size:11px;min-height:44px}.contact-invitation-base,.contact-invitation-fill{padding-left:18px;gap:13px;min-height:44px}.contact-invitation-arrow{width:30px;height:30px}.contact-invited #scroll-hint{visibility:hidden}.contact-invited .controls{bottom:15px}.contact-invited #galaxy-navigation{top:auto;bottom:-2px}.contact-invited .bottomline{opacity:0!important}}
@media(prefers-reduced-motion:reduce){.contact-invitation{animation:none}}