/* =========================================================================
   Porta do painel da plataforma.

   Vale só para templates/accounts/login_platform.html. A entrada da
   imobiliária usa auth.css e não é tocada por este arquivo.

   A composição é uma coluna central sobre a tinta do console. Ao fundo, a
   malha de quadras e lotes desenhada em gradiente -- é o desenho do que o
   sistema administra, e é a única decoração da tela.
   ========================================================================= */

.gate {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--mst-console-glow), transparent 70%),
    linear-gradient(180deg, var(--mst-console-top), var(--mst-console-bottom));
  font-family: var(--mst-ff-body);
}

/* -- a cidade ao fundo -------------------------------------------------- */
/* Quadras, ruas e uma avenida diagonal, tudo em gradiente. O mapa corre devagar
   e os pinos caem um a um, como quem vai marcando loteamento por loteamento.
   A malha tem passo de 160px nos dois eixos, e a corrida anda exatamente 160px:
   e isso que faz o laco fechar sem salto. */
.gate__city {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Clareia no meio para o cartao ficar sobre um fundo calmo, e some nas
     bordas -- mapa que bate na quina da tela vira papel quadriculado. */
  -webkit-mask-image: radial-gradient(circle at 50% 48%, transparent 12%, #000 42%, #000 60%, transparent 88%);
  mask-image: radial-gradient(circle at 50% 48%, transparent 12%, #000 42%, #000 60%, transparent 88%);
}

.gate__grid {
  position: absolute;
  inset: -25%;
  transform: rotate(-2deg);
  background-image:
    /* ruas principais */
    repeating-linear-gradient(to right, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 160px),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.07) 0 2px, transparent 2px 160px),
    /* divisas de lote dentro da quadra */
    repeating-linear-gradient(to right, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.045) 0 1px, transparent 1px 80px);
  animation: gate-corre 90s linear infinite;
}

/* A diagonal e a avenida que corta a cidade: sem ela a malha vira xadrez. */
.gate__avenue {
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(66deg, transparent calc(50% - 9px), rgb(255 255 255 / 0.07) calc(50% - 9px) calc(50% + 9px), transparent calc(50% + 9px)),
    linear-gradient(66deg, transparent calc(30% - 4px), rgb(255 255 255 / 0.05) calc(30% - 4px) calc(30% + 4px), transparent calc(30% + 4px));
}

@keyframes gate-corre {
  from { transform: rotate(-2deg) translate3d(0, 0, 0); }
  to   { transform: rotate(-2deg) translate3d(-160px, -160px, 0); }
}

/* -- lotes vendidos ----------------------------------------------------- */
/* Quadras que acendem e apagam, uma de cada vez: e o que o sistema faz o dia
   inteiro. Encaixadas no passo da malha, para parecerem lote e nao mancha. */
.gate__sold {
  position: absolute;
  width: 40px;
  height: 80px;
  background: var(--mst-primary-500);
  opacity: 0;
  animation: gate-vende 14s ease-in-out infinite;
}

.gate__sold--1 { top: 30%; left: 18%; animation-delay: 1s; }
.gate__sold--2 { top: 58%; left: 30%; animation-delay: 5s; }
.gate__sold--3 { top: 24%; left: 71%; animation-delay: 8s; }
.gate__sold--4 { top: 63%; left: 84%; animation-delay: 11s; }

@keyframes gate-vende {
  0%, 8%   { opacity: 0; }
  16%, 34% { opacity: 0.26; }
  50%, 100% { opacity: 0; }
}

/* -- os pinos ----------------------------------------------------------- */
/* Cada pino e um empreendimento no mapa: circulo com o icone do que ele e, e a
   ponta apontando o lugar. Caem um a um e param -- balancar para sempre chama
   atencao para o lugar errado da tela, que aqui e o campo de senha. */
.gate__pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: var(--mst-console-bottom);
  border: 1px solid var(--mst-primary-500);
  color: var(--mst-primary-500);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.45);
  opacity: 0;
  animation: gate-pino-cai 800ms cubic-bezier(0.22, 1.4, 0.5, 1) forwards;
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* A ponta do pino, apontando o ponto no mapa. */
.gate__pin::before {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: var(--mst-console-bottom);
  border-right: 1px solid var(--mst-primary-500);
  border-bottom: 1px solid var(--mst-primary-500);
  transform: rotate(45deg);
}

/* O halo pulsa devagar: e o unico movimento que continua depois da chegada. */
.gate__pin::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  border: 1px solid var(--mst-primary-500);
  animation: gate-pulso 3.4s ease-out infinite;
}

.gate__pin .material-symbols-outlined { font-size: 20px; }

.gate__pin:hover {
  transform: scale(1.12);
  color: var(--mst-on-dark);
  border-color: var(--mst-on-dark);
}

.gate__pin--1 { top: 22%; left: 13%; animation-delay: 150ms; }
.gate__pin--1::after { animation-delay: 150ms; }
.gate__pin--2 { top: 66%; left: 22%; animation-delay: 300ms; }
.gate__pin--2::after { animation-delay: 300ms; }
.gate__pin--3 { top: 16%; left: 63%; animation-delay: 450ms; }
.gate__pin--3::after { animation-delay: 450ms; }
.gate__pin--4 { top: 34%; left: 82%; animation-delay: 600ms; }
.gate__pin--4::after { animation-delay: 600ms; }
.gate__pin--5 { top: 74%; left: 76%; animation-delay: 750ms; }
.gate__pin--5::after { animation-delay: 750ms; }
.gate__pin--6 { top: 84%; left: 45%; animation-delay: 900ms; }
.gate__pin--6::after { animation-delay: 900ms; }
.gate__pin--7 { top: 10%; left: 31%; animation-delay: 1050ms; }
.gate__pin--7::after { animation-delay: 1050ms; }
.gate__pin--8 { top: 44%; left: 7%; animation-delay: 1200ms; }
.gate__pin--8::after { animation-delay: 1200ms; }
.gate__pin--9 { top: 16%; left: 90%; animation-delay: 1350ms; }
.gate__pin--9::after { animation-delay: 1350ms; }
.gate__pin--10 { top: 62%; left: 92%; animation-delay: 1500ms; }
.gate__pin--10::after { animation-delay: 1500ms; }
.gate__pin--11 { top: 92%; left: 60%; animation-delay: 1650ms; }
.gate__pin--11::after { animation-delay: 1650ms; }
.gate__pin--12 { top: 40%; left: 30%; animation-delay: 1800ms; }
.gate__pin--12::after { animation-delay: 1800ms; }

@keyframes gate-pino-cai {
  from { opacity: 0; transform: translateY(-24px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gate-pulso {
  0%   { opacity: 0; transform: scale(0.5); }
  20%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(2.6); }
}

/* -- a rede entre os empreendimentos ------------------------------------ */
/* Aparece quando o mouse encosta em qualquer pino. O `~` so alcanca irmao
   posterior -- por isso o <svg> vem depois dos pinos no HTML. */
.gate__routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* A rota existe sempre, discreta: e o mapa da operacao. Encostar num pino
     acende a rede inteira. */
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 320ms ease;
  color: var(--mst-primary-500);
}

.gate__pin:hover ~ .gate__routes { opacity: 1; }

.gate__routes use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Espessura em pixel de tela, e nao em unidade do viewBox: sem isto o
     `preserveAspectRatio="none"` afina a linha num eixo e engorda no outro. */
  vector-effect: non-scaling-stroke;
}

/* A ligacao em si: fio da mesma espessura do contorno do pino, para a rede e
   os pontos dela terem o mesmo peso de traco. */
.gate__web use {
  stroke: var(--mst-primary-500);
  stroke-width: 1.2;
  opacity: 0.75;
  /* A seta no fim de cada trecho mostra para onde a rota segue -- e o que
     transforma a linha em caminho. */
  marker-end: url(#gate-seta);
  marker-mid: url(#gate-seta);
}

/* O batimento: um traco curto que percorre a ligacao inteira, um caminho de
   cada vez, como o pulso passando de um no para o outro. */
.gate__beat use {
  stroke: var(--mst-on-dark);
  stroke-width: 1.6;
  stroke-dasharray: 12 160;
  stroke-dashoffset: 172;
  filter: drop-shadow(0 0 6px rgb(37 99 235 / 0.85));
  animation: gate-batimento 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.gate__beat use:nth-child(1) { animation-delay: 0ms; }
.gate__beat use:nth-child(2) { animation-delay: 200ms; }
.gate__beat use:nth-child(3) { animation-delay: 400ms; }
.gate__beat use:nth-child(4) { animation-delay: 600ms; }
.gate__beat use:nth-child(5) { animation-delay: 800ms; }
.gate__beat use:nth-child(6) { animation-delay: 1000ms; }
.gate__beat use:nth-child(7) { animation-delay: 1200ms; }
.gate__beat use:nth-child(8) { animation-delay: 1400ms; }
.gate__beat use:nth-child(9) { animation-delay: 1600ms; }
.gate__beat use:nth-child(10) { animation-delay: 1800ms; }
.gate__beat use:nth-child(11) { animation-delay: 2000ms; }
.gate__beat use:nth-child(12) { animation-delay: 2200ms; }

@keyframes gate-batimento {
  from { stroke-dashoffset: 172; }
  to   { stroke-dashoffset: 0; }
}

/* -- coluna central ----------------------------------------------------- */
.gate__stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.gate__operator {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--mst-on-dark);
}

.gate__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--mst-radius-sm);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid var(--mst-console-line);
  color: var(--mst-console-mark);
}

.gate__mark .material-symbols-outlined { font-size: 20px; }

.gate__operator-name {
  font-family: var(--mst-ff-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* -- o cartão ----------------------------------------------------------- */
.gate__card {
  width: 100%;
  padding: var(--sp-6);
  background: var(--mst-on-dark);
  border-radius: var(--mst-radius-lg);
  /* O filete azul no topo é o mesmo do painel: a porta pertence ao que há
     atrás dela. */
  border-top: 3px solid var(--mst-primary-500);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.45);
}

.gate__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mst-primary-600);
}

.gate__title {
  margin-top: 6px;
  font-family: var(--mst-ff-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mst-gray-900);
}

.gate__lead {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mst-gray-500);
}

.gate__form {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.gate__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--mst-radius-sm);
  background: rgb(180 41 31 / 0.08);
  color: var(--mst-danger-ink);
  font-size: 13px;
}

.gate__error .material-symbols-outlined { font-size: 18px; }

/* -- campos ------------------------------------------------------------- */
.gate__field { display: flex; flex-direction: column; gap: 6px; }

.gate__field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.gate__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mst-gray-700);
}

.gate__field-head a {
  font-size: 12px;
  color: var(--mst-primary-600);
  text-decoration: none;
}

.gate__field-head a:hover { text-decoration: underline; }

/* Campo com caixa, e não só o fio embaixo: numa porta de operação a área
   clicável tem de ser evidente, inclusive para quem chega de tablet. */
.gate__control {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 46px;
  background: var(--mst-gray-50);
  border: 1px solid var(--mst-gray-200);
  border-radius: var(--mst-radius-md);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.gate__control:focus-within {
  background: var(--mst-on-dark);
  border-color: var(--mst-primary-500);
  box-shadow: 0 0 0 4px var(--mst-focus-ring);
}

.gate__control > .material-symbols-outlined {
  font-size: 20px;
  color: var(--mst-gray-400);
}

.gate__control input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--mst-gray-900);
}

.gate__control input:focus { outline: none; }

.gate__eye {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--mst-gray-400);
  cursor: pointer;
}

.gate__eye:hover { background: var(--mst-gray-100); color: var(--mst-gray-600); }
.gate__eye .material-symbols-outlined { font-size: 18px; }

/* -- botão -------------------------------------------------------------- */
.gate__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-top: 4px;
  border: 0;
  border-radius: var(--mst-radius-md);
  background: var(--mst-primary-600);
  color: var(--mst-on-dark);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}

.gate__submit:hover { background: var(--mst-primary-700); }
.gate__submit:active { transform: translateY(1px); }
.gate__submit:disabled { opacity: 0.7; cursor: progress; }
.gate__submit .material-symbols-outlined { font-size: 18px; }

/* -- rodapé ------------------------------------------------------------- */
.gate__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Fora da largura do cartão: em uma linha só eles são rodapé; quebrados em
     duas viram lista, e lista aqui pesa mais do que informa. */
  width: max-content;
  max-width: min(92vw, 680px);
  gap: 6px var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--mst-console-ink);
}

.gate__facts li { display: inline-flex; align-items: center; gap: 6px; }
.gate__facts .material-symbols-outlined { font-size: 15px; }

@media (max-width: 480px) {
  .gate__card { padding: var(--sp-5); }
  .gate__title { font-size: 26px; }
}

/* Quem pediu menos movimento fica com o mapa parado e os pinos ja postos --
   o desenho continua inteiro, so nao anda. */
@media (prefers-reduced-motion: reduce) {
  .gate__submit { transition: none; }
  .gate__grid { animation: none; }
  .gate__pin { opacity: 1; animation: none; }
  .gate__pin::after { animation: none; opacity: 0.35; }
  .gate__sold { animation: none; opacity: 0.18; }
  .gate__beat use { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.35; }
}