/* Hemiciclo 2D: as cadeiras de uma Casa, como no painel eletrônico (docs/04).
   Desenhado pelo js/componentes/hemiciclo.js dentro de <div data-hemiciclo>.
   É a versão para celular e computador fraco do plenário 3D, e serve a LP.
   Cada cadeira: cor do partido em repouso; cor do voto durante a votação. */

.hemiciclo {
  --cor-partido-1: #c2413a;
  --cor-partido-2: #e07b39;
  --cor-partido-3: #d9aa2b;
  --cor-partido-4: #6f9a3a;
  --cor-partido-5: #2c8c83;
  --cor-partido-6: #3a6fc4;
  --cor-partido-7: #6a55c2;
  --cor-partido-8: #8a5a44;

  position: relative;
  width: 100%;
}

.hemiciclo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hemiciclo__cadeira {
  fill: var(--cor-cadeira);
  stroke: transparent;
  stroke-width: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill var(--duracao-3) var(--curva-padrao),
    opacity var(--duracao-3) var(--curva-padrao),
    transform var(--duracao-4) var(--curva-mola);
}

/* NPC: cadeira sem jogador. Mesmo lugar, traço mais leve. */
.hemiciclo__cadeira--npc {
  opacity: 0.62;
}

/* Em repouso: cor do partido. */
.hemiciclo__cadeira[data-partido="1"] { fill: var(--cor-partido-1); }
.hemiciclo__cadeira[data-partido="2"] { fill: var(--cor-partido-2); }
.hemiciclo__cadeira[data-partido="3"] { fill: var(--cor-partido-3); }
.hemiciclo__cadeira[data-partido="4"] { fill: var(--cor-partido-4); }
.hemiciclo__cadeira[data-partido="5"] { fill: var(--cor-partido-5); }
.hemiciclo__cadeira[data-partido="6"] { fill: var(--cor-partido-6); }
.hemiciclo__cadeira[data-partido="7"] { fill: var(--cor-partido-7); }
.hemiciclo__cadeira[data-partido="8"] { fill: var(--cor-partido-8); }

/* Votação aberta: todas esperando, depois a cor do voto. */
.hemiciclo[data-votacao] .hemiciclo__cadeira {
  fill: var(--cor-voto-ausente);
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto] {
  transform: scale(1.12);
}

.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="sim"] { fill: var(--cor-voto-sim); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="nao"] { fill: var(--cor-voto-nao); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="abstencao"] { fill: var(--cor-voto-abstencao); }
.hemiciclo[data-votacao] .hemiciclo__cadeira[data-voto="ausente"] {
  fill: transparent;
  stroke: var(--cor-borda-forte);
  stroke-width: 1;
  transform: scale(0.8);
}

/* Destaque (ex.: "esta cadeira pode ser sua"). */
.hemiciclo__cadeira--destaque {
  fill: var(--cor-ouro) !important;
  opacity: 1;
  animation: cadeira-destaque 2.4s var(--curva-padrao) infinite;
}

@keyframes cadeira-destaque {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.45);
  }
}

.hemiciclo__mesa {
  fill: var(--cor-texto);
  opacity: 0.85;
}

.hemiciclo__cadeira:hover {
  transform: scale(1.35);
}

.hemiciclo[data-interativo] .hemiciclo__cadeira {
  cursor: pointer;
}