/* Only JavaScript's active sequence dims lights. The original map is otherwise
   fully visible, including when JavaScript or motion is unavailable. */
.vdc-home #map.vdc-map-sequencing circle[data-location] {
  --location-light: #34d399;
  transition: fill 180ms ease, stroke 180ms ease, opacity 180ms ease, filter 180ms ease;
}
.vdc-home #map.vdc-map-sequencing circle[data-location="casablanca"] { --location-light: #f59e0b; }
.vdc-home #map.vdc-map-sequencing circle[data-location]:not(.is-location-lit) {
  opacity: .45;
  fill: #45586a;
  filter: none;
}
.vdc-home #map.vdc-map-sequencing circle[data-location][fill="none"]:not(.is-location-lit) {
  fill: none;
  stroke: #45586a;
}
.vdc-home #map.vdc-map-sequencing circle[data-location].is-location-lit {
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--location-light));
}
.vdc-home #map.vdc-map-sequencing circle[data-location].is-location-current {
  animation: vdc-location-light 850ms ease-out;
}
.vdc-home #map.vdc-map-sequencing .deleg li[data-location] .dotc {
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.vdc-home #map.vdc-map-sequencing .deleg li[data-location]:not(.is-location-lit) .dotc {
  background: #45586a;
  border-color: #45586a;
  box-shadow: none;
}
.vdc-home #map.vdc-map-sequencing .deleg li.is-location-lit .dotc {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,.13), 0 0 14px rgba(52,211,153,.7);
}
.vdc-home #map.vdc-map-sequencing .deleg li[data-location="casablanca"].is-location-lit .dotc {
  background: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 0 14px rgba(245,158,11,.7);
}
.vdc-home #map .deleg li[data-location="casablanca"] .dotc {
  background: #f59e0b;
  border-color: #f59e0b;
}
.vdc-home #map .legend-dot.planned { border-color: #f59e0b; }
@keyframes vdc-location-light {
  0% { filter: drop-shadow(0 0 2px var(--location-light)); }
  45% { filter: drop-shadow(0 0 22px var(--location-light)) drop-shadow(0 0 7px var(--location-light)); }
  100% { filter: drop-shadow(0 0 8px var(--location-light)); }
}

/* Keep the whole sequence in the normal flow to reserve its final dimensions.
   A separate accessible string prevents screen readers announcing each step. */
.vdc-home #sustainability .ods-goals > .vdc-ods-sequencing { position: relative; }
.vdc-home #sustainability .ods-goals .vdc-ods-accessible {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vdc-home #sustainability .ods-goals .vdc-ods-writing,
.vdc-home #sustainability .ods-goals .vdc-ods-number {
  display: inline;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.vdc-home #sustainability .ods-goals .vdc-ods-number {
  opacity: 0;
  white-space: pre;
  transition: opacity 160ms ease-out;
}
.vdc-home #sustainability .ods-goals .vdc-ods-number.is-written { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vdc-home #map circle[data-location], .vdc-home #map .deleg .dotc { animation: none !important; transition: none !important; }
  .vdc-home #sustainability .ods-goals .vdc-ods-number { opacity: 1; transition: none; }
}
@media print {
  .vdc-home #map circle[data-location], .vdc-home #map .deleg .dotc { animation: none !important; filter: none !important; }
  .vdc-home #sustainability .ods-goals .vdc-ods-number { opacity: 1; transition: none; }
}