/* Tela de entrada do Sistema Voltyz.
   Portada do desenho aprovado (pasta "html tela de login"), sem o runtime da
   ferramenta de design: o original dependia de support.js + React e o botao
   Entrar era falso. Aqui as cores, medidas e animacoes sao as mesmas, e o
   comportamento e o login de verdade. */

:root {
  /* azuis do desenho */
  --azul-500: #1B4FA8;
  --azul-600: #123B85;
  --azul-700: #12275C;
  --azul-900: #0B1B44;
  --azul-claro: #3D7ED6;
  --azul-medio: #2A5EA8;
  --azul-suave: #8FC0FF;

  --fundo: #EDF3FC;
  --fundo-2: #DEE9FA;
  --branco: #FFFFFF;
  --campo: #F7FAFF;

  --tinta: #0C1730;
  --tinta-2: #0F1B2D;
  --tinta-3: #5C6B85;
  --tinta-4: #8493AC;
  --rotulo: #8E9EB8;
  --icone: #8FA2BD;
  --borda: #E2E9F5;

  --erro: #B3261E;
  --erro-fundo: #FDECEA;
  --erro-borda: #F5C6C2;

  --saida: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Manrope, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

.cena {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 32px;
  background:
    radial-gradient(900px 620px at 12% -5%, #fff 0%, rgb(255 255 255 / 0) 62%),
    radial-gradient(760px 560px at 92% 108%, var(--fundo-2) 0%, rgb(222 233 250 / 0) 70%),
    var(--fundo);
}

.cartao {
  position: relative;
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  border-radius: 28px;
  overflow: hidden;
  background: var(--branco);
  box-shadow: 0 44px 90px rgb(11 25 58 / 20%), 0 4px 14px rgb(11 25 58 / 6%);
  animation: sobeCartao .7s var(--saida) both;
}

@keyframes sobeCartao {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes surge { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================== vitrine */

.vitrine {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(165deg, var(--azul-500) 0%, var(--azul-600) 42%, var(--azul-900) 100%);
}

.vitrine__bolha {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.vitrine__bolha--1 {
  left: -120px;
  bottom: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 40% 40%, rgb(96 170 255 / 55%), rgb(96 170 255 / 0) 68%);
  animation: onda1 11s ease-in-out infinite;
}

.vitrine__bolha--2 {
  right: -160px;
  top: -90px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 50% 50%, rgb(56 214 255 / 30%), rgb(56 214 255 / 0) 70%);
  animation: onda2 13s ease-in-out infinite;
}

.vitrine__onda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -40px;
  height: 260px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(96 170 255 / 14%) 100%);
  border-radius: 50% 50% 0 0 / 60px 60px;
  animation: onda3 15s ease-in-out infinite;
  pointer-events: none;
}

/* Trama de pontos, esmaecida em direcao ao canto: tira o aspecto de gradiente
   liso sem competir com o emblema. */
.vitrine__pontos {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / 16%) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 50% at 30% 70%, #000 10%, transparent 75%);
  mask-image: radial-gradient(60% 50% at 30% 70%, #000 10%, transparent 75%);
}

@keyframes onda1 {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(-18px) scaleX(1.04); }
}
@keyframes onda2 {
  0%, 100% { transform: translateY(10px) scaleX(1.02); }
  50%      { transform: translateY(-14px) scaleX(.98); }
}
@keyframes onda3 {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(16px); }
}

.vitrine__topo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: sobe .7s var(--saida) .1s both;
}

.vitrine__marca-texto {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .18em;
  color: #fff;
}

.vitrine__risco { width: 1px; height: 16px; background: rgb(255 255 255 / 28%); }

.vitrine__selo {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--azul-suave);
}

/* ------------------------------------------------------------- emblema */

.emblema {
  position: relative;
  display: grid;
  place-items: center;
  padding: 14px 0 26px;
  animation: surge 1s ease .18s both;
}

.emblema__halo,
.emblema__anel {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.emblema__halo {
  width: 270px;
  height: 270px;
  background: radial-gradient(circle, rgb(120 190 255 / 42%), rgb(120 190 255 / 0) 65%);
  animation: brilhoHalo 7s ease-in-out infinite;
}

.emblema__anel {
  width: 250px;
  height: 250px;
  border: 1px solid rgb(160 210 255 / 30%);
  animation: anel 4.5s ease-out infinite;
}

.emblema__anel--2 {
  border-color: rgb(160 210 255 / 22%);
  animation-delay: 2.2s;
}

.emblema__disco {
  position: relative;
  width: 212px;
  height: 212px;
  border-radius: 50%;
  background: rgb(255 255 255 / 96%);
  display: grid;
  place-items: center;
  box-shadow: 0 24px 60px rgb(4 14 40 / 42%);
  animation: flutuaOrbe 9s ease-in-out infinite;
}

.emblema__disco img { width: 150px; height: auto; display: block; }

@keyframes brilhoHalo {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.09); opacity: .95; }
}
@keyframes anel {
  0%   { transform: scale(.9); opacity: .7; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes flutuaOrbe {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(14px, -22px); }
}

.vitrine__dizeres { position: relative; animation: sobe .7s var(--saida) .26s both; }

.vitrine__dizeres h2 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: pretty;
}

.vitrine__dizeres p {
  margin: 0;
  max-width: 330px;
  font-size: 14px;
  line-height: 1.65;
  color: rgb(214 230 255 / 82%);
}

/* ============================================================ formulario */

.forma {
  padding: 60px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.passo[hidden] { display: none; }
.passo { animation: sobe .7s var(--saida) .18s both; }

.sobre-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--azul-medio);
}

.tracinho { display: block; width: 22px; height: 1.5px; background: var(--azul-claro); }

h1 {
  margin: 0 0 10px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--tinta);
}

.apoio {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta-3);
}

/* ------------------------------------------------------------- campos */

.campo {
  position: relative;
  display: block;
  margin-bottom: 16px;
  background: var(--campo);
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgb(12 23 48 / 4%);
  transition: border-color .2s ease, box-shadow .28s ease, background-color .2s ease;
}

.campo:hover { border-color: #cfdcf0; }

/* :focus-within porque o rotulo e o icone ficam dentro do <label> */
.campo:focus-within {
  background: #fff;
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 4px rgb(61 126 214 / 16%);
}

.campo__rotulo {
  position: absolute;
  left: 19px;
  top: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--rotulo);
  pointer-events: none;
}

.campo input {
  width: 100%;
  padding: 27px 52px 13px 18px;
  font: inherit;
  font-size: 15.5px;
  color: var(--tinta-2);
  background: transparent;
  border: 0;
  border-radius: inherit;
  outline: none;
}

.campo input::placeholder { color: #A5B2C6; }

.campo__icone {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--icone);
  stroke-width: 1.6;
  pointer-events: none;
}

.olho {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .18s ease;
}

.olho svg { width: 19px; height: 19px; fill: none; stroke: var(--icone); stroke-width: 1.6; }
.olho:hover { background: #E8F0FD; }
.olho:hover svg { stroke: var(--azul-medio); }
.olho:focus-visible { outline: 2px solid var(--azul-claro); outline-offset: 1px; }

/* o corte sobre o olho desaparece quando a senha fica visivel */
.olho .corte {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .18s ease;
}
.olho[aria-pressed="true"] .corte { stroke-dashoffset: 24; }

/* -------------------------------------------------------------- botao */

.botao {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 58px;
  margin-top: 8px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(120deg, var(--azul-500) 0%, var(--azul-700) 62%, var(--azul-500) 100%);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 16px 34px rgb(18 39 92 / 32%);
  transition: transform .18s var(--saida), box-shadow .24s ease;
}

.botao .rotulo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity .18s ease;
}

.botao .rotulo svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .22s var(--saida);
}

.botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 46px rgb(18 39 92 / 40%);
}
.botao:hover .rotulo svg { transform: translateX(3px); }
.botao:active { transform: translateY(0); }
.botao:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 3px; }
.botao[disabled] { cursor: progress; }

/* faixa de luz atravessando o botao */
.brilho {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 42%;
  background: linear-gradient(100deg, transparent, rgb(150 200 255 / 30%), transparent);
  animation: faixa 4.2s cubic-bezier(.4, 0, .2, 1) 1.4s infinite;
}

@keyframes faixa {
  0%        { transform: translateX(-140%); }
  60%, 100% { transform: translateX(260%); }
}

.giro {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: gira .7s linear infinite;
}

@keyframes gira { to { transform: rotate(360deg); } }

.botao.ocupado .rotulo { opacity: 0; }
.botao.ocupado .giro { opacity: 1; }
.botao.ocupado .brilho { animation: none; }

/* ------------------------------------------------------------ avisos */

.aviso {
  margin: 0 0 4px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--erro);
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  border-radius: 12px;
  animation: tremor 260ms var(--saida);
}

.aviso.ok {
  color: #0F6B3F;
  background: #E7F7EE;
  border-color: #B9E3CB;
}

@keyframes tremor {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.rodape-forma {
  margin: 26px 0 0;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--tinta-4);
  animation: surge .9s ease .42s both;
}

/* ------------------------------------------------- forca da senha nova */

.forca {
  height: 5px;
  margin: -4px 0 16px;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
}

.forca i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--azul-claro);
  transition: width .32s var(--saida), background-color .32s ease;
}

.forca[data-nivel="1"] i { width: 25%;  background: #E08A6A; }
.forca[data-nivel="2"] i { width: 55%;  background: #E3B341; }
.forca[data-nivel="3"] i { width: 80%;  background: var(--azul-claro); }
.forca[data-nivel="4"] i { width: 100%; background: #1F9D63; }

/* -------------------------------------------------------- responsivo */

@media (max-width: 940px) {
  .cena { padding: 24px 16px; }
  .cartao { grid-template-columns: 1fr; max-width: 560px; }
  .vitrine {
    min-height: 0;
    padding: 28px 28px 32px;
    gap: 22px;
  }
  .emblema { padding: 0; }
  .emblema__disco { width: 148px; height: 148px; }
  .emblema__disco img { width: 104px; }
  .emblema__halo { width: 200px; height: 200px; }
  .emblema__anel { width: 180px; height: 180px; }
  .vitrine__dizeres h2 { font-size: 21px; }
  .forma { padding: 36px 28px 40px; }
  h1 { font-size: 34px; }
  .apoio { margin-bottom: 24px; }
}

@media (max-width: 420px) {
  .forma { padding: 28px 20px 32px; }
  h1 { font-size: 29px; }
  .emblema__disco { width: 120px; height: 120px; }
  .emblema__disco img { width: 86px; }
}

/* Quem pediu menos movimento recebe a cena parada, nao a cena sem graca. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .emblema__halo { opacity: .8; }
}