/* ============================================
   SCROLL ANIMATION
   스크롤 시 아래에서 위로 자연스럽게 올라오는 효과
============================================ */

/* 초기 상태: 숨김 */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 활성화 상태: 보임 */
.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* 지연 효과 (순차적으로 나타남) */
.fade-in-up.delay-1 {
    transition-delay: 0.1s;
}

.fade-in-up.delay-2 {
    transition-delay: 0.2s;
}

.fade-in-up.delay-3 {
    transition-delay: 0.3s;
}

.fade-in-up.delay-4 {
    transition-delay: 0.4s;
}

.fade-in-up.delay-5 {
    transition-delay: 0.5s;
}

/* 부드러운 애니메이션 커브 */
.fade-in-up-smooth {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up-smooth.active {
    opacity: 1;
    transform: translateY(0);
}

/* 빠른 애니메이션 */
.fade-in-up-fast {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-up-fast.active {
    opacity: 1;
    transform: translateY(0);
}

/* prefers-reduced-motion: 움직임 최소화 선호 시 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .fade-in-up-smooth,
    .fade-in-up-fast {
        opacity: 1;
        transform: none;
        transition: none;
    }
}