/* ==== 인트로 섹션 애니메이션 ==== */

/* 1. 중앙에서 좌우로 길어지는 선 */
.intro-anim-line {
    transform: scaleX(0);
    transform-origin: center;
    /* 나갈 때(화면에서 사라질 때) 속도와 딜레이 */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0s;
}
.section.is-animated .intro-anim-line {
    transform: scaleX(1);
    /* 들어올 때 속도와 딜레이 */
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.2s;
}
.section.is-animated .intro-anim-line {
    transform: scaleX(1);
}

/* 2. 가로선 위 로고: 위로 스르륵 */
.intro-anim-up {
    opacity: 0;
    transform: translateY(30px); /* 아래에서 위로 이동 */
    /* 기본적으로 나갈 때는 사라짐 처리지만 is-leaving 클래스가 있으면 보존됨 */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0s;
}
.section.is-animated .intro-anim-up,
.section.is-leaving .intro-anim-up {
    opacity: 1;
    transform: translateY(0);
    /* 들어올 때 */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 0.8s;      /* 선이 펼쳐지는 중간에 서서히 등장 */
}
.section.is-animated .intro-anim-up {
    opacity: 1;
    transform: translateY(0);
}

/* 3. 가로선 아래 텍스트: 아래로 스르륵 */
.intro-anim-down {
    opacity: 0;
    transform: translateY(-30px); /* 위에서 아래로 이동 */
    /* 나갈 때: 앞의 로고 및 선이 조금 줄어든 직후 순차적으로 사라짐 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: 0.2s;
}
.section.is-animated .intro-anim-down {
    opacity: 1;
    transform: translateY(0);
    /* 들어올 때 */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 1.5s;      /* 상단 로고가 등장한 이후에 등장 */
}
.section.is-animated .intro-anim-down {
    opacity: 1;
    transform: translateY(0);
}

/* ==== 섹션 1 중앙 텍스트 3줄 순차 스르륵 애니메이션 ==== */
.sec1-text-anim span {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.section.is-animated .sec1-text-anim span {
    opacity: 1;
    transform: translateY(0);
}

/* 인트로 로고 등장 후 순차 등장 (첫번째 텍스트 시점 조절) */
.section.is-animated .sec1-text-anim span:nth-child(1) { transition-delay: 1.5s; }
.section.is-animated .sec1-text-anim span:nth-child(2) { transition-delay: 1.9s; }
.section.is-animated .sec1-text-anim span:nth-child(3) { transition-delay: 2.3s; }

/* 4. 가로선 아래 바텀 로고: 텍스트 다음으로 아래로 스르륵 */
.intro-anim-down-delay {
    opacity: 0;
    transform: translateY(-30px);
    /* 나갈 때: 텍스트가 사라지기 시작한 직후 마지막으로 사라짐 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: 0.4s;
}
.section.is-animated .intro-anim-down-delay {
    opacity: 1;
    transform: translateY(0);
    /* 들어올 때 */
    transition: opacity 1s ease-out, transform 1s ease-out;
    transition-delay: 2.1s;      /* 텍스트가 등장한 이후 최종적으로 등장 */
}
.section.is-animated .intro-anim-down-delay {
    opacity: 1;
    transform: translateY(0);
}
/* 섹션 2: 커튼 전환 및 흑백/컬러 전환 클래스 */
.sec2-logo {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.sec2-logo.is-revealed {
    opacity: 1;
}

#section2-panels .panel-wrap .panel-bg {
    filter: grayscale(100%) brightness(0.8);
    transform: scale(1);
    /* hover 반응성을 위해 트랜지션 시간을 최적화 */
    transition: filter 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 패널 개별 호버 시 컬러 전환 및 배경 줌인 */
#section2-panels .panel-wrap:hover .panel-bg {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}

/* 호버 시 텍스트 블록 상단으로 살짝 이동 */
#section2-panels .panel-wrap .hover-text-block {
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#section2-panels .panel-wrap:hover .hover-text-block {
    transform: translateY(-15px);
}

/* 호버 시 가로선 길이 연장 */
#section2-panels .panel-wrap .hover-line {
    transform: scaleX(1);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#section2-panels .panel-wrap:hover .hover-line {
    transform: scaleX(1.8);
}

/* 호버 시 화살표 우측으로 미끄러짐 */
#section2-panels .panel-wrap .hover-arrow {
    transform: translateX(0);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
#section2-panels .panel-wrap:hover .hover-arrow {
    transform: translateX(12px);
}

/* fullPage.js 워터마크 숨김 */
.fp-watermark {
    display: none !important;
}

/* ==== 인덱스(메인) 페이지 가로 커튼 애니메이션 ==== */
/* 초기 상태: 가운데를 덮고 있음 */
.curtain-left, .curtain-right {
    transform: translateX(0);
    transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.3s; /* 페이지 로드 후 자연스럽게 열리도록 짧은 딜레이 추가 */
}

/* fullPage.js가 해당 섹션에 도달하여 is-animated를 주입할 때 좌우로 갈라짐 */
.section.is-animated .curtain-left {
    transform: translateX(-100%);
}

.section.is-animated .curtain-right {
    transform: translateX(100%);
}

/* ==== 텍스트 순차 스크롤 등장 애니메이션 ==== */
.slide-up-trigger span {
    display: block; /* 각 문장이 세로로 배치되도록 블록 요소로 변경 */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-up-trigger.in-view span {
    opacity: 1;
    transform: translateY(0);
}

/* 문장별 지연 효과 (첫 번째, 두 번째, 세 번째 차례대로 동작) */
.slide-up-trigger.in-view span:nth-child(1) { transition-delay: 0.2s; }
.slide-up-trigger.in-view span:nth-child(2) { transition-delay: 0.5s; }
/* ==== 인덱스 페이지 모핑 섹션 (섹션 2 + 3 통합) ==== */

/* ==== 야경 도착 시 초기 텍스트 순차 등장 (the first the last) ==== */
.sec2-title-anim span,
.sec2-desc-anim p {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s ease-out, transform 0.8s ease-out;
}

.slide.is-animated .sec2-title-anim span,
.slide.is-animated .sec2-desc-anim p {
    opacity: 1;
    transform: translateY(0);
}

.slide.is-animated .sec2-title-anim span:nth-child(1) { transition-delay: 1.2s; }
.slide.is-animated .sec2-title-anim span:nth-child(2) { transition-delay: 1.5s; }

.slide.is-animated .sec2-desc-anim p:nth-child(1) { transition-delay: 1.8s; }
.slide.is-animated .sec2-desc-anim p:nth-child(2) { transition-delay: 2.1s; }
.slide.is-animated .sec2-desc-anim p:nth-child(3) { transition-delay: 2.4s; }

/* ==== 공통 스케일 업 (섹션 도착 시) ==== */
.morph-bg-wrapper {
    transform: scale(0.8);
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
}
.slide.is-animated .morph-bg-wrapper {
    transform: scale(1);
}

/* ==== 마스크 영역 변형 (꽉 찬 화면 -> 우측 동그라미) ==== */
.morph-mask-layer {
    /* 🚨 크기 변환 시 잔상(깜빡임/점프) 방지를 위해 타겟(vw)과 동일한 vw 단위를 사용해야 완벽하게 보간(Interpolation)됩니다. */
    clip-path: circle(150vw at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide.is-step2 .morph-mask-layer {
    /* clip-path: circle(39.3vw at 100% 50%); */ /* 우측 원형으로 깎임 */
    clip-path: circle(28.3vw at 90% 50%);
}

@media (max-width: 767px) {
    .slide.is-step2 .morph-mask-layer {
        clip-path: circle(39.3vw at 100% 30%);
    }
}

/* ==== 야경 배경 페이드 아웃 ==== */
.morph-night-img {
    opacity: 1;
    transition: opacity 1.2s ease-out;
    transition-delay: 0s;
}
.slide.is-step2 .morph-night-img {
    opacity: 0;
    transition-delay: 0.6s; /* 원형이 절반쯤 깎였을 때부터 부드럽게 화분으로 교체 */
}

/* ==== 텍스트 교차 페이드 ==== */
/* 야경 텍스트 (사라짐) */
.morph-step1-txt {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}
.slide.is-step2 .morph-step1-txt {
    opacity: 0;
    visibility: hidden;
}

/* 화분 텍스트 (나타남) */
.morph-step2-txt .text-anim-target {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide.is-step2 .morph-step2-txt .text-anim-target {
    opacity: 1;
    transform: translateY(0);
}
/* 화분 텍스트 순차 등장 딜레이 (야경 페이드아웃 완료 시점 1.8초에 맞춰 시작) */
.slide.is-step2 .morph-step2-txt .text-anim-target:nth-child(1) { transition-delay: 1.8s; }
.slide.is-step2 .morph-step2-txt .text-anim-target:nth-child(2) { transition-delay: 2.1s; }

/* ==== 섹션 4 분양일정 모션 ==== */
.slide#sec4-slide .sec4-header {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 1.0s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide#sec4-slide.is-animated .sec4-header {
    opacity: 1;
    transform: translateY(0);
}

.slide#sec4-slide .sec4-card {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 1.0s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.slide#sec4-slide.is-animated .sec4-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.slide#sec4-slide.is-animated .sec4-delay-1 { transition-delay: 0.3s; }
.slide#sec4-slide.is-animated .sec4-delay-2 { transition-delay: 0.4s; }
.slide#sec4-slide.is-animated .sec4-delay-3 { transition-delay: 0.5s; }
.slide#sec4-slide.is-animated .sec4-delay-4 { transition-delay: 0.6s; }
.slide#sec4-slide.is-animated .sec4-delay-5 { transition-delay: 0.7s; }
.slide#sec4-slide.is-animated .sec4-delay-6 { transition-delay: 0.8s; }
.slide#sec4-slide.is-animated .sec4-delay-7 { transition-delay: 0.9s; }

/* ==== 섹션 5 프리미엄 모션 ==== */
#sec5 .sec5-header-line {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.0s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#sec5.is-animated .sec5-header-line:nth-child(1) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
#sec5.is-animated .sec5-header-line:nth-child(2) { transition-delay: 0.5s; opacity: 1; transform: translateY(0); }

#sec5 .swiper-slide {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
#sec5.is-animated .swiper-slide {
    opacity: 1;
    transform: translateX(0);
}
#sec5.is-animated .swiper-slide:nth-child(1) { transition-delay: 0.6s; }
#sec5.is-animated .swiper-slide:nth-child(2) { transition-delay: 0.7s; }
#sec5.is-animated .swiper-slide:nth-child(3) { transition-delay: 0.8s; }
#sec5.is-animated .swiper-slide:nth-child(4) { transition-delay: 0.9s; }
#sec5.is-animated .swiper-slide:nth-child(5) { transition-delay: 1.0s; }
#sec5.is-animated .swiper-slide:nth-child(6) { transition-delay: 1.1s; }

.fp-noscroll .fp-overflow {height: 100%;}