/* Icon List Module - module.css */
/* Enhanced with scroll animation support */

.icon-list-wrapper {
  width: 100%;
}

.icon-list {
  display: flex;
  flex-direction: column;
}

.icon-list-item {
  position: relative;
  transition: all 0.3s ease;
  /* Animation properties will be set via JavaScript */
}

/* Enhanced hover effects with better performance */
.icon-list-item:hover .icon-container {
  {% if module.hover_effects.enable_hover %}
    {% if module.hover_effects.hover_background_color.color %}
      background-color: ;
    {% endif %}
    {% if module.hover_effects.hover_scale %}
      transform: scale();
    {% endif %}
  {% endif %}
}

.icon-list-item:hover .icon-list-icon {
  {% if module.hover_effects.enable_hover and module.hover_effects.hover_icon_color.color %}
    color: ;
  {% endif %}
}

/* Icon container transitions */
.icon-container {
  transition: all 0.3s ease;
  will-change: transform; /* Optimize for animations */
}

/* Custom icon filters for color control */
.icon-list-custom-icon {
  {% if module.icon_settings.apply_color_filter %}
    filter: ;
  {% endif %}
}

/* Scroll animation enhancements */
.icon-list-item.scroll-animated {
  /* Add any post-animation styles here */
}

/* Performance optimizations for animations */
.icon-list-item {
  will-change: opacity, transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Smooth transitions for all interactive elements */
.icon-list-item,
.icon-container,
.icon-list-icon {
  transform-style: preserve-3d;
}
.icon-list-icon {
	text-align: center;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .icon-list-item {
    transition: none !important;
    animation: none !important;
  }
  
  .icon-container {
    transition: none !important;
    animation: none !important;
  }
}

/* Loading state (optional) */
.icon-list-wrapper:not(.animations-loaded) .icon-list-item {
  opacity: 0;
  transform: translateY(30px);
}

/* Responsive */
@media (max-width: 767px) {
  .icon-list {
    {% if module.responsive.mobile_list_gap %}
      gap: px !important;
    {% endif %}
  }
  
  .icon-list-item {
    {% if module.responsive.mobile_item_gap %}
      gap: px !important;
    {% endif %}
    {% if module.responsive.stack_on_mobile or module.styles.mobile.stack_layout == true %}
      flex-direction: column;
    {% endif %}
  }
  
  .icon-list-content {
    {% if module.responsive.mobile_font_size %}
      font-size: px !important;
    {% endif %}
    {% if module.styles.mobile.center_text == true %}
      text-align: center !important;
    {% elif module.styles.mobile.center_text != true %}
      text-align:  !important;
    {% endif %}
    font-family: 'Open Sans', sans-serif;
  }
  
  /* Adjust animation timing for mobile */
  .icon-list-item {
    transition-duration: 0.4s; /* Slightly faster on mobile */
  }
}

/* Base styles maintained from original */
.icon-list-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.icon-list-content span {
  font-family: 'Open Sans', sans-serif;
}

/* Animation variants for different styles */
.icon-list-item.fade-in-left {
  transform: translateX(-30px);
}

.icon-list-item.fade-in-right {
  transform: translateX(30px);
}

.icon-list-item.fade-in-scale {
  transform: scale(0.8);
}

.icon-list-item.fade-in-rotate {
  transform: rotate(-10deg) scale(0.9);
}

.icon-list-item.slide-up {
  transform: translateY(60px);
}

.icon-list-item.slide-down {
  transform: translateY(-60px);
}

.icon-list-item.bounce-in {
  transform: scale(0.3);
}

.icon-list-item.zoom-in {
  transform: scale(0.5);
}

/* Custom keyframes for complex animations */
@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);
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeRotate {
  0% {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Pulse animation for icons (optional enhancement) */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.icon-list-item:hover .icon-container {
  /*animation: iconPulse 0.6s ease-in-out;*/
}