/* Scroll-Reveal Animation System */

.option {
  opacity: 0;
  transition: all 0.6s ease-out;
  will-change: transform, opacity;
}

.option.from-left {
  transform: translateX(-50px);
}

.option.from-right {
  transform: translateX(50px);
}

.option.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Performance optimizations */
.option {
  contain: layout style paint;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .option {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* Additional animation variants for enhanced visual appeal */
.option.from-bottom {
  transform: translateY(30px);
}

.option.from-top {
  transform: translateY(-30px);
}

.option.fade-in {
  transform: none;
}

.option.scale-in {
  transform: scale(0.9);
}

.option.scale-in.in-view {
  transform: scale(1);
}

/* Stagger animation delays for multiple elements */
.option:nth-child(1) { transition-delay: 0ms; }
.option:nth-child(2) { transition-delay: 100ms; }
.option:nth-child(3) { transition-delay: 200ms; }
.option:nth-child(4) { transition-delay: 300ms; }
.option:nth-child(5) { transition-delay: 400ms; }
.option:nth-child(6) { transition-delay: 500ms; }

/* Reset delays when in view to prevent issues */
.option.in-view {
  transition-delay: 0ms;
}