/* Clean Fade-Up Effects for Facilities Section */

/* Base fade-up animation styles */
.facilities-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.facilities-fade-up.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Section title fade-up */
.fasilitas-section-title.facilities-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fasilitas-section-title.facilities-fade-up.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Facility container fade-up */
.facility-marquee-container.facilities-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.facility-marquee-container.facilities-fade-up.fade-in {
  opacity: 1;
  transform: translateY(0);
}

/* Individual facility cards fade-up with enhanced staggered animation */
.facility-card {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.facility-marquee-container.fade-in .facility-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Enhanced staggered delays for facility cards - more comprehensive */
.facility-marquee-container.fade-in .facility-card:nth-child(1) {
  transition-delay: 0.1s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(2) {
  transition-delay: 0.15s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(3) {
  transition-delay: 0.2s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(4) {
  transition-delay: 0.25s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(5) {
  transition-delay: 0.3s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(6) {
  transition-delay: 0.35s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(7) {
  transition-delay: 0.4s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(8) {
  transition-delay: 0.45s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(9) {
  transition-delay: 0.5s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(10) {
  transition-delay: 0.55s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(11) {
  transition-delay: 0.6s;
}

.facility-marquee-container.fade-in .facility-card:nth-child(12) {
  transition-delay: 0.65s;
}

/* For duplicate cards in marquee, add slight additional delay */
.facility-marquee-container.fade-in .facility-card:nth-child(n+13) {
  transition-delay: 0.7s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .facilities-fade-up {
    transform: translateY(20px);
    transition-duration: 0.6s;
  }
  
  .facility-marquee-container.facilities-fade-up {
    transform: translateY(25px);
    transition-duration: 0.8s;
  }
  
  .facility-card {
    transform: translateY(15px);
    transition-duration: 0.5s;
  }
}

@media (max-width: 576px) {
  .facilities-fade-up {
    transform: translateY(15px);
    transition-duration: 0.5s;
  }
  
  .facility-marquee-container.facilities-fade-up {
    transform: translateY(20px);
    transition-duration: 0.7s;
  }
  
  .facility-card {
    transform: translateY(10px);
    transition-duration: 0.4s;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .facilities-fade-up,
  .facility-marquee-container.facilities-fade-up,
  .facility-card {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
  }
  
  .facilities-fade-up.fade-in,
  .facility-marquee-container.facilities-fade-up.fade-in,
  .facility-marquee-container.fade-in .facility-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Ensure smooth performance */
.facilities-fade-up,
.facility-card {
  will-change: opacity, transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Clean up after animation completes */
.facilities-fade-up.fade-in,
.facility-marquee-container.fade-in .facility-card {
  will-change: auto;
}
