/* Base: cores, fontes, espaçamento, movimento e utilitários usados na página inteira. */

:root {
  /* Paleta */
  --black: #000000;
  --white: #FFFFFF;
  --deep-blue: #0F4ABF;
  --optical-blue: #0B79D9;
  --signal-red: #F20505;
  --editorial-red: #F44948;

  /* Texto e linhas sobre preto */
  --fg-1: #FFFFFF;
  --fg-2: rgba(255, 255, 255, .72);
  --fg-3: rgba(255, 255, 255, .55);
  --fg-4: rgba(255, 255, 255, .4);
  --line: rgba(255, 255, 255, .16);

  /* Texto e linhas sobre branco */
  --ink-1: #000000;
  --ink-2: rgba(0, 0, 0, .72);
  --ink-3: rgba(0, 0, 0, .55);
  --ink-4: rgba(0, 0, 0, .4);
  --line-ink: rgba(0, 0, 0, .16);

  /* Fontes */
  --font-display: 'Michroma', system-ui, sans-serif;
  --font-heading: 'League Gothic', system-ui, sans-serif;
  --font-body: 'Libre Franklin', system-ui, sans-serif;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --container: 1280px;
  --gutter: 24px;
  --page-pad: max(24px, 4vw);
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Movimento */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-reveal: 600ms;
  --dur-converge: 900ms;

  /* Anáglifo: camadas vermelha e azul deslocadas */
  --anaglyph-shadow: 5px 0 3px rgba(242, 5, 5, .75), -5px 0 3px rgba(15, 74, 191, .75);
  /* Brilho suave em volta das letras dos títulos */
  --glow: 0 0 14px rgba(255, 255, 255, .28), 0 0 34px rgba(255, 255, 255, .12);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--signal-red) var(--black);
}

::selection {
  background: var(--signal-red);
  color: var(--white);
}

/* Atalho de teclado para pular a navegação: só aparece ao receber foco. */
.skip {
  position: fixed;
  left: var(--page-pad);
  top: 8px;
  z-index: 300;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--black);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

/* O atributo hidden vence qualquer display definido nas classes. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

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

:focus-visible {
  outline: 2px solid var(--optical-blue);
  outline-offset: 3px;
}

/* Título que abre em camadas vermelha e azul enquanto a página se move. */
.anaglyph {
  text-shadow: var(--rest-shadow, none);
  filter: blur(0);
  transition: text-shadow var(--dur-base) linear, filter var(--dur-base) linear;
}

[data-scrolling="true"] .anaglyph {
  text-shadow: var(--anaglyph-shadow);
  filter: blur(1.5px);
}

/* Granulado por cima da página inteira. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
  opacity: .06;
}

.grain::before {
  content: "";
  position: absolute;
  inset: -100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain .9s steps(8) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  12% { transform: translate(-40px, 20px); }
  25% { transform: translate(30px, -50px); }
  37% { transform: translate(-60px, -10px); }
  50% { transform: translate(50px, 40px); }
  62% { transform: translate(-20px, 60px); }
  75% { transform: translate(70px, -30px); }
  87% { transform: translate(-50px, -60px); }
  100% { transform: translate(0, 0); }
}

/* Camadas vermelha e azul sempre visíveis atrás da letra (título de destaque). */
.layers {
  --rest-shadow: -.035em 0 0 var(--signal-red), .035em 0 0 var(--optical-blue);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .grain::before {
    animation: none;
  }

  .anaglyph,
  [data-scrolling="true"] .anaglyph {
    text-shadow: var(--rest-shadow, none);
    filter: none;
    transition: none;
  }
}