/* ═══════════════════════════════════════════════
   🎨 表白网站 - 优化版（快速加载）
   ═══════════════════════════════════════════════ */

:root {
    --primary: #ff6b9d;
    --primary-light: #ff8fab;
    --secondary: #ffc2d1;
    --accent: #e0aaff;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, "Microsoft YaHei", sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    color: #fff;
}

/* ========== 背景图（修改这里换背景） ==========
 * 把图片放到 img/bg.jpg 即可自动显示！ */
.bg-image {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('img/bg.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: bg-zoom 25s ease-in-out infinite alternate;
}

@keyframes bg-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

/* 没有背景图时的默认渐变 */
.bg-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(201,24,74,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(123,44,191,0.12) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(10,10,30,0.3), rgba(10,10,30,0.55));
    z-index: 1;
    pointer-events: none;
}

.aurora-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,107,157,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 0% 50%, rgba(224,170,255,0.1) 0%, transparent 55%);
    animation: aurora-move 8s ease-in-out infinite alternate;
}
@keyframes aurora-move {
    0% { opacity: 0.25; }
    100% { opacity: 0.45; }
}

/* ========== 粒子（减少数量提升速度） ========== */
#particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.particle-heart {
    position: absolute;
    font-size: 16px;
    animation: float-up 14s linear infinite;
}
.particle-circle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    animation: float-up 18s linear infinite;
}

@keyframes float-up {
    0% { transform: translateY(110vh); opacity: 0; }
    15% { opacity: 0.7; }
    85% { opacity: 0.6; }
    100% { transform: translateY(-5vh) rotate(360deg); opacity: 0; }
}

/* ========== 容器 ========== */
.container {
    max-width: 550px;
    margin: 0 auto;
    padding: 25px 18px;
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ========== 信封动画 ========== */
.intro-screen { display: none; flex-direction: column; align-items: center; justify-content: center; }
.intro-screen.active { display: flex; animation: fadeIn 0.5s ease-out; }

.envelope-wrapper { position: relative; display: inline-block; }
.envelope-glow {
    position: absolute; top: -18px; left: -18px; right: -18px; bottom: -35px;
    background: radial-gradient(ellipse, rgba(255,107,157,0.35) 0%, transparent 70%);
    border-radius: 50%;
    animation: glow-pulse 2.2s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

.envelope {
    width: 200px; height: 135px; cursor: pointer;
    transition: all 0.35s ease;
    filter: drop-shadow(0 18px 35px rgba(255,107,157,0.4));
}
.envelope:hover { transform: scale(1.07) translateY(-6px); }

.envelope-body {
    width: 100%; height: 100%;
    background: linear-gradient(145deg, #ffeef3 0%, #ffb3c6 50%, #ff8fab 100%);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 15px rgba(255,255,255,.4), 0 8px 30px rgba(201,24,74,.2);
}
.envelope-flap {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 68px;
    background: linear-gradient(160deg, #ffc2d1 0%, #ff85a2 100%);
    clip-path: polygon(0 0, 50% 56%, 100% 0);
    transform-origin: top;
    transition: transform 0.65s cubic-bezier(.68,-.55,.265,1.55);
    z-index: 3;
}
.envelope.open .envelope-flap { transform: rotateX(182deg); }

.heart-icon { font-size: 58px; animation: heart-beat 1.1s ease-in-out infinite; }
@keyframes heart-beat {
    0%,100%{transform:scale(1)} 25%{transform:scale(1.22)} 50%{transform:scale(1)} 75%{transform:scale(1.16)}
}

.hint-text { text-align: center; margin-top: 28px; color: var(--secondary); animation: hint-bounce 2.5s ease-in-out infinite; }
.hint-sub { display: block; margin-top: 6px; font-size: .9rem !important; color: var(--accent); opacity: .75; }
@keyframes hint-bounce { 0%,100%{opacity:.65} 50%{opacity:1; transform:translateY(-4px)} }

/* ========== 主内容 ========== */
.main-content.hidden { display: none !important; }
.main-content { width: 100%; animation: slideUp .8s ease-out; }
@keyframes slideUp { from{opacity:0;transform:translateY(45px)} to{opacity:1;transform:none} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ========== 标题 ========== */
.header { text-align: center; margin-bottom: 30px; }
.title {
    font-size: 2.8rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c9184a 50%, #7b2cbf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: titleGlow 2.5s ease-in-out infinite alternate;
}
@keyframes titleGlow {
    from{filter:drop-shadow(0 0 12px rgba(255,107,157,.45))}
    to{filter:drop-shadow(0 0 26px rgba(255,107,157,.75))}
}

.subtitle-container { margin-top: 14px; min-height: 28px; }
.typing-text { font-size: 1.08rem; color: var(--accent); letter-spacing: 1px; }
.cursor { animation: blink .85s step-end infinite; color: var(--primary); margin-left: 2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--primary), transparent); }
.diamond { font-size: 11px; animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== 毛玻璃卡片 ========== */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 32px 28px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(255,107,157,.18);
    transition: all .4s ease;
}
.glass-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(255,107,157,.32); }

.card-shine {
    position: absolute; top: -100%; left: -50%;
    width: 200%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.05) 48%, rgba(255,255,255,.1) 52%, transparent);
    transform: skewY(-12deg);
    transition: top .5s;
}
.glass-card:hover .card-shine { top: 150%; }

.card-inner { position: relative; z-index: 1; }

.corner-decoration {
    position: absolute; font-size: 18px; opacity: .55;
    animation: cornerPulse 3s ease-in-out infinite;
}
.corner-decoration.tl { top: 10px; left: 12px; }
.corner-decoration.tr { top: 10px; right: 12px; animation-delay: .75s; }
@keyframes cornerPulse { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.85;transform:scale(1.12)} }

.letter-content { text-align: center; }

.letter-paragraph {
    font-size: 1.05rem; line-height: 1.95;
    color: rgba(255,255,255,.92);
    margin-bottom: 9px;
    opacity: 0; transform: translateY(22px);
    animation: paraIn .6s ease forwards;
}
.letter-paragraph:nth-child(1){animation-delay:.18s}
.letter-paragraph:nth-child(2){animation-delay:.4s}
.letter-paragraph:nth-child(3){animation-delay:.62s}
.letter-paragraph:nth-child(4){animation-delay:.84s}

@keyframes paraIn { to{opacity:1;transform:none} }

.letter-paragraph.highlight {
    font-size: 1.22rem; color: var(--secondary);
    margin-top: 18px; animation-delay: 1.1s;
}
.letter-paragraph.highlight small {
    display: block; font-size: .88em; color: var(--primary-light); margin-top: 4px;
}
.highlight-heart { display: inline-block; font-size: 1.4em; margin-left: 6px; animation: hBeat 1s ease-in-out infinite; }
@keyframes hBeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.25)} }

/* ========== 按钮 ========== */
.action-area { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }

.btn {
    padding: 15px 42px; font-size: 1.15rem;
    font-family: "Microsoft YaHei", sans-serif;
    border: none; border-radius: 55px;
    cursor: pointer; outline: none;
    transition: all .38s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}

.magic-btn {
    background: linear-gradient(135deg, #ff6b9d 0%, #c9184a 60%, #7b2cbf 100%);
    color: white;
    box-shadow: 0 8px 28px rgba(255,107,157,.45);
}
.magic-btn:hover {
    transform: scale(1.09) translateY(-2px) rotate(-2deg);
    box-shadow: 0 14px 40px rgba(255,107,157,.6);
}

.ghost-btn {
    background: rgba(255,255,255,.05);
    color: var(--accent);
    border: 2px solid rgba(224,170,255,.3);
}
.ghost-btn:hover { background: rgba(255,255,255,.1); }

/* ========== 成功消息 ========== */
.success-message.hidden { display: none !important; }
.success-message { text-align: center; animation: popIn .7s cubic-bezier(.68,-.55,.265,1.55); }
@keyframes popIn { from{opacity:0;transform:scale(.3)rotate(-8deg)} to{opacity:1;transform:none} }

.success-content { position: relative; display: inline-block; padding: 35px; }

.success-heart {
    font-size: 90px; display: inline-block;
    animation: sBeat .8s ease-in-out infinite, sFloat 3s ease-in-out infinite;
    filter: drop-shadow(0 8px 25px rgba(255,107,157,.55));
}
@keyframes sBeat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.32)} 50%{transform:scale(1)} 75%{transform:scale(1.22)} }
@keyframes sFloat { 0%,100%{transform:none} 50%{transform:translateY(-14px)} }

.success-ring {
    position: absolute; top: 50%; left: 50%;
    width: 130px; height: 130px;
    transform: translate(-50%,-50%);
    border: 3px solid var(--primary); border-radius: 50%;
    animation: ringExpand 1.5s ease-out infinite;
}
@keyframes ringExpand { 0%{transform:translate(-50%,-50%) scale(.5);opacity:1} 100%{transform:translate(-50%,-50%) scale(2.4);opacity:0} }

.success-title { font-size: 2.5rem; color: var(--secondary); margin: 15px 0 8px; text-shadow: 0 0 35px rgba(255,107,157,.65); }
.success-desc { font-size: 1.18rem; color: var(--accent); margin-bottom: 16px; }
.love-counter { font-size: 1.22rem; color: #ffd700; }
#loveCount { font-size: 1.6rem; font-weight: bold; animation: countPulse 1s ease-in-out infinite; }
@keyframes countPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

.extra-hearts { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.flying-heart { position:absolute; font-size:22px; animation: flyUp 2.8s ease-out forwards; }
@keyframes flyUp { 0%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(-180px) scale(0) rotate(720deg)} }

/* ========== 音乐按钮 ========== */
.floating-btn {
    position: fixed; bottom: 25px; right: 25px;
    width: 54px; height: 54px; border-radius: 50%;
    border: 2px solid rgba(255,107,157,.38);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 1000; transition: all .35s;
    box-shadow: 0 6px 26px rgba(0,0,0,.18);
}
.floating-btn:hover { transform: scale(1.1); background: rgba(255,107,157,.13); }
.music-icon { font-size: 23px; transition: transform .3s; }
.floating-btn.playing .music-icon { display: none !important; }
.music-waves {
    display: none; align-items: flex-end; gap: 3px; height: 18px;
}
.music-waves span {
    width: 4px; background: var(--primary); border-radius: 2px;
    animation: waveBar .8s ease-in-out infinite;
}
.music-waves span:nth-child(1) { height: 7px; animation-delay: 0s; }
.music-waves span:nth-child(2) { height: 14px; animation-delay: .15s; }
.music-waves span:nth-child(3) { height: 10px; animation-delay: .3s; }
@keyframes waveBar { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.35)} }

.floating-btn.playing { animation: musicPulse 1.5s ease-in-out infinite; }
@keyframes musicPulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,157,.38)} 50%{box-shadow:0 0 0 11px rgba(255,107,157,0)} }

.hidden { display: none !important; }

/* ========== 响应式 ========== */
@media (max-width: 500px) {
    .title { font-size: 2.2rem; }
    .glass-card { padding: 24px 20px; border-radius: 20px; }
    .letter-paragraph { font-size: .98rem; }
    .btn { padding: 13px 34px; font-size: 1.05rem; }
    .envelope { width: 170px; height: 116px; }
    .heart-icon { font-size: 48px; }
    .success-title { font-size: 2rem; }
    .success-heart { font-size: 72px; }
}