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

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.9s ease forwards;
}

.fade-delay-1 { animation-delay: 0.15s; }
.fade-delay-2 { animation-delay: 0.3s; }
.fade-delay-3 { animation-delay: 0.45s; }
.fade-delay-4 { animation-delay: 0.6s; }
.fade-delay-5 { animation-delay: 0.75s; }

.tech-marquee {
  overflow: hidden;
}

.tech-marquee-track {
  display: flex;
  gap: 1.5rem;
  animation: marquee 18s linear infinite;
}

.tech-marquee-track img {
  width: 14rem;
  height: 10rem;
  object-fit: cover;
  border-radius: 1.25rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .tech-marquee-track img {
    width: 18rem;
    height: 12rem;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-input {
  transition: box-shadow 0.2s ease;
}

.filter-input:focus {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Mobile responsiveness helpers */
@media (max-width: 639px) {
  .hero-floating-card {
    display: none;
  }
}