/**
 * @file about-map-scene.css
 * @purpose Present an illustrative isometric city with project signs rising from ground anchors.
 * @dependencies about.html, about-map-scene.js and original project-city.svg.
 * @public .about-map-scene and .map-project-sign. Side effects: Visibility-gated CSS animation.
 */
.about-map-scene { background: #070d11; overflow: hidden; }
.about-map-world { position: absolute; top: 52%; left: 64%; width: max(1120px, 94vw); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); }
.about-map-world > img { display: block; width: 100%; height: 100%; }
/* Anchor each sign to a city block in the fixed illustration coordinate system. */
.map-project-sign { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); transform-origin: bottom center; }
.map-project-sign span { padding: 11px 17px; border: 1px solid #adc6cf80; background: #10202ded; box-shadow: 0 12px 30px #0008; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.map-project-sign i { position: relative; width: 2px; height: 58px; background: linear-gradient(#fff, #9dd5db); box-shadow: 0 0 12px #9dd5db80; }
.map-project-sign i::after { position: absolute; bottom: -4px; left: -5px; width: 12px; height: 8px; border: 2px solid #dcf4f5; border-radius: 50%; background: #e83931; content: ""; box-shadow: 0 0 20px #fff9; }
.map-sign-housing { left: 46.5%; top: 45%; --delay: 0s; }
.map-sign-commerce { left: 62.5%; top: 53%; --delay: 1.4s; }
.map-sign-infrastructure { left: 53%; top: 68%; --delay: 2.8s; }
.map-motion-ready .map-project-sign { animation: project-sign-rise 14s var(--delay) both infinite; animation-play-state: paused; }
.map-motion-ready.is-active .map-project-sign { animation-play-state: running; }
@keyframes project-sign-rise {
  0%, 5% { opacity: 0; transform: translate(-50%, -12%) scale(.65); }
  15%, 75% { opacity: 1; transform: translate(-50%, -100%) scale(1); }
  90%, 100% { opacity: 0; transform: translate(-50%, -100%) scale(1); }
}
@media (max-width: 760px) {
  .about-map-world { top: 35%; left: 53%; width: 950px; }
  .map-project-sign span { font-size: 10px; padding: 9px 11px; }
  .map-project-sign i { height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-motion-ready .map-project-sign { animation: none; }
}