/* Infinite Scroll Styles */

/* Loading indicator */
.infinite-scroll-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1rem;
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

.loading-spinner ion-icon {
  font-size: 3rem;
  color: var(--orange-yellow-crayola);
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.infinite-scroll-loading p {
  color: var(--light-gray);
  font-size: var(--fs-6);
}

/* End of list indicator */
.infinite-scroll-end {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  margin-top: 2rem;
}

.infinite-scroll-end p {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  text-align: center;
  padding: 1rem 2rem;
  border-radius: 14px;
  background: var(--border-gradient-onyx);
}

/* Fade in animation for new items */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for multiple items */
.fade-in-item:nth-child(1) { transition-delay: 0.05s; }
.fade-in-item:nth-child(2) { transition-delay: 0.1s; }
.fade-in-item:nth-child(3) { transition-delay: 0.15s; }
.fade-in-item:nth-child(4) { transition-delay: 0.2s; }
.fade-in-item:nth-child(5) { transition-delay: 0.25s; }
.fade-in-item:nth-child(6) { transition-delay: 0.3s; }

/* Error state */
.loading-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}

.loading-error ion-icon {
  font-size: 3rem;
  color: var(--vegas-gold);
}

.loading-error p {
  color: var(--light-gray);
  font-size: var(--fs-6);
}

.loading-error button {
  padding: 0.75rem 1.5rem;
  background: var(--orange-yellow-crayola);
  color: var(--smokey-black);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-weight: var(--fw-500);
  transition: background 0.25s ease;
}

.loading-error button:hover {
  background: var(--vegas-gold);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .infinite-scroll-loading,
  .infinite-scroll-end {
    padding: 2rem 1rem;
  }
  
  .loading-spinner ion-icon {
    font-size: 2.5rem;
  }
}