/* ===== 지노블 무료 간담회 애니메이션 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);
}

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

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

/* 무료 간담회 섹션 1 - 텍스트 중심 애니메이션 */
.consultation_page_section1_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

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

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

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

/* 무료 간담회 섹션 2 - 상단 슬라이더 */
.consultation_page_section2_slides_grid {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

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

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

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

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

/* 무료 간담회 섹션 2 - 하단 콘텐츠 */
.consultation_page_section2_content1 {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
    will-change: opacity, transform;
}

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

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

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

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

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

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

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

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

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

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

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

/* 무료 간담회 섹션 3 - 배경은 그대로, 컨텐츠만 올라오는 애니메이션 */
.consultation_page_section3_container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
    will-change: opacity, transform;
}

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

/* 섹션 3 배경은 애니메이션 없이 기본 상태로 설정 */
.consultation_page_section3 {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 무료 간담회 타이틀 섹션 */
.consultation_page_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;
}

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

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

/* FAQ 아코디언 기능 */
.consultation_page_faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.consultation_page_faq_answer.active {
    max-height: 200px; /* 충분한 높이로 설정 */
}

.consultation_page_faq_icon {
    transition: transform 0.3s ease-in-out;
}

.consultation_page_faq_icon.active {
    transform: rotate(180deg);
}

/* 애니메이션 완료 후 will-change 제거 */
.animate-on-scroll.animate,
.consultation_page_main_title.animate,
.consultation_page_section1_title.animate,
.consultation_page_section1_text.animate,
.consultation_page_section2_slides_grid.animate,
.consultation_page_section2_slide_item.animate,
.consultation_page_section2_content1.animate,
.consultation_page_section2_content1_left.animate,
.consultation_page_section2_content1_right.animate,
.consultation_page_section2_content2.animate,
.consultation_page_section2_content2_left.animate,
.consultation_page_section2_content2_right.animate,
.consultation_page_section3_container.animate,
.consultation_page_title.animate {
    will-change: auto;
}
