/* Telas de acesso (entrar, cadastrar, aceitar convite).

   O painel da esquerda e a superficie de marca. Ele existe em duas peles: no
   tema claro e um quase-preto azulado, porque o azul se sustenta ao lado do
   branco do formulario; no escuro vira grafite monocromatico, acompanhando a
   paleta do resto do app. A cena e a mesma nos dois — o que muda sao so os
   valores das variaveis declaradas aqui embaixo.

   A cena tem tres camadas empilhadas e a divisao entre elas e o que protege a
   leitura: o fundo (auroras + grao) e a unica coisa que se move sozinha e vive
   atras de tudo; os cartoes tem superficie propria, entao nada do fundo passa
   por dentro deles; e o texto fica na camada de cima, sem nenhuma animacao
   cruzando por cima dele. */

/* Cores que alimentam gradiente entram registradas. background-image nao
   interpola — o Chrome troca o gradiente de uma vez —, entao quem anima e a
   variavel de cor por tras dele, e o gradiente so acompanha quadro a quadro. */
@property --aurora-a {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --aurora-b {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --marca-de {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --marca-ate {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --titulo-de {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --titulo-ate {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.acesso-painel {
  --superficie: #080B12;

  --tinta: #F3F5F9;
  --tinta-media: #97A2B7;
  --tinta-fraca: #626E86;

  --borda: rgba(255, 255, 255, 0.08);
  --borda-forte: rgba(255, 255, 255, 0.14);

  --aurora-a: rgba(37, 99, 235, 0.34);
  --aurora-b: rgba(99, 102, 241, 0.26);

  --marca-de: #93C5FD;
  --marca-ate: #2563EB;
  --marca-aro: rgba(147, 197, 253, 0.25);
  --marca-halo: rgba(37, 99, 235, 0.9);

  --titulo-de: #DCE8FF;
  --titulo-ate: #5D86D8;

  --acento: #60A5FA;
  --acento-suave: rgba(96, 165, 250, 0.12);
  --acento-borda: rgba(96, 165, 250, 0.2);
  --serie: #7FB4F5;
  --serie-halo: rgba(96, 165, 250, 0.45);

  /* As duas cores de situacao sao as mesmas de badge_status_lancamento: elas
     dizem o que aconteceu, entao nao entram na troca de paleta. */
  --verde: #6FCF97;
  --vermelho: #F08A8A;

  position: relative;
  isolation: isolate;

  /* Os degraus de altura la embaixo evitam a rolagem no dia a dia; quando nem
     eles dao conta, o painel rola em vez de cortar — o mesmo que o lado do
     formulario ja faz. No eixo x nunca rola: a cena sangra de proposito. */
  overflow-x: hidden;
  overflow-y: auto;

  /* O respiro acompanha a largura da coluna em vez de ficar preso a dois
     degraus de breakpoint. */
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  background-color: var(--superficie);
  color: var(--tinta);
}

/* A coluna de leitura fica centrada no painel em vez de encostada na margem:
   em telas largas sobrava um vao morto de quase 200px do lado de fora. */
.acesso-marca,
.acesso-conteudo {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}

/* No tema escuro o painel troca de paleta junto com o resto do app: sai o
   quase-preto azulado e entra o grafite, com os acentos em cinza. E a mesma
   cena, so que monocromatica — o azul so faz sentido quando o outro lado e
   branco. Os dois lados ficam quase encostados aqui, entao a borda mantem a
   divisao. */
.dark .acesso-painel {
  /* O painel deixou de ter paleta propria: agora sai dos mesmos tokens do app, para
     a tela de acesso e o resto serem o mesmo tema e nao dois parecidos. O painel usa
     o degrau do cromo, um passo abaixo do formulario ao lado, o que ja separa os dois
     lados sem depender so da borda. */
  --superficie: var(--color-grafite-escuro);

  --tinta: var(--color-cinza-quase-branco);
  --tinta-media: var(--color-cinza-claro);
  --tinta-fraca: var(--color-cinza-medio);

  --aurora-a: rgba(255, 255, 255, 0.1);
  --aurora-b: rgba(255, 255, 255, 0.07);

  --marca-de: var(--color-cinza-quase-branco);
  --marca-ate: var(--color-cinza);
  --marca-aro: rgba(241, 244, 249, 0.2);
  --marca-halo: rgba(255, 255, 255, 0.28);

  --titulo-de: var(--color-cinza-quase-branco);
  --titulo-ate: var(--color-cinza);

  --acento: var(--color-cinza-claro);
  --acento-suave: rgba(255, 255, 255, 0.07);
  --acento-borda: rgba(255, 255, 255, 0.13);

  /* A curva e a unica cor da cena no escuro, e por isso ela puxa o olho para o
     que vence primeiro. E o mesmo acento da acao primaria do app. */
  --serie: var(--color-azul-noturno);
  --serie-halo: rgba(127, 166, 227, 0.38);

  border-right: 1px solid var(--color-cinza-escuro);
}

/* A troca de tema no app inteiro passa pelo .tema-animando, que sai 100ms
   depois do clique. Os filhos do painel seguem a mesma lista do resto do app,
   mais stop-color e box-shadow, que so existem deste lado. */
.tema-animando .acesso-painel * {
  transition-property: background-color, border-color, color, fill, stroke, stop-color, box-shadow;
  transition-duration: 0.4s;
  transition-timing-function: ease;
}

/* O painel troca as proprias cores no mesmo passo do app (0.4s), e as duas
   auroras chegam depois, uma atras da outra: a superficie vira na hora e a luz
   do ambiente leva um instante para se acender na cor nova.

   A regra vale com e sem .tema-animando de proposito. A classe cai em 100ms, e
   uma transicao que so existisse dentro dela seria cancelada antes de o atraso
   da segunda aurora sequer comecar; declarada tambem no seletor solto, ela
   sobrevive a queda da classe e chega ate o fim. */
.acesso-painel,
.tema-animando .acesso-painel {
  transition-property:
    background-color, border-color, color,
    --marca-de, --marca-ate, --titulo-de, --titulo-ate,
    --aurora-a, --aurora-b;

  transition-duration:
    0.4s, 0.4s, 0.4s,
    0.4s, 0.4s, 0.4s,
    0.4s,
    0.65s, 0.65s;

  transition-delay:
    0s, 0s, 0s,
    0s, 0s, 0s,
    0s,
    0.05s, 0.12s;

  transition-timing-function: ease-out;
}
/* --- Cena de fundo --------------------------------------------------------

   Duas auroras (radial-gradients, nao filter: blur — o mesmo resultado sem
   custo de filtro por quadro) que derivam devagar em ritmos diferentes, mais
   um grao fino por cima para tirar o aspecto liso das transicoes de cor. */

/* A cena recorta as proprias camadas. Antes quem cortava era o overflow do
   painel; agora que ele rola no eixo y, as auroras — que sangram de proposito
   para fora das bordas — virariam area rolavel se ninguem as contivesse. */
.acesso-cena {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.acesso-aurora {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

.acesso-aurora--topo {
  top: -26%;
  left: -20%;
  width: 78%;
  background-image: radial-gradient(
    circle at center,
    var(--aurora-a) 0%,
    color-mix(in srgb, var(--aurora-a) 35%, transparent) 34%,
    color-mix(in srgb, var(--aurora-a) 9%, transparent) 54%,
    transparent 70%
  );
  animation: aurora-topo 26s ease-in-out infinite alternate;
}

.acesso-aurora--base {
  right: -30%;
  bottom: -34%;
  width: 88%;
  background-image: radial-gradient(
    circle at center,
    var(--aurora-b) 0%,
    color-mix(in srgb, var(--aurora-b) 35%, transparent) 36%,
    color-mix(in srgb, var(--aurora-b) 9%, transparent) 56%,
    transparent 72%
  );
  animation: aurora-base 34s ease-in-out infinite alternate;
}

@keyframes aurora-topo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(7%, 5%, 0) scale(1.14); }
}

@keyframes aurora-base {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to { transform: translate3d(-6%, -4%, 0) scale(0.94); }
}

.acesso-grao {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Marca ---------------------------------------------------------------- */

/* A marca e o botao de tema sao as duas ancoras do topo, cada uma na sua
   coluna. Para casarem, as duas linhas comecam na mesma altura (o respiro do
   painel, aplicado tambem no topo do formulario) e tem a mesma altura util —
   2.25rem e o tamanho do botao: icone de 20px mais o p-2 dos dois lados. */
.acesso-marca {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.16em;
  color: var(--tinta);
}

@media (min-width: 1024px) {
  .acesso-topo {
    padding-top: clamp(1.75rem, 3.4vw, 3.5rem);
  }
}

.acesso-marca__sinal {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.375rem;
  background-image: linear-gradient(145deg, var(--marca-de) 0%, var(--marca-ate) 100%);
  box-shadow: 0 0 0 1px var(--marca-aro), 0 6px 16px -6px var(--marca-halo);
}

/* --- Texto ---------------------------------------------------------------- */

/* flex-shrink: 0 e o que troca corte por rolagem: o bloco cresce para ficar
   centrado quando sobra espaco, mas nunca encolhe abaixo do tamanho natural. */
.acesso-conteudo {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.75rem;
}

.acesso-titulo {
  font-weight: 700;
  font-size: clamp(1.875rem, 2.5vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-wrap: balance;
}

/* A segunda linha e o unico floreio de tipografia da tela: o mesmo texto, em
   degrade, para separar a promessa da constatacao sem precisar de outra cor
   solida. */
.acesso-titulo span {
  display: block;
  background-image: linear-gradient(96deg, var(--titulo-de) 0%, color-mix(in srgb, var(--titulo-de), var(--titulo-ate)) 48%, var(--titulo-ate) 100%);
  background-clip: text;
  color: transparent;
}

.acesso-legenda {
  margin-top: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--tinta-media);
  max-width: 44ch;
}

/* --- Cartoes --------------------------------------------------------------

   Vidro sobre a cena: superficie propria, borda de um pixel e um brilho
   interno no topo. E o que garante que a aurora nunca chegue embaixo dos
   numeros. */

/* As camadas do parallax: o controller so escreve translate, e a transicao
   longa aqui e o que transforma o pulo do ponteiro em deriva suave. */
.acesso-camada {
  transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.acesso-cartoes {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.acesso-cartoes__dupla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.acesso-cartao {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--borda);
  border-radius: 0.875rem;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.018) 100%
  );
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 24px 48px -32px rgba(0, 0, 0, 0.95);
}

.acesso-cartao__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.acesso-cartao__rotulo {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

.acesso-selo {
  font-family: "Inter", sans-serif;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--acento);
  background-color: var(--acento-suave);
  border: 1px solid var(--acento-borda);
  border-radius: 999px;
  padding: 0.1875rem 0.5rem;
  white-space: nowrap;
}

.acesso-cartao__valor {
  margin-top: 0.75rem;
  font-family: "Inter", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.acesso-cartao__valor--medio {
  font-size: 1.375rem;
  margin-top: 0.5rem;
}

.acesso-cartao__apoio {
  margin-top: 0.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--vermelho);
}

.acesso-cartao__base {
  display: flex;
  justify-content: space-between;
  margin-top: 0.625rem;
  font-family: "Inter", sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}

/* A curva da semana. O traco se desenha no carregamento: pathLength="1"
   normaliza o comprimento do caminho, entao dasharray e dashoffset trabalham em
   fracao e nao dependem do tamanho real do desenho. */
.acesso-serie {
  display: block;
  width: 100%;
  height: 3.5rem;
  margin-top: 1.25rem;
  overflow: visible;
}

.acesso-serie__traco {
  stroke: var(--serie);
  filter: drop-shadow(0 0 6px var(--serie-halo));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: serie-desenha 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}

.acesso-serie linearGradient stop {
  stop-color: var(--serie);
}

.acesso-serie__area {
  opacity: 0;
  animation: serie-preenche 0.9s ease-out 1.1s forwards;
}

.acesso-barra {
  height: 0.25rem;
  margin-top: 0.875rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.acesso-barra span {
  display: block;
  height: 100%;
  width: 82%;
  border-radius: inherit;
  animation: barra-enche 1s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

.acesso-barra--verde span {
  background-image: linear-gradient(90deg, rgba(111, 207, 151, 0.5) 0%, var(--verde) 100%);
}

/* --- Entrada -------------------------------------------------------------- */

.acesso-marca,
.acesso-titulo,
.acesso-legenda,
.acesso-cartao {
  animation: acesso-entra 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.acesso-marca { animation-delay: 0.05s; }
.acesso-titulo { animation-delay: 0.16s; }
.acesso-legenda { animation-delay: 0.26s; }
.acesso-cartao--destaque { animation-delay: 0.36s; }
.acesso-cartoes__dupla .acesso-cartao:nth-child(1) { animation-delay: 0.46s; }
.acesso-cartoes__dupla .acesso-cartao:nth-child(2) { animation-delay: 0.54s; }

@keyframes acesso-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes serie-desenha {
  to { stroke-dashoffset: 0; }
}

@keyframes serie-preenche {
  to { opacity: 1; }
}

@keyframes barra-enche {
  from { width: 0; }
}

/* --- Telas curtas ---------------------------------------------------------

   O painel ocupa a altura inteira e nao rola: se o conteudo nao couber, ele e
   cortado. Entao a cena cede antes disso, sempre na mesma ordem — primeiro o
   espaco em branco, depois o tamanho do tipo, depois os cartoes secundarios e
   so por ultimo a legenda. Cada degrau abre folga suficiente para o proximo. */

@media (max-height: 860px) {
  .acesso-painel { padding-block: 2.25rem; }
  .acesso-conteudo { gap: 2rem; }
  .acesso-legenda { margin-top: 0.875rem; }
  .acesso-cartao { padding: 1rem 1.125rem; }
  .acesso-cartao__valor { margin-top: 0.5rem; font-size: 1.5rem; }
  .acesso-serie { height: 3rem; margin-top: 1rem; }
}

@media (max-height: 740px) {
  .acesso-titulo { font-size: clamp(1.5rem, 2vw, 1.875rem); }
  .acesso-conteudo { gap: 1.5rem; }
  .acesso-cartoes { gap: 0.625rem; }
  .acesso-cartoes__dupla { gap: 0.625rem; }
  .acesso-legenda { font-size: 0.875rem; line-height: 1.6; }
  .acesso-serie { height: 2.5rem; }
}

@media (max-height: 640px) {
  .acesso-cartoes__dupla { display: none; }
}

@media (max-height: 500px) {
  .acesso-legenda { display: none; }
  .acesso-marca { font-size: 1rem; }
}

/* --- Colunas estreitas ----------------------------------------------------

   Entre 1024px (onde o painel aparece) e 1280px a coluna e apertada: o rotulo
   e o selo do cartao dividem a mesma linha e sao os primeiros a se esbarrar. */

@media (max-width: 1280px) {
  .acesso-cartao { padding: 0.9375rem 1rem; }
  .acesso-cartao__topo { gap: 0.625rem; }
  .acesso-cartao__rotulo { letter-spacing: 0.1em; }
  .acesso-cartao__valor { font-size: 1.5rem; }
  .acesso-cartao__valor--medio { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .acesso-painel,
  .tema-animando .acesso-painel {
    transition-delay: 0s;
  }

  .acesso-aurora,
  .acesso-marca,
  .acesso-titulo,
  .acesso-legenda,
  .acesso-cartao,
  .acesso-barra span {
    animation: none;
  }

  .acesso-serie__traco {
    animation: none;
    stroke-dashoffset: 0;
  }

  .acesso-serie linearGradient stop {
  stop-color: var(--serie);
}

.acesso-serie__area {
    animation: none;
    opacity: 1;
  }

  .acesso-camada {
    transition: none;
  }
}