/* ============================================================
   Camadas de atmosfera — textura leve e brilhos coloridos
   Ambas ficam bem discretas: acima disso o texto perde contraste.
   ============================================================ */
.grao{
  position:fixed;inset:-120%;
  z-index:var(--z-grao);
  pointer-events:none;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grao 700ms steps(3) infinite;
}
@keyframes grao{
  0%{transform:translate(0,0)}
  33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)}
  100%{transform:translate(0,0)}
}

/* manchas de cor difusas ao fundo de tudo */
.brilho{
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 8% 12%,rgba(255,95,86,.22),transparent 70%),
    radial-gradient(34vw 34vw at 92% 22%,rgba(108,77,246,.20),transparent 70%),
    radial-gradient(40vw 40vw at 50% 96%,rgba(18,194,160,.18),transparent 70%);
  animation:respira 16s ease-in-out infinite alternate;
}
@keyframes respira{
  from{transform:scale(1) translateY(0)}
  to{transform:scale(1.12) translateY(-2%)}
}