portal_publico/static/css/login-intro.css

/* Animação de intro pós-login — portada de pid-intro-escuro.html (composição
   por cenas Build/Face/Wordmark/Portal, ver CLAUDE.md "Animação de intro do
   login"). Cores e formas idênticas às do resto da marca P.I.D. já usada no
   Portal (mesmos hex de pid-icone-escuro.svg/pid-logo-horizontal-escuro.svg),
   hardcoded aqui como nesses SVGs — não são tokens de tema, são a paleta fixa
   da marca. Só usado em index.html. */

.login-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Mesmo tom de --bg-canvas (tema escuro, valor fixo — não var(), já que o
     card do login e a animação são congelados escuros nos dois temas, ver
     "Card de login" em login.css) — não a cor de fundo original do arquivo
     fornecido (#241c33, roxo-tinto), pra a transição login → animação →
     portal ler como uma coisa só se estruturando aos poucos, não uma troca
     de cenário. */
  background: #121017;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 500ms ease;
}

.login-intro.is-visible {
  opacity: 1;
}

.login-intro__stage {
  display: flex;
  align-items: center;
  gap: 32px;
}

.login-intro__icon {
  width: 160px;
  height: 160px;
  flex: none;
  overflow: visible;
  transform: translate(0, 0) scale(1);
}

.login-intro__body {
  fill: #7b5ba8;
  fill-opacity: 0;
  stroke: #7b5ba8;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-opacity: 0;
}

.login-intro__tab {
  opacity: 0;
}

.login-intro__tab rect:first-child {
  fill: #c6a24a;
}

.login-intro__tab rect:last-child {
  fill: #7b5ba8;
}

.login-intro__screen {
  opacity: 0;
}

.login-intro__screen rect {
  fill: #241c33;
}

.login-intro__eye {
  opacity: 0;
}

.login-intro__eye circle {
  fill: #f2ede3;
}

.login-intro__eye .login-intro__glint {
  fill: #241c33;
}

.login-intro__smile {
  fill: none;
  stroke: #c6a24a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke-opacity: 0;
}

.login-intro__wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
}

.login-intro__letters {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.login-intro__letter {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.03em;
  color: #f2ede3;
  opacity: 0;
}

.login-intro__dot {
  color: #c6a24a;
}

.login-intro__rule {
  width: 220px;
  height: 3px;
  background: #c6a24a;
  transform-origin: left center;
  transform: scaleX(0);
}

.login-intro__tagline {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242, 237, 227, 0.62);
  opacity: 0;
}

/* Tema claro: mesmo raciocínio do fundo de `.login-page` (login.css) — o
   fundo escuro fixo (#121017, igual ao card/ícone) destoava do resto do
   Portal nesse tema, então vira o `--bg-canvas` claro. Só que aqui, ao
   contrário do card do login (que continua congelado escuro nos dois
   temas), o fundo da própria animação muda — e como o wordmark ("P.I.D." +
   tagline) é texto claro pensado pra contrastar com um fundo escuro, essas
   duas peças (não o ícone, que continua legível nos dois fundos: o corpo
   roxo tem contraste de sobra contra um fundo claro, e a "tela" do disquete
   já é escura por si só) precisam virar escuras nesse tema, senão ficam
   ilegíveis. Nada disso muda o tema escuro (padrão) — só o claro. */
:root[data-theme="light"] .login-intro {
  background: var(--bg-canvas);
}

:root[data-theme="light"] .login-intro__letter {
  color: #241c33;
}

:root[data-theme="light"] .login-intro__tagline {
  color: rgba(36, 28, 51, 0.62);
}

@media (max-width: 600px) {
  .login-intro__stage {
    gap: 20px;
  }

  .login-intro__icon {
    width: 100px;
    height: 100px;
  }

  .login-intro__letter {
    font-size: 2rem;
  }

  .login-intro__rule {
    width: 150px;
  }

  .login-intro__tagline {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }
}