.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--site-header-height));
  padding-bottom: 40px; /* check:ignore */
  background: var(--color-accent-tint);
}

.hero__bg {
  --grid-line-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

@media (width >= 768px) {
  .hero {
    --ruler-size: 20px; /* check:ignore */
  }

  .hero__bg {
    --column-grid-top: var(--ruler-size);
  }
}

.hero__code {
  display: none;
}

@media (width >= 1024px) {
  .hero__code {
    display: block;
    position: absolute;
    right: 40px;  /* check:ignore */
    bottom: 60px; /* check:ignore */
    color: color-mix(in srgb, var(--color-text-secondary) 90%, transparent);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
}

.hero__content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px var(--space-16) 6px 14px; /* check:ignore */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.badge__dot {
  position: relative;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--color-status-available);
}

.badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}

:where(.hero[data-motion="settled"]) .badge__dot::after {
  animation: badge-pulse var(--duration-pulse) var(--ease-out) 3 forwards;
}


.hero__title {
  font-size: clamp(2.5rem, 11.2vw, var(--font-size-display));
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
}

.hero__role {
  --selection-inset-x: var(--space-16);
  --selection-inset-y: var(--space-4);
  position: relative;
  display: inline-flex;
  justify-content: center;
  white-space: nowrap;
  transition: width var(--duration-slow) var(--ease-out);
}

.hero__role::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--selection-inset-y)) calc(-1 * var(--selection-inset-x));
}

.hero__role-text {
  display: inline-block;
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.hero__role-text[data-phase="out"] {
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-8)));
  transition-duration: var(--duration-exit);
  transition-timing-function: var(--ease-in);
}

.hero__role-text[data-phase="pre-in"] {
  opacity: 0;
  transform: translateY(var(--space-8));
  transition: none;
}

.hero__role-text--probe {
  position: absolute;
  visibility: hidden;
}

.hero__role em {
  color: var(--color-accent);
  font-style: normal;
}

.hero__lead {
  font-size: var(--font-size-lead);
  line-height: var(--line-height-lead);
  text-wrap: balance;
}

.hero__location {
  color: var(--color-text-secondary);
}

.scroll-cue {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: var(--space-12);
  color: var(--color-accent-active);
  font-size: var(--font-size-ui);
  font-weight: 500;
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.scroll-cue__circle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  transition:
    background-color 280ms var(--ease-out), /* check:ignore */
    border-color 280ms var(--ease-out),     /* check:ignore */
    color 280ms var(--ease-out);            /* check:ignore */
}

.scroll-cue__circle svg {
  display: block;
}

@media (hover: hover) {
  .scroll-cue:hover .scroll-cue__circle {
    border-color: transparent;
    background: var(--color-bg);
    color: var(--color-accent);
    transform: translateY(var(--space-12));
    animation: scroll-cue-in 320ms var(--ease-out) forwards; /* check:ignore */
    transition-duration: 320ms; /* check:ignore */
  }

  .scroll-cue:hover .scroll-cue__circle svg {
    animation: scroll-cue-arrow-in 320ms var(--ease-out) forwards; /* check:ignore */
  }
}

.scroll-cue[data-leaving]:not(:hover) .scroll-cue__circle {
  animation: scroll-cue-out 280ms var(--ease-out); /* check:ignore */
}

.scroll-cue[data-leaving]:not(:hover) .scroll-cue__circle svg {
  animation: scroll-cue-arrow-out 280ms var(--ease-out); /* check:ignore */
}

@keyframes scroll-cue-in {
  0% { transform: translateY(0) scale(1, 1); }
  21.9% { transform: translateY(8px) scale(0.875, 1.208); }
  46.9% { transform: translateY(17px) scale(0.792, 1.292); }
  71.9% { transform: translateY(15px) scale(1.125, 0.875); }
  100% { transform: translateY(12px) scale(1, 1); }
}

@keyframes scroll-cue-arrow-in {
  21.9% { transform: scale(1.143, 0.828); }
  46.9% { transform: scale(1.263, 0.774); }
  71.9% { transform: scale(0.889, 1.143); }
}

@keyframes scroll-cue-out {
  0% { transform: translateY(12px) scale(1, 1); }
  28.6% { transform: translateY(2px) scale(0.833, 1.25); }
  60.7% { transform: translateY(-4px) scale(0.958, 1.083); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes scroll-cue-arrow-out {
  28.6% { transform: scale(1.2, 0.8); }
  60.7% { transform: scale(1.043, 0.923); }
}

:where(.hero[data-motion="settled"]) .scroll-cue__circle {
  animation: scroll-cue-bob var(--duration-bob) var(--ease-in-out) 4 forwards;
}

@keyframes scroll-cue-bob {
  50% {
    transform: translateY(6px); /* check:ignore */
  }
}

.scroll-cue:focus-visible {
  outline-color: transparent;
}

.scroll-cue:focus-visible .scroll-cue__circle {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-4);
}

.scroll-cue:active .scroll-cue__circle {
  border-color: transparent;
  background: var(--color-bg);
  color: var(--color-accent-active);
  transform: translateY(var(--space-12)) scale(1.125, 0.875);
  transform-origin: 50% 100%;
  animation: none;
}

.scroll-cue:active .scroll-cue__circle svg {
  transform: scale(0.889, 1.143);
  animation: none;
}

@media (width < 768px) {
  .hero {
    padding-bottom: var(--space-32);
  }

  .badge {
    padding: var(--space-4) 14px var(--space-4) var(--space-12); /* check:ignore */
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }

  .badge__dot {
    width: 6px;  /* check:ignore */
    height: 6px; /* check:ignore */
  }

  .hero__lead {
    text-wrap: pretty;
  }

  .hero__role {
    --selection-inset-x: var(--space-8);
  }
}