/* ------------------------------------------------------------------
   Dissuasão de cópia

   Só o corpo público do artigo fica sem seleção. Menu, preço, contato
   e formulários continuam normais: quem vai te pagar precisa conseguir
   copiar um código de compra.
   ------------------------------------------------------------------ */

.leitura {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.leitura input,
.leitura textarea,
.leitura select,
.leitura code {
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------------
   O susto: escurece e treme

   O véu passa de -30px nas quatro bordas porque o corpo da página
   balança durante o tremor. Sem essa folga, apareceria uma fresta
   clara na beirada a cada sacudida.
   ------------------------------------------------------------------ */

.tremor-veu {
  position: fixed;
  inset: -30px;
  z-index: 200;
  background: #07060A;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.tremor-veu--ativo {
  opacity: 0.93;
  visibility: visible;
  transition: opacity 110ms ease, visibility 0s;
}

body.tremendo {
  animation: tremer 540ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Amplitude decrescente: o primeiro solavanco é o forte e os
   seguintes vão morrendo, como coisa que foi sacudida de verdade. */
@keyframes tremer {
  0%   { transform: translate(0, 0) rotate(0deg); }
  8%   { transform: translate(-11px, 5px) rotate(-0.7deg); }
  18%  { transform: translate(9px, -6px) rotate(0.6deg); }
  29%  { transform: translate(-8px, -4px) rotate(-0.5deg); }
  41%  { transform: translate(7px, 5px) rotate(0.4deg); }
  54%  { transform: translate(-5px, 3px) rotate(-0.3deg); }
  68%  { transform: translate(4px, -3px) rotate(0.2deg); }
  82%  { transform: translate(-2px, 1px) rotate(-0.1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Quem pediu menos movimento recebe só o escuro, sem o tranco. */
@media (prefers-reduced-motion: reduce) {
  body.tremendo {
    animation: none;
  }
}

/* ------------------------------------------------------------------
   Rodapé centralizado
   ------------------------------------------------------------------ */

.rodape__fim {
  justify-content: center;
  text-align: center;
}