.font-heading,
.font-body {
  font-family: var(--font-heading);
}

.font-black {
  font-weight: 900;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

.scan-lines {
  background-image:
    linear-gradient(rgba(0, 101, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 101, 255, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
}

.finish-line-pattern {
  background-image:
    linear-gradient(45deg, #05070a 25%, transparent 25%),
    linear-gradient(-45deg, #05070a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #05070a 75%),
    linear-gradient(-45deg, transparent 75%, #05070a 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  background-color: #fff;
}

.js-mobile-menu {
  background-color: hsl(var(--foreground) / 0.98);
}