/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 基础样式 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #333;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 容器 */
.container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    z-index: 1;
}

/* 背景动画 */
.background-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

/* 星星动画 */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
}

.stars::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
    box-shadow: 
        100px 50px white, 200px 100px white, 300px 150px white,
        400px 200px white, 500px 250px white, 600px 300px white,
        700px 350px white, 800px 400px white, 900px 450px white,
        1000px 500px white, 1100px 550px white, 1200px 600px white;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* 烟花效果 - Canvas */
#fireworksCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* 头部样式 */
.header {
    text-align: center;
    margin: 40px 0;
    animation: fadeInDown 1s ease-out;
}

.title {
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    animation: pulse 2s infinite;
}

.subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 倒计时样式 */
.countdown-section {
    text-align: center;
    margin: 60px 0;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.countdown-title {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.countdown-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 20px 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 120px;
    transition: all 0.3s ease;
}

.countdown-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.countdown-number {
    font-size: 3rem;
    font-weight: bold;
    color: #667eea;
    display: block;
    line-height: 1;
}

.countdown-label {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 祝福卡片样式 */
.blessing-section {
    display: flex;
    justify-content: center;
    margin: 60px 0;
    animation: fadeInUp 1s ease-out 0.6s both;
}

.blessing-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blessing-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.card-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(102, 126, 234, 0.1) 50%, transparent 70%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.blessing-title {
    font-size: 1.8rem;
    color: #667eea;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.carousel-container {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blessing-carousel {
    display: flex;
    transition: transform 0.5s ease;
    width: 100%;
}

.blessing-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #333;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    min-width: 100%;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.blessing-text.active {
    opacity: 1;
    position: relative;
    transform: translateY(0);
}

.blessing-author {
    text-align: right;
    color: #666;
    font-style: italic;
    margin-top: 30px;
}

/* 深色主题适配 */
body.dark-theme .blessing-text {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-theme .blessing-author {
    color: rgba(255, 255, 255, 0.6);
}

/* 互动按钮样式 */
.interactive-section {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 60px 0;
    animation: fadeInUp 1s ease-out 0.9s both;
    flex-wrap: wrap;
}

.btn {
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, #56ab2f, #a8e6cf);
    color: white;
}

.btn-secondary {
    background: linear-gradient(135deg, #4ecdc4, #45b7d1);
    color: white;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(-1px);
}

/* 页脚样式 */
.footer {
    text-align: center;
    margin: 80px 0 20px;
    animation: fadeIn 1s ease-out 1.2s both;
}

.footer p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 深色主题 */
body.dark-theme {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

body.dark-theme .blessing-card,
body.dark-theme .countdown-item {
    background: rgba(30, 30, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

body.dark-theme .countdown-number {
    color: #ff6b6b;
}

body.dark-theme .countdown-label,
body.dark-theme .blessing-text,
body.dark-theme .blessing-author {
    color: rgba(255, 255, 255, 0.8);
}

body.dark-theme .blessing-title {
    color: #ff6b6b;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .countdown-title {
        font-size: 1.4rem;
    }
    
    .countdown {
        gap: 15px;
    }
    
    .countdown-item {
        min-width: 80px;
        padding: 15px 20px;
    }
    
    .countdown-number {
        font-size: 2rem;
    }
    
    .countdown-label {
        font-size: 0.8rem;
        letter-spacing: 1px;
    }
    
    .blessing-card {
        padding: 30px 20px;
    }
    
    .blessing-text {
        font-size: 1rem;
    }
    
    .interactive-section {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 80%;
        max-width: 300px;
    }
}