html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: 'Inter', sans-serif;
}

::selection {
  background: #2433E0;
  color: #ffffff;
}

[data-animate="fade-up"] {
  will-change: transform, opacity;
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.mesh-gradient-dark {
  position: relative;
  background-color: #050505;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(50, 50, 55, .9), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(28, 28, 32, .85), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 90%, rgba(65, 65, 70, .6), transparent 60%);
  background-size: 200% 200%;
  animation: meshMove 9s ease-in-out infinite;
}

@keyframes meshMove {
  0%   { background-position: 0% 50%, 100% 50%, 50% 100%; }
  50%  { background-position: 100% 50%, 0% 0%, 0% 50%; }
  100% { background-position: 0% 50%, 100% 50%, 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh-gradient-dark {
    animation: none;
  }
}