:root {
  /* Visual size of nodes proportional to state area */
  --ac-size: 14px;
  --al-size: 11px;
  --am-size: 28px;
  --ap-size: 13px;
  --ba-size: 21px;
  --ce-size: 14px;
  --df-size: 10px;
  --es-size: 11px;
  --go-size: 19px;
  --ma-size: 18px;
  --mg-size: 20px;
  --mt-size: 23px;
  --ms-size: 20px;
  --pa-size: 26px;
  --pb-size: 11px;
  --pe-size: 13px;
  --pi-size: 16px;
  --pr-size: 15px;
  --rj-size: 11px;
  --rn-size: 11px;
  --ro-size: 14px;
  --rr-size: 15px;
  --rs-size: 17px;
  --sc-size: 14px;
  --se-size: 10px;
  --sp-size: 16px;
  --to-size: 17px;
  /* Approximate coordinates of each Brazilian state */
  --ac-x: 58px;  --ac-y: 280px;
  --al-x: 530px; --al-y: 285px;
  --ap-x: 320px; --ap-y: 120px;
  --am-x: 150px; --am-y: 200px;
  --ba-x: 465px; --ba-y: 330px;
  --ce-x: 495px; --ce-y: 225px;
  --df-x: 378px; --df-y: 376px;
  --es-x: 480px; --es-y: 430px;
  --go-x: 350px; --go-y: 390px;
  --ma-x: 410px; --ma-y: 220px;
  --mt-x: 275px; --mt-y: 340px;
  --ms-x: 280px; --ms-y: 450px;
  --mg-x: 425px; --mg-y: 420px;
  --pa-x: 300px; --pa-y: 210px;
  --pb-x: 540px; --pb-y: 250px;
  --pr-x: 325px; --pr-y: 505px;
  --pe-x: 535px; --pe-y: 270px;
  --pi-x: 450px; --pi-y: 255px;
  --rj-x: 450px; --rj-y: 475px;
  --rn-x: 535px; --rn-y: 230px;
  --rs-x: 300px; --rs-y: 585px;
  --ro-x: 160px; --ro-y: 308px;
  --rr-x: 185px; --rr-y: 115px;
  --sc-x: 335px; --sc-y: 545px;
  --se-x: 520px; --se-y: 300px;
  --sp-x: 367px; --sp-y: 475px;
  --to-x: 370px; --to-y: 290px;
  /* Route color tokens */
  --r1-color: #ff2b2b;
  --r2-color: #ff5555;
  --r3-color: #ff7777;
  --r4-color: #ff9999;
}

/* Approximate traveling salesman route animation */
@keyframes move {
  0%   { top: var(--ac-y); left: var(--ac-x); }
  4%   { top: var(--ro-y); left: var(--ro-x); }
  8%   { top: var(--am-y); left: var(--am-x); }
  12%  { top: var(--rr-y); left: var(--rr-x); }
  16%  { top: var(--pa-y); left: var(--pa-x); }
  20%  { top: var(--ap-y); left: var(--ap-x); }
  24%  { top: var(--ma-y); left: var(--ma-x); }
  28%  { top: var(--ce-y); left: var(--ce-x); }
  32%  { top: var(--rn-y); left: var(--rn-x); }
  36%  { top: var(--pb-y); left: var(--pb-x); }
  40%  { top: var(--pe-y); left: var(--pe-x); }
  44%  { top: var(--ba-y); left: var(--ba-x); }
  48%  { top: var(--se-y); left: var(--se-x); }
  52%  { top: var(--es-y); left: var(--es-x); }
  56%  { top: var(--rj-y); left: var(--rj-x); }
  60%  { top: var(--sp-y); left: var(--sp-x); }
  64%  { top: var(--mg-y); left: var(--mg-x); }
  68%  { top: var(--go-y); left: var(--go-x); }
  72%  { top: var(--df-y); left: var(--df-x); }
  76%  { top: var(--mt-y); left: var(--mt-x); }
  80%  { top: var(--ms-y); left: var(--ms-x); }
  84%  { top: var(--pr-y); left: var(--pr-x); }
  88%  { top: var(--sc-y); left: var(--sc-x); }
  92%  { top: var(--rs-y); left: var(--rs-x); }
  96%  { top: var(--to-y); left: var(--to-x); }
  100% { top: var(--pa-y); left: var(--pa-x); }
}

body {
  margin: 0;
  height: 100vh;
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Map container */
.map {
  position: relative;
  width: 600px;
  height: 700px;
  border-radius: 10px;
  overflow: hidden;
  animation: mapBreathe 12s ease-in-out infinite;
}

/* Give some life to the whole map */
@keyframes mapBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* State nodes */
.state {
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #444;
  box-shadow: 0 0 0 transparent;
  z-index: 2;
}

/* Starting state highlight */
.state.start {
  background: gold;
  box-shadow: 0 0 20px gold;
}

/* Individual state sizes */
.state.ac { --size: var(--ac-size); }
.state.al { --size: var(--al-size); }
.state.am { --size: var(--am-size); }
.state.ap { --size: var(--ap-size); }
.state.ba { --size: var(--ba-size); }
.state.ce { --size: var(--ce-size); }
.state.df { --size: var(--df-size); }
.state.es { --size: var(--es-size); }
.state.go { --size: var(--go-size); }
.state.ma { --size: var(--ma-size); }
.state.mg { --size: var(--mg-size); }
.state.mt { --size: var(--mt-size); }
.state.ms { --size: var(--ms-size); }
.state.pa { --size: var(--pa-size); }
.state.pb { --size: var(--pb-size); }
.state.pe { --size: var(--pe-size); }
.state.pi { --size: var(--pi-size); }
.state.pr { --size: var(--pr-size); }
.state.rj { --size: var(--rj-size); }
.state.rn { --size: var(--rn-size); }
.state.ro { --size: var(--ro-size); }
.state.rr { --size: var(--rr-size); }
.state.rs { --size: var(--rs-size); }
.state.sc { --size: var(--sc-size); }
.state.se { --size: var(--se-size); }
.state.sp { --size: var(--sp-size); }
.state.to { --size: var(--to-size); }

/* State positioning */
.state.ac { top: var(--ac-y); left: var(--ac-x); }
.state.al { top: var(--al-y); left: var(--al-x); }
.state.ap { top: var(--ap-y); left: var(--ap-x); }
.state.am { top: var(--am-y); left: var(--am-x); }
.state.ba { top: var(--ba-y); left: var(--ba-x); }
.state.ce { top: var(--ce-y); left: var(--ce-x); }
.state.df { top: var(--df-y); left: var(--df-x); }
.state.es { top: var(--es-y); left: var(--es-x); }
.state.go { top: var(--go-y); left: var(--go-x); }
.state.ma { top: var(--ma-y); left: var(--ma-x); }
.state.mt { top: var(--mt-y); left: var(--mt-x); }
.state.ms { top: var(--ms-y); left: var(--ms-x); }
.state.mg { top: var(--mg-y); left: var(--mg-x); }
.state.pa { top: var(--pa-y); left: var(--pa-x); }
.state.pb { top: var(--pb-y); left: var(--pb-x); }
.state.pr { top: var(--pr-y); left: var(--pr-x); }
.state.pe { top: var(--pe-y); left: var(--pe-x); }
.state.pi { top: var(--pi-y); left: var(--pi-x); }
.state.rj { top: var(--rj-y); left: var(--rj-x); }
.state.rn { top: var(--rn-y); left: var(--rn-x); }
.state.rs { top: var(--rs-y); left: var(--rs-x); }
.state.ro { top: var(--ro-y); left: var(--ro-x); }
.state.rr { top: var(--rr-y); left: var(--rr-x); }
.state.sc { top: var(--sc-y); left: var(--sc-x); }
.state.se { top: var(--se-y); left: var(--se-x); }
.state.sp { top: var(--sp-y); left: var(--sp-x); }
.state.to { top: var(--to-y); left: var(--to-x); }

/* State animations */
.state.r1 {
  animation:
    glow-r1 0.8s linear forwards,
    breathe 5s ease-in-out infinite,
    float 6s ease-in-out infinite;
}

.state.r2 {
  animation:
    glow-r2 0.8s linear forwards,
    breathe 5s ease-in-out infinite,
    float 6s ease-in-out infinite;
}

.state.r3 {
  animation:
    glow-r3 0.8s linear forwards,
    breathe 5s ease-in-out infinite,
    float 6s ease-in-out infinite;
}

.state.r4 {
  animation:
    glow-r4 0.8s linear forwards,
    breathe 5s ease-in-out infinite,
    float 6s ease-in-out infinite;
}

.state.start {
  animation:
    breathe 5s ease-in-out infinite,
    float 6s ease-in-out infinite;
}

/* Organic variation using nth-child */
.state:nth-child(3n) { animation-duration: 2.4s; }
.state:nth-child(4n) { animation-duration: 3.2s; }
.state:nth-child(5n) { animation-duration: 4s; }

/* Sequential glow delays */
.state.r1 { animation-delay: 0.5s; }
.state.r2 { animation-delay: 3s; }
.state.r3 { animation-delay: 5.5s; }
.state.r4 { animation-delay: 8s; }

/* Glow activation */
@keyframes glow-r1 {
  to {
    background: var(--r1-color);
    box-shadow: 0 0 22px #662222;
  }
}

@keyframes glow-r2 {
  to {
    background: var(--r2-color);
    box-shadow: 0 0 22px #663333;
  }
}

@keyframes glow-r3 {
  to {
    background: var(--r3-color);
    box-shadow: 0 0 22px #664444;
  }
}

@keyframes glow-r4 {
  to {
    background: var(--r4-color);
    box-shadow: 0 0 22px #665555;
  }
}

/* Breathing scale animation */
@keyframes breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
  }
}

/* Floating vertical motion */
@keyframes float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: .125rem; }
}

/* Light beam connections */
.line {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ff2b2b;
  opacity: 0;
  z-index: 1;
  transform-origin: left center;
  filter: drop-shadow(0 0 12px #ff2b2b);
  animation: draw 0.8s linear forwards;
}

/* Beam growth animation */
@keyframes draw {
  to {
    width: var(--length);
    opacity: 1;
  }
}

/* Beam thickness by distance */
.line.short  { height: 2px; }
.line.medium { height: 4px; }
.line.long   { height: 7px; }

/* Red glow tones per vehicle */
.line.r1 { background: var(--r1-color); filter: drop-shadow(0 0 12px var(--r1-color)); animation-delay: 0s; }
.line.r2 { background: var(--r2-color); filter: drop-shadow(0 0 14px var(--r2-color)); animation-delay: 2.5s; }
.line.r3 { background: var(--r3-color); filter: drop-shadow(0 0 16px var(--r3-color)); animation-delay: 5s; }
.line.r4 { background: var(--r4-color); filter: drop-shadow(0 0 18px var(--r4-color)); animation-delay: 7.5s; }

/* VRP EDGES (Depot: MT) */
/* Vehicle 1: Central-West and Southeast */
.line.mt-go { top: var(--mt-y); left: var(--mt-x); --length: 90px; transform: rotate(33deg); }
.line.go-df { top: var(--go-y); left: var(--go-x); --length: 33px; transform: rotate(-27deg); }
.line.df-mg { top: var(--df-y); left: var(--df-x); --length: 65px; transform: rotate(43deg); }
.line.mg-es { top: var(--mg-y); left: var(--mg-x); --length: 55px; transform: rotate(10deg); }
.line.es-rj { top: var(--es-y); left: var(--es-x); --length: 55px; transform: rotate(124deg); }
.line.rj-sp { top: var(--rj-y); left: var(--rj-x); --length: 85px; transform: rotate(180deg); }
.line.sp-mt { top: var(--sp-y); left: var(--sp-x); --length: 165px; transform: rotate(-124deg); }
/* Vehicle 2: Northeast */
.line.mt-to { top: var(--mt-y); left: var(--mt-x); --length: 107px; transform: rotate(-28deg); }
.line.to-ma { top: var(--to-y); left: var(--to-x); --length: 85px; transform: rotate(-60deg); }
.line.ma-pi { top: var(--ma-y); left: var(--ma-x); --length: 55px; transform: rotate(40deg); }
.line.pi-ce { top: var(--pi-y); left: var(--pi-x); --length: 55px; transform: rotate(-35deg); }
.line.ce-rn { top: var(--ce-y); left: var(--ce-x); --length: 42px; transform: rotate(6deg); }
.line.rn-pb { top: var(--rn-y); left: var(--rn-x); --length: 20px; transform: rotate(75deg); }
.line.pb-pe { top: var(--pb-y); left: var(--pb-x); --length: 20px; transform: rotate(105deg); }
.line.pe-al { top: var(--pe-y); left: var(--pe-x); --length: 15px; transform: rotate(108deg); }
.line.al-se { top: var(--al-y); left: var(--al-x); --length: 20px; transform: rotate(124deg); }
.line.se-ba { top: var(--se-y); left: var(--se-x); --length: 62px; transform: rotate(152deg); }
.line.ba-mt { top: var(--ba-y); left: var(--ba-x); --length: 192px; transform: rotate(-182deg); }
/* Vehicle 3: South */
.line.mt-ms { top: var(--mt-y); left: var(--mt-x); --length: 110px; transform: rotate(87deg); }
.line.ms-pr { top: var(--ms-y); left: var(--ms-x); --length: 75px; transform: rotate(51deg); }
.line.pr-sc { top: var(--pr-y); left: var(--pr-x); --length: 40px; transform: rotate(75deg); }
.line.sc-rs { top: var(--sc-y); left: var(--sc-x); --length: 55px; transform: rotate(132deg); }
.line.rs-mt { top: var(--rs-y); left: var(--rs-x); --length: 245px; transform: rotate(-95deg); }
/* Vehicle 4: North */
.line.mt-ro { top: var(--mt-y); left: var(--mt-x); --length: 120px; transform: rotate(-164deg); }
.line.ro-ac { top: var(--ro-y); left: var(--ro-x); --length: 110px; transform: rotate(-164deg); }
.line.ac-am { top: var(--ac-y); left: var(--ac-x); --length: 120px; transform: rotate(-42deg); }
.line.am-rr { top: var(--am-y); left: var(--am-x); --length: 95px; transform: rotate(-68deg); }
.line.rr-ap { top: var(--rr-y); left: var(--rr-x); --length: 140px; transform: rotate(2deg); }
.line.ap-pa { top: var(--ap-y); left: var(--ap-x); --length: 95px; transform: rotate(102deg); }
.line.pa-mt { top: var(--pa-y); left: var(--pa-x); --length: 135px; transform: rotate(101deg); }