:root {
    --bg-dark: #050510;
    --env-bg: #85182a;     /* 深红色 */
    --env-dark: #4a0c16;   /* 信封内衬极深红 */
    --env-side: #961b2f;   /* 侧翼 */
    --env-bottom: #7a1525; /* 底翼 */
    --text-color: #2c2c2c;
    --primary-gold: #d4af37;
    --gold-glow: rgba(212, 175, 55, 0.6);
}

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

body, html {
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    font-family: 'Noto Serif SC', serif;
    overflow: hidden;
    color: #fff;
}

/* 高级流体背景 */
.ambient-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.blob {
    position: absolute;
    filter: blur(90px);
    opacity: 0.5;
    animation: moveBlob 20s infinite alternate ease-in-out;
}
.blob-1 {
    width: 500px; height: 500px;
    background: #4a0c16;
    top: -100px; left: -100px;
}
.blob-2 {
    width: 600px; height: 600px;
    background: #1d1540;
    bottom: -200px; right: -100px;
    animation-delay: -5s;
}

@keyframes moveBlob {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 150px) scale(1.2); }
}

#starsCanvas, #hearts-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

.container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10;
    perspective: 1500px; /* Enhanced 3D depth */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease;
}

#textCanvas {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 50;
    pointer-events: none;
}

/* 神秘光芒特效 */
.light-rays {
    position: absolute;
    width: 1000px; height: 1000px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(212, 175, 55, 0.1) 30deg,
        transparent 60deg,
        rgba(255, 255, 255, 0.05) 90deg,
        transparent 120deg,
        rgba(212, 175, 55, 0.1) 150deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.05) 210deg,
        transparent 240deg,
        rgba(212, 175, 55, 0.1) 270deg,
        transparent 300deg,
        rgba(255, 255, 255, 0.05) 330deg,
        transparent 360deg
    );
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 2s ease, transform 2s ease;
    z-index: 1;
    transform: scale(0.1) rotate(0deg);
    filter: blur(15px);
}

.envelope-wrapper.opened .light-rays {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: spinRays 40s linear infinite;
}

@keyframes spinRays {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1) rotate(360deg); }
}

.envelope-wrapper {
    position: relative;
    width: 340px;
    height: 230px;
    cursor: pointer;
    transition: transform 0.4s ease-out, filter 0.4s;
    /* 悬浮由JS parallax 控制 */
    z-index: 20;
    transform-style: preserve-3d;
}

.envelope-wrapper.opened {
    /* 打开后信封下沉并产生3D倾斜，为信纸腾出空间 */
    transform: translateY(140px) rotateX(10deg) !important;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.envelope {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--env-dark);
    border-radius: 8px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 40px rgba(133, 24, 42, 0.4);
    transform-style: preserve-3d;
}

/* 金色边缘流光发光特效 */
.glow-effect {
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    border-radius: 9px;
    background: linear-gradient(45deg, transparent 40%, var(--primary-gold) 50%, transparent 60%);
    z-index: -1;
    background-size: 200%;
    opacity: 0;
    transition: opacity 0.5s;
}
.envelope-wrapper:hover .glow-effect {
    opacity: 0.8;
    animation: goldSweep 3s linear infinite;
}
@keyframes goldSweep {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* 信封边缘设计 */
.top-flap {
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-left: 170px solid transparent;
    border-right: 170px solid transparent;
    border-top: 135px solid var(--env-bg);
    transform-origin: top;
    z-index: 5;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.5s;
    border-radius: 8px 8px 0 0;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.4));
}
.envelope.open .top-flap {
    transform: rotateX(180deg);
    z-index: 1;
}

.side-flaps {
    position: absolute;
    top: 0; left: 0; width: 0; height: 0;
    border-top: 115px solid transparent;
    border-bottom: 115px solid transparent;
    border-left: 170px solid var(--env-side);
    border-right: 170px solid var(--env-side);
    z-index: 4;
}

.bottom-flap {
    position: absolute;
    bottom: 0; left: 0; width: 0; height: 0;
    border-left: 170px solid transparent;
    border-right: 170px solid transparent;
    border-bottom: 135px solid var(--env-bottom);
    z-index: 4;
    border-radius: 0 0 8px 8px;
    filter: drop-shadow(0 -5px 15px rgba(0,0,0,0.3));
}

/* 高级复古火漆印章 */
.wax-seal {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b 60%, #8b6508);
    border-radius: 50%;
    z-index: 6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Great Vibes', cursive;
    color: #fffcf0;
    font-size: 22px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wax-seal::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
}
.envelope-wrapper:hover .wax-seal {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4), inset 0 2px 5px rgba(255,255,255,0.4);
}
.envelope.open .wax-seal {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(180deg);
    pointer-events: none;
}

/* 高级质感信纸 */
.letter {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 210px;
    background: #faf9f6;
    border-radius: 8px;
    z-index: 2;
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 25px 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1) inset, 0 5px 15px rgba(0,0,0,0.2);
    /* 极淡的纸张纹理感 */
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e0d8c8;
}

/* 英文背景水印 */
.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: 'Great Vibes', cursive;
    font-size: 80px;
    color: rgba(212, 175, 55, 0.08);
    pointer-events: none;
    z-index: 0;
}

.envelope.open .letter {
    bottom: 20px;
    transform: translateX(-50%) translateY(0) scale(1);
    z-index: 7;
    height: 560px;
    width: 340px;
    box-shadow: 0 35px 70px rgba(0,0,0,0.6), 0 0 50px rgba(212, 175, 55, 0.2);
    border: 1px solid #d4af37; /* 金边 */
}

.letter-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

/* 高级文字渐显出场动画: 加入模糊滤镜效果 */
.reveal-text {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(20px);
    transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.envelope.open .reveal-text {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* 延迟序列拉长，增加娓娓道来的高级感 */
.delay-1 { transition-delay: 1.0s; }
.delay-2 { transition-delay: 1.5s; }
.delay-3 { transition-delay: 2.3s; }
.delay-4 { transition-delay: 3.5s; }
.delay-5 { transition-delay: 4.8s; }
.delay-6 { transition-delay: 6.0s; }
.delay-7 { transition-delay: 6.8s; }

.letter h1 {
    font-family: 'Ma Shan Zheng', cursive;
    color: #6b0f1a;
    margin: 5px 0;
    font-size: 34px;
    letter-spacing: 4px;
    text-shadow: 1px 1px 2px rgba(107, 15, 26, 0.1);
}

/* 优雅的分割线 */
.divider {
    height: 1px;
    width: 60%;
    margin: 8px auto;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
}

.letter .message {
    font-size: 13.5px;
    line-height: 1.9;
    margin: 5px 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    overflow: hidden;
    color: #333;
    letter-spacing: 0.5px;
}

.letter .message p {
    margin: 7px 0;
    font-weight: 400; /* 使用细体更显优雅 */
    text-indent: 2em;
    color: #444;
}

.letter .message .highlight {
    color: #9e1b27;
    font-weight: 700;
    font-size: 16px;
    margin-top: 15px;
    font-family: 'Ma Shan Zheng', cursive;
    letter-spacing: 2px;
    text-align: center;
    text-indent: 0;
}

.letter .signature {
    font-style: italic;
    text-align: right;
    margin-top: 5px;
    font-family: 'Noto Serif SC', serif;
    font-weight: 700;
    color: #6b0f1a;
    font-size: 15px;
    letter-spacing: 2px;
}

.hint-text {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -70px;
    font-size: 16px;
    letter-spacing: 6px;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
    animation: fadeHint 3s infinite alternate;
}

.envelope.open ~ .hint-text, .envelope-wrapper.opened .hint-text {
    opacity: 0;
    animation: none;
    transition: opacity 0.8s ease;
}

@keyframes fadeHint {
    0% { opacity: 0.3; transform: translateY(0); }
    100% { opacity: 0.9; transform: translateY(-5px); }
}

/* 动效：萤火虫和爱心 */
.flying-particle {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    animation: floatParticle cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes floatParticle {
    0% { transform: translateY(0) scale(0) rotate(0deg); opacity: 0; }
    15% { opacity: 1; transform: translateY(-30px) scale(1) rotate(15deg); }
    85% { opacity: 0.9; }
    100% { transform: translateY(-100vh) scale(0.5) rotate(180deg); opacity: 0; }
}

/* 音乐控制按钮 */
.music-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1000;
    font-size: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    animation: rotateMusic 4s linear infinite;
    animation-play-state: paused;
    opacity: 0.6;
    transition: opacity 0.3s;
}
.music-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}
.music-btn.playing {
    animation-play-state: running;
    opacity: 1;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}
@keyframes rotateMusic {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 复古邮戳 */
.postmark {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 65px;
    height: 65px;
    border: 2px dashed rgba(212, 175, 55, 0.5);
    border-radius: 50%;
    z-index: 4;
    transform: rotate(15deg);
    pointer-events: none;
    opacity: 0.8;
}
.postmark::before {
    content: 'LOVE';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Great Vibes', cursive;
    color: rgba(212, 175, 55, 0.6);
    font-size: 18px;
    letter-spacing: 2px;
}
.postmark::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
}

/* 丝带装饰 */
.ribbon {
    position: absolute;
    top: 135px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 30px;
    z-index: 5;
    pointer-events: none;
}
.ribbon-left, .ribbon-right {
    position: absolute;
    width: 65px;
    height: 20px;
    background: linear-gradient(to right, #b01b2e, #85182a);
    top: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.ribbon-left {
    right: 50%;
    transform-origin: right center;
    transform: rotate(20deg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 15% 50%, 0 0);
}
.ribbon-right {
    left: 50%;
    transform-origin: left center;
    transform: rotate(-20deg);
    background: linear-gradient(to left, #b01b2e, #85182a);
    clip-path: polygon(0 0, 0 100%, 100% 100%, 85% 50%, 100% 0);
}
.envelope.open .ribbon {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.5s ease;
}

/* 信纸内边框 */
.inner-border {
    position: absolute;
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
}

/* 复古角花 */
.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(212, 175, 55, 0.8);
    pointer-events: none;
    z-index: 0;
}
.corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; }

/* 霸道拦截弹窗 */
.question-modal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    visibility: visible;
}

.question-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

.question-box {
    background: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 20px rgba(212, 175, 55, 0.3);
    border: 1px solid #d4af37;
    width: 320px;
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.question-modal.hidden .question-box {
    transform: scale(0.8);
}

.question-title {
    font-family: 'Ma Shan Zheng', cursive;
    color: #6b0f1a;
    font-size: 32px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.question-text {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
    font-weight: bold;
}

.question-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.btn-yes, .btn-no {
    flex: 1;
    padding: 12px 0;
    font-size: 16px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Noto Serif SC', serif;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btn-yes {
    background: linear-gradient(45deg, #ff4d6d, #9e1b27);
    color: white;
    box-shadow: 0 4px 10px rgba(158, 27, 39, 0.4);
}

.btn-yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(158, 27, 39, 0.6);
}

.btn-no {
    background: #e0e0e0;
    color: #666;
}

.btn-no:hover {
    background: #ccc;
}

.question-warning {
    color: #d90429;
    font-size: 14px;
    margin-top: 20px;
    height: 20px;
    font-weight: bold;
    animation: none;
}

@keyframes shakeWarning {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); color: #ff0000; }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}