/* ==========================================================================
   Mapa 3D — maquete do território
   Cada estado é um bloco extrudado: N cópias do mesmo path empilhadas em
   translateZ. O palco inclina, o cursor faz paralaxe, e os estados da FIX
   sobem quando recebem o ponteiro.
   ========================================================================== */

.mapa {
  position: relative;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  width: 100%;
  aspect-ratio: 1000 / 1050;
  max-height: 620px;
  margin-inline: auto;
}

/* Tela do WebGL. Ocupa o mesmo espaço da maquete em CSS — só uma das duas é
   montada, decidido em site.js. */
.mapa__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Rótulos do mapa 3D: HTML projetado do WebGL a cada quadro. Texto em DOM
   fica nítido em qualquer densidade de tela e continua acessível. */
.mapa__rotulos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.marco3d {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-decoration: none;
  pointer-events: auto;
  will-change: transform;
}
.marco3d__nome {
  font-family: var(--fonte-dado);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--branco);
  text-shadow: 0 1px 8px rgba(6, 20, 44, .95);
}
.marco3d__bola {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  /* Sobre o estado amarelo, um pino amarelo sumia. */
  background: var(--branco);
  box-shadow: 0 0 0 3px rgba(14, 39, 73, .5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.marco3d:hover .marco3d__bola,
.marco3d:focus-visible .marco3d__bola {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(14, 39, 73, .55);
}

.mapa__palco {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--incl, 52deg)) rotateZ(var(--giro, -14deg))
             translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform .5s var(--ease);
  will-change: transform;
}

/* ---- um estado -------------------------------------------------------- */

.uf {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform .38s var(--ease);
}
.uf__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.uf__camada path { pointer-events: none; }

/* Só o topo dos estados ativos captura o ponteiro. */
.uf--ativo .uf__camada--topo { pointer-events: auto; }
.uf--ativo .uf__camada--topo path { pointer-events: auto; cursor: pointer; }

/* Silhueta do Brasil: azul da logo, fundo para o vermelho assentar. */
.uf--inerte .uf__camada path {
  fill: #204C87;
  stroke: none;
}
.uf--inerte .uf__camada--topo path {
  fill: #2A5FA8;
  stroke: #3D77C4;
  stroke-width: 1;
}

/* Estados da FIX: o vermelho da figura da logo, com o dourado do arco no fio. */
.uf--ativo .uf__camada path {
  fill: #8C1B21;
  stroke: none;
}
.uf--ativo .uf__camada--topo path {
  fill: #C4262E;
  stroke: #F0B429;
  stroke-width: 1.4;
  transition: fill .3s var(--ease), stroke .3s var(--ease);
}

/* A altura é conduzida pelo JS (onda + salto), que escreve transform inline.
   Esta regra é só o degrau para quando o script não roda. */
.uf--ativo:hover { transform: translateZ(30px); }

.uf--ativo:hover .uf__camada--topo path,
.uf--ativo.esta-ativo .uf__camada--topo path {
  fill: #E04049;
  stroke: #FFD98A;
}

/* Estados sem atuação também respondem à passagem do cursor, mas só na onda:
   sobem pouco e não trocam de cor. A hierarquia mora nessa diferença. */
.uf--inerte { transition: none; }
.uf--inerte .uf__camada--topo path { transition: fill .3s var(--ease); }

/* Malha de lotes sobre o topo: o produto desenhado no território. */
.uf__grade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.uf--ativo:hover .uf__grade,
.uf--ativo.esta-ativo .uf__grade { opacity: .9; }

/* ---- marco de topografia ---------------------------------------------- */

/* O pino fica de pé porque desfaz a inclinação do palco: gira em rotateX pelo
   valor oposto, com origem na base, então a haste encosta na laje e a cabeça
   aponta para a câmera. --sobe é escrito pelo JS e acompanha o bloco. */
.marco {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform:
    translate3d(-50%, -100%, calc(6px + var(--sobe, 0px)))
    rotateX(calc(var(--incl, 52deg) * -1));
}
.marco.esta-ativo .marco__bola {
  background: var(--branco);
  box-shadow: 0 0 0 4px rgba(242, 183, 0, .45);
}
.marco.esta-ativo .marco__nome { color: var(--marco); }

.marco__haste {
  width: 1.5px;
  height: 30px;
  margin-inline: auto;
  background: linear-gradient(to bottom, var(--marco), rgba(242, 183, 0, .15));
}
.marco__bola {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--marco);
  border: 2px solid var(--noite);
  margin-inline: auto;
  box-shadow: 0 0 0 3px rgba(242, 183, 0, .22);
}
.marco__nome {
  font-family: var(--fonte-dado);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--branco);
  white-space: nowrap;
  text-align: center;
  margin-bottom: 5px;
  text-shadow: 0 1px 6px rgba(6, 20, 44, .9);
}

/* ---- painel que aparece ao focar um estado ---------------------------- */

.mapa__painel {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 5;
  background: rgba(9, 26, 51, .93);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(74, 127, 212, .38);
  border-radius: var(--raio-bloco);
  padding: var(--e4) var(--e5);
  min-width: 210px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  pointer-events: none;
}
.mapa__painel[data-visivel='1'] { opacity: 1; transform: translateY(0); }
.mapa__painel b {
  display: block;
  font-family: var(--fonte-display);
  font-variation-settings: 'wdth' 118;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--branco);
}
.mapa__painel span {
  display: block;
  margin-top: var(--e1);
  font-family: var(--fonte-dado);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--marco);
}

.mapa__dica {
  margin-top: var(--e4);
  font-family: var(--fonte-dado);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* .38 dava 3.4:1 sobre o azul-noite e reprovava no AA. .60 fica em 4.9:1 */
  color: rgba(255, 255, 255, .60);
  text-align: center;
}

@media (max-width: 980px) {
  .mapa { max-height: 460px; }
  .mapa__palco { --incl: 44deg; --giro: -8deg; }
}

/* Sem movimento: o mapa vira uma planta plana, ainda legível e clicável.
   O JS não liga o laço de animação neste caso, então nada escreve transform
   inline e estas regras valem sozinhas. */
@media (prefers-reduced-motion: reduce) {
  .mapa__palco { transform: none !important; }
  .uf { transform: none !important; transition: none; }
  .marco {
    transform: translate3d(-50%, -100%, 0) !important;
    transition: none;
  }
  /* Sem relevo, a distinção passa a ser só de cor e contorno. */
  .uf--ativo .uf__camada--topo path { stroke-width: 2; }
}