/* Enhanced Animations for Logis Website */

/* =======================================================
   CUSTOM ANIMATIONS
   ======================================================= */

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Slide In From Left */
@keyframes slideInLeft {
  0% { 
    opacity: 0; 
    transform: translateX(-50px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Slide In From Right */
@keyframes slideInRight {
  0% { 
    opacity: 0; 
    transform: translateX(50px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

/* Slide In From Bottom */
@keyframes slideInBottom {
  0% { 
    opacity: 0; 
    transform: translateY(50px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Fade In Up */
@keyframes fadeInUp {
  0% { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* Rotate In */
@keyframes rotateIn {
  0% { 
    opacity: 0; 
    transform: rotate(-200deg); 
  }
  100% { 
    opacity: 1; 
    transform: rotate(0deg); 
  }
}

/* Bounce In */
@keyframes bounceIn {
  0% { 
    opacity: 0; 
    transform: scale(0.3); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.05); 
  }
  70% { 
    transform: scale(0.9); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* Shake Animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Glow Animation */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px rgba(49, 131, 235, 0.5); }
  50% { box-shadow: 0 0 20px rgba(49, 131, 235, 0.8); }
}

/* Typewriter Effect */
@keyframes typewriter {
  0% { width: 0; }
  100% { width: 100%; }
}

/* =======================================================
   ENHANCED ELEMENT ANIMATIONS
   ======================================================= */

/* Hero Section Enhancements */
.hero h1 {
  animation: fadeInUp 1s ease-out;
}

.hero p {
  animation: fadeInUp 1s ease-out 0.3s both;
}

.hero form {
  animation: fadeInUp 1s ease-out 0.6s both;
}

.hero .stats-item {
  animation: bounceIn 0.8s ease-out;
  transition: all 0.3s ease;
}

.hero .stats-item:hover {
  transform: translateY(-5px);
  animation: pulse 1s infinite;
}

.hero .hero-img img {
  animation: float 3s ease-in-out infinite;
}

/* Service Items Enhanced */
.featured-services .service-item {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.featured-services .service-item:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.featured-services .service-item .icon {
  transition: all 0.3s ease;
}

.featured-services .service-item:hover .icon {
  transform: scale(1.1);
}

.featured-services .service-item .title {
  transition: all 0.3s ease;
}

.featured-services .service-item:hover .title {
  transform: scale(1.05);
}

.featured-services .service-item .description {
  transition: all 0.3s ease;
}

.featured-services .service-item:hover .description {
  transform: scale(1.02);
}

/* About Section */
.about .content h3 {
  animation: slideInLeft 1s ease-out;
}

.about .content ul li {
  animation: slideInLeft 1s ease-out;
  animation-delay: calc(var(--animation-order) * 0.1s);
}

.about .pulsating-play-btn {
  animation: float 2s ease-in-out infinite;
}

/* Services Cards */
.services .card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.services .card:hover {
  transform: translateY(-15px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.services .card .card-img {
  transition: all 0.4s ease;
}

.services .card:hover .card-img {
  transform: scale(1.1);
}

.services .card h3 {
  transition: all 0.3s ease;
}

.services .card:hover h3 {
  color: var(--accent-color);
}

/* Call to Action */
.call-to-action .cta-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.call-to-action .cta-btn:hover {
  animation: glow 1.5s infinite;
  transform: translateY(-2px);
}

.call-to-action .cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.call-to-action .cta-btn:hover::before {
  left: 100%;
}

/* Features Section */
.features .features-item {
  transition: all 0.4s ease;
}

.features .features-item:hover {
  transform: translateX(10px);
}

.features .features-item img {
  transition: all 0.4s ease;
}

.features .features-item:hover img {
  transform: scale(1.05);
}

/* Pricing Cards */
.pricing .pricing-item {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pricing .pricing-item:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-item.featured {
  animation: pulse 2s infinite;
}

.pricing .buy-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing .buy-btn:hover {
  transform: translateY(-2px);
  animation: glow 1.5s infinite;
}

/* Testimonials */
.testimonials .testimonial-item {
  transition: all 0.4s ease;
}

.testimonials .testimonial-item:hover {
  transform: translateY(-5px);
}

.testimonials .testimonial-img {
  transition: all 0.3s ease;
}

.testimonials .testimonial-item:hover .testimonial-img {
  transform: scale(1.1);
}

/* FAQ Section */
.faq .faq-item {
  transition: all 0.3s ease;
}

.faq .faq-item:hover {
  transform: translateX(5px);
}

.faq .faq-toggle {
  transition: all 0.3s ease;
}

.faq .faq-active .faq-toggle {
  transform: rotate(90deg);
}

/* Navigation Enhancements */
.navmenu a {
  transition: all 0.3s ease;
  position: relative;
  margin: 0 8px; /* Add horizontal spacing between nav items */
}

.navmenu a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 8px; /* Adjust left position to account for margin */
  right: 8px; /* Add right boundary */
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s ease;
}

.navmenu a:hover::after,
.navmenu .active::after {
  width: calc(100% - 16px); /* Adjust width to account for margins */
}

/* Button Enhancements */
.btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

/* Scroll Top Button */
.scroll-top {
  transition: all 0.3s ease;
}

.scroll-top:hover {
  animation: pulse 1s infinite;
}

/* Stats Counter Animation */
.stats-item span {
  transition: all 0.3s ease;
}

.stats-item:hover span {
  animation: bounceIn 0.6s ease-out;
}

/* =======================================================
   LOADING ANIMATIONS
   ======================================================= */

/* Page Load Animation */
.page-load {
  animation: fadeInUp 0.8s ease-out;
}

/* Stagger Animation for Lists */
.stagger-animation > * {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out forwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }

/* =======================================================
   RESPONSIVE ANIMATIONS
   ======================================================= */

@media (max-width: 768px) {
  .hero h1 {
    animation: slideInBottom 1s ease-out;
  }
  
  .hero p {
    animation: slideInBottom 1s ease-out 0.3s both;
  }
  
  .services .card:hover {
    transform: translateY(-5px) scale(1.01);
  }
  
  .pricing .pricing-item:hover {
    transform: translateY(-5px) scale(1.01);
  }
}

/* =======================================================
   PERFORMANCE OPTIMIZATIONS
   ======================================================= */

/* Hardware acceleration for smooth animations */
.hero-img,
.services .card,
.pricing .pricing-item,
.featured-services .service-item {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =======================================================
   SCALE HOVER EFFECT
   ======================================================= */

.scale-hover {
  transition: transform 0.3s ease-in-out;
}

.scale-hover:hover {
  transform: scale(1.05);
}