.modal-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 120rem;
  perspective-origin: center center;
  padding: 1.25rem;
  box-sizing: border-box;
  overflow: auto;
  isolation: isolate;
}

.modal-container,
.modal-container::before,
.modal-container::after,
.modal-content,
.modal-content::before,
.modal-content::after,
.modal-content *,
.modal-content *::before,
.modal-content *::after {
  box-sizing: border-box;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at top, rgba(255, 246, 231, 0.12), transparent 28rem),
    linear-gradient(180deg, rgba(11, 14, 22, 0.72), rgba(8, 10, 17, 0.84));
  backdrop-filter: blur(0.24rem);
  animation: modal-backdrop-open 0.24s ease-out both;
}

.modal-container {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 0.12rem solid rgba(244, 223, 189, 0.18);
  border-radius: 1.25rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(8, 10, 16, 0.2)),
    rgba(18, 21, 31, 0.97);
  box-shadow:
    0 1.25rem 3rem rgba(0, 0, 0, 0.34),
    inset 0 0 0 0.05rem rgba(255, 255, 255, 0.04);
  color: #fff2dc;
  opacity: 0;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  backdrop-filter: blur(0.75rem);
  font-family: "Caudex", serif;
}

.modal-container::before,
.modal-container::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.modal-container::before {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 36%, rgba(214, 163, 84, 0.24), rgba(214, 163, 84, 0) 58%),
    radial-gradient(circle at 58% 56%, rgba(255, 249, 238, 0.1), rgba(255, 249, 238, 0) 54%);
  filter: blur(1.1rem);
}

.modal-container::after {
  z-index: 1;
  inset: -4%;
  border: 0.08rem solid rgba(244, 223, 189, 0.18);
  border-radius: 1.45rem;
  box-shadow: 0 0 0 0 rgba(244, 223, 189, 0);
}

.modal-close-button {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 0.12rem solid currentColor;
  border-radius: 999rem;
  background: rgba(28, 27, 41, 0.48);
  color: #922b21;
  box-shadow: 0 0 0.9rem rgba(146, 43, 33, 0.2);
  font-size: 1.25rem;
  line-height: 1;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.modal-close-button:hover {
  transform: translateY(-0.06rem) scale(1.04);
  background: rgba(38, 20, 20, 0.72);
  color: #c0392b;
  filter: brightness(1.08);
}

.modal-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 2;
  overflow: auto;
}

.modal-smoke-veil {
  position: absolute;
  inset: -10%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 246, 231, 0.16), rgba(255, 246, 231, 0) 60%);
  filter: blur(1.4rem);
}

.modal-smoke-piece {
  position: absolute;
  border-radius: 999rem;
  background:
    radial-gradient(circle, rgba(255, 252, 245, 0.24) 0%, rgba(227, 210, 176, 0.16) 36%, rgba(106, 133, 164, 0.09) 64%, rgba(0, 0, 0, 0) 100%);
  filter: blur(1rem);
}

.modal-wrapper[data-open-animation-preset="fade"] .modal-container {
  animation: modal-open-fade 0.22s ease-out both;
}

.modal-wrapper[data-open-animation-preset="pop"] .modal-container {
  animation: modal-open-pop 0.28s ease-out both;
}

.modal-wrapper[data-open-animation-preset="levitate"] .modal-container {
  animation: modal-open-levitate 0.32s ease-out both;
}

.modal-wrapper[data-open-animation-preset="spin-grow"] .modal-container {
  animation: modal-open-spin-grow 0.42s cubic-bezier(0.18, 0.89, 0.32, 1.16) both;
}

.modal-wrapper[data-open-animation-preset="smoke"] .modal-container {
  animation: modal-open-smoke 0.56s ease-out both;
}

.modal-wrapper[data-open-animation-preset="smoke"] .modal-smoke-veil {
  animation: modal-smoke-veil-open 0.66s ease-out both;
}

.modal-wrapper[data-open-animation-preset="smoke"] .modal-smoke-piece {
  animation-name: modal-smoke-piece-open;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.modal-wrapper[data-open-animation-preset="curtain"] .modal-container {
  transform-origin: center top;
  animation: modal-open-curtain 0.36s cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.modal-wrapper[data-open-animation-preset="paper-fold"] .modal-container {
  transform-origin: center top;
  animation: modal-open-paper-fold 0.42s cubic-bezier(0.2, 0.82, 0.28, 1) both;
}

.modal-wrapper[data-open-animation-preset="bloom"] .modal-container {
  animation: modal-open-bloom 0.34s cubic-bezier(0.18, 0.88, 0.3, 1.08) both;
}

.modal-wrapper[data-open-animation-preset="bloom"] .modal-container::after {
  animation: modal-bloom-halo-open 0.54s ease-out both;
}

.modal-wrapper[data-open-animation-preset="ink-spread"] .modal-container {
  animation: modal-open-ink-spread 0.46s ease-out both;
}

.modal-wrapper[data-open-animation-preset="ink-spread"] .modal-container::before {
  animation: modal-ink-overlay-open 0.5s ease-out both;
}

.modal-wrapper[data-open-animation-preset="glide"] .modal-container {
  animation: modal-open-glide 0.3s cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.modal-wrapper[data-open-animation-preset="door"] .modal-container {
  transform-origin: left center;
  animation: modal-open-door 0.42s cubic-bezier(0.16, 0.82, 0.24, 1) both;
}

.modal-wrapper[data-open-animation-preset="shatter-dust"] .modal-container {
  animation: modal-open-shatter-dust 0.52s ease-out both;
}

.modal-wrapper[data-open-animation-preset="shatter-dust"] .modal-smoke-veil {
  animation: modal-shatter-veil-open 0.48s ease-out both;
}

.modal-wrapper[data-open-animation-preset="shatter-dust"] .modal-smoke-piece {
  animation-name: modal-shatter-piece-open;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.modal-wrapper[data-open-animation-preset="rune-pulse"] .modal-container {
  animation: modal-open-rune-pulse 0.38s ease-out both;
}

.modal-wrapper[data-open-animation-preset="rune-pulse"] .modal-container::after {
  animation: modal-rune-pulse-open 0.62s ease-out both;
}

.modal-wrapper[data-open-animation-preset="rune-pulse"] .modal-container::before {
  animation: modal-rune-glow-open 0.52s ease-out both;
}

.modal-wrapper.modal-closing .modal-backdrop {
  animation: modal-backdrop-close 0.22s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="fade"] .modal-container {
  animation: modal-close-fade 0.2s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="pop"] .modal-container {
  animation: modal-close-pop 0.24s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="levitate"] .modal-container {
  animation: modal-close-levitate 0.28s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="spin-grow"] .modal-container {
  animation: modal-close-spin-grow 0.4s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="smoke"] .modal-container {
  animation: modal-close-smoke 0.52s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="smoke"] .modal-smoke-veil {
  animation: modal-smoke-veil-close 0.52s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="smoke"] .modal-smoke-piece {
  animation-name: modal-smoke-piece-close;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="curtain"] .modal-container {
  transform-origin: center top;
  animation: modal-close-curtain 0.32s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="paper-fold"] .modal-container {
  transform-origin: center top;
  animation: modal-close-paper-fold 0.38s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="bloom"] .modal-container {
  animation: modal-close-bloom 0.28s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="bloom"] .modal-container::after {
  animation: modal-bloom-halo-close 0.32s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="ink-spread"] .modal-container {
  animation: modal-close-ink-spread 0.42s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="ink-spread"] .modal-container::before {
  animation: modal-ink-overlay-close 0.42s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="glide"] .modal-container {
  animation: modal-close-glide 0.24s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="door"] .modal-container {
  transform-origin: left center;
  animation: modal-close-door 0.38s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="shatter-dust"] .modal-container {
  animation: modal-close-shatter-dust 0.48s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="shatter-dust"] .modal-smoke-veil {
  animation: modal-shatter-veil-close 0.46s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="shatter-dust"] .modal-smoke-piece {
  animation-name: modal-shatter-piece-close;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="rune-pulse"] .modal-container {
  animation: modal-close-rune-pulse 0.34s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="rune-pulse"] .modal-container::after {
  animation: modal-rune-pulse-close 0.34s ease-in both;
}

.modal-wrapper.modal-closing[data-close-animation-preset="rune-pulse"] .modal-container::before {
  animation: modal-rune-glow-close 0.3s ease-in both;
}

@keyframes modal-backdrop-open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-backdrop-close {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-open-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-close-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes modal-open-pop {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }

  72% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modal-close-pop {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}

@keyframes modal-open-levitate {
  0% {
    opacity: 0;
    transform: translateY(1.6rem) scale(0.94);
  }

  68% {
    opacity: 1;
    transform: translateY(-0.28rem) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-close-levitate {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-1.15rem) scale(0.94);
  }
}

@keyframes modal-open-spin-grow {
  0% {
    opacity: 0;
    transform: scale(0.18) rotate(-180deg);
  }

  74% {
    opacity: 1;
    transform: scale(1.04) rotate(14deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes modal-close-spin-grow {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.22) rotate(180deg);
  }
}

@keyframes modal-open-smoke {
  0% {
    opacity: 0;
    transform: translateY(0.85rem) scale(0.92);
    filter: blur(0.7rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes modal-close-smoke {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-0.4rem) scale(0.9);
    filter: blur(0.95rem);
  }
}

@keyframes modal-open-curtain {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 1.25rem);
    transform: translateY(-1rem) scaleY(0.84);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 1.25rem);
    transform: translateY(0) scaleY(1);
  }
}

@keyframes modal-close-curtain {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 1.25rem);
    transform: translateY(0) scaleY(1);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 1.25rem);
    transform: translateY(-0.8rem) scaleY(0.84);
  }
}

@keyframes modal-open-paper-fold {
  0% {
    opacity: 0;
    transform: rotateX(-88deg) scaleY(0.8) translateY(-1.1rem);
    filter: brightness(0.82);
  }

  68% {
    opacity: 1;
    transform: rotateX(12deg) scaleY(1.02) translateY(0.08rem);
    filter: brightness(1.02);
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg) scaleY(1) translateY(0);
    filter: brightness(1);
  }
}

@keyframes modal-close-paper-fold {
  0% {
    opacity: 1;
    transform: rotateX(0deg) scaleY(1) translateY(0);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: rotateX(78deg) scaleY(0.8) translateY(-0.9rem);
    filter: brightness(0.78);
  }
}

@keyframes modal-open-bloom {
  0% {
    opacity: 0;
    transform: scale(0.66);
    filter: blur(0.6rem) brightness(1.15);
  }

  72% {
    opacity: 1;
    transform: scale(1.05);
    filter: blur(0) brightness(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes modal-close-bloom {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
    filter: blur(0.35rem) brightness(1.1);
  }
}

@keyframes modal-bloom-halo-open {
  0% {
    opacity: 0;
    transform: scale(0.74);
    box-shadow: 0 0 0 0 rgba(244, 223, 189, 0.32);
  }

  46% {
    opacity: 0.72;
    transform: scale(1.08);
    box-shadow: 0 0 2.2rem 0.25rem rgba(244, 223, 189, 0.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
    box-shadow: 0 0 3rem 0 rgba(244, 223, 189, 0);
  }
}

@keyframes modal-bloom-halo-close {
  0% {
    opacity: 0;
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(244, 223, 189, 0.28);
  }

  50% {
    opacity: 0.68;
    transform: scale(1.02);
    box-shadow: 0 0 1.8rem 0.14rem rgba(244, 223, 189, 0.16);
  }

  100% {
    opacity: 0;
    transform: scale(1.14);
    box-shadow: 0 0 2.6rem 0 rgba(244, 223, 189, 0);
  }
}

@keyframes modal-open-ink-spread {
  0% {
    opacity: 0.24;
    clip-path: circle(0% at 52% 48%);
    transform: scale(0.96);
    filter: blur(0.65rem);
  }

  100% {
    opacity: 1;
    clip-path: circle(140% at 52% 48%);
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes modal-close-ink-spread {
  0% {
    opacity: 1;
    clip-path: circle(140% at 52% 48%);
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    clip-path: circle(0% at 52% 48%);
    transform: scale(0.96);
    filter: blur(0.52rem);
  }
}

@keyframes modal-ink-overlay-open {
  0% {
    opacity: 0.72;
    transform: scale(0.7);
    filter: blur(1.7rem);
  }

  100% {
    opacity: 0;
    transform: scale(1.24);
    filter: blur(0.5rem);
  }
}

@keyframes modal-ink-overlay-close {
  0% {
    opacity: 0;
    transform: scale(1.08);
    filter: blur(0.7rem);
  }

  100% {
    opacity: 0.7;
    transform: scale(0.72);
    filter: blur(1.4rem);
  }
}

@keyframes modal-open-glide {
  0% {
    opacity: 0;
    transform: translate(1.5rem, 0.7rem) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes modal-close-glide {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-1.2rem, -0.45rem) scale(0.96);
  }
}

@keyframes modal-open-door {
  0% {
    opacity: 0;
    transform: rotateY(-94deg) translateX(-0.65rem);
    filter: brightness(0.76);
  }

  72% {
    opacity: 1;
    transform: rotateY(10deg) translateX(0.04rem);
    filter: brightness(1.02);
  }

  100% {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
    filter: brightness(1);
  }
}

@keyframes modal-close-door {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translateX(0);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: rotateY(94deg) translateX(0.2rem);
    filter: brightness(0.7);
  }
}

@keyframes modal-open-shatter-dust {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(0.95rem);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes modal-close-shatter-dust {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(0.9rem);
  }
}

@keyframes modal-shatter-veil-open {
  0% {
    opacity: 0.4;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes modal-shatter-veil-close {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }

  38% {
    opacity: 0.42;
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes modal-shatter-piece-open {
  0% {
    opacity: 0.62;
    transform: translate(1.2rem, -1rem) scale(1.32);
  }

  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.62);
  }
}

@keyframes modal-shatter-piece-close {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.62);
  }

  32% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate(1.7rem, -1.9rem) scale(1.48);
  }
}

@keyframes modal-open-rune-pulse {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: brightness(1.18);
  }

  72% {
    opacity: 1;
    transform: scale(1.03);
    filter: brightness(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes modal-close-rune-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.92);
    filter: brightness(1.1);
  }
}

@keyframes modal-rune-pulse-open {
  0% {
    opacity: 0;
    transform: scale(0.72);
    box-shadow: 0 0 0 0 rgba(244, 223, 189, 0.34);
  }

  42% {
    opacity: 0.8;
    transform: scale(1);
    box-shadow: 0 0 0 0.2rem rgba(244, 223, 189, 0.22);
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
    box-shadow: 0 0 0 1.15rem rgba(244, 223, 189, 0);
  }
}

@keyframes modal-rune-pulse-close {
  0% {
    opacity: 0;
    transform: scale(1.08);
    box-shadow: 0 0 0 0 rgba(244, 223, 189, 0.24);
  }

  38% {
    opacity: 0.74;
    transform: scale(1);
    box-shadow: 0 0 0 0.16rem rgba(244, 223, 189, 0.18);
  }

  100% {
    opacity: 0;
    transform: scale(0.74);
    box-shadow: 0 0 0 0.85rem rgba(244, 223, 189, 0);
  }
}

@keyframes modal-rune-glow-open {
  0% {
    opacity: 0.42;
    transform: scale(0.86);
  }

  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}

@keyframes modal-rune-glow-close {
  0% {
    opacity: 0;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.44;
    transform: scale(0.8);
  }
}

@keyframes modal-smoke-veil-open {
  0% {
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes modal-smoke-veil-close {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes modal-smoke-piece-open {
  0% {
    opacity: 0;
    transform: translate(-1rem, 0.9rem) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translate(1.2rem, -1.35rem) scale(1.22);
  }
}

@keyframes modal-smoke-piece-close {
  0% {
    opacity: 0;
    transform: translate(-0.4rem, 0.4rem) scale(0.68);
  }

  35% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translate(1.1rem, -1.5rem) scale(1.32);
  }
}

@media (max-width: 40rem) {
  .modal-wrapper {
    padding: 0.8rem;
  }

  .modal-close-button {
    top: 0.65rem;
    right: 0.65rem;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.12rem;
  }
}