/* Tela de login. A marca no login nao e multicolorida no fundo: o fundo e azul-noite
   solido com marca-d'agua a 4%, e o brasao em cores fica dentro do cartao. Secao 2.6. */

.tela-login {
  min-height: 100vh;
  background: var(--azul-noite);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-5) var(--e-4);
  position: relative;
  overflow: hidden;
}

.tela-login__marca-dagua {
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 460px;
  color: #fff;
  opacity: 0.04;
  pointer-events: none;
}

.tela-login__marca-dagua svg { width: 100%; height: auto; display: block; }

.cartao-login {
  position: relative;
  background: var(--superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  width: 100%;
  max-width: 400px;
  padding: var(--e-6) var(--e-5) var(--e-4);
}

.cartao-login .marca-empilhada { margin-bottom: var(--e-6); }

.cartao-login form { margin-top: var(--e-5); }

.cartao-login__rodape {
  margin: var(--e-4) 0 0;
  padding-top: var(--e-3);
  font-size: var(--t-12);
  color: var(--tinta-fraca);
  text-align: center;
}

.campo-senha { position: relative; }
.campo-senha input { padding-right: 48px; }

.campo-senha__alternar {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--tinta-fraca);
  cursor: pointer;
  border-radius: 6px;
}

.campo-senha__alternar:hover { color: var(--azul-institucional); background: var(--azul-vapor); }

/* Momento orquestrado 1: o traco do brasao se desenha uma vez por sessao, em 700ms. */
.brasao--traco path {
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  fill-opacity: 0;
}

.brasao--traco[data-animar="sim"] path {
  animation: desenhar-traco 700ms var(--easing) forwards;
}

.brasao--traco[data-animar="sim"] path:nth-of-type(2) { animation-delay: 90ms; }

@keyframes desenhar-traco {
  0% { stroke-dashoffset: 620; fill-opacity: 0; }
  70% { stroke-dashoffset: 0; fill-opacity: 0.25; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

@media screen and (prefers-reduced-motion: reduce) {
  .brasao--traco path,
  .brasao--traco[data-animar="sim"] path {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    animation: none;
  }
}