portal_publico/static/css/login-intro-aniversario.css

/* Intro pós-login sazonal "Aniversário" (56 anos da De Paula Contadores) —
   variante de login-intro.css, ativa só quando `pidIsAniversarioActive()`
   (seasonal-theme.js, só 15/10) é verdadeiro; fora desse dia,
   login-intro.css/login-intro.js (ou a variante Halloween) continuam sendo
   os únicos usados. Porta a composição de cenas Chegada/Confete/Texto/
   Serpentina autorada em "P.I.D. Logo Design Aniversário/Logo intro
   animation/export-56/pid-56-anos.html" (pasta de logos, fora do
   repositório) — ver `login-intro-aniversario.js` e
   `docs/temas-sazonais/temas-sazonais.md`. Mesma paleta da marca P.I.D.,
   acrescida das cores dos balões/confete (azul/âmbar/rosa), hardcoded aqui
   como no arquivo de origem (não são tokens de tema). Só usado em
   index.html. */

.login-intro-a {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(120% 80% at 50% 38%, rgba(198, 162, 74, 0.14), transparent 60%), #1a1430;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 500ms ease;
}

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

.login-intro-a__flash {
  position: absolute;
  inset: 0;
  background: #c6a24a;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.login-intro-a__stage {
  display: flex;
  align-items: center;
  gap: 40px;
}

.login-intro-a__icon-wrap {
  position: relative;
  width: 260px;
  flex: none;
  transform: translate(0, 0) scale(1);
}

.login-intro-a__icon {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  opacity: 0;
  transform-origin: 50% 100%;
}

.login-intro-a__balloons path {
  stroke: #b9aecb;
  stroke-width: 0.99;
  fill: none;
  stroke-linecap: round;
}

.login-intro-a__balloon--blue {
  fill: #2e86de;
}

.login-intro-a__balloon-tie--blue {
  fill: #2e86de;
}

.login-intro-a__balloon--amber {
  fill: #f2a93b;
}

.login-intro-a__balloon-tie--amber {
  fill: #f2a93b;
}

.login-intro-a__balloon--pink {
  fill: #e8446e;
}

.login-intro-a__balloon-tie--pink {
  fill: #e8446e;
}

.login-intro-a__arm path {
  stroke: #7b5ba8;
  stroke-width: 3.5;
  fill: none;
  stroke-linecap: round;
}

.login-intro-a__arm circle {
  fill: #7b5ba8;
}

.login-intro-a__body-path {
  fill: #7b5ba8;
}

.login-intro-a__tab {
  fill: #c6a24a;
}

.login-intro-a__tab-shadow {
  fill: #7b5ba8;
}

.login-intro-a__screen {
  fill: #241c33;
}

.login-intro-a__eye {
  fill: #f2ede3;
}

.login-intro-a__pupil {
  fill: #241c33;
}

.login-intro-a__smile {
  stroke: #c6a24a;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}

.login-intro-a__pucker-outer {
  fill: #c6a24a;
  opacity: 0;
}

.login-intro-a__pucker-inner {
  fill: #241c33;
  opacity: 0;
}

.login-intro-a__horn-tube {
  stroke: #e8446e;
  fill: none;
  stroke-linecap: round;
}

.login-intro-a__horn-dash {
  stroke: #f2ede3;
  stroke-width: 1.3;
  stroke-dasharray: 2 4;
  fill: none;
  stroke-linecap: round;
  opacity: 0.8;
}

.login-intro-a__horn-puff--1 {
  fill: #f2a93b;
}

.login-intro-a__horn-puff--2 {
  fill: #c6a24a;
}

.login-intro-a__confetti {
  position: absolute;
  left: 28%;
  top: 26%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.login-intro-a__confetti-piece {
  position: absolute;
  left: 0;
  top: 0;
}

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

.login-intro-a__parabens-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

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

.login-intro-a__wordmark-img {
  height: 44px;
  width: auto;
  display: block;
  opacity: 0;
  transform-origin: left center;
}

.login-intro-a__rule {
  width: 260px;
  height: 3px;
  background: linear-gradient(90deg, #c6a24a, #e8446e);
  transform-origin: left center;
  transform: scaleX(0);
}

.login-intro-a__numrow {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.login-intro-a__num {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 4.4rem;
  line-height: 1;
  color: #c6a24a;
  opacity: 0;
  transform-origin: left bottom;
}

.login-intro-a__num-label {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f2ede3;
  opacity: 0;
}

.login-intro-a__tagline {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c6a24a;
  opacity: 0;
}

/* Tema claro: mesmo raciocínio de login-intro.css/login-intro-halloween.css —
   fundo escuro fixo destoava do resto do Portal nesse tema, então vira
   `--bg-canvas` claro; o texto pensado pra contrastar com fundo escuro
   precisa virar escuro. O ícone não precisa de override (o roxo/dourado tem
   contraste de sobra nos dois fundos). */
:root[data-theme="light"] .login-intro-a {
  background: radial-gradient(120% 80% at 50% 38%, rgba(198, 162, 74, 0.1), transparent 60%), var(--bg-canvas);
}

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

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

@media (max-width: 600px) {
  .login-intro-a__stage {
    gap: 22px;
  }

  .login-intro-a__icon-wrap {
    width: 170px;
  }

  .login-intro-a__parabens {
    font-size: 1.7rem;
  }

  .login-intro-a__wordmark-img {
    height: 30px;
  }

  .login-intro-a__rule {
    width: 170px;
  }

  .login-intro-a__num {
    font-size: 3rem;
  }

  .login-intro-a__num-label {
    font-size: 0.8rem;
  }

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