/* Loading screen — animated blocks tracing a house outline.
   Light mode, solid background, brand-navy fill (tokens.css).

   On /map, #loading is a full-viewport overlay so the map and cards can
   mount underneath while the wobbly-house holds. Dismissed by toggling
   .is-hidden (fades opacity + drops pointer-events) from main.js once
   the map has fired its first idle AND every initial card image is loaded. */
#loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  transition: opacity 250ms ease;
}
#loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.house-loader {
  position: relative;
  width: 136px;
  height: 136px;
}
.hl-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: var(--navy);
  animation: houseTrace 9s ease-in-out infinite both;
}

/* Each block is offset by one path segment, so 11 blocks fill the outline
   and a single gap marches around it. */
.hl-block:nth-child(1)  { animation-delay: 0s; }
.hl-block:nth-child(2)  { animation-delay: -0.75s; }
.hl-block:nth-child(3)  { animation-delay: -1.5s; }
.hl-block:nth-child(4)  { animation-delay: -2.25s; }
.hl-block:nth-child(5)  { animation-delay: -3s; }
.hl-block:nth-child(6)  { animation-delay: -3.75s; }
.hl-block:nth-child(7)  { animation-delay: -4.5s; }
.hl-block:nth-child(8)  { animation-delay: -5.25s; }
.hl-block:nth-child(9)  { animation-delay: -6s; }
.hl-block:nth-child(10) { animation-delay: -6.75s; }
.hl-block:nth-child(11) { animation-delay: -7.5s; }

@keyframes houseTrace {
  0%       { left: 56px;  top: 0px;   }
  6.667%   { left: 56px;  top: 0px;   }
  8.333%   { left: 84px;  top: 28px;  }
  15%      { left: 84px;  top: 28px;  }
  16.667%  { left: 112px; top: 56px;  }
  23.333%  { left: 112px; top: 56px;  }
  25%      { left: 112px; top: 84px;  }
  31.667%  { left: 112px; top: 84px;  }
  33.333%  { left: 112px; top: 112px; }
  40%      { left: 112px; top: 112px; }
  41.667%  { left: 84px;  top: 112px; }
  48.333%  { left: 84px;  top: 112px; }
  50%      { left: 56px;  top: 112px; }
  56.667%  { left: 56px;  top: 112px; }
  58.333%  { left: 28px;  top: 112px; }
  65%      { left: 28px;  top: 112px; }
  66.667%  { left: 0px;   top: 112px; }
  73.333%  { left: 0px;   top: 112px; }
  75%      { left: 0px;   top: 84px;  }
  81.667%  { left: 0px;   top: 84px;  }
  83.333%  { left: 0px;   top: 56px;  }
  90%      { left: 0px;   top: 56px;  }
  91.667%  { left: 28px;  top: 28px;  }
  98.333%  { left: 28px;  top: 28px;  }
  100%     { left: 56px;  top: 0px;   }
}

/* Screen-reader-only label; the animation is always shown visually. */
.hl-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}