/* Fontes: no HTML, carregue css/fontes.css antes; no React, importe o fontsource (ver LEIA-ME). */
@import './tokens.css';

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* a camada que abre trava a rolagem: o espaço da barra fica reservado, e nada pula ao abrir nem ao fechar */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-ui);
  font-size: var(--fs-15);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: var(--int);
}

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

h1,
h2,
h3,
h4,
h5,
p,
figure {
  margin: 0;
}

[hidden] {
  display: none !important;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--int);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--int-suave), 0 0 14px var(--brilho);
}

::selection {
  background: var(--int-borda);
}

/* ── utilitários ── */
.so-leitor {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dado {
  font-family: var(--f-dado);
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

.num {
  font-variant-numeric: tabular-nums;
}

.rotulo {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-11);
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tx-3);
}

.texto-2 {
  color: var(--tx-2);
}

.texto-3 {
  color: var(--tx-3);
}

kbd {
  font-family: var(--f-dado);
  font-size: var(--fs-11);
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--r-1);
  background: var(--sup-2);
  box-shadow: inset 0 0 0 1px var(--ln-2);
  color: var(--tx-3);
  white-space: nowrap;
}

/* ── material: vidro (só no que flutua) ── */
.vidro {
  position: relative;
  isolation: isolate;
  background: var(--vd-bg);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--vd-borda), inset 0 0 0 1px var(--vd-aro), var(--vd-sombra);
}

/*
 * Luz do cursor (acompanharBrilho): como uma lâmpada refletida no vidro.
 * O reflexo forte fica só no aro de 1px perto do cursor; na superfície há um brilho difuso,
 * atrás do conteúdo. Acende ao entrar, apaga ao sair e segue o cursor com leve inércia.
 */
.vidro::before,
.vidro::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--luz, 0);
}

.vidro::before {
  z-index: -1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), var(--vd-luz-sup), transparent 70%);
}

.vidro::after {
  padding: 1.5px;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), var(--vd-luz-aro), transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

:root[data-transparencia='reduzida'] .vidro {
  background: var(--vd-solido) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-transparency: reduce) {
  .vidro {
    background: var(--vd-solido) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── material: luz (a assinatura) ── */
.luz-linha {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--nucleo);
  box-shadow: 0 0 8px var(--brilho);
}

@keyframes ui-pisca {
  0%, 6% { opacity: 1; }
  3% { opacity: 0.2; }
  9%, 100% { opacity: 1; }
  12% { opacity: 0.2; }
  15% { opacity: 1; }
}

@keyframes ui-carrega {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ui-esmaece {
  from { opacity: 0; }
}

@keyframes ui-abre {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

@keyframes ui-sobe {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
}

@keyframes ui-brilha {
  to { transform: translateX(100%); }
}

@keyframes ui-gira {
  to { transform: rotate(360deg); }
}

/* ── acessibilidade de movimento ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

:root[data-movimento='reduzido'] *,
:root[data-movimento='reduzido'] *::before,
:root[data-movimento='reduzido'] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}