/* ========================================
   云朵质感 UI 组件
   柔软、蓬松、温暖的质感
   ======================================== */

/* 云朵背景 */
.cloud-bg {
    background: 
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 249, 240, 0.6) 0%, transparent 50%),
        linear-gradient(180deg, #FFFDF9 0%, #FFF9F0 100%);
}

/* 云朵卡片 */
.cloud-card {
    background: linear-gradient(180deg, 
        #FFFFFF 0%, 
        #FFF9F0 100%);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 
        0 8px 32px rgba(255, 179, 71, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 2px 10px rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 179, 71, 0.08);
    position: relative;
    overflow: hidden;
}

/* 云朵卡片 - 悬停效果 */
.cloud-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 40px rgba(255, 179, 71, 0.18),
        0 4px 12px rgba(0, 0, 0, 0.06),
        inset 0 2px 10px rgba(255, 255, 255, 1);
}

/* 云朵按钮 */
.cloud-btn {
    background: linear-gradient(180deg, 
        #FFC068 0%, 
        #FFB347 50%, 
        #FF9F43 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 
        0 6px 20px rgba(255, 179, 71, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 2px 10px rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
}

.cloud-btn::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 40%;
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0) 100%);
    border-radius: 50%;
    pointer-events: none;
}

.cloud-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 10px 30px rgba(255, 179, 71, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 2px 10px rgba(255, 255, 255, 0.7);
}

.cloud-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 
        0 4px 12px rgba(255, 179, 71, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.08),
        inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 云朵输入框 */
.cloud-input {
    background: linear-gradient(180deg, 
        #FFFFFF 0%, 
        #FFF9F0 100%);
    border: 2px solid rgba(255, 179, 71, 0.15);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 15px;
    color: #5D4E37;
    box-shadow: 
        0 2px 8px rgba(255, 179, 71, 0.08),
        inset 0 2px 6px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.cloud-input:focus {
    outline: none;
    border-color: rgba(255, 179, 71, 0.3);
    box-shadow: 
        0 4px 12px rgba(255, 179, 71, 0.15),
        inset 0 2px 6px rgba(255, 255, 255, 0.9);
}

/* 云朵标签 */
.cloud-tag {
    background: linear-gradient(135deg, 
        rgba(255, 179, 71, 0.15) 0%, 
        rgba(255, 159, 67, 0.1) 100%);
    color: #FF9F43;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 179, 71, 0.2);
    box-shadow: 0 2px 6px rgba(255, 179, 71, 0.15);
}

/* 云朵阴影（通用） */
.cloud-shadow {
    box-shadow: 
        0 8px 24px rgba(255, 179, 71, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 2px 10px rgba(255, 255, 255, 0.9);
}

/* 微质感噪点（云朵纹理） */
.cloud-texture {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
}

/* 柔和光晕 */
.soft-glow {
    box-shadow: 
        0 0 20px rgba(255, 179, 71, 0.3),
        0 0 40px rgba(255, 179, 71, 0.15);
}

/* 云朵动画 */
@keyframes cloud-float {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-8px);
    }
}

.cloud-float {
    animation: cloud-float 3s ease-in-out infinite;
}