:root {
  --celestial-portal-color: #ff58b5;
  --celestial-portal-accent: #78f7ff;
  --celestial-exit-x: 50vw;
  --celestial-exit-y: 50vh;
  --celestial-exit-shift-x: 0px;
  --celestial-exit-shift-y: 0px;
  --celestial-exit-shift-x-mid: 0px;
  --celestial-exit-shift-y-mid: 0px;
  --celestial-exit-turn: 7deg;
  --celestial-exit-turn-mid: 3.85deg;
}

.celestial-portal-close {
  position: fixed;
  z-index: 10000;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--celestial-portal-accent) 34%, transparent);
  border-radius: 50%;
  color: #f9fbff;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.13), transparent 23%),
    conic-gradient(
      from 32deg,
      color-mix(in srgb, var(--celestial-portal-color) 42%, transparent),
      color-mix(in srgb, #040511 82%, transparent) 28%,
      color-mix(in srgb, var(--celestial-portal-accent) 28%, transparent) 52%,
      color-mix(in srgb, #040511 82%, transparent) 76%,
      color-mix(in srgb, var(--celestial-portal-color) 42%, transparent)
    );
  box-shadow:
    inset 0 0 0 5px rgba(2, 4, 14, 0.52),
    inset 0 0 18px color-mix(in srgb, var(--celestial-portal-color) 18%, transparent),
    0 10px 34px rgba(0, 0, 0, 0.24),
    0 0 32px color-mix(in srgb, var(--celestial-portal-accent) 10%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  cursor: pointer;
  font: 300 22px/1 ui-monospace, monospace;
  text-decoration: none;
  text-shadow: 0 0 12px color-mix(in srgb, var(--celestial-portal-accent) 54%, transparent);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.celestial-portal-close:hover,
.celestial-portal-close:focus-visible {
  border-color: var(--celestial-portal-accent);
  color: #fff;
  box-shadow:
    inset 0 0 0 5px rgba(2, 4, 14, 0.42),
    inset 0 0 24px color-mix(in srgb, var(--celestial-portal-color) 28%, transparent),
    0 12px 38px rgba(0, 0, 0, 0.3),
    0 0 42px color-mix(in srgb, var(--celestial-portal-accent) 24%, transparent);
  transform: rotate(90deg) scale(1.05);
}

.celestial-portal-close:not([data-portal-always]) {
  display: none;
}

.celestial-portal-active .celestial-portal-close {
  display: grid;
}

.celestial-portal-active .consulting-return {
  display: none;
}

.celestial-detail-transit {
  position: fixed;
  z-index: 9999;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background: transparent;
  opacity: 0;
}

.celestial-portal-pending .celestial-detail-transit,
.celestial-portal-arriving .celestial-detail-transit,
.celestial-portal-folding .celestial-detail-transit {
  visibility: visible;
}

.celestial-portal-pending .celestial-detail-transit {
  background: #010108;
  opacity: 1;
}

.celestial-detail-transit::before,
.celestial-detail-transit::after {
  position: absolute;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.celestial-detail-transit::before {
  top: var(--celestial-exit-y);
  left: var(--celestial-exit-x);
  width: 150vmax;
  aspect-ratio: 1;
  background: repeating-conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--celestial-portal-color) 15%, transparent) 0 0.35deg,
    transparent 0.35deg 5deg,
    color-mix(in srgb, var(--celestial-portal-accent) 9%, transparent) 5deg 5.25deg,
    transparent 5.25deg 11deg
  );
  mask-image: radial-gradient(circle, transparent 0 2%, #000 8%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 2%, #000 8%, transparent 58%);
  transform: translate(-50%, -50%) scale(1.25) rotate(0);
}

.celestial-detail-transit::after {
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 5px,
    rgba(255, 255, 255, 0.028) 5px 6px
  );
  mix-blend-mode: screen;
}

.celestial-detail-transit__tunnel {
  position: absolute;
  top: var(--celestial-exit-y);
  left: var(--celestial-exit-x);
  width: 1px;
  height: 1px;
}

.celestial-detail-transit__tunnel > i,
.celestial-detail-transit__horizon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.celestial-detail-transit__horizon::before,
.celestial-detail-transit__horizon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  content: "";
  opacity: 0.76;
  transform: translate(-50%, -50%);
}

.celestial-detail-transit__horizon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.celestial-detail-transit__flare {
  position: absolute;
  top: var(--celestial-exit-y);
  left: var(--celestial-exit-x);
  width: 140vw;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--celestial-portal-color) 32%,
    #fff 50%,
    var(--celestial-portal-accent) 68%,
    transparent
  );
  box-shadow:
    0 0 18px #fff,
    0 0 48px var(--celestial-portal-color),
    0 0 90px var(--celestial-portal-accent);
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

.celestial-detail-transit__status,
.celestial-detail-transit__coordinates {
  position: absolute;
  z-index: 2;
  right: 22px;
  margin: 0;
  color: color-mix(in srgb, var(--celestial-portal-accent) 76%, #fff);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: 0.18em;
  opacity: 0;
}

.celestial-detail-transit__status {
  bottom: 31px;
  font-size: 8px;
}

.celestial-detail-transit__coordinates {
  bottom: 17px;
  font-size: 6px;
}

.celestial-detail-transit__tunnel > i {
  width: calc(42px + var(--ring) * 28px);
  aspect-ratio: 1;
  background: repeating-conic-gradient(
    from calc(var(--ring) * 17deg),
    color-mix(
        in srgb,
        var(--celestial-portal-color) calc(90% - var(--ring) * 3%),
        #fff
      )
      0deg 7deg,
    transparent 8deg 18deg,
    color-mix(in srgb, var(--celestial-portal-accent) 86%, #fff) 19deg 21deg,
    transparent 22deg 34deg
  );
  opacity: calc(0.92 - var(--ring) * 0.05);
  will-change: transform, opacity;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 2px),
    #000 calc(100% - 1px)
  );
}

.celestial-detail-transit__horizon {
  width: 58px;
  aspect-ratio: 1;
  background: #010108;
  box-shadow:
    0 0 80px var(--celestial-portal-color),
    0 0 150px var(--celestial-portal-accent);
}

.celestial-portal-arriving .celestial-detail-transit {
  background: #010108;
  animation: celestial-arrival-clear 860ms cubic-bezier(0.12, 0.82, 0.22, 1) both;
}

.celestial-portal-arriving .celestial-detail-transit__tunnel > i {
  animation: celestial-arrival-ring 820ms cubic-bezier(0.12, 0.82, 0.22, 1) both;
  animation-delay: calc(var(--ring) * -24ms);
}

.celestial-portal-arriving .celestial-detail-transit::before {
  animation: celestial-arrival-wake 820ms cubic-bezier(0.12, 0.82, 0.22, 1) both;
}

.celestial-portal-arriving .celestial-detail-transit__horizon {
  animation: celestial-arrival-horizon 820ms cubic-bezier(0.12, 0.82, 0.22, 1) both;
}

.celestial-portal-arriving .celestial-detail-transit__flare {
  animation: celestial-arrival-flare 720ms cubic-bezier(0.12, 0.82, 0.22, 1) both;
}

.celestial-portal-inside .celestial-detail-transit {
  display: none;
}

.celestial-portal-folding body > :not(.celestial-detail-transit):not(.celestial-portal-close) {
  transform-origin: var(--celestial-exit-x) var(--celestial-exit-y);
  animation: celestial-page-extract 920ms cubic-bezier(0.76, 0, 0.94, 1) both;
}

.celestial-portal-folding body > :not(.celestial-detail-transit):not(.celestial-portal-close) * {
  animation-play-state: paused !important;
}

.celestial-portal-folding .celestial-portal-close {
  pointer-events: none;
  animation: celestial-close-launch 360ms cubic-bezier(0.7, 0, 1, 1) both;
}

.celestial-portal-folding .celestial-detail-transit {
  display: block;
  animation: celestial-exit-cover 920ms cubic-bezier(0.76, 0, 0.94, 1) both;
}

.celestial-portal-folding .celestial-detail-transit::before {
  animation: celestial-exit-wake 860ms 40ms cubic-bezier(0.7, 0, 0.95, 1) both;
}

.celestial-portal-folding .celestial-detail-transit::after {
  animation: celestial-exit-scan 540ms 130ms steps(2, end) both;
}

.celestial-portal-folding .celestial-detail-transit__tunnel > i {
  animation: celestial-exit-ring 850ms cubic-bezier(0.78, 0, 0.96, 1) both;
  animation-delay: calc(var(--ring) * 11ms);
}

.celestial-portal-folding .celestial-detail-transit__horizon {
  animation: celestial-exit-horizon 920ms cubic-bezier(0.76, 0, 0.94, 1) both;
}

.celestial-portal-folding .celestial-detail-transit__flare {
  animation: celestial-exit-flare 920ms cubic-bezier(0.76, 0, 0.94, 1) both;
}

.celestial-portal-folding :is(
  .celestial-detail-transit__status,
  .celestial-detail-transit__coordinates
) {
  animation: celestial-exit-status 920ms ease both;
}

@keyframes celestial-arrival-clear {
  0%, 18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes celestial-arrival-ring {
  0% { transform: translate(-50%, -50%) scale(28) rotate(240deg); opacity: 0; }
  18% { opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(0.08) rotate(0); opacity: 0; }
}

@keyframes celestial-arrival-wake {
  0% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(1.18) rotate(118deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.04) rotate(0);
  }
}

@keyframes celestial-arrival-horizon {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(92);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.16);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.02);
  }
}

@keyframes celestial-arrival-flare {
  0%, 24% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.08);
  }
  48% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scaleX(0.72);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
}

@keyframes celestial-page-extract {
  0% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0) scale(1);
  }
  18% {
    transform: perspective(1400px) rotateX(-0.5deg) scale(1.008);
  }
  58% {
    opacity: 0.82;
    transform: perspective(1400px)
      translate3d(
        var(--celestial-exit-shift-x-mid),
        var(--celestial-exit-shift-y-mid),
        0
      )
      rotateZ(var(--celestial-exit-turn-mid))
      rotateX(6deg)
      skewX(-4deg)
      scale(0.7, 0.28);
  }
  100% {
    opacity: 0;
    transform: perspective(1400px)
      translate3d(var(--celestial-exit-shift-x), var(--celestial-exit-shift-y), 0)
      rotateZ(var(--celestial-exit-turn))
      rotateX(18deg)
      skewX(-8deg)
      scale(0.04);
  }
}

@keyframes celestial-close-launch {
  0% { opacity: 1; transform: rotate(90deg) scale(1.04); }
  58% { opacity: 1; transform: rotate(260deg) scale(0.42); }
  100% { opacity: 0; transform: rotate(400deg) scale(0.05); }
}

@keyframes celestial-exit-cover {
  0%, 58% { opacity: 0; background: transparent; }
  78% { opacity: 1; background: rgba(1, 1, 8, 0.42); }
  100% { opacity: 1; background: #010108; }
}

@keyframes celestial-exit-wake {
  0%, 8% { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(0); }
  30% { opacity: 0.7; }
  76% { opacity: 0.22; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.04) rotate(145deg); }
}

@keyframes celestial-exit-scan {
  0%, 14% { opacity: 0; transform: translateY(-7px); }
  28%, 64% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(9px); }
}

@keyframes celestial-exit-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(30) rotate(250deg); }
  18% { opacity: 0.68; }
  76% { opacity: 0.98; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.03) rotate(0); }
}

@keyframes celestial-exit-horizon {
  0%, 58% { opacity: 0; transform: translate(-50%, -50%) scale(0.05); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(0.22); }
  84% { opacity: 1; transform: translate(-50%, -50%) scale(0.06); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(88); background: #010108; box-shadow: none; }
}

@keyframes celestial-exit-flare {
  0%, 63% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
  74% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
  84% { opacity: 0.8; transform: translate(-50%, -50%) scaleX(0.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
}

@keyframes celestial-exit-status {
  0%, 20% { opacity: 0; transform: translateY(6px); }
  32%, 76% { opacity: 0.72; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes celestial-exit-reduced {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes celestial-exit-cover-reduced {
  from { opacity: 0; background: transparent; }
  to { opacity: 1; background: #010108; }
}

@media (max-width: 700px) {
  .celestial-portal-close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .celestial-portal-arriving .celestial-detail-transit,
  .celestial-portal-folding .celestial-detail-transit {
    animation-duration: 180ms;
  }

  .celestial-portal-folding .celestial-detail-transit {
    animation-name: celestial-exit-cover-reduced;
  }

  .celestial-portal-folding body > :not(.celestial-detail-transit):not(.celestial-portal-close) {
    animation: celestial-exit-reduced 180ms ease both;
  }

  .celestial-detail-transit__tunnel,
  .celestial-detail-transit__flare,
  .celestial-detail-transit__status,
  .celestial-detail-transit__coordinates,
  .celestial-detail-transit::before,
  .celestial-detail-transit::after {
    display: none;
  }
}