.hero-smoke{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;

  mix-blend-mode:screen;
  opacity:.12;

  filter:blur(1.2px);

  pointer-events:none;
  z-index:2;

  animation:
    smokeFade 20s linear infinite,
    smokeDrift 20s linear infinite;
}

/* esconde o corte do loop */

@keyframes smokeFade{
  0%{opacity:0}
  10%{opacity:.25}
  90%{opacity:.25}
  100%{opacity:0}
}

/* movimento leve */

@keyframes smokeDrift{
  0%{transform:translateX(0) translateY(0) scale(1)}
  50%{transform:translateX(2%) translateY(-1%) scale(1.02)}
  100%{transform:translateX(4%) translateY(-2%) scale(1.04)}
}