/**
 * Home guide neighborhood skin
 */

html {
  scroll-behavior: smooth;
}

.trinity-player-iframe-wrapper,
.story-body > header + figure {
  display: none;
}

.story-body h3 {
  text-align: center;
}

#neighborhoodMap {
  position: relative;
  height: 70vw;
  display: grid;
  place-content: end;
  background-color: var(--body-background);
  --detail-background: rgba(0,0,0,0.6);
  --detail-color: white;
}

#neighborhoodMap svg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#neighborhoodMap:after {
  content: attr(data-neighborhood);
  font: bold 2.4rem/1em var(--sans);
  position: sticky;
  bottom: 0;
  padding: 45px;
  background: radial-gradient(rgba(241,247,223,0.8) 40%, transparent 70%);
}

g.neighborhood {
  pointer-events: bounding-box;
  cursor: pointer;
  transition: all .2s ease;
  --scale: 1.1;
}

g.neighborhood:hover {
  transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}

g.neighborhood [id^="Highlight"],
g.neighborhood:hover [id^="Original"] {
  opacity: 0;
}

g.neighborhood:hover [id^="Highlight"] {
  opacity: 1;
}