.transcendence {
  display: flex;
  flex-direction: column;
  gap: $unit-half;
  align-items: center;
  justify-content: center;
  width: $unit-10x;
  height: $unit-10x;

  animation: scaleIn $duration-zoom ease-out;
  background: var(--dialog-bg);
  border-radius: $card-corner;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
  outline: none;
  padding: $unit;
  transform-origin: var(--radix-popover-content-transform-origin);
  z-index: 32;

  &.open {
    opacity: 1;
    display: flex;
  }

  h4 {
    font-size: $font-small;
    font-weight: $medium;
  }

  .pending {
    color: $yellow;
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 0.2;
    transform: scale(0.4);
  }
  40% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  60% {
    opacity: 0.6;
    transform: scale(1);
  }
  65% {
    opacity: 0.65;
    transform: scale(1.1);
  }
  70% {
    opacity: 0.7;
    transform: scale(1);
  }
  75% {
    opacity: 0.75;
    transform: scale(0.98);
  }
  80% {
    opacity: 0.8;
    transform: scale(1.02);
  }
  90% {
    opacity: 0.9;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}