/* ===== 지노블 매칭시스템 애니메이션 CSS ===== */

/* 기본 애니메이션 클래스 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 메인 섹션 - 메인 타이틀만 애니메이션 */
.matching_main_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.matching_main_title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 매칭시스템 섹션 1 - 좌우 분리 애니메이션 */
.matching_section1_left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

.matching_section1_left.animate {
    opacity: 1;
    transform: translateX(0);
}

.matching_section1_right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
    will-change: opacity, transform;
}

.matching_section1_right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 매칭시스템 섹션 2 - 상단 그리드 순차 애니메이션 */
.matching_section2_item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.matching_section2_item.animate {
    opacity: 1;
    transform: translateY(0);
}

.matching_section2_item:nth-child(1) { transition-delay: 0.2s; }
.matching_section2_item:nth-child(2) { transition-delay: 0.3s; }
.matching_section2_item:nth-child(3) { transition-delay: 0.4s; }
.matching_section2_item:nth-child(4) { transition-delay: 0.5s; }

/* 매칭시스템 섹션 2 - 하단 영역 (메인 섹션2와 정확히 동일한 애니메이션) */
.matching_section2_left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
    will-change: opacity, transform;
}

.matching_section2_left.animate {
    opacity: 1;
    transform: translateX(0);
}

.matching_section2_right {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

.matching_section2_right.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 매칭시스템 섹션 2 - 통계 데이터 순차 애니메이션 (메인과 동일) */
.matching_section2_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    will-change: opacity, transform;
}

.matching_section2_title.animate {
    opacity: 1;
    transform: translateY(0);
}

.matching_section2_subtitle {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
    will-change: opacity, transform;
}

.matching_section2_subtitle.animate {
    opacity: 1;
    transform: translateY(0);
}

.matching_section2_main_stat_container {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
    will-change: opacity, transform;
}

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

.matching_section2_stats_grid {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
    will-change: opacity, transform;
}

.matching_section2_stats_grid.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 매칭시스템 섹션 2 - 통계 원형 아이템들 동시 애니메이션 (메인과 동일) */
.matching_section2_stat_item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s;
    will-change: opacity, transform;
}

.matching_section2_stat_item.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 매칭시스템 타이틀 섹션 */
.matching_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    will-change: opacity, transform;
}

.matching_title.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 모바일 반응형 애니메이션 조정 */
@media (max-width: 767px) {
    .animate-on-scroll {
        transform: translateY(20px);
    }
    
    .matching_section1_left,
    .matching_section1_right {
        transform: translateY(30px);
    }
    
    .matching_section1_left.animate,
    .matching_section1_right.animate {
        transform: translateY(0);
    }
    
    .matching_section2_left {
        transform: translateX(-30px);
    }
    
    .matching_section2_left.animate {
        transform: translateX(0);
    }
    
    .matching_section2_right {
        transform: translateY(20px);
    }
    
    .matching_section2_right.animate {
        transform: translateY(0);
    }
}

/* 애니메이션 완료 후 will-change 제거 */
.animate-on-scroll.animate,
.matching_main_title.animate,
.matching_section1_left.animate,
.matching_section1_right.animate,
.matching_section2_item.animate,
.matching_section2_left.animate,
.matching_section2_right.animate,
.matching_section2_title.animate,
.matching_section2_subtitle.animate,
.matching_section2_main_stat_container.animate,
.matching_section2_stats_grid.animate,
.matching_section2_stat_item.animate,
.matching_title.animate {
    will-change: auto;
}