:root {
  --site-bg-color: #020617;
}

body {
  background-color: var(--site-bg-color) !important;
}

/* Ensure the main site-wrapper remains transparent so the background shows through */
.site-wrapper {
  background-color: transparent !important;
  position: relative;
  z-index: 0;
  opacity: 1 !important;
}

/* Background overlay container fixed to the viewport */
.site-background-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--site-bg-color);
}

/* The repeating gradient-colored outlines using site-background.svg as a mask */
/* stylelint-disable property-no-vendor-prefix */
.site-background-overlay::before {
  content: "";
  position: absolute;
  inset: -20vw; /* Expanded to prevent visual gaps at the corners when rotated */
  background-image: linear-gradient(
    135deg,
    #3b82f6 0%,
    #8b5cf6 50%,
    #ec4899 100%
  );
  -webkit-mask-image: url("/assets/site-background.svg");
  mask-image: url("/assets/site-background.svg");
  -webkit-mask-size: 96px 96px;
  mask-size: 96px 96px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  transform: rotate(-15deg);
  opacity: 0.15;
}
/* stylelint-enable property-no-vendor-prefix */

/* Linear gradient overlay that fades the outlines to black towards the bottom-right */
.site-background-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgb(2 6 23 / 0%) 20%, #020617 90%);
  pointer-events: none;
}

/* Pretty Radio Button Styles with looping pulse animation */
.pretty-radio-text {
  font-size: 13px;
  font-weight: 500;
  color: #cbd5e1;
  transition: color 0.15s ease;
}

.pretty-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: rgb(15 23 42 / 40%);
  border: 1px solid rgb(30 41 59 / 60%);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Sequential pulsing animation keyframes */
@keyframes radio-glow-pulse {
  0%,
  100% {
    border-color: #475569;
    box-shadow: none;
  }

  25% {
    border-color: rgb(59 130 246 / 80%);
    box-shadow: 0 0 6px rgb(59 130 246 / 50%);
  }

  50% {
    border-color: #475569;
    box-shadow: none;
  }
}

/* Custom outer radio circle */
.pretty-radio-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #475569;
  background-color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  animation: radio-glow-pulse 6s infinite ease-in-out;
}

/* Animation delays to loop the pulse down the options */
.pretty-radio-delay-0 .pretty-radio-circle {
  animation-delay: 0s;
}

.pretty-radio-delay-1 .pretty-radio-circle {
  animation-delay: 1.5s;
}

.pretty-radio-delay-2 .pretty-radio-circle {
  animation-delay: 3s;
}

.pretty-radio-delay-3 .pretty-radio-circle {
  animation-delay: 4.5s;
}

.pretty-radio-delay-4 .pretty-radio-circle {
  animation-delay: 6s;
}

.pretty-radio-delay-5 .pretty-radio-circle {
  animation-delay: 7.5s;
}

.pretty-radio-delay-6 .pretty-radio-circle {
  animation-delay: 9s;
}

.pretty-radio-delay-7 .pretty-radio-circle {
  animation-delay: 10.5s;
}

.pretty-radio-delay-8 .pretty-radio-circle {
  animation-delay: 12s;
}

.pretty-radio-delay-9 .pretty-radio-circle {
  animation-delay: 13.5s;
}

/* Hide native inputs */
.pretty-radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom inner dot */
.pretty-radio-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #60a5fa;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effects */
.pretty-radio-label:hover {
  border-color: rgb(59 130 246 / 50%);
  background-color: rgb(15 23 42 / 60%);
}

.pretty-radio-label:hover .pretty-radio-circle {
  animation-play-state: paused;
  border-color: #94a3b8;
  box-shadow: none;
}

/* Checked state styling using :has() */
.pretty-radio-label:has(.pretty-radio-input:checked) {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 12px rgb(59 130 246 / 25%) !important;
  background-color: rgb(59 130 246 / 8%) !important;
}

.pretty-radio-label:has(.pretty-radio-input:checked) .pretty-radio-circle {
  animation: none !important;
  border-color: #3b82f6 !important;
  background-color: rgb(59 130 246 / 10%) !important;
  box-shadow: none !important;
}

.pretty-radio-label:has(.pretty-radio-input:checked) .pretty-radio-dot {
  transform: scale(1);
}

.pretty-radio-label:has(.pretty-radio-input:checked) .pretty-radio-text {
  color: #fff !important;
}