/**
 * Hero Animations CSS
 * Estilos para as animações de fundo do hero
 */

#hero-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
}

/* Garante que o conteúdo fique acima da animação */
.bg-hero-multek > .container {
  position: relative;
  z-index: 1;
}

/* Garante que elementos interativos sejam clicáveis */
.bg-hero-multek .btn,
.bg-hero-multek a,
.bg-hero-multek button,
.bg-hero-multek input,
.bg-hero-multek textarea {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.bg-hero-multek figure {
  position: relative;
  z-index: 1;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  #hero-animation {
    opacity: 0.25;
  }
}