/* Real, label-free OpenStreetMap excerpts. Each field keeps its geographic aspect
   ratio; the script adds fields as the page grows instead of stretching a map. */
body.hmd-city-maps-active { position: relative; isolation: isolate; }
.hmd-city-atlas {
  --hmd-city-field-height: clamp(1100px, 94vw, 1550px);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.hmd-city-field {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--hmd-city-field-height);
  overflow: hidden;
  color: #765c83;
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 72%, transparent);
  mask-image: linear-gradient(transparent, #000 15%, #000 72%, transparent);
}
.hmd-city-field svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  color: inherit;
  opacity: 1;
}
.hmd-city-field .roads { opacity: .15; stroke-width: 1; fill: none; }
.hmd-city-field .coast { opacity: .19; stroke-width: 1.2; fill: none; }
.hmd-city-field .water { opacity: .13; stroke-width: 1; fill: none; }
.hmd-city-field .blocks { opacity: .06; stroke-width: .65; fill: none; }
.hmd-city-field .trace {
  stroke: #49354f;
  stroke-width: 1.6;
  stroke-dasharray: 6 110;
  stroke-dashoffset: 14;
  opacity: 0;
  animation: hmd-city-light 26s linear infinite;
  animation-play-state: paused;
}
.hmd-city-field .trace:nth-child(2) { animation-delay: -9s; }
.hmd-city-field .trace:nth-child(3) { animation-delay: -17s; }
.hmd-city-field[data-city="bergen"] .trace:nth-child(1) { animation-delay: -5s; }
.hmd-city-field[data-city="trondheim"] .trace:nth-child(1) { animation-delay: -13s; }
.hmd-city-atlas:not(.hmd-city-paused) .hmd-city-field.is-visible .trace { animation-play-state: running; }
@keyframes hmd-city-light {
  0%, 10% { stroke-dashoffset: 14; opacity: 0; }
  19%, 62% { opacity: .35; }
  80%, 100% { stroke-dashoffset: -106; opacity: 0; }
}

/* Soft reading fields let the maps cover the page without crossing the copy at
   full intensity. They do not affect the Norway result artwork or its sizing. */
.hmd-city-maps-active .featured-copy { isolation: isolate; }
.hmd-city-maps-active .featured-copy::before {
  content: "";
  position: absolute;
  inset: -26px -24px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 45% 50%, #f7f5f2f5 10%, #f7f5f2e6 50%, #f7f5f2a6 68%, transparent 83%);
  filter: blur(16px);
}
/* A paper veil behind the existing map keeps street geometry separate from
   Norway's silhouette. The artwork, size and result layers remain untouched. */
.hmd-city-maps-active #orbital-host::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, #f7f5f2f5 12%, #f7f5f2e6 48%, #f7f5f280 70%, transparent 86%);
}
.hmd-city-maps-active .contribute { background: linear-gradient(90deg, #f7f5f2db, #f7f5f294); }
.hmd-city-maps-active footer.site-footer { background: linear-gradient(transparent, #f7f5f2d9 45%); }
footer.site-footer .map-credit {
  grid-column: 1 / -1;
  margin: -12px 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: #82728a;
}
.map-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.map-credit a:focus-visible { outline: 2px solid #85748c; outline-offset: 4px; }
@media (min-width: 1600px) {
  .hmd-city-field svg { width: 120%; margin-left: -10%; }
}
@media (max-width: 700px) {
  .hmd-city-atlas { --hmd-city-field-height: 1080px; }
  .hmd-city-field svg { width: 205%; margin-left: -65%; }
  .hmd-city-field[data-city="bergen"] svg { margin-left: -12%; }
  .hmd-city-field[data-city="trondheim"] svg { margin-left: -72%; }
  .hmd-city-field .roads { opacity: .14; }
  .hmd-city-field .blocks { opacity: .045; }
  .hmd-city-maps-active .featured-copy::before {
    inset: -24px -12px;
    background: radial-gradient(ellipse, #f7f5f2f2 10%, #f7f5f2e0 53%, #f7f5f28a 75%, transparent 100%);
    filter: blur(13px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hmd-city-field .trace { display: none; animation: none; }
}
@media print {
  .hmd-city-atlas { display: none; }
}