/* Base */
body {
  background-color: #050505;
  color: #f5f5f0;
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/* Grain */
.grain-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.035;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #222222;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

/* Selection */
::selection {
  background: rgba(200, 164, 140, 0.25);
  color: #f5f5f0;
}

/* 3D */
.perspective-1000 {
  perspective: 1000px;
}
.preserve-3d {
  transform-style: preserve-3d;
}

/* Nav */
.nav-glass {
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(34, 34, 34, 0.6);
}

/* Before/After */
.ba-slider {
  touch-action: pan-y;
  user-select: none;
}

/* Process steps */
.process-step.active {
  opacity: 1 !important;
}

/* Reduced 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;
  }
}