/* ===========================================================================
   CAMADA 2 - BASE
   Reset, defaults de elemento, foco global e animacoes compartilhadas.
   =========================================================================== */

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font: var(--font-weight-regular) var(--font-size-md) / var(--line-normal) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
}

a { color: var(--color-accent-300); text-underline-offset: .2em; }

img, svg, video { max-width: 100%; }

/* ATENCAO - esta regra e a ordem dela importam.
   `img, svg { display: block }` e declaracao de autor e venceria o
   `[hidden] { display: none }` que vem do navegador, independentemente de
   especificidade. Como o botao de mostrar/ocultar senha alterna exatamente o
   atributo `hidden` de dois <svg>, sem a linha abaixo os DOIS icones do olho
   apareceriam ao mesmo tempo, sempre. Vale para qualquer svg oculto em
   paginas futuras. */
:where(img, svg, video):not([hidden]) { display: block; }
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

ul[class] { list-style: none; padding: 0; margin: 0; }

/* --- Foco ----------------------------------------------------------------
   A ordem importa: zerar :focus antes de definir :focus-visible garante que
   quem usa mouse nao veja o anel, sem tirar o indicador de quem usa teclado. */
:focus { outline: none; }
:focus-visible {
  outline: var(--ring-width) solid var(--color-focus);
  outline-offset: var(--ring-offset);
  border-radius: inherit;
}

::selection {
  background: var(--color-accent-tint-strong);
  color: var(--color-text-primary);
}

/* Barra de rolagem combinando com o tema */
* { scrollbar-color: var(--color-border-strong) var(--color-bg-sunken); scrollbar-width: thin; }

/* Correcao de autofill: sem isto o Chrome pinta o campo de amarelo claro e o
   texto branco fica ilegivel em cima. Essencial em tema escuro. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  caret-color: var(--color-text-primary);
  box-shadow: inset 0 0 0 100px var(--color-input-bg);
  transition: background-color 9999s;
}

/* --- Pular para o conteudo ---------------------------------------------- */
.ipr-skiplink {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: var(--z-toast);
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.ipr-skiplink:focus { top: var(--space-4); }

/* --- Animacoes globais ---------------------------------------------------
   Declaradas uma vez e usadas por varios componentes. Nenhum keyframe fixa
   cor, tamanho ou posicao: so opacidade, transform, filtro e espacamento de
   letra. E isso que permite o MESMO keyframe servir a cortina de abertura, ao
   cartao de login e ao reflexo do botao. */
@keyframes ipr-spin  { to { transform: rotate(360deg); } }
@keyframes ipr-rise  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ipr-fade  { from { opacity: 0; } to { opacity: 1; } }
/* O DESTINO vem por variavel, entao este unico keyframe serve a qualquer
   deslocamento lento: as duas auroras do login e a malha de pontos que
   escorre atras delas usam os tres o mesmo bloco, so trocando --drift-x,
   --drift-y e o periodo. Os padroes reproduzem o movimento original. */
@keyframes ipr-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drift-x, -3%), var(--drift-y, 4%), 0); }
}
@keyframes ipr-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Foco optico: o elemento chega grande e desfocado e "assenta" em nitidez.
   Vale mais que um fade simples porque imita uma lente focando, e nao um
   objeto surgindo do nada. */
@keyframes ipr-focus-in {
  from { opacity: 0; transform: scale(.88); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}


/* Anel de pulso que sai de dentro da marca e se dissolve. */
@keyframes ipr-halo { from { opacity: .5; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }

/* Reflexo especular atravessando uma superficie UMA vez. */
@keyframes ipr-sweep {
  from { transform: translateX(-160%) skewX(-16deg); }
  to   { transform: translateX(260%)  skewX(-16deg); }
}

/* Traco que se desenha a partir do centro. */
@keyframes ipr-draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* Saida de cena: CRESCE e desfoca ao sair, nunca encolhe. Encolher parece
   "fechou"; crescer parece que a camera atravessou o objeto. */
@keyframes ipr-lift {
  from { opacity: 1; transform: scale(1);    filter: blur(0); }
  to   { opacity: 0; transform: scale(1.09); filter: blur(11px); }
}

/* Brilho de fundo abrindo. */
@keyframes ipr-bloom { from { opacity: 0; transform: scale(.45); } to { opacity: 1; transform: scale(1); } }

/* Unico !important tolerado alem do [hidden], e por acessibilidade:
   respeitar quem pediu menos movimento no sistema operacional.

   `animation-delay: 0s` e obrigatorio junto com a duracao. Zerar so a duracao
   deixaria os ATRASOS de pe: a cortina de abertura ficaria 1,8s parada na
   tela antes de sumir num quadro, e a entrada escalonada do cartao viraria
   uma espera com a tela vazia. Com o atraso zerado, tudo assume o estado
   final imediatamente, que e exatamente o que "menos movimento" significa. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}