/* Hero. A dark stage with a three line headline and two rotating words, then
   the deck and the two actions, and the distribution map along the bottom edge
   (map.css). The dark panel also runs up behind the
   header, which turns light on this page (header.css).
   Entrance motion and its splash gate live in motion/entrance.css. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100svh - 5rem);
  padding-block: clamp(2.5rem, 6vh, 4.5rem) calc(min(100vw, 80rem) * 0.4333 * 0.8);
  color: #fff;
}

/* The panel: full width, and up behind the header. A fine grid, the same lines
   as the range section at half the cell size. The range section below repeats
   it, and the fixed attachment keeps the lines continuous across the join. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10rem 0 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem fixed,
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 1.75rem 1.75rem fixed,
    var(--charcoal);
}

/* The map is positioned, so lift the copy above it. */
.hero > :is(h1, p, div) {
  position: relative;
  z-index: 1;
}

.hero h1 {
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
  font-size: clamp(1.75rem, 3.2vw, 2.875rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero h1 > span {
  display: block;
  white-space: nowrap;
}

.hero h1 > span:nth-child(2) {
  animation-delay: 120ms;
}

.hero h1 > span:nth-child(3) {
  animation-delay: 240ms;
}

/* Rotating word. typewriter.js swaps its text; the first word is real
   content so the heading reads correctly without scripts. */
.hero h1 strong {
  color: var(--light-crimson);
  font-weight: inherit;
}

.hero h1 strong span:last-child {
  display: inline-block;
  width: 1px;
  height: 0.78em;
  margin-left: 3px;
  vertical-align: -0.05em;
  border-radius: 1px;
  background: color-mix(in srgb, currentColor 60%, transparent);
  animation: caret 1.4s ease-in-out infinite;
}

@keyframes caret {
  0%,
  45%,
  100% {
    opacity: 0.5;
  }

  50%,
  95% {
    opacity: 0;
  }
}

.hero > p {
  max-width: 52ch;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 400;
  line-height: 1.55;
  animation-delay: 480ms;
}

.hero > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(1.25rem, 2vw, 2rem);
  animation-delay: 560ms;
}

.hero > div a {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: clamp(14px, 1.1vw, 15px);
  font-weight: 500;
  line-height: 1;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background-color var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.hero > div a:hover {
  transform: translateY(-1px);
}

.hero > div a svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.hero > div a:first-of-type {
  padding: 0.9rem 1.15rem 0.9rem 1.35rem;
  border-radius: 0.375rem;
  background: var(--dark-crimson);
  color: #fff;
}

.hero > div a:first-of-type:hover {
  background: color-mix(in srgb, var(--dark-crimson) 80%, #fff);
}

.hero > div a:last-of-type {
  gap: 0.65rem;
  padding-block: 0.5rem;
  color: #fff;
}

.hero > div a:last-of-type:hover {
  color: var(--light-crimson);
}

.hero :is(a, button):focus-visible {
  outline: 2px solid var(--light-crimson);
  outline-offset: 4px;
}

@media (max-width: 992px) {
  .hero {
    padding-block: clamp(1.75rem, 5vh, 3rem) calc(100vw * 0.4333 * 0.7);
  }

  .hero h1 > span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 strong span:last-child {
    opacity: 0.35;
    animation: none;
  }
}