/* 반딧불이 이미지를 위한 기본 스타일 */
.firefly {
    /* 두 가지 애니메이션을 동시에 적용합니다.
      1. firefly-wander: 20초 동안 천천히 움직임 (무한 반복, 부드럽게, 왔다갔다)
      2. firefly-flicker: 3초 주기로 깜빡임 (무한 반복, 부드럽게, 왔다갔다)
    */
    animation: 
        firefly-wander 20s infinite ease-in-out alternate,
        firefly-flicker 3s infinite ease-in-out alternate;
        
    /* 초기 불빛 효과 (선택 사항) */
    filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
}


/* --- Keyframes 정의 --- */

/* 1. 움직임 애니메이션 (불규칙하게 떠다니기) */
@keyframes firefly-wander {
    0% {
        /* 시작점: 원래 위치 */
        transform: translate(0, 0) scale(1);
    }
    20% {
        /* 오른쪽 위로 이동 */
        transform: translate(60px, -40px) scale(0.9);
    }
    40% {
        /* 왼쪽 아래로 이동하며 약간 커짐 */
        transform: translate(-50px, 30px) scale(1.1);
    }
    60% {
        /* 오른쪽 아래로 멀리 이동 */
        transform: translate(80px, 50px) scale(0.95);
    }
    80% {
        /* 왼쪽 위로 높게 이동 */
        transform: translate(-30px, -70px) scale(1.05);
    }
    100% {
        /* 다른 지점에서 끝남 (alternate로 인해 다시 돌아옴) */
        transform: translate(20px, -20px) scale(1);
    }
}

/* 2. 반짝임 애니메이션 (불빛과 투명도 조절) */
@keyframes firefly-flicker {
    0%, 100% {
        /* 어두워질 때: 투명도를 낮추고 빛 퍼짐을 줄임 */
        
        filter: drop-shadow(0 0 2px rgba(255, 255, 0, 0.3));
    }
    50% {
        /* 밝아질 때: 투명도를 높이고 빛을 강하게 퍼뜨림 */
        
        filter: drop-shadow(0 0 15px rgba(255, 255, 0, 1));
    }
}







/* 영혼 공통 스타일 */
.spirit {

   
    /* 핵심 애니메이션 적용:
       8초 동안 천천히 부유하며, 무한 반복하고, 앞뒤로 자연스럽게 연결됩니다.
    */
    animation: spirit-float 8s infinite ease-in-out alternate;


    /* 하드웨어 가속을 사용하여 부드러운 움직임 유도 */
    will-change: transform, opacity;
}



/* --- Keyframes 정의: 영혼의 부유 움직임 --- */
@keyframes spirit-float {
    0% {
        /* 시작: 기본 위치, 약간 작고 투명하게 */
        transform: translate(0, 0) scale(0.95);
        opacity: 0.5;
    }
    25% {
        /* 부드럽게 오른쪽 위로 이동 */
        transform: translate(30px, -40px) scale(1.02);
    }
    50% {
        /* 왼쪽으로 깊게 이동, 크기가 커지며 존재감 과시 */
        transform: translate(-20px, -70px) scale(1.05);
        opacity: 0.7; /* 가장 밝아지는 지점 */
    }
    75% {
        /* 오른쪽 아래로 천천히 하강 */
        transform: translate(40px, -30px) scale(0.98);
    }
    100% {
        /* 다른 위치에서 끝남 (alternate로 인해 자연스럽게 되돌아감) */
        transform: translate(-10px, -10px) scale(1);
        opacity: 0.6;
    }
}






.irregular-float {
    /* 재생 시간을 6초로 길게 잡아서 패턴이 눈에 잘 안 띄게 합니다.
       ease-in-out: 움직임의 가속/감속을 부드럽게 처리
    */
    animation: irregular-updown 6s ease-in-out infinite;
    
    /* 요소의 초기 위치 설정 (필요시) */
    position: relative; 
}

@keyframes irregular-updown {
    0% {
        transform: translateY(0);
    }
    20% {
        /* 살짝만 위로 이동 */
        transform: translateY(-10px);
    }
    40% {
        /* 갑자기 쑥 내려감 (불규칙성 1) */
        transform: translateY(5px);
    }
    60% {
        /* 가장 높이 올라감 (불규칙성 2) */
        transform: translateY(-25px);
    }
    80% {
        /* 다시 약간 내려오지만 완전히 바닥은 아님 */
        transform: translateY(-8px);
    }
    100% {
        /* 처음 위치로 복귀 (반복을 위해 필수) */
        transform: translateY(0);
    }
}










/* --- 1. 마녀 캐릭터 애니메이션 --- */
.witch-character {
    animation: witch-float-complex 7s ease-in-out infinite;
}

/* 핵심: 상하좌우 이동 + 회전(기울기)을 불규칙하게 섞은 키프레임 */
@keyframes witch-float-complex {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    20% {
        /* 오른쪽 위로 이동하며, 앞머리가 살짝 들림(2deg) */
        transform: translate(15px, -20px) rotate(2deg);
    }
    45% {
        /* 왼쪽으로 이동하며 가장 높이 올라감, 약간 앞으로 숙임(-1deg) */
        transform: translate(-10px, -35px) rotate(-1deg);
    }
    70% {
        /* 왼쪽 아래로 내려오며, 바람을 탄 듯 더 숙임(-3deg) */
        transform: translate(-18px, -10px) rotate(-3deg);
    }
    85% {
        /* 중앙으로 복귀하며 수평을 잡아감 */
        transform: translate(5px, -5px) rotate(1deg);
    }
    100% {
        /* 처음 위치로 부드럽게 복귀 */
        transform: translate(0, 0) rotate(0deg);
    }
}






.sparrow-character {
    position: relative;
    /* 참새처럼 가볍고 딱딱 끊어지는 느낌을 위해 ease 대신 linear나 급격한 ease-out 사용 */
    /* 전체 루프는 5초로 길게 잡아 여유를 줍니다. */
    animation: sparrow-move 5s infinite;
    
    /* 발바닥을 기준으로 점프 */
    transform-origin: bottom center;
}

@keyframes sparrow-move {
    /* [참새 리듬 분석]
       0초~1초: 가만히 대기 (주변 살피기)
       1초대: 톡! (한번 점프)
       2초대: 톡-톡! (연속 짧은 점프)
       나머지: 다시 대기
    */

    /* === 구간 1: 대기 (약 20%까지 가만히 있음) === */
    0%, 20% {
        transform: translateY(0);
    }

    /* === 구간 2: 첫 번째 점프 (톡!) === */
    23% {
        transform: translateY(-15px); /* 가볍게 위로 톡 */
    }
    25% {
        transform: translateY(0); /* 착지 */
    }

    /* === 구간 3: 잠깐 멈춤 === */
    25%, 45% {
        transform: translateY(0);
    }

    /* === 구간 4: 두 번째 점프 (톡!) === */
    48% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(0);
    }

    /* === 구간 5: 바로 이어지는 작은 점프 (톡-톡!) === */
    53% {
        transform: translateY(-8px); /* 조금 낮게 */
    }
    55% {
        transform: translateY(0);
    }

    /* === 구간 6: 긴 휴식 (다음 루프까지 대기) === */
    55%, 100% {
        transform: translateY(0);
    }
}






.sparrow-twitchy {
    position: relative;
    /* 전체 루프 4.5초: 조금 더 긴박한 느낌 */
    animation: sparrow-twitch-move 4.5s infinite linear;
    /* 회전의 기준점도 발바닥이어야 자연스럽습니다. */
    transform-origin: bottom center;
}

@keyframes sparrow-twitch-move {
    /* [특징]
       점프의 정점이나 착지 순간에 아주 미세한 rotateZ(각도)를 추가하여
       몸이 좌우로 갸웃거리거나 움찔하는 느낌을 줍니다.
    */

    /* === 대기 === */
    0%, 15% { transform: translateY(0) rotateZ(0deg); }

    /* === 첫 번째 점프 (살짝 왼쪽으로 기울며 점프) === */
    18% { transform: translateY(-14px) rotateZ(-3deg); }
    21% { transform: translateY(0) rotateZ(0deg); } /* 착지 */

    /* === 멈춤 (잠깐 움찔) === */
    21%, 40% { transform: translateY(0) rotateZ(0deg); }
    /* 멈춰있는 동안 살짝 한번 움찔 */
    30% { transform: translateY(0) rotateZ(2deg); } 
    32% { transform: translateY(0) rotateZ(0deg); }

    /* === 연속 점프 1 (오른쪽으로 기울며) === */
    43% { transform: translateY(-12px) rotateZ(4deg); }
    45% { transform: translateY(0) rotateZ(1deg); } /* 완전히 바르게 착지 안 함 */

    /* === 연속 점프 2 (급하게 바로 이어서, 왼쪽으로 기울며) === */
    48% { transform: translateY(-10px) rotateZ(-2deg); }
    51% { transform: translateY(0) rotateZ(0deg); } /* 최종 착지 */

    /* === 긴 휴식 === */
    51%, 100% { transform: translateY(0) rotateZ(0deg); }
}





.slow-jump-moon {
    position: relative;
    /* 전체 4초 중 점프는 2초 정도 걸리도록 설정 */
    animation: moon-jump-move 4s infinite ease-in-out;
    transform-origin: bottom center;
}

@keyframes moon-jump-move {
    /* [타임라인 설명]
       0% ~ 10%: 대기
       10% ~ 50%: 천천히 점프 후 착지 (약 1.6초 소요)
       50% ~ 100%: 긴 휴식
    */
    
    0%, 10% {
        transform: translateY(0);
    }
    15% {
        /* 정점: 천천히 가장 높게 도달 */
        transform: translateY(-10px); 
    }
    20% {
        /* 착지: 부드럽게 내려옴 */
        transform: translateY(0);
    }
    100% {
        /* 다음 점프까지 대기 */
        transform: translateY(0);
    }
}







/* --- 거북이 캐릭터 스타일 및 애니메이션 적용 --- */
.turtle-character {
    
    /* [핵심: 두 가지 애니메이션 동시 적용]
       1. turtle-walk-across: 25초 동안 아주 느리게 화면을 가로지름 (속도 일정하게 linear)
       2. turtle-waddle: 3초 주기로 무겁게 뒤뚱거림 (부드럽게 ease-in-out)
    */
    animation: 
        turtle-waddle 3s ease-in-out infinite;
    
    /* 움직임의 기준점을 바닥 중앙으로 설정 (중요) */
    transform-origin: bottom center;
}



/* --- (Keyframes 2) 무겁게 뒤뚱거리기 (Waddle) --- */
@keyframes turtle-waddle {
    /* [거북이 걸음걸이 특징]
       한발을 내딛을 때 몸이 그쪽으로 기울고(rotate), 무게 때문에 살짝 가라앉음(translateY)
    */
    
    /* 중앙 (시작점) */
    0% {
        transform: rotate(0deg) translateY(0);
    }
    /* 오른쪽 발 내딛음: 오른쪽으로 기울고 살짝 눌림 */
    25% {
        transform: rotate(3deg) translateY(2px);
    }
    /* 다시 중앙으로 오는 과정: 발을 바꾸기 위해 몸이 살짝 들림 (무거운 느낌) */
    50% {
        transform: rotate(0deg) translateY(-1px); 
    }
    /* 왼쪽 발 내딛음: 왼쪽으로 기울고 살짝 눌림 */
    75% {
        transform: rotate(-3deg) translateY(2px);
    }
    /* 중앙 복귀 */
    100% {
        transform: rotate(0deg) translateY(0);
    }
}





/* 컨테이너 스타일 (이전과 동일) */
#firefly-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}

/* 개별 반딧불이 스타일 */
.firefly-particle {
    position: absolute;
    background-color: #ffffbc; /* 약간 노란빛이 도는 반딧불이 색 */
    border-radius: 50%;
    box-shadow: 0 0 8px #ffffbc; /* 기본 빛 번짐 */
    will-change: transform, opacity; /* 성능 최적화 힌트 */
    /* 애니메이션 속성은 JS에서 개별적으로 부여합니다. */
}

/* --- 키프레임 정의 --- */

/* 1. 반짝임 (Twinkle): 밝기와 빛 번짐 변화 */
@keyframes twinkle-animation {
    0% {
        opacity: 0.3; /* 어둡게 */
        box-shadow: 0 0 5px #ffffbc;
    }
    100% {
        opacity: 1; /* 밝게 */
        /* 밝아질 때 하얀색 코어와 금색 외곽 광채 추가 */
        box-shadow: 0 0 12px #fff, 0 0 20px gold; 
    }
}

/* 2. 이동 (Move): 넓은 범위를 천천히 배회 */
/* vw, vh 단위는 화면 너비/높이에 비례하므로 반응형으로 자연스럽게 움직입니다. */
@keyframes move-animation {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(15vw, -10vh); } /* 오른쪽 위로 */
    40%  { transform: translate(-10vw, 12vh); } /* 왼쪽 아래로 */
    60%  { transform: translate(8vw, 5vh); }   /* 약간 오른쪽 아래로 */
    80%  { transform: translate(-5vw, -15vh); } /* 왼쪽 위로 높게 */
    100% { transform: translate(0, 0); }        /* 제자리로 (루프를 위해) */
}







/* 애니메이션이 적용될 이미지 기본 설정 */
.scroll-down-ani {
    display: inline-block; /* 애니메이션 적용을 위한 필수 설정 */


    /* 두 개의 애니메이션 동시 적용 
      1. floating: 위아래 움직임 (2초 주기)
      2. glowing: 반짝이는 네온 효과 (1.5초 주기, 왕복)
    */
    animation: 
        floating 2s ease-in-out infinite,
        glowing 1.5s ease-in-out infinite alternate;
}

/* 1. 위아래로 부드럽게 움직이는 키프레임 */
@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        /* 아래로 10px 이동 (움직임 강도 조절은 이 숫자를 변경하세요) */
        transform: translateY(10px); 
    }
    100% {
        transform: translateY(0);
    }
}

/* 2. #85ecff 색상으로 반짝이는(빛나는) 키프레임 */
@keyframes glowing {
    0% {
        /* 빛이 약할 때: 투명도 약간 낮춤, 그림자 범위 작게 */
        opacity: 0.85;
        filter: drop-shadow(0 0 2px rgba(133, 236, 255, 0.3));
    }
    100% {
        /* 빛이 강할 때: 투명도 100%, 강력한 이중 네온 그림자 */
        opacity: 1;
        /* drop-shadow를 두 번 겹쳐서 중심부가 더 밝게 빛나게 함 */
        filter: drop-shadow(0 0 5px #85ecff) drop-shadow(0 0 10px #85ecff);
    }
}








/* 모든 종이 조각의 공통 스타일 */
.paper-item {
    will-change: transform; /* 애니메이션 성능 최적화 */
    
    /* 핵심 애니메이션 적용 */
    /* paper-float라는 이름의 키프레임을 부드럽게(ease-in-out) 무한 반복 */
    animation-name: paper-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

/* --- 각 종이별 초기 위치 및 애니메이션 시간차 설정 --- */

/* 종이 1 */
.paper-1 {
    z-index: 1; /* 겹치는 순서 설정 */
    
    /* 애니메이션 속도 및 타이밍 */
    animation-duration: 12s; /* 12초 주기로 천천히 움직임 */
    animation-delay: 0s;      /* 바로 시작 */
}

/* 종이 2 */
.paper-2 {
    z-index: 3; /* 가장 위에 오도록 */
    
    animation-duration: 15s; /* 더 느리게 (15초 주기) */
    animation-delay: -7s;    /* 7초 먼저 시작한 것처럼 (중간부터 시작) */
}

/* 종이 3 */
.paper-3 {
    z-index: 2;
    
    animation-duration: 10s; /* 조금 빠르게 (10초 주기) */
    animation-delay: -3s;    /* 3초 먼저 시작한 것처럼 */
}


/* --- 키프레임 정의: 둥둥 떠다니는 움직임 --- */
@keyframes paper-float {
    /* X축(좌우), Y축(상하), rotate(회전)을 섞어서
       불규칙한 8자 모양이나 타원을 그리듯 움직이게 합니다.
       움직임의 폭(px)과 각도(deg)는 디자인에 맞춰 조절하세요.
    */
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        /* 오른쪽 위로 살짝 이동하며 기울기 */
        transform: translate(10px, -15px) rotate(2deg);
    }
    50% {
        /* 왼쪽 아래로 이동하며 반대로 기울기 */
        transform: translate(-8px, 5px) rotate(-1deg);
    }
    75% {
        /* 오른쪽 아래로 이동 */
        transform: translate(12px, 10px) rotate(1deg);
    }
}







/* 배경 (필요 시 사용) */


/* 고래 이미지 스타일 및 애니메이션 적용 */
.floating-whale {
    will-change: transform; /* 부드러운 움직임을 위한 최적화 */
    
    /* 핵심 설정:
       8초 동안(아주 느리게) cloud-whale-float 애니메이션을 무한 반복
       ease-in-out: 시작과 끝을 부드럽게 처리하여 둥실거리는 느낌 강조
    */
    animation: cloud-whale-float 8s ease-in-out infinite;
}


/* --- 키프레임 정의: 구름처럼 둥실거리는 움직임 --- */
@keyframes cloud-whale-float {
    /* [전략]
       단순한 상하 운동이 아닌, 타원을 그리거나 8자를 그리는 듯한 
       불규칙하고 미세한 경로를 만듭니다.
       아주 살짝 기울기(rotate)를 주어 거대한 몸집이 균형을 잡는듯한 느낌을 더합니다.
    */
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        /* 오른쪽 위로 살짝 떠오름, 아주 미세하게 고개를 듦 */
        transform: translate(8px, -10px) rotate(1deg);
    }
    50% {
        /* 왼쪽으로 이동하며 가장 높이 올라감 */
        transform: translate(-5px, -15px) rotate(0deg);
    }
    75% {
        /* 왼쪽 아래로 부드럽게 내려옴, 아주 미세하게 고개를 숙임 */
        transform: translate(-10px, -5px) rotate(-1deg);
    }
}








/* 모든 물방울 공통 스타일 */
.drop-item {
    will-change: transform; /* 부드러운 움직임 최적화 */
    
    /* 기본 애니메이션 설정 */
    animation-name: water-float;
    animation-timing-function: ease-in-out; /* 부드러운 가속/감속 */
    animation-iteration-count: infinite; /* 무한 반복 */
}

/* --- 개별 물방울 설정 (위치 & 시간차 공격) --- */

/* 물방울 1: 표준 속도 */
.drop-1 {
    animation-duration: 3s; 
    animation-delay: 0s;
}

/* 물방울 2: 아주 느리게, 이미 시작된 것처럼(-1.5s) */
.drop-2 {
    animation-duration: 4.5s;
    animation-delay: -1.5s;
}

/* 물방울 3: 조금 빠르게, 엇박자로 시작 */
.drop-3 {
    animation-duration: 2.5s;
    animation-delay: -0.8s;
}

/* 물방울 4: 적당한 속도, 반대 타이밍 */
.drop-4 {
    animation-duration: 3.5s;
    animation-delay: -2s;
}

/* 물방울 5: 가장 느리게 */
.drop-5 {
    animation-duration: 5s;
    animation-delay: -3.5s;
}


/* --- 키프레임: 둥실거리는 움직임 --- */
@keyframes water-float {
    0%, 100% {
        /* 제자리 */
        transform: translateY(0);
    }
    50% {
        /* 위로 둥실 떠오름 */
        /* 물방울의 가벼운 느낌을 위해 15px ~ 20px 정도가 적당합니다 */
        transform: translateY(-20px);
    }
}









/* 물방울 공통 스타일 */
.bubble {
    position: absolute;
    z-index: 1;
    bottom: -50px; /* 화면 아래에서 시작 */
    background: transparent;
    pointer-events: none; /* 마우스 클릭 통과 */

    /* 좌우로 흔들리며 올라가는 애니메이션 */
    animation: rise var(--duration) linear forwards, 
               sway 2s ease-in-out infinite alternate;
}

/* 1. 위로 올라가는 키프레임 */
@keyframes rise {
    0% {
        bottom: -50px;
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 1; /* 나타날 때 투명도 */
    }
    100% {
        bottom: 110%; /* 화면 위쪽 끝까지 이동 */
        opacity: 0.1; /* 사라질 때쯤 투명해짐 */
        transform: scale(1.1); /* 올라갈수록 약간 커짐 (압력 변화 표현) */
    }
}

/* 2. 좌우로 살랑거리는 키프레임 */
@keyframes sway {
    0% { margin-left: -10px; }
    100% { margin-left: 10px; }
}










/* 공통 컨테이너 스타일 */
.firefly-wrapper {
    position: absolute; /* fixed에서 변경: 부모 섹션 기준 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 콘텐츠 뒤로 보내려면 조절 필요 */
    pointer-events: none; /* 클릭 통과 */
    overflow: hidden;
}

/* 개별 입자 스타일 */
.firefly-particle {
    position: absolute;
    background-color: #ffffbc;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffffbc;
    will-change: transform, opacity;
}

/* 키프레임은 기존과 동일 (전역 사용) */
@keyframes twinkle-animation {
    0% { opacity: 0.3; box-shadow: 0 0 5px #ffffbc; }
    100% { opacity: 1; box-shadow: 0 0 12px #fff, 0 0 20px gold; }
}

@keyframes move-animation {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(15vw, -10vh); }
    40%  { transform: translate(-10vw, 12vh); }
    60%  { transform: translate(8vw, 5vh); }
    80%  { transform: translate(-5vw, -15vh); }
    100% { transform: translate(0, 0); }
}








/* 2. 별똥별 공통 스타일 */
.falling-star {
    position: absolute;
    top: -100px; /* 화면 위에서 시작 */
    left: 50%; /* JS로 랜덤 변경될 예정 */
    width: 2px; /* 별의 두께 */
    height: 100px; /* 꼬리 길이 */
    /* 핵심: 투명에서 흰색으로 이어지는 그라데이션으로 꼬리 표현 */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    border-radius: 50%; /* 끝부분 둥글게 */
    opacity: 0; /* 시작은 안 보이게 */
    pointer-events: none; /* 마우스 클릭 방해 안 함 */

    /* 사선으로 떨어지도록 회전 */
    transform: rotate(45deg);

    /* 빛나는 효과 추가 */
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* 3. 떨어지는 애니메이션 키프레임 */
@keyframes shoot {
    0% {
        /* 시작점: 오른쪽 위 */
        transform: translate(200px, -200px) rotate(45deg);
        opacity: 0;
    }
    10% {
        /* 잠깐 밝아짐 */
        opacity: 1;
    }
    100% {
        /* 도착점: 왼쪽 아래 화면 밖 */
        /* translate3d를 사용하여 성능 최적화 */
        transform: translate(-150vw, 150vh) rotate(45deg);
        opacity: 0;
    }
}









/* 안개를 감싸는 컨테이너 */
.fog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* 콘텐츠 뒤로 배치 */
}

/* 안개 레이어 공통 스타일 */
.fog-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;

    /* *** 핵심: 연기 이미지 설정 *** */
    /* 좌우로 자연스럽게 이어지는 이미지를 사용해야 합니다. */
    background-image: url('/images/fog.png');
    background-repeat: repeat-x; /* 가로로 계속 반복 */
    background-size: cover;      /* 화면에 꽉 차게, 혹은 contain 등 조절 */
    background-position: center bottom; /* 아래쪽에 깔리도록 */
    pointer-events: none; /* 마우스 통과 */
}

/* === 레이어 1: 가장 크고 느리게 움직임 (기본) === */
.fog-layer.layer-1 {
    opacity: 0.5; /* 반투명 */
    /* 두 가지 애니메이션을 동시에 적용 (흐름 + 일렁임) */
    animation: fogFlow 60s linear infinite,
               fogBillow 8s ease-in-out infinite alternate;
}

/* === 레이어 2: 조금 작고 빠르게 움직임 (깊이감 추가) === */
.fog-layer.layer-2 {
    opacity: 0.3; /* 더 투명하게 */
    /* 반대 방향으로 흐르거나 속도를 다르게 주어 입체감 형성 */
    animation: fogFlow 40s linear infinite reverse,
               fogBillow 12s ease-in-out infinite alternate-reverse;
}
 /* === 레이어 3: 아주 옅게 깔리는 배경 === */
 .fog-layer.layer-3 {
    opacity: 0.1;
    animation: fogFlow 80s linear infinite;
}


/* === 애니메이션 키프레임 정의 === */

/* 1. 가로로 흘러가는 애니메이션 (Flow) */
@keyframes fogFlow {
    0% {
        background-position-x: 0;
    }
    100% {
        /* 이미지가 반복되므로 아주 큰 값을 주어 계속 흘러가는 것처럼 보이게 함 */
        background-position-x: 2000px; 
    }
}

/* 2. 위아래로 뭉실뭉실 일렁이는 애니메이션 (Billow) */
@keyframes fogBillow {
    0% {
        transform: translateY(0);
    }
    100% {
        /* 위로 살짝 올라갔다 내려옴 */
        transform: translateY(-30px);
    }
}