/* ── The Canada map (cpo-canada.js) ──
   The land is in map units under the camera; everything on it is in
   screen px, so type and badges keep their size at any zoom. */
.cc-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Its own layer: the badges moving don't repaint the land under them. */
  will-change: transform;
}

/* The land, as the survey's map draws it: Canada traced in red, the
   United States barely there, the lakes the board showing through. */
.cc-land path {
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cc-canada {
  fill: #E4E9EF;
  stroke: var(--red);
  stroke-opacity: 0.6;
  stroke-width: 1.25;
}
.cc-usa {
  fill: #EFF2F5;
  stroke: #EFF2F5;
  stroke-width: 1.5;
}
.cc-lakes {
  fill: var(--bg);
  stroke: var(--trace);
  stroke-width: 1;
}
.cc-country {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: rgba(var(--navy-rgb), 0.35);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cc-country.is-on {
  opacity: 1;
  transition-delay: 0.5s;
}

/* ── The lines out of Kanata: navy traces that draw in, apart from the
   red of the land's outline ── */
.cc-wire {
  fill: none;
  stroke: var(--navy);
  stroke-opacity: 0.7;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.6, 0, 0.3, 1) 0.15s, stroke-opacity 0.4s ease;
}
.cc-wire.is-on {
  stroke-dashoffset: 0;
}
/* Behind who owns what, the lines step back. */
.cc-is-own .cc-wire { stroke-opacity: 0.25; }

/* ── Cities: the survey's via pads, only those the frame names or lights ── */
.cc-city {
  transition: opacity 0.4s ease;
}
.cc-city:not(.is-lit):not(.is-named) {
  opacity: 0;
}
.cc-city-glow {
  fill: var(--red);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cc-city.is-lit .cc-city-glow {
  opacity: 0.14;
}
.cc-city-ring {
  fill: var(--white);
  stroke: var(--navy);
  stroke-width: 2.25;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.cc-city-hole {
  fill: var(--navy);
  transition: fill 0.4s ease;
}
.cc-city.is-lit .cc-city-ring {
  fill: var(--red);
  stroke: var(--red);
}
.cc-city.is-lit .cc-city-hole {
  fill: var(--white);
}
.cc-city-name,
.cc-badge-name {
  font-family: inherit;
}
.cc-city-name,
.cc-badge-name {
  stroke: var(--bg);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.cc-city-name {
  font-size: 13px;
  font-weight: 800;
  fill: var(--navy);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cc-city.is-named .cc-city-name {
  opacity: 1;
  transition-delay: 0.3s;
}

/* ── Firms: a badge with its role's glyph, popping in at --d ── */
.cc-pin {
  --d: 0s;
  --c: var(--navy-gray);
}
.cc-pin.is-photonics { --c: var(--red); }
.cc-pin.is-mfg { --c: var(--navy); }
.cc-badge {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cc-pin.is-on .cc-badge {
  opacity: 1;
  transition-delay: var(--d);
}
.cc-badge-ring {
  fill: var(--white);
  stroke: var(--c);
  stroke-width: 2;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.cc-glyph {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease, opacity 0.3s ease;
}
/* Folded into a row, a firm is a plain dot, until the frame colours it. */
.cc-pin:not(.is-open) { --c: #8D99A8; }
.cc-pin:not(.is-open) .cc-badge-ring {
  fill: var(--c);
}
.cc-pin:not(.is-open) .cc-glyph {
  opacity: 0;
}
.cc-badge-name {
  font-size: 12.5px;
  font-weight: 800;
  fill: var(--navy);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cc-pin.is-on.is-open .cc-badge-name {
  opacity: 1;
  transition-delay: calc(var(--d) + var(--nd, 0s) + 0.15s);
}
.is-narrow .cc-badge-name { font-size: 11.5px; }
/* On its way into a row: the name goes first. */
.cc-pin.is-on.is-open.is-folding .cc-badge-name {
  opacity: 0;
  transition-delay: 0s;
}
.is-narrow .cc-city-name { font-size: 12px; }
.cc-lead,
.cc-row-lead {
  fill: none;
  stroke: rgba(var(--navy-rgb), 0.3);
  stroke-width: 1.25;
}

/* Who owns it: Canadian-owned or public in red, a head office abroad
   hollow, anything else faded. */
.cc-pin .cc-badge { transition: opacity 0.4s ease; }
.cc-is-own .cc-pin.is-own-ca { --c: var(--red); }
.cc-is-own .cc-pin.is-own-ca .cc-badge { transition-delay: 0.1s; }
.cc-is-own .cc-pin.is-own-hq .cc-badge-ring {
  fill: var(--white);
  stroke: var(--navy);
  transition-delay: 0.7s;
}
.cc-is-own .cc-pin.is-on:not([class*="is-own-"]) .cc-badge { opacity: 0.3; }
@media (prefers-reduced-motion: reduce) {
  .cc-svg * {
    transition: none !important;
  }
}