.cabecalho {
  position: sticky;
  top: 0;
  z-index: 100;
  transform-origin: top center;
  will-change: transform;
}

.cabecalho.cabecalho--rolado {
  animation: cabecalho-gelatina 360ms cubic-bezier(.22, 1.15, .35, 1) both;
}

@keyframes cabecalho-gelatina {
  0% { transform: translateY(-3px) scaleY(.985); }
  58% { transform: translateY(0) scaleY(1.006); }
  100% { transform: translateY(0) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cabecalho.cabecalho--rolado { animation: none; }
}