/* Home page specific styles */

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-slide-up {
  opacity: 0;
  animation: slideUp 0.8s ease-out forwards;
}

.animation-delay-200 {
  animation-delay: 0.2s;
}

.animation-delay-400 {
  animation-delay: 0.4s;
}

/* Ensure animations trigger when in view */
.animate-in {
  animation-play-state: running !important;
}

/* Hero section enhancements */
#hero-section {
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Feature cards hover effects */
#features .card {
  transition: all 0.3s ease;
}

#features .card:hover {
  transform: translateY(-5px);
}

/* Counter animation */
[data-counter] {
  transition: all 0.3s ease;
}

/* Back to top button */
#back-to-top {
  transition: all 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-3px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #hero-section {
    min-height: 60vh;
  }
  
  .animate-fade-in,
  .animate-slide-up {
    animation-duration: 0.6s;
  }
}

/* Navbar transition override for home page */
.public-navbar {
  transition: all 0.3s ease;
}

/* Aspect ratio utility */
.aspect-w-16 {
  position: relative;
  padding-bottom: 56.25%;
}

.aspect-w-16 > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Additional utility classes */
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

/* Fix for mobile menu dropdown */
.dropdown-content {
  transform-origin: top right;
}

/* Loading skeleton animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 50%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}