/* Este arquivo contém APENAS CSS puro para efeitos que o Tailwind não cobre nativamente. */

/* EFEITO DE IMAGEM NA SEÇÃO HERO */
#hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* SUBSTITUA PELO CAMINHO DA SUA IMAGEM */
  background-image: url('./imagens/nichijou.png'); 
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  
  /* EFEITOS DE BLEND */
  opacity: 0.2; /* Controla a transparência geral */
  filter: grayscale(10%) contrast(200%); /* Deixa a imagem P&B e com alto contraste */
  mix-blend-mode: screen; /* Modo de mesclagem que funciona bem com fundos escuros */

  /* Garante que a imagem fique atrás do texto (que tem z-10) */
  z-index: 0;
}


/* EFEITOS DE BRILHO (GLOW) */

/* Brilho padrão para textos em ciano */
.text-glow {
  text-shadow: 0 0 3px #00f7ff;
}

/* Brilho mais intenso para títulos em magenta */
.text-glow-magenta {
  color: #f0f; /* Define a cor do texto E a cor base do brilho */
  text-shadow: 0 0 3px #f0f, 0 0 8px #f0f;
}

/* Brilho para links de navegação */
.text-glow-link {
  color: #ff80ff;
  transition: all 0.2s ease-in-out;
}
.text-glow-link:hover {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 10px #f0f;
}

/* Remove o brilho do botão ao passar o mouse, pois ele terá um fundo sólido */
.btn-hover-effect:hover {
  text-shadow: none;
}

/* ANIMAÇÃO GLITCH */
.animate-glitch {
  animation: glitch 1.5s linear infinite;
}

@keyframes glitch {
  2%, 64% {
    transform: translate(1px, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-1px, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(2deg);
  }
}