/**
 * 🎨 공용 애니메이션 정의
 * 
 * 여러 페이지에서 재사용 가능한 애니메이션들을 모아놓은 파일입니다.
 * fadeIn, fadeOut, slideIn 등 범용적인 애니메이션을 정의합니다.
 */

/* 페이드 인 + 위로 올라오기 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 기본 페이드 인 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 바운스 효과 (스크롤 인디케이터용) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 슬라이드 인 - 왼쪽에서 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 슬라이드 인 - 오른쪽에서 */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 스케일 인 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 슬라이드 인 업 (큰 움직임) */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 펄스 효과 (호버나 강조용) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* 애니메이션 유틸리티 클래스들 */
.animate-fadeInUp {
    animation: fadeInUp 0.8s ease forwards;
}

.animate-fadeIn {
    animation: fadeIn 1s ease forwards;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.animate-slideInLeft {
    animation: slideInLeft 0.8s ease forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.8s ease forwards;
}

.animate-scaleIn {
    animation: scaleIn 0.6s ease forwards;
}

.animate-pulse {
    animation: pulse 2s ease infinite;
}

/* 애니메이션 딜레이 클래스 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* 초기 상태 (애니메이션 전) */
.animate-init {
    opacity: 0;
}