.scroll-progress {
  transform-origin: left center;
  transition: transform 80ms linear;
}

html {
  scroll-padding-top: 96px;
}

html,
body {
  background:
    radial-gradient(120% 90% at 78% 35%, #0d130d 0%, #070707 55%, #040504 100%);
}

#top,
#shift,
#surface,
#anticipate {
  scroll-margin-top: 96px;
}

#waitlist {
  scroll-margin-top: 82px;
}

.threat-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 0.78 !important;
}

.bg-grid {
  opacity: 0.32 !important;
}

.bg-scanlines {
  opacity: 0.48 !important;
  mix-blend-mode: multiply;
}

.bg-noise {
  opacity: 0.34 !important;
}

.vhs-tint {
  opacity: 0.22 !important;
}

.vhs-roll {
  opacity: 0.26 !important;
}

.vhs-tracking {
  opacity: 0.34 !important;
}

.radial-vignette {
  background:
    linear-gradient(
      90deg,
      rgba(7, 7, 7, 0.72) 0%,
      rgba(7, 7, 7, 0.52) 28%,
      rgba(7, 7, 7, 0.16) 58%,
      rgba(7, 7, 7, 0.48) 100%
    ),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.84) 100%);
}

.crt-curve {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.74) 100%);
}

.vultus-logo {
  display: block;
  width: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(189, 248, 0, 0.25));
}

.vultus-logo--header {
  height: 16px;
}

.vultus-logo--footer {
  height: 32px;
}

.site-header {
  background: rgba(3, 6, 3, 0.46);
  border-bottom: 1px solid rgba(188, 248, 0, 0.1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}

.site-header > div {
  height: 72px;
}

.site-header.is-scrolled {
  background: rgba(3, 6, 3, 0.58);
  border-bottom: 1px solid rgba(188, 248, 0, 0.14);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
}

.site-header.is-scrolled::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--primary) 42%, transparent),
    transparent
  );
}

select {
  color-scheme: dark;
}

select option {
  background: #050805;
  color: #f5f7ef;
}

@media (max-width: 640px) {
  .site-header > div {
    height: 64px;
  }

  .threat-canvas {
    opacity: 0.58 !important;
  }

  .radial-vignette {
    background:
      linear-gradient(180deg, rgba(7, 7, 7, 0.46) 0%, rgba(7, 7, 7, 0.82) 100%),
      radial-gradient(ellipse at center, transparent 24%, rgba(0, 0, 0, 0.88) 100%);
  }

  #top h1.h-display {
    font-size: clamp(2.1rem, 10.4vw, 2.85rem) !important;
    line-height: 1;
  }

  #top > div {
    width: 100%;
    max-width: 100vw !important;
  }

  #top p {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  #top .max-w-2xl {
    max-width: min(34ch, 100%) !important;
  }

  #top .mono.max-w-2xl {
    max-width: min(32ch, 100%) !important;
  }

  #top .mono.border-l-2 {
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    line-height: 1.7;
  }

  .vultus-logo--header {
    height: 14px;
  }

  .vultus-logo--footer {
    height: 26px;
  }

  body > div > .fixed.bottom-0 .flex-1 {
    display: none;
  }

  body > div > .fixed.bottom-0 a[href="#waitlist"] {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}

@supports not (background: color-mix(in oklab, black, transparent)) {
  .site-header {
    background: rgba(3, 6, 3, 0.46);
    border-bottom-color: rgba(188, 248, 0, 0.1);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  }

  .site-header.is-scrolled {
    background: rgba(3, 6, 3, 0.58);
    border-bottom-color: rgba(188, 248, 0, 0.14);
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.24);
  }

  .site-header.is-scrolled::after {
    background: linear-gradient(90deg, transparent, rgba(188, 248, 0, 0.42), transparent);
  }
}