@import "tailwindcss";

body {
  font-family: 'Inter', sans-serif;
  background-color: #FAFAFA;
  color: #111111;
  -webkit-font-smoothing: antialiased;
}
.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Fade-in animations */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98), transform 0.8s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Trend path animation */
.trend-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s cubic-bezier(0.21, 0.47, 0.32, 0.98);
}
.trend-path.visible {
  stroke-dashoffset: 0;
}

/* Rotating badge animation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.rotating-badge {
  animation: rotate 20s linear infinite;
}

/* Mobile Menu */
#mobile-menu {
  transition: transform 0.4s cubic-bezier(0.21, 0.47, 0.32, 0.98);
  transform: translateX(100%);
}
#mobile-menu.open {
  transform: translateX(0);
}