/* Glide to reveal effect scoped to hero city strip */
.city-glide {
  --lerp-0: 1;
  --lerp-1: calc(sin(50deg));
  --lerp-2: calc(sin(45deg));
  --lerp-3: calc(sin(35deg));
  --lerp-4: calc(sin(25deg));
  --lerp-5: calc(sin(15deg));

  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.city-glide-track {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.city-glide-track::-webkit-scrollbar {
  display: none;
}

.glide-letter {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  position: relative;
  transition: color 0.3s ease;
  border-radius: 999px;
  border: 1px solid transparent;
}

.glide-letter span {
  scale: calc(var(--active, 0) + 0.5);
  filter: blur(calc((1 - var(--active, 0)) * 0.6rem));
  transition: scale calc(((1 - var(--active, 0)) + 0.15) * 0.9s),
    filter calc(((1 - var(--active, 0)) + 0.15) * 0.9s);
}

.glide-letter:is(:hover, :focus-visible) {
  --active: var(--lerp-0);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}
.glide-letter:is(:hover, :focus-visible) + .glide-letter,
.glide-letter:has(+ .glide-letter:is(:hover, :focus-visible)) {
  --active: var(--lerp-1);
  color: rgba(255, 255, 255, 0.6);
}
.glide-letter:is(:hover, :focus-visible) + .glide-letter + .glide-letter,
.glide-letter:has(+ .glide-letter + .glide-letter:is(:hover, :focus-visible)) {
  --active: var(--lerp-2);
}
.glide-letter:is(:hover, :focus-visible)
  + .glide-letter
  + .glide-letter
  + .glide-letter,
.glide-letter:has(
    + .glide-letter + .glide-letter + .glide-letter:is(:hover, :focus-visible)
  ) {
  --active: var(--lerp-3);
}
.glide-letter:is(:hover, :focus-visible)
  + .glide-letter
  + .glide-letter
  + .glide-letter
  + .glide-letter,
.glide-letter:has(
    + .glide-letter
      + .glide-letter
      + .glide-letter
      + .glide-letter:is(:hover, :focus-visible)
  ) {
  --active: var(--lerp-4);
}
.glide-letter:is(:hover, :focus-visible)
  + .glide-letter
  + .glide-letter
  + .glide-letter
  + .glide-letter
  + .glide-letter,
.glide-letter:has(
    + .glide-letter
      + .glide-letter
      + .glide-letter
      + .glide-letter
      + .glide-letter:is(:hover, :focus-visible)
  ) {
  --active: var(--lerp-5);
}