@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: NeueMontreal;
  src: url(/assets/font/NeueMontreal-Bold.otf);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Urbanist", sans-serif;
  font-weight: 400;
  color: #fff;
  background-color: #0B0F13;
  overflow-x: hidden;
}

p {
  font-size: 1.5vw;
}

/* - ======================== Loading overlay ============================*/
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Loader animation */
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



.header {
  background-image: linear-gradient(to left, #011c5d, #002372, #002a87, #02319d, #0738b4, #0d3fc2, #1147d0, #154ede, #1657e6, #1861ef, #1b6af7, #1e73ff);
}

.btn {
  background-image: radial-gradient(circle, #0161d1, #015fce, #025ecc, #025cc9, #025bc7, #025eca, #0360cd, #0363d0, #036bd9, #0372e2, #027aec, #0082f5);
}


.bg1 {
  background-image: linear-gradient(to left, #011d5d0e, #1440d21a, #1e74ff17, #8693FF40);
}

.bg2 {
  background-image: linear-gradient(to left, #011C5D, #1441D2, #1E73FF40, #8693FF40);
}



@keyframes blinkStar {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9);
    filter: brightness(0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

.twinkle {
  animation: blinkStar 2s infinite ease-in-out;
}

.twinkle-delay {
  animation-delay: 1s;
}


@keyframes bullAttack {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(-8deg) translateY(4px);
  }
  50% {
    transform: rotate(6deg) translateY(-10px);
  }
  75% {
    transform: rotate(-5deg) translateY(3px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

.bull-attack {
  animation: bullAttack 2s ease-in-out infinite;
  transform-origin: center bottom;
}


@keyframes gradient-move {
  0% { transform: translateX(-100%); opacity: 0.4; }
  50% { opacity: 0.7; }
  100% { transform: translateX(100%); opacity: 0.4; }
}

.animate-gradient-move {
  animation: gradient-move 8s infinite linear;
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 5px #00c6ff); transform: scale(1); }
  50% { filter: drop-shadow(0 0 15px #00c6ff); transform: scale(1.1); }
}

.icon-glow {
  animation: glow 2s infinite ease-in-out;
}




@media screen and (max-width: 480px) {
  p {
    font-size: 16px;
  }

  body,
  html {
    overflow-x: hidden;
  }

   @keyframes bullAttack {
    0% {
      transform: scale(1.3) rotate(0deg) translateY(0); /* for md:scale-100 */
    }
    25% {
      transform: scale(1.3) rotate(-8deg) translateY(4px);
    }
    50% {
      transform: scale(1.3) rotate(6deg) translateY(-10px);
    }
    75% {
      transform: scale(1.3) rotate(-5deg) translateY(3px);
    }
    100% {
      transform: scale(1.3) rotate(0deg) translateY(0);
    }
  }
}