html {
  scroll-behavior: smooth;
}

body {
  scroll-padding-top: 5rem;
}

.radial-vignette {
  background: radial-gradient(ellipse at top, transparent 0%, rgba(2, 6, 23, 0.4) 55%, rgb(2, 6, 23) 100%);
}

.radial-vignette-soft {
  background: radial-gradient(ellipse at top, transparent 0%, rgba(2, 6, 23, 0.3) 100%);
}

.line-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

.dot-grid {
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-slide {
  transition: opacity 1s ease;
}

.modal-overlay.flex {
  display: flex;
}