:root {
  --site-bg-color: #020617;
  --site-bg-color-rgb: 2, 6, 23;
  --slate-50-rgb: 248, 250, 252;
  --slate-100-rgb: 241, 245, 249;
  --slate-200-rgb: 226, 232, 240;
  --slate-300-rgb: 203, 213, 225;
  --slate-400-rgb: 148, 163, 184;
  --slate-500-rgb: 100, 116, 139;
  --slate-600-rgb: 71, 85, 105;
  --slate-700-rgb: 51, 65, 85;
  --slate-750-rgb: 30, 41, 59;
  --slate-800-rgb: 30, 41, 59;
  --slate-850-rgb: 15, 23, 42;
  --slate-900-rgb: 15, 23, 42;
  --slate-950-rgb: 2, 6, 23;
  --text-primary: #f1f5f9;
  --text-primary-rgb: 241, 245, 249;
  --text-secondary: #cbd5e1;
  --text-secondary-rgb: 203, 213, 225;
  --text-muted: #94a3b8;
  --text-muted-rgb: 148, 163, 184;
  --border-color: #1e293b;
  --border-color-rgb: 30, 41, 59;
  --border-light: #0f172a;
  --border-light-rgb: 15, 23, 42;
  --surface-bg: #0f172a;
  --surface-bg-rgb: 15, 23, 42;
  --surface-card: rgb(15 23 42 / 45%);
  --color-primary: #3b82f6;
  --color-primary-rgb: 59, 130, 246;
  --color-accent: #8b5cf6;
  --color-accent-rgb: 139, 92, 246;
  --color-highlight: #ec4899;
  --color-highlight-rgb: 236, 72, 153;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius-base: 12px;
  --bg-mask-opacity: 0.15;
  --bg-mask-rotation: -15deg;
  --bg-gradient-start: #3b82f6;
  --bg-gradient-middle: #8b5cf6;
  --bg-gradient-end: #ec4899;
}

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

/* 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,
    var(--bg-gradient-start) 0%,
    var(--bg-gradient-middle) 50%,
    var(--bg-gradient-end) 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(var(--bg-mask-rotation));
  opacity: var(--bg-mask-opacity);
}
/* 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, transparent 20%, var(--site-bg-color) 90%);
  pointer-events: none;
}

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

.pretty-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-base, 12px);
  background-color: rgba(var(--surface-bg-rgb), 0.45);
  border: 1px solid rgba(var(--border-color-rgb), 0.5);
  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: rgba(var(--border-color-rgb), 0.8);
    box-shadow: none;
  }

  25% {
    border-color: rgba(var(--color-primary-rgb), 0.8);
    box-shadow: 0 0 6px rgba(var(--color-primary-rgb), 0.5);
  }

  50% {
    border-color: rgba(var(--border-color-rgb), 0.8);
    box-shadow: none;
  }
}

/* Custom outer radio circle */
.pretty-radio-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  background-color: var(--site-bg-color);
  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: var(--color-primary);
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover effects */
.pretty-radio-label:hover {
  border-color: rgba(var(--color-primary-rgb), 0.5);
  background-color: rgba(var(--surface-bg-rgb), 0.6);
}

.pretty-radio-label:hover .pretty-radio-circle {
  animation-play-state: paused;
  border-color: var(--color-primary);
  box-shadow: none;
}

/* Checked state styling using :has() */
.pretty-radio-label:has(.pretty-radio-input:checked) {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.25) !important;
  background-color: rgba(var(--color-primary-rgb), 0.08) !important;
}

.pretty-radio-label:has(.pretty-radio-input:checked) .pretty-radio-circle {
  animation: none !important;
  border-color: var(--color-primary) !important;
  background-color: rgba(var(--color-primary-rgb), 0.1) !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: var(--text-primary) !important;
}