@charset "utf-8";
/*
 * Animation (범용 애니메이션 컴포넌트 CSS)
 * ---------------------------------------------------------------
 * 특정 섹션에 종속되지 않고, 클래스만 붙이면 어떤 텍스트/컨테이너에도
 * 바로 재사용할 수 있는 범용 애니메이션 컴포넌트만 모아둔 파일.
 * 01_new_default_prod.css 에 있던 애니메이션 관련 블록(fade-up, bg-zoom-in,
 * fill-reveal, blur-fade-text, line-width-ani, reveal-ani)을 분리했다.
 *
 * - fade-up / bg-zoom-in / fill-reveal 은 스크롤 진입 애니메이션이며,
 *   IntersectionObserver 등으로 .fade-up-group에 is-visible 클래스를 붙이면 동작한다.
 * - blur-fade-text / line-width-ani / reveal-ani 는 글자/라인/텍스트 순차 등장 애니메이션이며,
 *   /en/asset/js/animation.js 가 마크업 준비(글자 span 분리, delay 계산)를 담당하고,
 *   is-active / is-grow / is-shrink / is-visible 클래스는 각 페이지/섹션의 orchestration
 *   스크립트(예: hero-intro-sequence.js)가 붙인다.
 *
 * 이 파일을 사용하려면 01_new_default_prod.css 뒤에 이어서 include 하면 된다.
 */

/* fade-up (스크롤 진입 시 아래→위 페이드인. .fade-up-group 안의 .fade-up 요소들에
   순서대로 stagger가 적용된다. IntersectionObserver로 그룹에 is-visible 클래스를 붙이면 동작.
   특정 섹션에 종속되지 않은 범용 컴포넌트이므로 다른 섹션에서도 그대로 재사용 가능하다. ) */
.new-prod-wrap .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}
.new-prod-wrap .fade-up-group.is-visible .fade-up {
    opacity: 1;
    transform: translateY(0);
}
/* stagger는 태그 종류가 아닌 실제 DOM 순서를 기준으로 걸어야 하므로 nth-of-type이 아닌
   nth-child를 쓴다 (자식 요소들의 태그가 섞여 있어도 순서대로 지연시간이 매겨진다). */
.new-prod-wrap .fade-up-group.is-visible .fade-up:nth-child(1) { transition-delay: 0s; }
.new-prod-wrap .fade-up-group.is-visible .fade-up:nth-child(2) { transition-delay: .15s; }
.new-prod-wrap .fade-up-group.is-visible .fade-up:nth-child(3) { transition-delay: .3s; }
.new-prod-wrap .fade-up-group.is-visible .fade-up:nth-child(4) { transition-delay: .45s; }
.new-prod-wrap .fade-up-group.is-visible .fade-up:nth-child(5) { transition-delay: .6s; }
/* .fill-reveal은 자체 애니메이션(아래)을 가지므로 .fade-up을 붙이지 않는다.
   .fill-reveal 바로 다음에 오는 .fade-up(보통 CTA 버튼)은 글자 reveal이 끝난 뒤
   나오도록 별도로 더 긴 지연을 준다. */
.new-prod-wrap .fade-up-group.is-visible .fill-reveal ~ .fade-up { transition-delay: 1.5s; }

/* bg-zoom-in (스크롤 진입 시 배경 이미지가 살짝 확대된 상태 -> 원래 크기로 줄어들며 페이드인,
   애플 hero 이미지 스타일의 은은한 줌아웃 리빌. .full-bg와 함께 쓰고 .fade-up-group의
   is-visible로 트리거된다. 특정 섹션에 종속되지 않으므로 다른 풀블리드 배경 섹션에도 재사용 가능.) */
.new-prod-wrap .bg-zoom-in img {
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s ease, transform 8s ease;
}
.new-prod-wrap .fade-up-group.is-visible .bg-zoom-in img {
    opacity: 1;
    transform: scale(1.15);
}

/* fill-reveal (좌→우 배경 채우기 + 글자 좌→우 순차 fade-in. 하이라이트 펜으로 칠하듯
   배경이 왼쪽에서 오른쪽으로 채워지면서 그 위 글자가 한 글자씩 나타난다.
   색상은 컴포넌트 기본값(--pink)이며, 브랜드 컬러가 다른 페이지는 [product].css에서
   .fill-reveal-bg 배경색만 오버라이드해서 재사용한다.) */
.new-prod-wrap .fill-reveal {position: relative; display: inline-block; overflow: hidden; border-radius: 10px;}
.new-prod-wrap .fill-reveal-bg {position: absolute; inset: 0; width: 0; background: var(--pink); transition: width .8s ease;}
.new-prod-wrap .fade-up-group.is-visible .fill-reveal-bg {width: 100%; transition-delay: .5s;}
.new-prod-wrap .fill-reveal-text {position: relative; z-index: 1; display: block; color: #fff;}
.new-prod-wrap .fill-reveal-text .char {display: inline-block; opacity: 0; transition: opacity .5s ease;}
.new-prod-wrap .fade-up-group.is-visible .fill-reveal-text .char {opacity: 1;}

/* blur-fade-text (텍스트를 한 글자씩 블러 → 선명하게 순차 페이드인.
   글자 단위 span(.char)은 JS(animation.js)가 자동으로 생성하며, 각 span에 지정되는
   transition-delay로 순차 등장 속도(charStep)를 조절한다. 부모(.blur-fade-text)에
   is-active 클래스를 붙이면 트리거된다. 특정 섹션에 종속되지 않은 범용 컴포넌트이므로
   다른 텍스트/섹션에서도 마크업과 클래스만 그대로 재사용하면 된다. ) */
.new-prod-wrap .blur-fade-text .char {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
    transition: opacity .5s ease, filter .5s ease, transform .5s ease;
}
.new-prod-wrap .blur-fade-text.is-active .char {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* line-width-ani (폭 0인 라인이 옆으로 길게 자라났다가(is-grow) 다시 줄어들며
   사라지는(is-shrink) 라인 연출. 목표 폭/간격/두께/색상은 --line-width, --line-gap,
   --line-height, --line-color 커스텀 프로퍼티로 섹션별로 오버라이드한다(기본값 240px/32px/4px/#fff).
   특정 섹션에 종속되지 않은 범용 컴포넌트. ) */
.new-prod-wrap .line-width-ani {
    display: inline-block;
    width: 0;
    height: var(--line-height, 4px);
    margin-left: 0;
    background-color: var(--line-color, #fff);
    transform-origin: left center;
    opacity: 1;
    transition: width .9s ease, margin-left .9s ease;
}
.new-prod-wrap .line-width-ani.is-grow {
    width: var(--line-width, 240px);
    margin-left: var(--line-gap, 32px);
}
.new-prod-wrap .line-width-ani.is-shrink {
    width: 0;
    margin-left: 0;
    transition: width .9s ease, margin-left .9s ease, opacity .4s ease .5s;
    opacity: 0;
}

/* reveal-ani (하단에서 위로 순차 페이드인. .reveal-ani 안의 .reveal-item 요소들에
   순서대로 stagger가 적용된다. 각 .reveal-item의 transition-delay는 JS(animation.js)가
   DOM 순서를 기준으로 자동 계산해서 매기므로, 중첩 구조가 달라도(형제가 아니어도) 그대로 동작한다.
   부모(.reveal-ani)에 is-visible 클래스를 붙이면 트리거된다.
   특정 섹션에 종속되지 않은 범용 컴포넌트. ) */
.new-prod-wrap .reveal-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}
.new-prod-wrap .reveal-ani.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0);
}