@import url('fontes/fontes.css');

:root {
  --preto: #050404;
  --grafite: #1e1e1e;
  --creme: #f2efe9;
  --creme-suave: #b5aea8;
  --vermelho: #c8312a;
  --vermelho-escuro: #7d1814;
  --vermelho-claro: #e05a52;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--preto);
  color: var(--creme);
  font-family: Verdana, Geneva, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* barra dos protótipos (não vai para o site) */
.proto-barra {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 999px;
  background: rgb(10 8 8 / 0.72);
  backdrop-filter: blur(8px);
  font-size: 13px;
  white-space: nowrap;
}

.proto-barra strong { font-weight: 700; }
.proto-barra span { color: var(--creme-suave); }
.proto-barra nav { display: flex; gap: 4px; }

.proto-barra a {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--creme);
  text-decoration: none;
}

.proto-barra a:hover { background: rgb(255 255 255 / 0.1); }
.proto-barra a[aria-current] { background: var(--vermelho); }

@media (max-width: 640px) {
  .proto-barra span { display: none; }
}

/* abertura: ocupa a tela; o script a prende enquanto as frases passam */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--preto);
}

.hero__fundo {
  position: absolute;
  inset: -4%;
  background-position: center;
  background-size: cover;
  will-change: transform, opacity;
}

/* grão de filme por cima de tudo */
.grao {
  position: absolute;
  inset: -50%;
  z-index: 20;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.09;
  animation: grao 0.6s steps(3) infinite;
}

@keyframes grao {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}

.hero__rolar {
  position: absolute;
  z-index: 15;
  left: 0;
  right: 0;
  bottom: 28px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme-suave);
}

.hero__rolar b {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  animation: seta 1.4s ease-in-out infinite;
}

@keyframes seta {
  50% { transform: translateY(6px); }
}

/* depois da abertura, a capa de verdade da reportagem, só para sentir a passagem */
.depois {
  position: relative;
  height: 100svh;
  background: var(--grafite) url('capa.webp') center / cover no-repeat;
}

.depois p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--creme-suave);
}

.fim {
  padding: 80px 24px 120px;
  text-align: center;
  background: var(--preto);
  color: var(--creme-suave);
}

.fim a { color: var(--vermelho-claro); }

@media (prefers-reduced-motion: reduce) {
  .grao, .hero__rolar b { animation: none; }
}