/* Background map: nine lit countries joined by an illustrative network.
   The rules outside the motion block are the complete static map, for no JS, reduced motion and print.
   assets/background-map.js only switches data-motion; the keyframes never need a timer. */

.background-map { width:100%; max-width:720px; min-width:0; margin-inline:auto; color:#F0F0F2; }
.background-map__svg { display:block; width:100%; height:auto; overflow:hidden; }

.background-map__graticule, .background-map__borders, .background-map__coast { fill:none; vector-effect:non-scaling-stroke; }
.background-map__graticule { stroke:rgba(240,240,242,.055); stroke-width:1px; }
.background-map__land { fill:#24231E; }
.background-map__borders { stroke:rgba(240,240,242,.1); stroke-width:.5px; }
.background-map__coast { stroke:rgba(240,240,242,.26); stroke-width:.75px; stroke-linejoin:round; }

/* Lit silhouettes: fill and outline carry the highlight at rest, the glow only adds to it. */
.background-map__country { cursor:default; outline:none; }
.background-map__shape { fill:#0B3FCF; stroke:#7C9CFF; stroke-width:1px; stroke-linejoin:round; vector-effect:non-scaling-stroke; transition:fill .2s ease, stroke .2s ease; }
.background-map__glow { fill:none; stroke:#7C9CFF; stroke-width:7px; stroke-linejoin:round; vector-effect:non-scaling-stroke; opacity:.24; pointer-events:none; }
.background-map__node { fill:#F0F0F2; transform-box:fill-box; transform-origin:center; transition:fill .2s ease, transform .2s ease; pointer-events:none; }
.background-map__hit { fill:transparent; }

/* Routes use pathLength="1", so every dash value below is a share of the route. */
.background-map__route { fill:none; stroke:#7C9CFF; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1 1; opacity:.5; transition:opacity .2s ease, stroke-width .2s ease; }
.background-map__route.is-linked { opacity:1; stroke-width:2.5; }
.background-map__signals { pointer-events:none; }
.background-map__signal { opacity:0; }
.background-map__signal-halo, .background-map__signal-core { fill:none; stroke:#07BE43; stroke-linecap:round; stroke-dasharray:.14 1.14; stroke-dashoffset:.14; }
.background-map__signal-halo { stroke-width:9; opacity:.2; }
.background-map__signal-core { stroke-width:3; }

.background-map__country.is-active .background-map__shape, .background-map__country:focus-visible .background-map__shape { fill:#2F62F0; stroke:#F0F0F2; }
.background-map__country.is-active .background-map__node, .background-map__country:focus-visible .background-map__node { fill:#07BE43; transform:scale(1.5); }
@media (hover:hover) and (pointer:fine) {
  .background-map__country:hover .background-map__shape { fill:#2F62F0; stroke:#F0F0F2; }
  .background-map__country:hover .background-map__node { fill:#07BE43; transform:scale(1.5); }
}

.background-map__list { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; list-style:none; }

.background-map__bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:32px; margin-top:8px; }
.background-map__readout { min-width:0; color:#F0F0F2; font-family:'Array','Spline Sans Mono',ui-monospace,monospace; font-size:12px; line-height:1.4; letter-spacing:.07em; text-transform:uppercase; }

@media (max-width:600px) {
  .background-map__bar { min-height:44px; }
  .background-map__node { transform:scale(1.6); }
  .background-map__country.is-active .background-map__node, .background-map__country:focus-visible .background-map__node { transform:scale(2.8); }
  .background-map__glow { stroke-width:5px; }
  .background-map__route { stroke-width:3; }
  .background-map__route.is-linked { stroke-width:5; }
  .background-map__signal-halo { stroke-width:18; }
  .background-map__signal-core { stroke-width:6.5; }
}

/* One 16 s cycle divided into nine slots. The opening adds 1.8 s before the first signal. */
@media screen and (prefers-reduced-motion:no-preference) {
  .background-map { --map-cycle:16s; --map-slot:calc(var(--map-cycle) / var(--map-country-count,9)); --map-start:1.8s; }
  .background-map [data-slot="0"] { --slot:0; } .background-map [data-slot="1"] { --slot:1; }
  .background-map [data-slot="2"] { --slot:2; } .background-map [data-slot="3"] { --slot:3; }
  .background-map [data-slot="4"] { --slot:4; } .background-map [data-slot="5"] { --slot:5; }
  .background-map [data-slot="6"] { --slot:6; }
  .background-map [data-slot="7"] { --slot:7; } .background-map [data-slot="8"] { --slot:8; }
  .background-map [data-travel="long"] { --travel:2.4s; --signal:map-signal-long; }
  .background-map [data-travel="short"] { --travel:1.2s; --signal:map-signal-short; }

  [data-motion] .background-map__shape { animation:map-country-in .9s cubic-bezier(.23,1,.32,1) calc(var(--slot) * 90ms) backwards; }
  [data-motion] .background-map__node { animation:map-country-in .9s cubic-bezier(.23,1,.32,1) calc(var(--slot) * 90ms + 120ms) backwards; }
  [data-motion] .background-map__route { animation:map-route-in 1.3s cubic-bezier(.77,0,.175,1) .35s backwards; }
  [data-motion] .background-map__signal { animation:var(--signal) var(--map-cycle) linear calc(var(--map-start) + var(--slot) * var(--map-slot)) infinite backwards; }
  [data-motion] .background-map__signal-halo, [data-motion] .background-map__signal-core { animation:inherit; animation-name:map-signal-dash-long; animation-timing-function:linear; }
  [data-motion] [data-travel="short"] > .background-map__signal-halo, [data-motion] [data-travel="short"] > .background-map__signal-core { animation-name:map-signal-dash-short; }
  /* The glow never falls below its resting opacity, so a country only ever brightens and settles. */
  [data-motion] .background-map__glow { animation:map-lit var(--map-cycle) linear calc(var(--map-start) + var(--slot) * var(--map-slot) + var(--travel) - .5s) infinite backwards; }

  [data-motion="paused"] .background-map__shape, [data-motion="paused"] .background-map__node, [data-motion="paused"] .background-map__route,
  [data-motion="paused"] .background-map__signal, [data-motion="paused"] .background-map__signal-halo, [data-motion="paused"] .background-map__signal-core,
  [data-motion="paused"] .background-map__glow { animation-play-state:paused; }
}

@keyframes map-country-in { from { opacity:.25; } }
@keyframes map-route-in { from { stroke-dashoffset:1; opacity:0; } }
@keyframes map-signal-long { 0% { opacity:0; } 1.5%, 13.5% { opacity:1; } 15%, 100% { opacity:0; } }
@keyframes map-signal-short { 0% { opacity:0; } 1%, 6.5% { opacity:1; } 7.5%, 100% { opacity:0; } }
@keyframes map-signal-dash-long { 0% { stroke-dashoffset:.14; animation-timing-function:cubic-bezier(.77,0,.175,1); } 15%, 100% { stroke-dashoffset:-1; } }
@keyframes map-signal-dash-short { 0% { stroke-dashoffset:.14; animation-timing-function:cubic-bezier(.77,0,.175,1); } 7.5%, 100% { stroke-dashoffset:-1; } }
@keyframes map-lit { 0%, 100% { opacity:.24; } 6% { opacity:.8; } 26% { opacity:.24; } }