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

/* 기본 애니메이션 상태 */
[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;
    }
}