.modal-no-scroll {
  overflow: hidden;
}
.c-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, calc(-13.72px + 6.326vw), 78px);
  z-index: 1000;
  overflow: auto;
  visibility: hidden;
  pointer-events: none;
}

.c-modal-overlay::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(20, 20, 59, 0.4);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.c-modal-overlay.is-mounted {
  visibility: visible;
}

.c-modal-overlay.is-visible {
  pointer-events: auto;
}

.c-modal-overlay.is-visible::before {
  opacity: 1;
}

.c-modal-overlay.is-closing::before {
  transition-duration: 0.35s;
}

.c-modal {
  position: relative;
  max-width: 500px;
  width: 100%;
  padding: 3rem 2rem;
  border-radius: 10px;
  z-index: 1;
  transition: opacity 0.35s ease;
}

.c-modal.is-closing {
  opacity: 0;
}

.c-modal__inner {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-modal.is-open .c-modal__inner {
  opacity: 1;
  transform: translateY(0);
}

.c-modal__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 18px;
  height: 18px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.c-modal.is-open .c-modal__close {
  opacity: 1;
  transform: translateY(0);
}

.c-modal__close:focus,
.c-modal__close:focus-visible,
.c-modal__close:active {
  outline: none;
  box-shadow: none;
}

.c-modal__close span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: #fff;
  transform-origin: center;
}

.c-modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.c-modal__close.active span:first-child {
  animation:
    line1-rotate 0.3s ease forwards,
    shrinkLine 0.3s ease 0.3s forwards;
}

.c-modal__close.active span:last-child {
  animation:
    line2-rotate 0.3s ease forwards,
    shrinkLine 0.3s ease 0.3s forwards;
}

@keyframes line1-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

@keyframes line2-rotate {
  0% {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}

@keyframes shrinkLine {
  0% {
    width: 18px;
    opacity: 1;
  }

  50% {
    width: 8px;
    opacity: 1;
  }

  100% {
    width: 8px;
    opacity: 0;
  }
}

.glass{
  --glass-opacity: .3;
  background: rgb(255 255 255 / calc(.14 * var(--glass-opacity)));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgb(255 255 255 / calc(.28));
  box-shadow:
    0 20px 40px rgb(0 0 0 / .18),
    0 2px 10px rgb(0 0 0 / .10);
  position: relative;
  overflow: hidden;
}

.glass::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    -45deg,
    rgb(255 255 255 / calc(.80 * var(--glass-opacity))) 0%,
    rgb(255 255 255 / calc(.18 * var(--glass-opacity))) 35%,
    rgb(255 255 255 / 0) 70%
  );
}

.glass::after{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  background:
    radial-gradient(80% 60% at 20% 20%, rgb(120 170 255 / .22), rgb(0 0 0 / 0) 60%),
    radial-gradient(80% 60% at 80% 25%, rgb(255 140 200 / .18), rgb(0 0 0 / 0) 60%),
    radial-gradient(90% 80% at 50% 110%, rgb(120 255 210 / .12), rgb(0 0 0 / 0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  filter: blur(10px);
  opacity: calc(.50 * var(--glass-opacity));
  mix-blend-mode: screen;
  transform: translateZ(0);
}