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

@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

/* 柳絮容器 */
#willow-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;
}

/* 柳絮基础样式 */
.willow-seed {
    position: absolute;
    top: -10px;
    pointer-events: none;
    opacity: 0;
    animation: willowFloat linear forwards;
    will-change: transform, opacity;
}

.willow-seed::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5% 60% 5% 60%;
    transform: rotate(-25deg);
    background: linear-gradient(135deg, var(--leaf-color, #7cb342), var(--leaf-color2, #558b2f));
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

.willow-seed::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) rotate(-25deg);
    width: 1px;
    height: 70%;
    background: rgba(255,255,255,.25);
    border-radius: 1px;
}

@keyframes willowFloat {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg) scale(.7);
        opacity: .85;
    }
    12% {
        transform: translateY(10vh) translateX(18px) rotate(60deg) scale(.9);
        opacity: .8;
    }
    28% {
        transform: translateY(25vh) translateX(-28px) rotate(140deg) scale(1);
        opacity: .75;
    }
    45% {
        transform: translateY(42vh) translateX(32px) rotate(230deg) scale(.95);
        opacity: .7;
    }
    60% {
        transform: translateY(58vh) translateX(-34px) rotate(320deg) scale(.85);
        opacity: .6;
    }
    75% {
        transform: translateY(75vh) translateX(22px) rotate(400deg) scale(.7);
        opacity: .4;
    }
    90% {
        transform: translateY(92vh) translateX(-16px) rotate(480deg) scale(.5);
        opacity: .2;
    }
    100% {
        transform: translateY(110vh) translateX(8px) rotate(540deg) scale(.3);
        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: 0;
    transform: translate(-50%, -50%) rotate(-2deg) skewX(-3deg);
    font-size: 8rem;
    font-weight: normal;
    font-family: 'Ma Shan Zheng', 'STXingkai', 'STKaiti', 'KaiTi', '华文行楷', '楷体', 'FangSong', '仿宋', cursive, serif;
    letter-spacing: .15em;
    background: linear-gradient(135deg, #66bb6a, #aed581, #81c784, #4caf50);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 15px rgba(102, 187, 106, .5), 0 0 40px rgba(76, 175, 80, .4);
    -webkit-text-stroke: 1px rgba(102, 187, 106, .15);
    z-index: 1003;
    opacity: 0;
    animation: springTitleFade 5s ease-in-out forwards,
               springTitleGradientShift 5s ease-in-out forwards;
    pointer-events: none;
    will-change: opacity, filter;
}

@keyframes springTitleGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 春季标题模糊到清晰再淡出动画 */
@keyframes springTitleFade {
    0% {
        opacity: 0;
        filter: blur(12px);
    }
    15% {
        opacity: 1;
        filter: blur(0px);
    }
    80% {
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        filter: blur(4px);
    }
}

/* 春季模式下的页面背景 */
.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);
}

/* 春季模式下的页脚 */
body.spring-mode .site-footer {
    background: linear-gradient(180deg, rgba(240, 255, 240, .95), rgba(200, 230, 201, .92));
    border-top: 1px solid rgba(129, 199, 132, .25);
    color: #2e7d32;
}

body.spring-mode .footer-heading {
    color: #388e3c;
    text-shadow: 0 0 6px rgba(102, 187, 106, .3);
}

body.spring-mode .social-link {
    background-color: rgba(102, 187, 106, .08);
    border: 1px solid rgba(129, 199, 132, .25);
    color: #388e3c;
}

body.spring-mode .social-link:hover {
    background-color: rgba(102, 187, 106, .18);
    border-color: #66bb6a;
    color: #2e7d32;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(102, 187, 106, .25);
}

body.spring-mode .footer-link {
    color: #388e3c;
}

body.spring-mode .footer-link:hover {
    color: #1b5e20;
    text-decoration: underline;
    text-decoration-color: #66bb6a;
}

body.spring-mode .footer-copyright {
    color: rgba(46, 125, 50, .55);
}

/* ========== 手机端标题适配 ========== */
@media (max-width: 768px) {
    .spring-title {
        font-size: 5.5rem;
        letter-spacing: .12em;
        -webkit-text-stroke: 0.5px rgba(102, 187, 106, .12);
    }
}