/* 물 흐름 효과 섹션 스타일 */
/* CSS 변수 선언 - 나중에 수위 조절 기능을 추가하기 위한 준비 */
:root {
    --water-level: 20%; /* 초기 물 수위는 20% */
    --water-color:#0d5177; /* 보라색 물 */
    --water-color-dark: #1e678e; /* 더 진한 보라색 */
    --water-transition-speed: 0.5s; /* 수위 변경 애니메이션 속도 */
}

.flow-section {
    background-color: #f8f9fa;
    margin-top:120px;
    padding: 100px 0;
    padding-bottom:20px;
    margin-bottom:0;
    /* overflow: hidden; */
    position: relative;
}

.flow-container {
    width: 95vw;
    max-width:1800px;
    margin: 0 auto;
    text-align: center;
    position: sticky;
    top:25vh;
    transition:all 0.5s ease;
    visibility:visible;
}
.flow-container.hide{
    opacity:0;
    visibility:hidden;
}

.black_container {
    position:sticky;
    /* bottom:0; */
    visibility:hidden;
    opacity:0;
    transition:all 0.5s ease;
        margin: 0 auto;
        top:calc(100px + 2.5vh);
        width: 95vw;
    max-width:1800px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#000;
    border-radius:20px;
    height:calc(95vh - 100px);
}
.black_container.show{ 
    opacitY:1;
    visibility:visible;
}


.black_container .top_text{
    color:#3182F6;
    font-size:22px;
    font-weight:700;

}
.black_container .title_text{
    color:#fff;
    font-weight:700;
    font-size:48px;
    line-height:1.3;
    margin-bottom:48px;
	margin-top:20px;
}
.black_container .icon_list{
    display:flex;
    gap:12px;
}

.black_container .icons{
    width:14vw;
    color:#fff;
    transform:translateY(150px);
    opacity:0;
    transition:all 0.5s ease;
    font-size:22px;
    
    /* border-radius:12px; */
    /* background:#9940ff; */
}
.black_container.show .icons{
    transform:translateY(0);
    opacity:1;
}
.black_container.show .icons:nth-child(1){
    transition-delay:0.25s;
}
.black_container.show .icons:nth-child(2){
    transition-delay:0.5s;
}
.black_container.show .icons:nth-child(3){
    transition-delay:0.75s;
}
.black_container.show .icons:nth-child(4){
    transition-delay:1s;
}
.black_container.show .icons:nth-child(5){
    transition-delay:1.25s;
}

.black_container .icons img{
    width:100%;
    border-radius:12px;
    aspect-ratio:1 / 1;
    object-fit:cover;
}



.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    /* margin-bottom: 15px; */
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 22px;
    color: #FF6B00;
    font-weight: 400;
}

.water-circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    position: relative;
    width: 300px;
    height: 300px;
    /* overflow: hidden 삭제 - 사각형 제한을 만들었음 */
}

/* A 영역 - 기본 원 */
.water-circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    overflow: hidden; /* 중요: 원형 안에서만 물이 보이게 함 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 1; /* A 영역은 앞에 위치 */
}

/* 울퉁불퉁한 원들을 water-circle 안에 배치 */
.water-circle .water-blob,
.water-circle .water-blob-2,
.water-circle .water-blob-3 {
    position: absolute;
    left: -25px; /* 원 내에서 적절히 위치 조정 */
}

/* B 영역 - 울퉁불퉁한 회전하는 원 */
.water-blob {
    bottom: -130px; /* 원의 위치 조정 - 아래에서 올라오게 */
    width: 150%; /* 원보다 큰 크기로 설정 */
    height: 150%;
    background-color: var(--water-color);
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; /* 울퉁불퉁한 형태 */
    animation: rotate 10s linear infinite; /* 회전 애니메이션 */
    will-change: transform; /* 성능 최적화 */
    transform-origin: center center;
    z-index: 2;
}

/* 두 번째 울퉁불퉁한 원 (다른 모양, 다른 속도) */
.water-blob-2 {
    bottom: -140px;
    width: 140%;
    height: 140%;
    background-color: var(--water-color-dark);
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    animation: rotate-reverse 5s linear infinite; /* 반대 방향 회전 */
    opacity: 0.7;
    z-index: 3;
    left: -30px;
}

/* 세 번째 울퉁불퉁한 원 (또 다른 모양, 또 다른 속도) */
.water-blob-3 {
    bottom: -120px;
    width: 135%;
    height: 135%;
    background-color: #1f8dae;
    border-radius: 31% 69% 59% 41% / 56% 31% 69% 44%;
    animation: rotate 4s linear infinite;
    opacity: 0.9;
    z-index: 4;
    left: -20px;
}

/* 물 표면 반짝임 효과 */
.water-shine {
    position: absolute;
    width: 30px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    top: calc(100% - var(--water-level) - 5px);
    left: 60px;
    border-radius: 50%;
    filter: blur(3px);
    animation: shine 4s infinite ease-in-out;
    pointer-events: none;
    z-index: 5; /* 반짝임은 가장 위에 */
    opacity: 0.7;
}

/* 두 번째 반짝임 */
.water-shine-2 {
    position: absolute;
    width: 20px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    top: calc(100% - var(--water-level) - 10px);
    left: 90px;
    border-radius: 50%;
    filter: blur(2px);
    animation: shine-2 5s infinite ease-in-out;
    animation-delay: 2s;
    pointer-events: none;
    z-index: 5;
    opacity: 0.6;
}

/* 회전 애니메이션 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* 반대 방향 회전 애니메이션 */
@keyframes rotate-reverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* 반짝임 애니메이션 */
@keyframes shine {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1) translateX(0);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.2) translateX(5px);
    }
}

/* 두 번째 반짝임 애니메이션 */
@keyframes shine-2 {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.3) translateX(-8px);
    }
}

/* 물결 효과 - 추가 */
.water-ripple {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* 물 튀는 효과 - 추가 */
.water-blob.splash {
    animation: splash 0.5s ease-out forwards, rotate 10s linear infinite;
}

.water-blob-2.splash {
    animation: splash 0.5s ease-out forwards, rotate-reverse 15s linear infinite;
}

.water-blob-3.splash {
    animation: splash 0.5s ease-out forwards, rotate 12s linear infinite;
}

@keyframes splash {
    0% {
        transform: scale(1) rotate(var(--rotation, 0deg));
    }
    50% {
        transform: scale(1.05) rotate(var(--rotation, 0deg));
    }
    100% {
        transform: scale(1) rotate(var(--rotation, 0deg));
    }
}

/* 물 높이 수정을 위한 클래스들 (JS로 추가) */
.water-level-20 .water-blob {
    bottom: -140%;
}

.water-level-20 .water-blob-2 {
    bottom: -130%;
}

.water-level-20 .water-blob-3 {
    bottom: -135%;
}

.water-level-35 .water-blob {
    bottom: -125%;
}

.water-level-35 .water-blob-2 {
    bottom: -115%;
}

.water-level-35 .water-blob-3 {
    bottom: -120%;
}

.water-level-50 .water-blob {
    bottom: -110%;
}

.water-level-50 .water-blob-2 {
    bottom: -100%;
}

.water-level-50 .water-blob-3 {
    bottom: -105%;
}

.water-level-65 .water-blob {
    bottom: -95%;
}

.water-level-65 .water-blob-2 {
    bottom: -85%;
}

.water-level-65 .water-blob-3 {
    bottom: -90%;
}

.water-level-80 .water-blob {
    bottom: -80%;
}

.water-level-80 .water-blob-2 {
    bottom: -70%;
}

.water-level-80 .water-blob-3 {
    bottom: -75%;
}

.water-level-90 .water-blob {
    bottom: -65%;
}

.water-level-90 .water-blob-2 {
    bottom: -55%;
}

.water-level-90 .water-blob-3 {
    bottom: -60%;
}

.water-level-100 .water-blob {
    bottom: -25px;
}

.water-level-100 .water-blob-2 {
    bottom: -35px;
}

.water-level-100 .water-blob-3 {
    bottom: -15px;
}

/* 반응형 스타일 */
@media (max-width: 1600px) {
    .flow-container {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
    }
    
    .water-circle-container,
    .water-circle {
        width: 120px;
        height: 120px;
    }
    
    .water-blob {
        width: 160px;
        height: 160px;
        bottom: -105px;
    }
    
    .water-blob-2 {
        width: 155px;
        height: 155px;
        bottom: -110px;
    }
    
    .water-blob-3 {
        width: 150px;
        height: 150px;
        bottom: -100px;
    }
}

@media (max-width: 576px) {
    .water-circle-container,
    .water-circle {
        width: 100px;
        height: 100px;
    }
    
    .water-blob {
        width: 140px;
        height: 140px;
        bottom: -90px;
    }
    
    .water-blob-2 {
        width: 135px;
        height: 135px;
        bottom: -95px;
    }
    
    .water-blob-3 {
        width: 130px;
        height: 130px;
        bottom: -85px;
    }
}