/* 春季动画效果样式 */

/* 花瓣容器 */
#petal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

/* 蝴蝶容器 */
#butterfly-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1001;
    overflow: hidden;
}

/* 花瓣基础样式 */
.petal {
    position: absolute;
    pointer-events: none;
    animation: petalFall linear infinite;
}

/* 樱花花瓣 */
.petal-sakura {
    background: radial-gradient(circle at 30% 30%, #ffb7c5, #ff91a4);
    border-radius: 50% 0 50% 50%;
    box-shadow: 0 0 5px rgba(255, 183, 197, 0.4);
}

/* 粉色花瓣 */
.petal-pink {
    background: radial-gradient(circle at 30% 30%, #ffc0cb, #ff69b4);
    border-radius: 50% 0 50% 50%;
    transform: rotate(45deg);
}

/* 白色花瓣 */
.petal-white {
    background: radial-gradient(circle at 30% 30%, #ffffff, #f0f0f0);
    border-radius: 50% 0 50% 50%;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
}

/* 花瓣飘落动画 */
@keyframes petalFall {
    0% {
        transform: translateY(-20px) rotate(0deg) translateX(0);
        opacity: 0.6;
    }
    25% {
        transform: translateY(25vh) rotate(90deg) translateX(20px);
    }
    50% {
        transform: translateY(50vh) rotate(180deg) translateX(-10px);
    }
    75% {
        transform: translateY(75vh) rotate(270deg) translateX(15px);
    }
    100% {
        transform: translateY(110vh) rotate(360deg) translateX(0);
        opacity: 0;
    }
}

/* 蝴蝶样式 */
.butterfly {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    z-index: 1002;
}

/* 春季模糊效果 */
.spring-mode .slider-container {
    filter: blur(3px);
    transition: filter 2s ease-in-out;
    background: transparent !important;
}

/* 春季标题动画 */
.spring-title {
    position: fixed;
    top: 50%;
    left: 50%;
    /* 使用 margin 来实现居中，避免动画冲突 */
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    font-weight: bold;
    /* 春季绿色渐变背景 */
    background: linear-gradient(135deg, #90EE90, #3CB371);
    /* 文字裁剪实现渐变文字效果 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 添加绿色文字阴影增强效果 */
    text-shadow: 0 0 10px rgba(144, 238, 144, 0.8), 0 0 30px rgba(60, 179, 113, 0.6);
    /* 添加边框效果增强立体感 */
    -webkit-text-stroke: 2px rgba(144, 238, 144, 0.3);
    z-index: 1003;
    opacity: 0;
    /* 初始状态就居中显示 */
    animation: springTitleFade 5s ease-in-out forwards;
    pointer-events: none;
    /* 确保元素从开始就正确定位 */
    will-change: opacity, filter;
}

/* 春季标题模糊到清晰再淡出动画 */
@keyframes springTitleFade {
    0% {
        opacity: 0;
        filter: blur(10px);
        text-shadow: 0 0 20px rgba(144, 238, 144, 0.8), 0 0 40px rgba(60, 179, 113, 0.5);
    }
    20% {
        opacity: 1;
        filter: blur(0px);
        text-shadow: 0 0 30px rgba(144, 238, 144, 1), 0 0 60px rgba(60, 179, 113, 0.8);
    }
    80% {
        opacity: 1;
        filter: blur(0px);
        text-shadow: 0 0 30px rgba(144, 238, 144, 1), 0 0 60px rgba(60, 179, 113, 0.8);
    }
    100% {
        opacity: 0;
        filter: blur(0px);
        text-shadow: 0 0 40px rgba(144, 238, 144, 1), 0 0 80px rgba(60, 179, 113, 0.8);
    }
}

/* 春季模式下的页面背景 */
.spring-mode {
    background: linear-gradient(135deg, #f0fff0 0%, #e8f5e9 50%, #f1f8e9 100%);
    color: #2e7d32;
}

/* 春季模式下的链接和文本颜色 */
.spring-mode a {
    color: #388e3c;
}

.spring-mode a:hover {
    color: #2e7d32;
}

/* 春季模式下的按钮样式 */
.spring-mode .btn-primary {
    background: linear-gradient(135deg, #66bb6a, #43a047);
    border: none;
    box-shadow: 0 4px 15px rgba(102, 187, 106, 0.4);
}

.spring-mode .btn-primary:hover {
    background: linear-gradient(135deg, #57a75a, #388e3c);
    box-shadow: 0 6px 20px rgba(102, 187, 106, 0.6);
}

/* 春季模式下的卡片样式 */
.spring-mode .card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(129, 199, 132, 0.3);
    box-shadow: 0 4px 20px rgba(129, 199, 132, 0.15);
}

.spring-mode .card:hover {
    box-shadow: 0 8px 30px rgba(129, 199, 132, 0.25);
}

/* 春季阳光光晕效果 */
.spring-mode::before {
    content: '';
    position: fixed;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 223, 128, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: sunGlow 8s ease-in-out infinite alternate;
}

@keyframes sunGlow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* 春季模式下的导航栏 */
.spring-mode .navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(129, 199, 132, 0.3);
}

/* 春季模式下的页脚 */
.spring-mode .footer {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-top: 1px solid rgba(129, 199, 132, 0.3);
}