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

/* Intro pós-login sazonal "Halloween" (vampiro) — variante de
   login-intro.css, ativa só quando `pidIsHalloweenActive()`
   (seasonal-theme.js) é verdadeiro; fora da janela de outubro,
   login-intro.css/login-intro.js (arquivo original, intocado) continuam
   sendo os únicos usados. Porta a composição de cenas Rise/Scare/Settle/
   Wordmark autorada em "Logo intro animation Halloween/export-halloween/
   pid-intro-halloween.html" (pasta de logos, fora do repositório) — ver
   `login-intro-halloween.js` e `docs/temas-sazonais/temas-sazonais.md`. Mesma
   paleta da marca P.I.D., acrescida do vinho da capa (#7A2733/#9E3241),
   hardcoded aqui como no arquivo de origem (não são tokens de tema). Só
   usado em index.html. */

.login-intro-h {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: radial-gradient(120% 80% at 50% 38%, rgba(123, 91, 168, 0.16), transparent 60%), #151022;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 500ms ease;
}

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

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

.login-intro-h__stage {
  display: flex;
  align-items: center;
  gap: 36px;
}

.login-intro-h__icon {
  width: 200px;
  height: 210px;
  flex: none;
  overflow: visible;
  opacity: 0;
  transform: translate(0, 0) scale(1);
}

.login-intro-h__cape path {
  fill: #2e2740;
}

.login-intro-h__cape-line {
  stroke: #3d3454;
  stroke-width: 1;
  fill: none;
}

.login-intro-h__collar {
  fill: #7a2733;
}

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

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

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

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

.login-intro-h__face {
  opacity: 0;
}

.login-intro-h__face--scare circle:not(.login-intro-h__pupil-red) {
  fill: #f2ede3;
}

.login-intro-h__pupil-red {
  fill: #9e3241;
}

.login-intro-h__brow-angry {
  stroke: #7a2733;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
}

.login-intro-h__mouth-fill {
  fill: #0c0814;
}

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

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

.login-intro-h__face--friendly circle:not(.login-intro-h__pupil) {
  fill: #f2ede3;
}

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

.login-intro-h__brow {
  stroke: #7a2733;
  stroke-width: 1.3;
  fill: none;
  stroke-linecap: round;
}

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

.login-intro-h__fang-friendly {
  fill: #f2ede3;
}

/* A capa fica "levantada" cobrindo o rosto até a cena Scare abrir — por
   isso, ao contrário de `.login-intro-h__face` (que começa escondido),
   começa visível (T=0 já é capa cobrindo, ver `flapGoneFn` em
   login-intro-halloween.js). */
.login-intro-h__flap-wrap {
  opacity: 1;
}

.login-intro-h__flap-rotate path:first-child {
  fill: #2e2740;
}

/* Olhos semicerrados espiando por cima da capa levantada — também visíveis
   desde o início (T=0), mesmo raciocínio do comentário acima. */
.login-intro-h__squint {
  opacity: 1;
}

.login-intro-h__squint path {
  stroke: #f2ede3;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
}

.login-intro-h__squint circle {
  fill: #9e3241;
}

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

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

.login-intro-h__letter {
  display: inline-block;
  font-family: "Creepster", "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 3.4rem;
  letter-spacing: 0.02em;
  color: #f2ede3;
  opacity: 0;
  text-shadow: 0 0 16px rgba(122, 39, 51, 0.75), 0 3px 0 rgba(0, 0, 0, 0.4);
}

.login-intro-h__dot {
  color: #c6a24a;
}

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

.login-intro-h__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 — fundo escuro fixo
   destoava do resto do Portal nesse tema, então vira `--bg-canvas` claro; o
   texto do wordmark (pensado pra contrastar com fundo escuro) precisa virar
   escuro. O ícone não precisa de override (mesmo motivo de login-intro.css:
   o roxo/vinho tem contraste de sobra nos dois fundos). */
:root[data-theme="light"] .login-intro-h {
  background: radial-gradient(120% 80% at 50% 38%, rgba(123, 91, 168, 0.1), transparent 60%), var(--bg-canvas);
}

:root[data-theme="light"] .login-intro-h__letter {
  color: #3a1620;
  text-shadow: 0 0 10px rgba(122, 39, 51, 0.35), 0 2px 0 rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .login-intro-h__tagline {
  color: #7a2733;
}

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

  .login-intro-h__icon {
    width: 130px;
    height: 137px;
  }

  .login-intro-h__letter {
    font-size: 2.2rem;
  }

  .login-intro-h__rule {
    width: 160px;
  }

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