/* Adapted from Magic UI Shimmer Button and Aceternity Aurora Background,
   discovered on 21st.dev. Source and licenses: THIRD_PARTY_NOTICES.md. */

.shimmer-button {
  --shimmer-color: #ffd0a1;
  --shimmer-speed: 3.8s;
  --button-surface: linear-gradient(135deg, #173357, #0c203b 72%);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 54px;
  padding: 15px 25px;
  overflow: hidden;
  border: 1px solid rgb(183 209 244 / 26%);
  border-radius: 999px;
  background: #132b49;
  box-shadow: 0 8px 24px rgb(0 0 0 / 15%);
  color: #fff;
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.shimmer-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1.25px;
  border-radius: inherit;
  background: var(--button-surface);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 16%),
    inset 0 -6px 12px rgb(255 255 255 / 5%);
  pointer-events: none;
}

.shimmer-button .button-label {
  position: relative;
  z-index: 2;
}

.shimmer-button .shimmer-track {
  position: absolute;
  z-index: 0;
  inset: 0;
  container-type: size;
  overflow: visible;
  filter: blur(1.5px);
  pointer-events: none;
}

.shimmer-button .shimmer-spark {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100cqh;
  height: 100cqh;
  animation: component-shimmer-slide var(--shimmer-speed) ease-in-out infinite alternate;
  animation-play-state: paused;
}

.shimmer-button .shimmer-ray {
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 225deg,
    transparent 0,
    var(--shimmer-color) 90deg,
    transparent 90deg
  );
  animation: component-shimmer-spin calc(var(--shimmer-speed) * 2) linear infinite;
  animation-play-state: paused;
}

.shimmer-button:hover {
  transform: translateY(-2px);
  border-color: rgb(203 224 255 / 52%);
  box-shadow:
    0 12px 32px rgb(0 0 0 / 20%),
    0 0 24px rgb(66 133 237 / 12%);
}

.shimmer-button:active {
  transform: translateY(0);
}
.shimmer-button:focus-visible {
  outline: 3px solid #ffb16c;
  outline-offset: 5px;
}
.shimmer-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.shimmer-button:disabled .shimmer-spark,
.shimmer-button:disabled .shimmer-ray {
  animation-play-state: paused !important;
}

.shimmer-button--pearl {
  --shimmer-color: #ff9b46;
  --button-surface: linear-gradient(135deg, #fff, #e8f0ff);
  color: #0a2039;
  border-color: rgb(255 255 255 / 65%);
  background: #e9f0fc;
}

.glass-panel {
  position: relative;
  isolation: isolate;
  border: 1px solid rgb(170 205 255 / 19%);
  border-radius: 26px;
  background: linear-gradient(135deg, rgb(28 56 91 / 80%), rgb(9 26 46 / 87%));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 10%),
    0 22px 70px rgb(1 10 23 / 20%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  backdrop-filter: blur(22px) saturate(125%);
}

.glass-panel--light {
  border-color: rgb(255 255 255 / 88%);
  background: linear-gradient(135deg, rgb(255 255 255 / 92%), rgb(237 243 252 / 82%));
  box-shadow:
    inset 0 1px 1px #fff,
    0 20px 60px rgb(20 45 78 / 9%);
}

.edge-glow {
  border-top-color: rgb(189 220 255 / 45%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 13%),
    0 22px 70px rgb(1 10 23 / 20%),
    0 0 44px rgb(66 133 237 / 8%);
}

.aurora-scene {
  --aurora-colors: repeating-linear-gradient(
    100deg,
    #204772 10%,
    #4285ed 15%,
    #8cb9ef 20%,
    #c4d8ed 25%,
    #3566a0 30%
  );
  --aurora-shadow: repeating-linear-gradient(
    100deg,
    #081529 0%,
    #081529 7%,
    transparent 10%,
    transparent 12%,
    #081529 16%
  );
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 84% 36%, #173763 0, transparent 53%), #081529;
  pointer-events: none;
}

.aurora-scene::before {
  content: "";
  position: absolute;
  inset: -12%;
  background-image: var(--aurora-shadow), var(--aurora-colors);
  background-size:
    300% 200%,
    200% 200%;
  background-position:
    50% 50%,
    50% 50%;
  opacity: 0.4;
  filter: blur(22px);
  -webkit-mask-image: radial-gradient(ellipse at 90% 15%, #000 7%, transparent 75%);
  mask-image: radial-gradient(ellipse at 90% 15%, #000 7%, transparent 75%);
  animation: component-aurora-flow 60s linear infinite;
  animation-play-state: paused;
}

.aurora-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 21 41 / 42%), transparent 60%),
    linear-gradient(0deg, #081529, transparent 24%);
}

.aurora-band {
  position: absolute;
  width: 58%;
  height: 22%;
  top: 25%;
  right: -12%;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(110 166 245 / 40%),
    rgb(66 133 237 / 13%),
    transparent
  );
  filter: blur(32px);
  transform: rotate(-28deg);
  animation: component-aurora-drift 19s ease-in-out infinite alternate;
  animation-play-state: paused;
}

.aurora-band:nth-child(2) {
  top: 51%;
  right: -6%;
  width: 47%;
  height: 15%;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(255 155 70 / 24%),
    rgb(255 155 70 / 7%),
    transparent
  );
  animation-duration: 23s;
  animation-delay: -9s;
}

.aurora-band:nth-child(3) {
  top: 4%;
  right: 27%;
  width: 41%;
  height: 15%;
  opacity: 0.45;
  animation-duration: 27s;
  animation-delay: -16s;
}

.shimmer-button[data-component-motion="run"] .shimmer-spark,
.shimmer-button[data-component-motion="run"] .shimmer-ray,
.aurora-scene[data-component-motion="run"]::before,
.aurora-scene[data-component-motion="run"] .aurora-band {
  animation-play-state: running;
}

@keyframes component-shimmer-slide {
  to {
    transform: translateX(calc(100cqw - 100%));
  }
}

@keyframes component-shimmer-spin {
  0% {
    transform: translateZ(0) rotate(0deg);
  }
  15%,
  35% {
    transform: translateZ(0) rotate(90deg);
  }
  65%,
  85% {
    transform: translateZ(0) rotate(270deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}

@keyframes component-aurora-flow {
  from {
    background-position:
      50% 50%,
      50% 50%;
  }
  to {
    background-position:
      350% 50%,
      350% 50%;
  }
}

@keyframes component-aurora-drift {
  from {
    transform: translate3d(-4%, 3%, 0) rotate(-28deg);
  }
  to {
    transform: translate3d(8%, -9%, 0) rotate(-21deg);
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .glass-panel {
    background: linear-gradient(135deg, #1b3555, #0b2039);
  }
  .glass-panel--light {
    background: linear-gradient(135deg, #fff, #edf3fc);
  }
}

@media (max-width: 767px) {
  .glass-panel {
    border-radius: 22px;
  }
  .aurora-scene::before {
    opacity: 0.3;
    filter: blur(18px);
  }
  .aurora-band {
    width: 100%;
    right: -37%;
    opacity: 0.65;
  }
  .aurora-band:nth-child(2) {
    width: 82%;
    right: -28%;
  }
  .aurora-band:nth-child(3) {
    width: 78%;
    right: 0;
  }
  .shimmer-button {
    padding-inline: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) .shimmer-button {
    transition: none;
  }
  html:not([data-motion="full"]) .shimmer-button:hover {
    transform: none;
  }
  html:not([data-motion="full"]) .shimmer-spark,
  html:not([data-motion="full"]) .shimmer-ray,
  html:not([data-motion="full"]) .aurora-scene::before,
  html:not([data-motion="full"]) .aurora-band {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .shimmer-button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
  .shimmer-button::after,
  .shimmer-track,
  .aurora-scene {
    display: none;
  }
  .glass-panel {
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
}