@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  background-color: #0f172a;
  color: #f8fafc;
  overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1e293b;
}

::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blur-effect {
  backdrop-filter: blur(10px);
  background-color: rgba(15, 23, 42, 0.8);
}

/* Particle animation */
@keyframes particle-move {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(100px, 50px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* Hover pulse effect */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Button hover effect */
@keyframes buttonHover {
  0% {
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
  }

  50% {
    box-shadow: 0 20px 30px rgba(59, 130, 246, 0.6);
  }

  100% {
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
  }
}

/* Text glitch effect */
@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
      -0.025em 0.05em 0 #fffc00;
  }

  14% {
    text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff,
      -0.025em 0.05em 0 #fffc00;
  }

  15% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }

  49% {
    text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff,
      -0.05em -0.05em 0 #fffc00;
  }

  50% {
    text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
      0 -0.05em 0 #fffc00;
  }

  99% {
    text-shadow: 0.025em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff,
      0 -0.05em 0 #fffc00;
  }

  100% {
    text-shadow: -0.025em 0 0 #00fffc, -0.025em -0.025em 0 #fc00ff,
      -0.025em -0.05em 0 #fffc00;
  }
}

/* Rotating cube loader */
@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }

  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

/* Neon flicker */
@keyframes neon-flicker {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: 1;
  }

  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.7;
  }
}

/* Button hover animation */
.hover-animation {
  transition: all 0.3s ease;
}

.hover-animation:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

/* Pulse animation class */
.pulse-animate {
  animation: pulse 2s infinite;
}

/* Glitch animation class */
.glitch-animate {
  animation: glitch 2s infinite;
}

/* Card hover animation */
.card-hover:hover {
  transform: translateY(-5px) rotate(1deg);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}

/* Neon text effect */
.neon-text {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #3b82f6, 0 0 20px #3b82f6,
    0 0 25px #3b82f6, 0 0 30px #3b82f6, 0 0 35px #3b82f6;
  animation: neon-flicker 5s infinite alternate;
}

/* Particle element */
.particle {
  position: absolute;
  background: rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  filter: blur(5px);
  animation: particle-move 15s infinite ease-in-out;
}

.backdrop-blur-lg {
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
}

.bg-blue-500\/20 {
  background-color: rgba(59, 130, 246, 0.2);
}

.bg-purple-500\/20 {
  background-color: rgba(168, 85, 247, 0.2);
}

.bg-indigo-500\/20 {
  background-color: rgba(99, 102, 241, 0.2);
}

.border-blue-400\/50 {
  border-color: rgba(96, 165, 250, 0.5);
}

.border-blue-500\/30 {
  border-color: rgba(59, 130, 246, 0.3);
}

.border-purple-400\/50 {
  border-color: rgba(192, 132, 252, 0.5);
}

.border-indigo-400\/50 {
  border-color: rgba(129, 140, 248, 0.5);
}

.shadow-blue-500\/10 {
  box-shadow: 0 10px 15px 0 rgba(59, 130, 246, 0.1);
}

.shadow-blue-500\/20 {
  box-shadow: 0 10px 15px 0 rgba(59, 130, 246, 0.2);
}

.shadow-blue-500\/30 {
  box-shadow: 0 10px 15px 0 rgba(59, 130, 246, 0.3);
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.select-none {
  user-select: none;
}

.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hover\:scale-\[1\.03\]:hover {
  transform: scale(1.03);
}

.hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}

.hover\:translate-y-1:hover {
  transform: translateY(0.25rem);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes grow {
  from {
    width: 0;
  }

  to {
    width: var(--tw-animate-grow);
  }
}

@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
  }

  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.animate-\[spin_30s_linear_infinite_reverse\] {
  animation: spin 30s linear infinite reverse;
}

.animate-\[spin_25s_linear_infinite_reverse\] {
  animation: spin 25s linear infinite reverse;
}

.animate-\[spin_40s_linear_infinite\] {
  animation: spin 40s linear infinite;
}

.hover\:animate-\[spin_2s_linear\]:hover {
  animation: spin 2s linear;
}

.group-hover\:animate-\[spin_1s_linear\] .group:hover & {
  animation: spin 1s linear;
}

.animate-\[grow_1\.5s_ease-out_forwards\] {
  animation: grow 1.5s ease-out forwards;
}

.hover\:animate-\[tada_1s_ease-in-out\]:hover {
  animation: tada 1s ease-in-out;
}
[animation-delay\:0\.1s] {
  animation-delay: 0.1s;
}

[animation-delay\:0\.2s] {
  animation-delay: 0.2s;
}

[animation-delay\:0\.5s] {
  animation-delay: 0.5s;
}

[animation-delay\:0\.6s] {
  animation-delay: 0.6s;
}
.\[\&\:nth-child\(1\)\]\:animate-delay-100 {
  animation-delay: 0.1s;
}

.\[\&\:nth-child\(2\)\]\:animate-delay-200 {
  animation-delay: 0.2s;
}

.\[\&\:nth-child\(3\)\]\:animate-delay-300 {
  animation-delay: 0.3s;
}

/* 9️⃣  COMPONENT-LEVEL BLUR CARD OVERLAY ( .blur-effect ) */
.blur-effect {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(15, 23, 42, 0.8);
}

.bg-black\/30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.bg-blue-500\/10 {
  background-color: rgba(59, 130, 246, 0.1);
}

.bg-slate-800\/50 {
  background-color: rgba(30, 41, 59, 0.5);
}

.bg-slate-900\/30 {
  background-color: rgba(15, 23, 42, 0.3);
}

.bg-purple-900\/30 {
  background-color: rgba(76, 29, 149, 0.3);
}

.bg-blue-900\/30 {
  background-color: rgba(30, 58, 138, 0.3);
}

.border-slate-700\/50 {
  border-color: rgba(51, 65, 85, 0.5);
}

.from-purple-900\/30 {
  --tw-gradient-from: rgba(76, 29, 149, 0.3);
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(76, 29, 149, 0));
}

.to-blue-900\/30 {
  --tw-gradient-to: rgba(30, 58, 138, 0.3);
}

.from-purple-500\/20 {
  --tw-gradient-from: rgba(168, 85, 247, 0.2);
  --tw-gradient-stops: var(--tw-gradient-from),
    var(--tw-gradient-to, rgba(168, 85, 247, 0));
}

.to-blue-500\/20 {
  --tw-gradient-to: rgba(59, 130, 246, 0.2);
}

.opacity-0 {
  opacity: 0;
}

.animate-fadeIn {
  animation: fadeIn 0.8s ease-out forwards;
}

.group-hover\:animate-\[spin_1s_linear\] .group:hover & {
  animation: spin 1s linear;
}
.bg-black\/80 {
  background-color: rgba(0, 0, 0, 0.8);
}
.aspect-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.aspect-video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
iframe {
  border: none;
  width: 100%;
  height: 80vh;
}