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

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

@layer base {
  body {
    font-family: "Poppins", sans-serif;
    background-color: #fcfcf9; /* Warm Paper */
    color: #0f172a; /* Deep Slate */
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0f172a;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .glass-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .glass-card-light {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
}

/* Micro-animations */
.node-connector {
  position: relative;
}

.node-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00e5e5, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.node-connector:hover::after {
  opacity: 1;
}

.hover-glow {
  transition:
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 25px rgba(13, 148, 136, 0.5);
  transform: translateY(-4px);
}

.bento-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bento-card:hover {
  transform: scale(1.02);
  z-index: 10;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.pulse-border {
  animation: borderPulse 2s infinite;
}

@keyframes borderPulse {
  0% {
    border-color: rgba(0, 229, 229, 0.2);
  }
  50% {
    border-color: rgba(0, 229, 229, 0.8);
  }
  100% {
    border-color: rgba(0, 229, 229, 0.2);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

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

/* Marquee Animation */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* Assuming content is duplicated for seamless loop */
}

/* Math formula display */
.math-formula {
  font-family: "Courier New", Courier, monospace;
  background-color: #0f172a;
  color: #00e5e5;
  padding: 1.5rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  font-weight: bold;
}

/* Inline utility for blob animation missing from tailwind config */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}
.animate-blob {
  animation: blob 7s infinite;
}
.animation-delay-2000 {
  animation-delay: 2s;
}