/*
 * La calle del hero (HeroStreet, ADR 0034 y 0036): la acera se prolonga hasta los bordes de la pantalla por
 * debajo de la ilustración (que se queda en 1280 px) y el círculo se redibuja cuando cambia la búsqueda. La
 * vida de la calle (puertas, persiana, ventanas, toldos, un pájaro) está en `motion.css` (ronda 6).
 */
.hero-street {
  --street-w: min(100vw, 80rem);
  isolation: isolate;
}
/* La acera de la ilustración mide 16 + 5 de 1440 (Kraft y la línea de tinta). */
.hero-street::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: calc(var(--street-w) * 21 / 1440);
  background: linear-gradient(var(--kraft) 0 76%, var(--ink) 76%);
}
@media (max-width: 39.99rem) {
  .hero-street {
    --street-w: 46rem;
  }
}
.hs-awning {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

html[data-motion] .ring-draw {
  animation: ring-draw 0.75s cubic-bezier(0.55, 0.1, 0.3, 1) both;
}
@keyframes ring-draw {
  from {
    stroke-dashoffset: 1.02;
  }
  to {
    stroke-dashoffset: 0;
  }
}