/* Custom enhancements layered on top of Tailwind */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-feature-settings: "ss01", "cv11";
  background-image:
    radial-gradient(circle at 20% 10%, rgba(99, 102, 241, 0.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.06), transparent 45%);
}

/* Subtle grid background overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: -1;
  mask-image: radial-gradient(ellipse at top, black 30%, transparent 80%);
}

/* Selection */
::selection {
  background: rgba(168, 85, 247, 0.4);
  color: white;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0f1d; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #6366f1, #ec4899);
  border-radius: 10px;
  border: 2px solid #0a0f1d;
}

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