html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 6rem;
}

body {
  overflow-x: hidden;
  letter-spacing: 0;
}

::selection {
  color: #fefefc;
  background: #123f3b;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 980ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 980ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.soft-float {
  animation: softFloat 8s ease-in-out infinite;
}

.line-draw {
  transform-origin: left;
  animation: lineDraw 1300ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
}

.premium-grain {
  background:
    radial-gradient(circle at 55% 35%, rgba(95, 143, 134, 0.13), rgba(247, 247, 243, 0) 52%),
    linear-gradient(135deg, rgba(185, 162, 113, 0.08), rgba(255, 255, 255, 0) 42%);
}

.premium-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(18, 63, 59, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 63, 59, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
}

@keyframes softFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes lineDraw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}