html {
  scroll-behavior: smooth;
}

body.nav-open {
  overflow: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(38, 35, 31, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 35, 31, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 88%);
}

.nav-open .site-nav {
  display: grid;
}

.nav-open .nav-toggle span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-open .nav-toggle span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0ms);
}

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

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #9a3f2d;
  box-shadow: 0 0 0 4px rgba(154, 63, 45, 0.1);
}

.field-error small {
  color: #9a3f2d;
}

.form-message.visible {
  display: block;
}

@supports (content-visibility: auto) {
  main > section:not(:first-child) {
    content-visibility: auto;
    contain-intrinsic-size: 1px 860px;
  }
}

.gun-body,
.gun-nozzle,
.gun-handle {
  fill: none;
  stroke: #1f211e;
  stroke-width: 9;
  stroke-linejoin: round;
}

.gun-grip,
.stand {
  fill: none;
  stroke: #7b452a;
  stroke-width: 9;
  stroke-linecap: round;
}

.dial {
  fill: rgba(184, 111, 66, 0.14);
  stroke: #7b452a;
  stroke-width: 7;
}

.bg-charcoal .gun-body,
.bg-charcoal .gun-nozzle,
.bg-charcoal .gun-handle {
  stroke: #fffaf1;
}

.air {
  fill: none;
  stroke: url(#air);
  stroke-width: 14;
  stroke-linecap: round;
  animation: airPulse 2.8s ease-in-out infinite;
}

.air-two {
  animation-delay: 220ms;
}

.air-three {
  animation-delay: 440ms;
}

@keyframes airPulse {
  0%,
  100% {
    opacity: 0.38;
    transform: translateX(-8px);
  }

  50% {
    opacity: 1;
    transform: translateX(9px);
  }
}

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

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