/* ============================================
   Story Page Scroll Animations
   ============================================ */

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

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

/* 섹션별 애니메이션 효과 */

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

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

/* Story Title Section - 타이틀 페이드인 */
.story_title {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

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

/* Story Section 1 - 로고와 텍스트 순차 애니메이션 */
.story_section1_logo {
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

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

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

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

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

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

/* Story Section 2 - 좌우 분할 애니메이션 */
.story_section2_left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

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

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

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

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

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

.story_section2_text {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
}

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

/* Story Section 2 Bottom - 하단 텍스트들 순차 애니메이션 */
.story_section2_bottom_text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

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

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

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

.story_section2_divider {
    opacity: 0;
    transform: scaleY(0);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}

.story_section2_divider.animate {
    opacity: 1;
    transform: scaleY(1);
}

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

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

/* Story Section 3 - 텍스트들 순차 애니메이션 */
.story_section3_text {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.story_section3_text:nth-child(1) { transition-delay: 0.2s; }
.story_section3_text:nth-child(2) { transition-delay: 0.4s; }
.story_section3_text:nth-child(3) { transition-delay: 0.6s; }

/* 특별한 애니메이션 효과들 */

/* 페이드인 애니메이션 */
.fade-in {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in.animate {
    opacity: 1;
}

/* 위에서 슬라이드 */
.slide-from-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-from-top.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 아래에서 슬라이드 */
.slide-from-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-from-bottom.animate {
    opacity: 1;
    transform: translateY(0);
}

/* 좌측에서 슬라이드 */
.slide-from-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-from-left.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 우측에서 슬라이드 */
.slide-from-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide-from-right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* 스케일 애니메이션 */
.scale-in {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* 회전 애니메이션 */
.rotate-in {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* 모바일 최적화 */
@media (max-width: 767px) {
    .animate-on-scroll {
        transform: translateY(30px);
    }
    
    .slide-from-left,
    .slide-from-right {
        transform: translateY(30px);
    }
    
    .slide-from-left.animate,
    .slide-from-right.animate {
        transform: translateY(0);
    }
    
    /* 모바일에서 좌우 슬라이드 애니메이션을 수직으로 변경 */
    .story_section2_left,
    .story_section2_right {
        transform: translateY(30px);
    }
    
    .story_section2_left.animate,
    .story_section2_right.animate {
        transform: translateY(0);
    }
    
    /* 모바일에서 애니메이션 지연 시간 단축 */
    .story_section1_logo {
        transition-delay: 0.1s;
    }
    
    .story_section1_subtitle {
        transition-delay: 0.2s;
    }
    
    .story_section1_title {
        transition-delay: 0.3s;
    }
    
    .story_section2_left {
        transition-delay: 0.1s;
    }
    
    .story_section2_right {
        transition-delay: 0.2s;
    }
    
    .story_section2_brand {
        transition-delay: 0.3s;
    }
    
    .story_section2_text {
        transition-delay: 0.4s;
    }
    
    .story_section2_bottom_text {
        transition-delay: 0.1s;
    }
    
    .story_section2_middle_text {
        transition-delay: 0.2s;
    }
    
    .story_section2_divider {
        transition-delay: 0.3s;
    }
    
    .story_section2_call {
        transition-delay: 0.4s;
    }
    
    .story_section3_text:nth-child(1) { transition-delay: 0.1s; }
    .story_section3_text:nth-child(2) { transition-delay: 0.2s; }
    .story_section3_text:nth-child(3) { transition-delay: 0.3s; }
}

/* 작은 모바일 최적화 (479px 이하) */
@media (max-width: 479px) {
    /* 작은 모바일에서 모든 애니메이션을 수직으로 통일 */
    .story_section2_left,
    .story_section2_right {
        transform: translateY(20px);
    }
    
    .story_section2_left.animate,
    .story_section2_right.animate {
        transform: translateY(0);
    }
    
    /* 작은 모바일에서 애니메이션 거리 줄임 */
    .animate-on-scroll {
        transform: translateY(20px);
    }
    
    .story_section1_logo {
        transform: scale(0.9) translateY(20px);
    }
    
    .story_section1_logo.animate {
        transform: scale(1) translateY(0);
    }
    
    /* 작은 모바일에서 애니메이션 지연 시간 더욱 단축 */
    .story_section1_logo {
        transition-delay: 0.05s;
    }
    
    .story_section1_subtitle {
        transition-delay: 0.1s;
    }
    
    .story_section1_title {
        transition-delay: 0.15s;
    }
    
    .story_section2_left {
        transition-delay: 0.05s;
    }
    
    .story_section2_right {
        transition-delay: 0.1s;
    }
    
    .story_section2_brand {
        transition-delay: 0.15s;
    }
    
    .story_section2_text {
        transition-delay: 0.2s;
    }
    
    .story_section2_bottom_text {
        transition-delay: 0.05s;
    }
    
    .story_section2_middle_text {
        transition-delay: 0.1s;
    }
    
    .story_section2_divider {
        transition-delay: 0.15s;
    }
    
    .story_section2_call {
        transition-delay: 0.2s;
    }
    
    .story_section3_text:nth-child(1) { transition-delay: 0.05s; }
    .story_section3_text:nth-child(2) { transition-delay: 0.1s; }
    .story_section3_text:nth-child(3) { transition-delay: 0.15s; }
}

/* 성능 최적화 */
.story_main_title,
.story_title,
.story_section1_logo,
.story_section1_subtitle,
.story_section1_title,
.story_section2_left,
.story_section2_right,
.story_section2_brand,
.story_section2_text,
.story_section2_bottom_text,
.story_section2_middle_text,
.story_section2_divider,
.story_section2_call,
.story_section3_text {
    will-change: transform, opacity;
}

/* 애니메이션 완료 후 will-change 제거 */
.story_main_title.animate,
.story_title.animate,
.story_section1_logo.animate,
.story_section1_subtitle.animate,
.story_section1_title.animate,
.story_section2_left.animate,
.story_section2_right.animate,
.story_section2_brand.animate,
.story_section2_text.animate,
.story_section2_bottom_text.animate,
.story_section2_middle_text.animate,
.story_section2_divider.animate,
.story_section2_call.animate,
.story_section3_text.animate {
    will-change: auto;
}