/* ============================================
   ECOFACTOR - Animations & Lazy Load
   Intersection Observer based animations
   ============================================ */

/* ============================================
   BASE ANIMATION CLASSES
   ============================================ */

/* Hidden state (before animation) */
.animate {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Visible state (after animation) */
.animate--visible {
  opacity: 1;
  transform: translate(0, 0) !important;
}

/* ============================================
   FADE IN ANIMATIONS
   ============================================ */

/* Fade in from bottom */
.animate--fade-up {
  transform: translateY(40px);
}

/* Fade in from left */
.animate--fade-left {
  transform: translateX(-40px);
}

/* Fade in from right */
.animate--fade-right {
  transform: translateX(40px);
}

/* Simple fade (no movement) */
.animate--fade {
  transform: none;
}

/* ============================================
   SCALE ANIMATIONS
   ============================================ */

.animate--scale {
  transform: scale(0.95);
}

.animate--scale.animate--visible {
  transform: scale(1) !important;
}

/* ============================================
   STAGGER ANIMATIONS (for grids/lists)
   ============================================ */

.animate--stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.animate--stagger.animate--visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(2) { transition-delay: 50ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(3) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(4) { transition-delay: 150ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(5) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(6) { transition-delay: 250ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(7) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(8) { transition-delay: 350ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(9) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
.animate--stagger.animate--visible > *:nth-child(10) { transition-delay: 450ms; opacity: 1; transform: translateY(0); }

/* ============================================
   SECTION ANIMATIONS
   ============================================ */

.section-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-animate--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   LAZY LOAD IMAGES
   ============================================ */

.lazy-img {
  opacity: 0;
  transition: opacity 0.4s ease-out;
}

.lazy-img--loaded {
  opacity: 1;
}

/* Placeholder blur effect */
.lazy-img-wrapper {
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-95);
}

.lazy-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 1.5s infinite;
}

.lazy-img-wrapper--loaded::before {
  display: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animate,
  .section-animate,
  .lazy-img,
  .animate--stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .lazy-img-wrapper::before {
    animation: none;
  }
}