/* Animation System - Requirements 1.2, 8.6, 9.1 */

/* Fade-in animation - 800ms duration */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--duration-fade) ease;
}

/* Ken Burns Effect - 1.1x scale over 20s */
@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.ken-burns {
  animation: kenBurns var(--duration-ken-burns) ease-out infinite alternate;
}

/* Scroll reveal - fade and translate */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-fade) ease, transform var(--duration-fade) ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover transitions - 200ms */
.hover-opacity {
  transition: opacity var(--transition-fast);
}

.hover-opacity:hover {
  opacity: 0.8;
}

.hover-scale {
  transition: transform var(--transition-fast);
}

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

/* Lazy image loading fade-in */
.lazy-image {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

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

/* Scroll indicator animation */
@keyframes scrollIndicator {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(10px);
    opacity: 0;
  }
}

.scroll-indicator {
  animation: scrollIndicator 1.5s ease-in-out infinite;
}