/* style.css (최종본) */
body {
    margin: 0;
    overflow: hidden; 
}
#main-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ------------------- 레이어 설정 ------------------- */
.background-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 1번 레이어 (뒤) */
    overflow: hidden;
}
.typography-wrapper {
    position: relative;
    z-index: 10; /* 10번 레이어 (앞) */
    width: 90vw; 
    max-width: 800px;
}

/* ------------------- 기본 숨김 처리 ------------------- */
/* 🚨 모든 배경 이미지와 타이포 SVG를 일단 전부 숨깁니다. */
.place-bg-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
}
.place-svg {
    width: 100%;
    height: auto;
    display: none;
    transition: transform 0.7s ease-in-out;
}

/* ------------------- 장소별 스타일 (핵심) ------------------- */
/* JavaScript가 클래스를 바꾸면, 여기서 골라서 보여줍니다. */

/* 1. 욕조 */
#main-container.place-bathtub .img-bg-bathtub { display: block; }
#main-container.place-bathtub .svg-bathtub {
    display: block; 
    animation: float 4s ease-in-out infinite alternate;
}
/* (욕조 SVG 원본 색상 쓰려면 아래 fill 줄 삭제) */
#main-container.place-bathtub .svg-bathtub * { fill: #808FE5 !important; }



/* 3. 레인이 있는 수영장 */
#main-container.place-lane-pool .img-bg-lane-pool {
    display: block; 
    filter: url(#water-ripple); 
}
#main-container.place-lane-pool .svg-lane-pool {
    display: block; 
    transform: scale(1);
}
#main-container.place-lane-pool .svg-lane-pool * {
    filter: url(#water-ripple) drop-shadow(0 0 10px rgba(128, 216, 255, 0.8));
    /* (원본 색상 쓰려면 아래 fill 줄 삭제) */
    fill: #1a237e !important;
}
#main-container.place-lane-pool #ripple-turbulence {
    animation: shimmer-ripple 15s steps(1) infinite; 
}


/* 4. 계곡 */
#main-container.place-valley .img-bg-valley { display: block; }
#main-container.place-valley .svg-valley {
    display: block; 
    transform: scale(0.5);
}
#main-container.place-valley .svg-valley * { 
    fill: url(#waterfall-gradient) !important; 
    filter: url(#valley-water-effect);
}


/* 5. 바다 */
#main-container.place-sea .img-bg-sea { display: block; }
#main-container.place-sea .typography-wrapper {
    animation: wave 3s ease-in-out infinite alternate;
}
#main-container.place-sea .svg-sea {
    display: block;
    transform: scale(1.2); 
}
/* (원본 색상 쓰려면 아래 fill 줄 삭제) */
#main-container.place-sea .svg-sea * { fill: #e1f5fe !important; }


/* ------------------- @keyframes (모든 애니메이션 정의) ------------------- */
@keyframes float {
  from { transform: scale(0.8) translateY(0px) rotate(-0.5deg); }
  to { transform: scale(0.8) translateY(-6px) rotate(0.5deg); }
}
@keyframes shimmer-ripple {
  0% { seed: 0; } 25% { seed: 10; } 50% { seed: 20; } 75% { seed: 10; } 100% { seed: 0; }
}
@keyframes wave {
  0% { transform: translateY(0px) rotate(0deg); opacity: 1; }
  50% { transform: translateY(-8px) rotate(0.5deg); opacity: 0.8; }
  100% { transform: translateY(0px) rotate(0deg); opacity: 1; }
}