/* =========================================================
   BASE — variáveis, reset e utilitários globais
   ========================================================= */

:root {
  /* Paleta */
  --preto-profundo: #050505;
  --preto-secundario: #0a0a0a;
  --vermelho: #ff0000;
  --vermelho-escuro: #700000;
  --branco: #ffffff;
  --cinza: #888888;
  --cinza-borda: rgba(255, 255, 255, 0.28);

  /* Tipografia */
  --fonte: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espaçamento lateral do layout */
  --margem-lateral: clamp(20px, 6vw, 110px);

  /*
   * Brilhos vermelhos que atravessam a divisa entre duas seções.
   * A seção de cima usa no canto inferior; a de baixo usa espelhado no
   * canto superior do mesmo lado — juntos formam um único brilho contínuo.
   */
  --brilho-emenda-largura: 26vw;
  --brilho-emenda-altura: 42vh;
  --brilho-emenda-cores: rgba(140, 0, 0, 0.62), rgba(112, 0, 0, 0.18) 50%, transparent 78%;

  /* Curvas de animação */
  --curva-suave: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-cortina: cubic-bezier(0.77, 0, 0.18, 1);

  /* Textura granulada reaproveitada em vários elementos */
  --textura-granulada: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .38 0 0 0 -.13'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

  /* Versão bem mais discreta do grão, aplicada dentro das letras de PEDRO */
  --textura-nome: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .2 0 0 0 -.085'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* a rolagem suave entre seções é feita pelo JavaScript (curva própria) */
  scroll-behavior: auto;
  background: var(--preto-profundo);
}

html.carregando,
html.menu-aberto {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte);
  font-weight: 400;
  color: var(--branco);
  background: var(--preto-profundo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Grão cinematográfico muito sutil em toda a página */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: var(--textura-granulada);
  background-size: 180px 180px;
  opacity: 0.22;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
p {
  margin: 0;
}

:focus-visible {
  outline: 1.5px solid var(--vermelho);
  outline-offset: 4px;
  border-radius: 4px;
}

::selection {
  background: var(--vermelho);
  color: var(--branco);
}

/* ---------- Utilitários ---------- */

.destaque-vermelho {
  color: var(--vermelho);
}

/* mantém junto (ex.: palavra + pontuação colorida) */
.sem-quebra {
  white-space: nowrap;
}

.somente-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-conteudo {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--vermelho);
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform 0.3s var(--curva-suave);
}

.pular-conteudo:focus-visible {
  transform: none;
}

/* Máscara usada nas revelações de texto (linha sobe de dentro da máscara) */
.mascara-linha {
  display: block;
  overflow: hidden;
  /* respiro para acentos e descendentes não serem cortados */
  padding-block: 0.12em;
  margin-block: -0.12em;
}

.linha-interna {
  display: block;
  will-change: transform;
}