/* Type + visual polish that Tailwind's CDN build doesn't cover on its own. */

body {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.font-display {
  font-family: "Sora", ui-sans-serif, system-ui, sans-serif;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 50;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  background-color: #22d3ee;
  color: #020617;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: 1rem;
}

/* Ambient background blobs */
.blob {
  animation: float 16s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.5rem, -1.5rem, 0) scale(1.08);
  }
}

/* Gradient-filled range slider, styled per-engine since range inputs
   can't be themed with a single cross-browser rule set. */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    to right,
    #e879f9,
    #a78bfa 45%,
    #22d3ee 100%
  );
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid #a78bfa;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.5);
  cursor: pointer;
}

.range-slider::-moz-range-thumb {
  height: 18px;
  width: 18px;
  border-radius: 9999px;
  background: #ffffff;
  border: 3px solid #a78bfa;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.5);
  cursor: pointer;
}

.range-slider::-moz-range-track {
  height: 6px;
  border-radius: 9999px;
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}