/*  -----------------------------------------------------------
                        애니메이션 효과 작성
----------------------------------------------------------- */

/* ============================================================
                Header 메뉴 드롭다운 효과
============================================================ */
.snb-text-slideup {
    animation-name: textSlideUp;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}
.snb-text-slidedown {
    animation-name: textSlideDown;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}

@keyframes textSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 조금 아래쪽에서 애니메이션을 시작해서 */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 원래 자리로 돌아옴 */
    }
}
@keyframes textSlideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* index */
/* ============================================================
                    Section 1 타이포 효과
============================================================ */
/* 애니메이션이 적용될 글자의 초기 상태 설정 */
.deepData-container .charChild {
    display: inline-block;
    opacity: 0;
}

.intro-effect {
    animation-name: flyIn;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 끝난 후 상태 유지 */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes flyIn {
    0% {
        filter: blur(8px);
        /* 
        translate : X, Y축으로 이동한 자리에서 애니메이션이 시작했다가, 원래 자리로 돌아오도록 함.
        scale : 글자 크기가 커졌다가 원래대로 돌아오도록 함 
        */
        transform: translate(50%, 45%) scale(20);
        opacity: 0;
    }
    40% {
        filter: blur(8px);
        opacity: 0.4;
    }
    80% {
        filter: blur(5px);
        opacity: 0.6;
    }
    100% {
        filter: blur(0px);
        transform: translate(0) scale(1);
        opacity: 1;
    }
}

/* ============================================================
                    Section 3 스크롤 효과 －＞ 미완성
============================================================ */
.img-slideup {
    animation-name: imgSlideUp;
    animation-timeline: scroll();
    /* tran */
}

@keyframes imgSlideUp {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateY(-1030px);
    }
}

/* ============================================================
                        텍스트 스크롤 효과
============================================================ */
.text-appear {
    animation-name: textAppear;
    animation-timeline: view();
    animation-range: entry 10% cover 50vh;
    /* animation-timing-function: cubic-bezier(0.42, 0, 0.25, 1.26); */
    transition: transform 0.4s transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), scale 0.4s ease, opacity 0.4s ease;
    scroll-behavior: smooth;
}

@keyframes textAppear {
    0% {
        opacity: 0;
        scale: 0.5;
        transform: translateY(500px);
    }
    100% {
        opacity: 1;
        scale: 1;
        transform: translateY(0);
    }
}

/* research_marketing */
/* ============================================================
                    Section 1 클리핑 효과
============================================================ */
.shapeAnimation {
    background-size: cover;
    animation: shapeAnimation 4s;
}

@keyframes shapeAnimation {
    0% {
        clip-path: circle(25% at 50% 50%);
    }
    25% {
        clip-path: circle(25% at 20% 40%);
    }
    50% {
        clip-path: circle(25% at 70% 80%);
    }
    75% {
        clip-path: circle(25% at 50% 50%);
    }
    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

/* side.main */
/* ============================================================
                    이미지 마스킹 그라디언트
============================================================ */
/* .fadeoutImage {
    mask-image: linear-gradient(to bottom, black, transparent);
} */