@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

@theme {
  --animate-wiggle: wiggle .5s ease-in-out infinite;
  --animate-fadeIn: fadeIn 2s ease-in infinite;
  --animate-jump: jump .5s ease-in infinite;
  --animate-flip-up: flip-up 0.5s ease-out infinite;
  --animate-shake: shake 0.5s ease-in-out infinite;
  --animate-pulse:  pulse 1s infinite;
  --animate-jump-out:  jump-out 1.5s ease-in-out infinite;
  --animate-jump-in: jump-in 0.5s ease-in-out forwards;
  @keyframes wiggle {
    0%{
      transform: rotate(-6deg);
    }
    100% {
      transform: rotate(-6deg);
    }
    50% {
      transform: rotate(6deg);
    }
  }
  @keyframes fadeIn {
    0%{
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
    
  }
  @keyframes jump {
    0%{
      opacity: 0;
    }
    100% {
      opacity: 1;
      
    }
    
  }
  @keyframes flip-up {
     0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    opacity: 1;
  }
  }
  @keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  }
  @keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  }
  @keyframes jump-out {
 0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
  }
  @keyframes jump-in {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
}

@layer{
  html{
      @apply antialiased;
     
  }

  .word {
            position: absolute;
            opacity: 0;
            animation: fadeInOut 8s infinite;
        }

        @keyframes fadeInOut {
            0%, 20% { opacity: 1; }
            30%, 50% { opacity: 0; }
            55%, 100% { opacity: 0; }
        }

        .word:nth-child(1) {
            animation-delay: 0s; 
        }

        .word:nth-child(2) {
            animation-delay: 3s; 
        }
        .word:nth-child(3) {
            animation-delay: 5s; 
        }

         .smoke {
            animation: rise 4s infinite;
        }

        @keyframes rise {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-20px);
                opacity: 1;
            }
        }
}

.iconWelcome{
  @apply aspect-square bg-gradient-to-b from-[#2F302B]  to-[#191711]  border border-[#3D3D3F]  flex items-center justify-center p-2 rounded-lg shadow-lg hover:border hover:border-red-300 hover:animate-jump-in cursor-pointer ;
}

}