/* ISSLA RISK - home hero dot-matrix map. Loaded on the home page only (home.json "css").
   Default (no JS, reduced motion) = settled state with all four layers visible.
   The pulsing ring repeats 3 times and then rests (WCAG 2.2.2). The ~8 s sequence is pure CSS (opacity / transform / stroke-dashoffset), enabled only when motion is allowed. */

.hero-map { position: relative; margin-top: var(--sp-7); width: min(100%, 26rem); }
.hm-svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 630; overflow: visible; }
.hm-dots { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.hm-dots--shadow { stroke: #01070a; stroke-opacity: 0.7; stroke-width: 3.6; }
.hm-dots--edge { stroke: #06202d; }
.hm-dots--face { stroke: url(#hm-face); }
.hm-dots--lit { stroke: #5d96b2; stroke-opacity: 0.35; stroke-width: 1.1; }
.hm-n { fill: var(--brass); }
.hm-n--o { fill: #e3c27a; }
.hm-k { fill: none; stroke: var(--brass); stroke-width: 1.3; stroke-opacity: 0.85; }
.hm-k--f { stroke-width: 0.8; stroke-opacity: 0.6; }
.hm-ring { fill: none; stroke: #e3c27a; stroke-width: 1.6; }
.hm-pulse { fill: none; stroke: #e3c27a; stroke-width: 1; opacity: 0; }
.hm-n, .hm-ring, .hm-pulse { transform-box: fill-box; transform-origin: center; }


/* Desktop: two zones. Text left, map right and vertically centred. */
@media (min-width: 1200px) {
  .hero { min-height: 40rem; }
  .hero-map {
    position: absolute; z-index: 0; margin: 0; width: clamp(20rem, 30vw, 28rem);
    right: max(var(--gutter), calc((100% - var(--wrap)) / 2)); top: 50%; transform: translateY(-50%);
  }
  .hero__inner { z-index: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .hm-relief { animation: hm-fade 0.8s ease-out backwards; }
  .hm-n { animation: hm-pop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) var(--d) backwards; }
  .hm-k { animation: hm-draw 0.7s ease-out var(--d) backwards; }
  .hm-ring { animation: hm-ring 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 4.8s backwards; }
  .hm-pulse { animation: hm-pulse 3.6s ease-out 8.2s 3 backwards; }
  .hm-halo { animation: hm-fade 1.6s ease-in-out 6.2s backwards; }
  .hero-map.is-paused * { animation-play-state: paused; }
}
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes hm-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes hm-ring { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
@keyframes hm-pulse { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }