/* 공통 애니메이션 CSS */

/*
 * 사용법:
 * 1. CSS 파일 import: <link rel="stylesheet" href="/css/animation.css"/>
 * 2. JavaScript 파일 import: <script src="/js/animation.js"></script>
 * 3. HTML 요소에 애니메이션 클래스 추가:
 * 
 * [기본 애니메이션 클래스]
 *    - .fade-in-up: 아래에서 위로 페이드인
 *    - .fade-in-left: 왼쪽에서 오른쪽으로 페이드인
 *    - .fade-in-right: 오른쪽에서 왼쪽으로 페이드인
 *    - .scale-in: 스케일 애니메이션
 *    - .section-header: 섹션 헤더 애니메이션
 * 
 * [순차적 애니메이션 클래스]
 *    - .animation-delay-0 ~ .animation-delay-10: 0초~1초 지연
 *    예시: <div class="fade-in-up animation-delay-1">0.1초 지연</div>
 * 
 * [PC/모바일 분리 애니메이션 클래스]
 *    - .pc-fade-in-left: PC에서만 왼쪽에서 오른쪽으로
 *    - .mo-fade-in-up: 모바일에서만 아래에서 위로
 *    - .pc-fade-in-right: PC에서만 오른쪽에서 왼쪽으로
 *    - .mo-fade-in-left: 모바일에서만 아래에서 위로
 *    - .pc-fade-in-up: PC에서만 아래에서 위로
 *    - .mo-fade-in-right: 모바일에서만 아래에서 위로
 *    - .pc-scale-in: PC에서만 스케일 애니메이션
 *    - .mo-scale-in: 모바일에서만 스케일 애니메이션
 *    - .pc-section-header: PC에서만 섹션 헤더 애니메이션
 *    - .mo-section-header: 모바일에서만 섹션 헤더 애니메이션
 * 
 * 예시:
 * <div class="fade-in-up">기본 애니메이션</div>
 * <div class="fade-in-up animation-delay-1">0.1초 지연 애니메이션</div>
 * <div class="pc-fade-in-left mo-fade-in-up">PC에서는 왼쪽에서, 모바일에서는 아래에서</div>
 * <div class="pc-section-header mo-fade-in-up">PC에서는 섹션 헤더, 모바일에서는 아래에서</div>
 */

/* K-System 스타일 스크롤 애니메이션 */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.animate {
    opacity: 1;
    transform: scale(1);
}

/* 공통 애니메이션 클래스들만 포함 */

/* 섹션 헤더 애니메이션 */
.section-header {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-header.animate {
    opacity: 1;
    transform: translateY(0);
}

.active-card {
    transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {   
    .active-card:hover {
        transition: transform 0.3s ease !important;
        transform: translateY(-4px) !important;
    }
}

/* 순차적 애니메이션을 위한 지연 클래스들 */
.animation-delay-0 { animation-delay: 0s; }
.animation-delay-1 { animation-delay: 0.1s; }
.animation-delay-2 { animation-delay: 0.2s; }
.animation-delay-3 { animation-delay: 0.3s; }
.animation-delay-4 { animation-delay: 0.4s; }
.animation-delay-5 { animation-delay: 0.5s; }
.animation-delay-6 { animation-delay: 0.6s; }
.animation-delay-7 { animation-delay: 0.7s; }
.animation-delay-8 { animation-delay: 0.8s; }
.animation-delay-9 { animation-delay: 0.9s; }
.animation-delay-10 { animation-delay: 1.0s; }

/* 성능 최적화 */
.animated-element {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 반응형 애니메이션 조정 */
@media (max-width: 768px) {
    .fade-in-up,
    .fade-in-left,
    .fade-in-right {
        transform: translateY(20px);
    }
    
    .fade-in-left {
        transform: translateX(-20px);
    }
    
    .fade-in-right {
        transform: translateX(20px);
    }
    
    .section-header {
        transform: translateY(20px);
    }
}

/* PC/모바일 분리 애니메이션 클래스들 */
/* 미디어쿼리 내에서 각각 정의됨 */

/* 반응형 적용 */
@media (max-width: 768px) {
    /* 모바일 전용 애니메이션 활성화 */
    .mo-fade-in-left {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .mo-fade-in-left.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mo-fade-in-right {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .mo-fade-in-right.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mo-fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .mo-fade-in-up.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .mo-scale-in {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .mo-scale-in.animate {
        opacity: 1;
        transform: scale(1);
    }
    
    .mo-section-header {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .mo-section-header.animate {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 769px) {
    /* PC 전용 애니메이션 활성화 */
    .pc-fade-in-left {
        opacity: 0;
        transform: translateX(-40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .pc-fade-in-left.animate {
        opacity: 1;
        transform: translateX(0);
    }
    
    .pc-fade-in-right {
        opacity: 0;
        transform: translateX(40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .pc-fade-in-right.animate {
        opacity: 1;
        transform: translateX(0);
    }
    
    .pc-fade-in-up {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .pc-fade-in-up.animate {
        opacity: 1;
        transform: translateY(0);
    }
    
    .pc-scale-in {
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .pc-scale-in.animate {
        opacity: 1;
        transform: scale(1);
    }
    
    .pc-section-header {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    
    .pc-section-header.animate {
        opacity: 1;
        transform: translateY(0);
    }
}