/* ========== Max图标雨特效 ========== */

/* 图标雨容器 */
.icon-rain-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* 图标基础样式 */
.rain-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.rain-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

/* 下雨动画 - 12个独立路径 */
@keyframes rainFall1 {
    0% {
        top: -60px;
        left: 8%;
        opacity: 0;
    }
    10% {
        opacity: 0.25;
    }
    90% {
        opacity: 0.25;
    }
    100% {
        top: 110%;
        left: 10%;
        opacity: 0;
    }
}

@keyframes rainFall2 {
    0% {
        top: -60px;
        left: 22%;
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        top: 110%;
        left: 18%;
        opacity: 0;
    }
}

@keyframes rainFall3 {
    0% {
        top: -60px;
        left: 35%;
        opacity: 0;
    }
    10% {
        opacity: 0.28;
    }
    90% {
        opacity: 0.28;
    }
    100% {
        top: 110%;
        left: 32%;
        opacity: 0;
    }
}

@keyframes rainFall4 {
    0% {
        top: -60px;
        left: 48%;
        opacity: 0;
    }
    10% {
        opacity: 0.26;
    }
    90% {
        opacity: 0.26;
    }
    100% {
        top: 110%;
        left: 50%;
        opacity: 0;
    }
}

@keyframes rainFall5 {
    0% {
        top: -60px;
        left: 62%;
        opacity: 0;
    }
    10% {
        opacity: 0.32;
    }
    90% {
        opacity: 0.32;
    }
    100% {
        top: 110%;
        left: 65%;
        opacity: 0;
    }
}

@keyframes rainFall6 {
    0% {
        top: -60px;
        left: 75%;
        opacity: 0;
    }
    10% {
        opacity: 0.27;
    }
    90% {
        opacity: 0.27;
    }
    100% {
        top: 110%;
        left: 78%;
        opacity: 0;
    }
}

@keyframes rainFall7 {
    0% {
        top: -60px;
        left: 88%;
        opacity: 0;
    }
    10% {
        opacity: 0.29;
    }
    90% {
        opacity: 0.29;
    }
    100% {
        top: 110%;
        left: 92%;
        opacity: 0;
    }
}

@keyframes rainFall8 {
    0% {
        top: -60px;
        left: 15%;
        opacity: 0;
    }
    10% {
        opacity: 0.24;
    }
    90% {
        opacity: 0.24;
    }
    100% {
        top: 110%;
        left: 12%;
        opacity: 0;
    }
}

@keyframes rainFall9 {
    0% {
        top: -60px;
        left: 42%;
        opacity: 0;
    }
    10% {
        opacity: 0.31;
    }
    90% {
        opacity: 0.31;
    }
    100% {
        top: 110%;
        left: 40%;
        opacity: 0;
    }
}

@keyframes rainFall10 {
    0% {
        top: -60px;
        left: 68%;
        opacity: 0;
    }
    10% {
        opacity: 0.26;
    }
    90% {
        opacity: 0.26;
    }
    100% {
        top: 110%;
        left: 70%;
        opacity: 0;
    }
}

@keyframes rainFall11 {
    0% {
        top: -60px;
        left: 28%;
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        top: 110%;
        left: 25%;
        opacity: 0;
    }
}

@keyframes rainFall12 {
    0% {
        top: -60px;
        left: 82%;
        opacity: 0;
    }
    10% {
        opacity: 0.28;
    }
    90% {
        opacity: 0.28;
    }
    100% {
        top: 110%;
        left: 85%;
        opacity: 0;
    }
}

/* 360度慢速自转动画 */
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 应用动画到各个图标（心形） */
.rain-icon.heart-1 { animation: rainFall1 28s linear infinite, rotate360 28s linear infinite; }
.rain-icon.heart-2 { animation: rainFall2 32s linear infinite 3s, rotate360 32s linear infinite 3s; }
.rain-icon.heart-3 { display: none; } /* 减少密集度 */
.rain-icon.heart-4 { display: none; } /* 减少密集度 */

/* 应用动画到各个图标（星光） */
.rain-icon.sparkles-1 { animation: rainFall5 30s linear infinite 2s, rotate360 30s linear infinite 2s; }
.rain-icon.sparkles-2 { animation: rainFall6 35s linear infinite 5s, rotate360 35s linear infinite 5s; }
.rain-icon.sparkles-3 { display: none; } /* 减少密集度 */
.rain-icon.sparkles-4 { display: none; } /* 减少密集度 */

/* 应用动画到各个图标（灯泡） */
.rain-icon.lightbulb-1 { animation: rainFall9 25s linear infinite 1s, rotate360 25s linear infinite 1s; }
.rain-icon.lightbulb-2 { display: none; } /* 减少密集度 */
.rain-icon.lightbulb-3 { display: none; } /* 减少密集度 */
.rain-icon.lightbulb-4 { display: none; } /* 减少密集度 */

/* 响应式设计 - 平板 */
@media (max-width: 768px) {
    .rain-icon {
        width: 48px;
        height: 48px;
    }
    
    /* 减少图标数量 */
    .rain-icon.heart-3,
    .rain-icon.sparkles-3 {
        display: none;
    }
}

/* 响应式设计 - 手机 */
@media (max-width: 480px) {
    .rain-icon {
        width: 40px;
        height: 40px;
    }
    
    /* 进一步减少图标 */
    .rain-icon.heart-2,
    .rain-icon.sparkles-2 {
        display: none;
    }
}

/* 减少动画效果（用户偏好设置） */
@media (prefers-reduced-motion: reduce) {
    .rain-icon {
        animation: none !important;
        display: none;
    }
}