/* background-animation.css */

/* 1. 배경 방울(Bubble) 컨테이너 */
.bg-bubbles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 모든 콘텐츠보다 뒤에 위치 */
    overflow: hidden;
    pointer-events: none; /* 클릭 방해 금지 */
}

/* 2. 공통 방울 스타일 */
.bubble {
    position: absolute;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    will-change: transform; /* 브라우저 최적화 */
    animation: float-around 25s infinite alternate ease-in-out;
}

/* 3. 개별 방울 설정 (크기 및 위치) */
.bubble:nth-child(1) {
    width: 700px;
    height: 700px;
    top: -15%;
    left: -10%;
    animation-duration: 22s;
}

.bubble:nth-child(2) {
    width: 600px;
    height: 600px;
    top: 30%;
    right: -10%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    animation-duration: 35s;
    animation-delay: -7s;
}

.bubble:nth-child(3) {
    width: 500px;
    height: 500px;
    bottom: -15%;
    left: 15%;
    background: radial-gradient(circle, rgba(199, 131, 16, 0.08) 0%, transparent 70%);
    animation-duration: 28s;
    animation-delay: -3s;
}

/* 4. 부유 애니메이션 키프레임 */
@keyframes float-around {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(8%, 12%) scale(1.15) rotate(15deg);
    }
    66% {
        transform: translate(-12%, 8%) scale(0.9) rotate(-15deg);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

/* 5. 프로필 쪽 데코레이션 요소 애니메이션 (보너스) */
.float-dot {
    animation: pulse-dot 4s infinite ease-in-out;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.4); opacity: 0.9; }
}

.float-shape {
    animation: rotate-shape 12s infinite linear;
}

@keyframes rotate-shape {
    from { transform: rotate(-32deg); }
    to { transform: rotate(328deg); }
}