/* 统一的背景装饰元素样式 */
/* 用于home、about、privacy、terms等前台页面 */

.floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* 限制最多3个gentle-circle */
.gentle-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, 
        rgba(107, 141, 181, 0.08) 0%, 
        rgba(143, 168, 199, 0.06) 50%, 
        rgba(168, 192, 212, 0.04) 100%);
    animation: gentleFloat 8s ease-in-out infinite;
    backdrop-filter: blur(1px);
}

/* 第一个gentle-circle - 随机位置和大小 */
.gentle-circle:nth-child(1),
.gentle-circle.bg-circle-1 {
    width: 120px;
    height: 120px;
    top: 15%;
    left: 8%;
    animation-delay: 0s;
    opacity: 0.6;
}

/* 第二个gentle-circle - 随机位置和大小 */
.gentle-circle:nth-child(2),
.gentle-circle.bg-circle-2 {
    width: 180px;
    height: 180px;
    top: 60%;
    right: 12%;
    animation-delay: 3s;
    opacity: 0.4;
}

/* 第三个gentle-circle - 随机位置和大小 */
.gentle-circle:nth-child(3),
.gentle-circle.bg-circle-3 {
    width: 90px;
    height: 90px;
    top: 35%;
    left: 70%;
    animation-delay: 6s;
    opacity: 0.5;
}

/* 限制最多1个小红心 */
.floating-heart {
    position: absolute;
    width: 24px;
    height: 24px;
    animation: heartFloat 6s ease-in-out infinite;
    opacity: 0.7;
}

/* 只显示第一个红心，隐藏其他红心 */
.floating-heart:nth-child(n+2) {
    display: none;
}

.floating-heart:first-of-type,
.floating-heart.heart-1 {
    top: 25%;
    right: 20%;
    animation-delay: 2s;
}

/* 隐藏多余的红心 */
.floating-heart.heart-2,
.floating-heart.heart-3,
.floating-heart.heart-4 {
    display: none !important;
}

/* 浮动圆圈样式（保持兼容性） */
.floating-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, 
        rgba(107, 141, 181, 0.1), 
        rgba(143, 168, 199, 0.08));
    animation: float 6s ease-in-out infinite;
    display: none; /* 隐藏旧的floating-circle，使用gentle-circle替代 */
}

/* 动画定义 */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
        opacity: 0.6;
    }
    33% {
        transform: translateY(-15px) translateX(10px) rotate(120deg);
        opacity: 0.4;
    }
    66% {
        transform: translateY(10px) translateX(-8px) rotate(240deg);
        opacity: 0.8;
    }
}

@keyframes heartFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-12px) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .gentle-circle:nth-child(1),
    .gentle-circle.bg-circle-1 {
        width: 80px;
        height: 80px;
        top: 10%;
        left: 5%;
    }
    
    .gentle-circle:nth-child(2),
    .gentle-circle.bg-circle-2 {
        width: 120px;
        height: 120px;
        top: 70%;
        right: 8%;
    }
    
    .gentle-circle:nth-child(3),
    .gentle-circle.bg-circle-3 {
        width: 60px;
        height: 60px;
        top: 40%;
        left: 75%;
    }
    
    .floating-heart:first-of-type,
    .floating-heart.heart-1 {
        top: 20%;
        right: 15%;
    }
}

@media (max-width: 480px) {
    .gentle-circle:nth-child(1),
    .gentle-circle.bg-circle-1 {
        width: 60px;
        height: 60px;
    }
    
    .gentle-circle:nth-child(2),
    .gentle-circle.bg-circle-2 {
        width: 90px;
        height: 90px;
    }
    
    .gentle-circle:nth-child(3),
    .gentle-circle.bg-circle-3 {
        width: 45px;
        height: 45px;
    }
}