/* 페이지 애니메이션 효과 */

/* 기본 애니메이션 상태 */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* 페이드인 */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 슬라이드 업 */
.slide-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 슬라이드 인 (왼쪽에서) */
.slide-in-left {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideInLeft 0.8s ease-out forwards;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 슬라이드 인 (오른쪽에서) */
.slide-in-right {
    opacity: 0;
    transform: translateX(40px);
    animation: slideInRight 0.8s ease-out forwards;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 스케일 업 */
.scale-up {
    opacity: 0;
    transform: scale(0.95);
    animation: scaleUp 0.6s ease-out forwards;
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* 딜레이 클래스 */
.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; }

/* 이미지 호버 효과 */
.img-hover-zoom { overflow: hidden; }
.img-hover-zoom img { transition: transform 0.5s ease-out; }
.img-hover-zoom:hover img { transform: scale(1.05); }