/* Tailwind CSS Bridge & Custom Animations */

/* Global Smooth Scrolling (Fallback for browsers not supporting scroll-behavior in utility class) */
html {
  scroll-behavior: smooth;
}

/* Mobile Navigation Toggle State */
@media (max-width: 768px) {
  .nav-links.active {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    gap: 1rem;
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Utility classes for animations used in HTML */
.animate-slideIn {
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

/* Staggered animation delays */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

/* Custom Utilities */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

#carousel>div {
  transition: transform 0.3s ease;
}

#carousel>div:hover {
  transform: scale(1.02);
}