/**
 * LoopGrid Animator - Main Stylesheet
 * Carousel mechanics only - navigation styling is template-based
 * FIXED: Only targets .lga-container, not .elementor-loop-container
 */

/* Hide carousel until initialized to prevent flash */
.lga-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

/* Show carousel when ready */
.lga-container.lga-ready {
  opacity: 1;
  visibility: visible;
}

/* Carousel Wrapper */
.lga-carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Viewport - Shows visible items */
.lga-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}

/* Track - Contains all items */
.lga-track {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
  position: relative;
}

/* Individual Items */
.lga-item {
  flex: 0 0 auto;
  min-width: 100%;
  box-sizing: border-box;
}

/* Ensure loop items dynamically adjust height to content */
.lga-track .e-loop-item {
  height: auto !important;
  min-height: 0 !important;
  align-self: flex-start !important; /* Prevent stretching in flex container */
}

/* Removed all plugin navigation button styles */
/* Navigation is now styled in your loop item template */

/* Draggable Track */
.lga-track.draggable {
  cursor: grab;
}

.lga-track.draggable:active {
  cursor: grabbing;
}

/* Animation Classes */
.lga-carousel.lga-loop-enabled {
  /* Loop enabled styling if needed */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .lga-carousel.lga-disable-mobile .lga-track {
    transform: none !important;
  }
  /* Show back-to-top button only on mobile */
  .back-to-top {
    display: block !important;
  }
}

/* Hide back-to-top button on desktop by default */
@media (min-width: 769px) {
  .back-to-top {
    display: none !important;
  }
}

/* Custom animation for decade title */
.decade-title {
  opacity: 0;
  transform: translateY(70px); /* Start further below for a more noticeable slide up */
  /* Elementor's motion effect classes will handle the transition duration and easing */
}

.decade-title.is-animated {
  opacity: 1;
  transform: translateY(0); /* Slide up to its final position */
}