/* 토스 스타일 스크롤 애니메이션 */

/* 기본 애니메이션 상태 */
[data-animate] {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

/* 애니메이션 실행 후 상태 */
[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* 지연 시간 처리 */
[data-delay] {
  transition-delay: calc(var(--data-delay, 0) * 1ms);
}

/* 다양한 애니메이션 타입 */
[data-animate='fade-up'] {
  opacity: 0;
  transform: translateY(60px);
}

[data-animate='fade-up'].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate='fade-down'] {
  opacity: 0;
  transform: translateY(-60px);
}

[data-animate='fade-down'].animate-in {
  opacity: 1;
  transform: translateY(0);
}

[data-animate='fade-left'] {
  opacity: 0;
  transform: translateX(-60px);
}

[data-animate='fade-left'].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate='fade-right'] {
  opacity: 0;
  transform: translateX(60px);
}

[data-animate='fade-right'].animate-in {
  opacity: 1;
  transform: translateX(0);
}

[data-animate='scale-up'] {
  opacity: 0;
  transform: translateY(60px) scale(0.8);
}

[data-animate='scale-up'].animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-animate='scale-down'] {
  opacity: 0;
  transform: translateY(-60px) scale(1.2);
}

[data-animate='scale-down'].animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-animate='rotate-up'] {
  opacity: 0;
  transform: translateY(60px) rotateX(15deg);
}

[data-animate='rotate-up'].animate-in {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* 모바일에서 더 작은 이동 거리 */
@media (max-width: 767px) {
  [data-animate] {
    transform: translateY(40px);
  }

  [data-animate='fade-left'] {
    transform: translateX(-40px);
  }

  [data-animate='fade-right'] {
    transform: translateX(40px);
  }
}

/* 성능 최적화 */
[data-animate] {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

/* 애니메이션 비활성화 옵션 (사용자 설정) */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}