/* ============================================================
   coverage-map.css — animated Dubai coverage map (homepage)
   Monochrome, self-contained, no external requests.
   ============================================================ */

.coverage{ position:relative; }

.cov-frame{
  position:relative;
  border:1px solid var(--silver-line);
  background:#F3F3F1;
  overflow:hidden;
}

.cov-svg{ display:block; width:100%; height:auto; }

/* The land, coast, roads and palm are decoration drawn UNDER the pins, and
   in SVG a filled path captures the pointer across its whole area. Without
   this, the landmass sits over every marker and swallows the hover and the
   click, so the pins look interactive and do nothing. */
.cov-land,.cov-coast,.cov-road,.cov-road-major,.cov-creek,.cov-palm,
.cov-palm *{ pointer-events:none; }

/* ---- landmass and water ----
   Water is the section ground; land is a slightly lighter plate, so the
   coastline reads without needing colour. */
.cov-land { fill:#D6D6D4; }
.cov-coast{ stroke:#8A8E92; stroke-width:1.8; }
.cov-creek{ stroke:#B4B8BB; stroke-width:2.4; stroke-linecap:round; }

/* Roads as hairlines only — enough to orient, never enough to distract. */
.cov-road      { stroke:#C6C8C9; stroke-width:1; }
.cov-road-major{ stroke:#B0B4B7; stroke-width:1.6; }

.cov-palm line, .cov-palm path{ stroke:#A8ACAF; stroke-width:1.4; fill:none; }
.cov-palm circle{ fill:none; stroke:#A8ACAF; stroke-width:1.2; }

/* ---- pins ---- */
.cov-pin{ cursor:pointer; }

/* Invisible hit target. The visible dot is 3.4px, which is far below a
   usable tap target on a phone; this gives roughly 30px of reachable
   area at render size without changing how the map looks. */
.cov-hit{ fill:transparent; }
.cov-dot{
  fill:var(--royal-deep);
  transition:fill .5s cubic-bezier(.16,1,.3,1),
             r    .5s cubic-bezier(.16,1,.3,1);
}
.cov-ring{
  pointer-events:none;
  fill:none; stroke:var(--royal-deep); stroke-width:1.2;
  opacity:0;
  /* transform-box is essential here. Without it, transform-origin:center
     on an SVG shape resolves against the VIEWBOX, not the shape, so the
     scaling rings fly off and pulse out in the sea instead of around
     their own pin. */
  transform-box:fill-box;
  transform-origin:center;
}

/* Labels: only the key communities are labelled at rest, otherwise 73
   labels collide into noise. The rest appear on hover or keyboard focus. */
.cov-lab{
  font-family:'Inter',system-ui,sans-serif;
  font-size:11px; font-weight:600; fill:var(--royal-deep);
  paint-order:stroke; stroke:#F3F3F1; stroke-width:3.5px;
  stroke-linejoin:round;
  opacity:0; transition:opacity .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.cov-pin.is-key .cov-lab{ opacity:.92; }

/* ---- the attracting motion ----
   A slow expanding ring, staggered per pin via --d, so the map reads as
   live coverage rather than a static diagram. Two seconds is deliberately
   unhurried; anything faster looks like an alert. */
@keyframes covPulse{
  0%   { opacity:.55; transform:scale(.45); }
  70%  { opacity:0;   transform:scale(2.1); }
  100% { opacity:0;   transform:scale(2.1); }
}
.cov-frame.is-live .cov-ring{
  animation:covPulse 2.8s cubic-bezier(.16,1,.3,1) var(--d, 0s) infinite;
}

/* Pins arrive on scroll, staggered. */
.cov-pin{ opacity:0; transform-box:fill-box; }
.cov-frame.is-live .cov-pin{
  animation:covIn .7s cubic-bezier(.16,1,.3,1) var(--d, 0s) both;
}
@keyframes covIn{ from{opacity:0} to{opacity:1} }

/* ---- hover / focus ---- */
@media (hover:hover) and (pointer:fine){
  .cov-pin:hover .cov-dot{ r:5.2; fill:#000; }
  .cov-pin:hover .cov-lab{ opacity:1; }
}
.cov-pin:focus-visible{ outline:none; }
.cov-pin:focus-visible .cov-dot{ r:5.2; fill:#000; }
.cov-pin:focus-visible .cov-lab{ opacity:1; }
.cov-pin:focus-visible .cov-ring{
  opacity:1; stroke-width:2; animation:none; transform:scale(1.5);
}

/* ---- caption strip ---- */
.cov-meta{
  display:flex; gap:26px; flex-wrap:wrap; align-items:baseline;
  padding:14px 16px; border-top:1px solid var(--silver-line);
  background:var(--white);
}
.cov-meta b{
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;
  font-size:1.45rem; font-weight:700; letter-spacing:-.01em;
  color:var(--royal-deep); margin-right:7px;
}
.cov-meta span{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted);
}
.cov-hint{
  margin:10px 0 0; font-size:.82rem; color:var(--text-muted);
}

/* Mobile-only overlay link. Hidden on desktop. */
.cov-tap{ display:none; }

@media (max-width:640px){
  /* On a phone the labels are unreadable at this scale, and the pins
     render about 10px across — well under a usable tap target. Enlarging
     them is not the fix either: 73 markers this close together would
     overlap and send people to the wrong community. So on mobile the
     pins become decoration, the whole map is one link to the full
     coverage list, and the community lists below are the real
     navigation. Deterministic beats fiddly. */
  .cov-lab{ display:none; }
  .cov-dot{ r:4.2; }
  .cov-pin{ pointer-events:none; }
  .cov-tap{
    display:block; position:absolute; inset:0 0 52px 0; z-index:2;
  }
  .cov-tap:focus-visible{ outline:2px solid var(--royal-deep); outline-offset:-3px; }
  .cov-meta{ gap:16px; }
  .cov-meta b{ font-size:1.2rem; }
}

@media (prefers-reduced-motion:reduce){
  .cov-frame.is-live .cov-ring,
  .cov-frame.is-live .cov-pin{ animation:none; }
  .cov-pin{ opacity:1; }
  .cov-ring{ opacity:.25; }
}