/* 春季场景样式 - 合并雨幕效果、外卖员样式和对话气泡动画 */

/* Logo样式 */
.spring-logo {
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.spring-logo img {
    width: 250px;
    height: auto;
    display: block;
}

/* 雨幕效果 - 使用PNG图片 */
.rain {
    position: absolute;
    width: 100%;
    height: 200%;
    background-image: url('https://www.chinanews.com.cn/fileftp/2025/11/2025-11-27/U947P4T47D55827F24534DT20251127193356.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    animation: rain 1.5s linear infinite;
    opacity: 0.7;
}

@keyframes rain {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}

/* 外卖员样式优化 - 使用图片模拟眨眼效果 */

/* 外卖员基础样式 */
.delivery-person {
    position: absolute;
    width: 155px;
    height: 368px;
    left: 10%;
    bottom: 12%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url('https://www.chinanews.com.cn/fileftp/2025/12/2025-12-08/U947P4T47D55853F29953DT20251209100923.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 眨眼动画 - 使用图片切换 */
@keyframes blink {
    0%, 90%, 100% {
        background-image: url('https://www.chinanews.com.cn/fileftp/2025/12/2025-12-08/U947P4T47D55853F29953DT20251209100923.png');
    }
    95% {
        background-image: url('https://www.chinanews.com.cn/fileftp/2025/12/2025-12-08/U947P4T47D55853F29952DT20251209100923.png');
    }
}

/* 应用眨眼动画 - 参照夏季环卫工人实现 */
.delivery-person {
    animation: blink 4s infinite; /* 4秒内完成眨眼动画，无限循环 */
    /* 添加过渡效果使图片切换更平滑 */
    transition: background-image 0.1s ease-in-out;
}

/* 对话气泡动画效果 */

/* 对话气泡基础样式 */
.speech-bubble {
    position: absolute;
    width: 180px;
    padding: 12px;
    border-radius: 12px;
    left: 33%;
    top: 38%;
    z-index: 5;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    opacity: 0; /* 初始隐藏 */
    transform: translateY(10px); /* 初始位置稍下 */
    transition: opacity 0.2s ease, transform 0.2s ease; /* 平滑过渡效果 */
}

/* 场景显示后2秒显示对话气泡 */
#spring:not(.hidden) ~ .speech-bubble,
#spring:not(.hidden) .speech-bubble {
    animation: showSpeechBubble 0.2s ease 2s forwards;
}

/* 显示对话气泡的动画 */
@keyframes showSpeechBubble {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}