/* 中秋供应商贺卡 - 浪漫嫦娥主题 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Ma+Shan+Zheng&display=swap');

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

:root {
    --gold: #d4a017;
    --gold-light: #f5d76e;
    --gold-glow: #ffeaa7;
    --red-deep: #8b0000;
    --red-main: #c41e3a;
    --cream: #fff8e7;
    --text-dark: #2c1810;
    --night-deep: #0d1025;
    --night-mid: #1a1040;
    --night-purple: #2d1b69;
    --shadow: rgba(0, 0, 0, 0.35);
}

html { font-size: 16px; }

body {
    font-family: 'Noto Serif SC', 'SimSun', serif;
    background: linear-gradient(180deg, var(--night-deep) 0%, var(--night-mid) 35%, #1f0a20 70%, #120810 100%);
    min-height: 100vh;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* 星空 */
.bg-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.9) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 22% 38%, rgba(255,230,150,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 45% 8%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(2px 2px at 68% 22%, rgba(255,215,100,0.9) 50%, transparent 100%),
        radial-gradient(1px 1px at 85% 55%, rgba(255,255,255,0.6) 50%, transparent 100%),
        radial-gradient(1px 1px at 15% 72%, rgba(255,230,150,0.5) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 65%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1px 1px at 38% 88%, rgba(255,215,100,0.6) 50%, transparent 100%);
    animation: twinkle 6s ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* 动态星星 */
.stars-dynamic {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: var(--opacity, 0.6);
}

.star-sm {
    width: 1.5px;
    height: 1.5px;
    box-shadow: 0 0 3px rgba(255, 230, 180, 0.7);
}

.star-lg {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 6px rgba(255, 230, 150, 0.9), 0 0 12px rgba(245, 215, 110, 0.4);
}

.star:nth-child(1)  { left: 5%;  top: 8%;  --dur: 2.8s; --delay: 0s;    --opacity: 0.5; }
.star:nth-child(2)  { left: 12%; top: 22%; --dur: 3.5s; --delay: 0.4s;  --opacity: 0.7; }
.star:nth-child(3)  { left: 18%; top: 5%;  --dur: 2.2s; --delay: 1.1s;  --opacity: 0.6; }
.star:nth-child(4)  { left: 25%; top: 35%; --dur: 4s;   --delay: 0.2s;  --opacity: 0.8; }
.star:nth-child(5)  { left: 32%; top: 12%; --dur: 3s;   --delay: 1.8s;  --opacity: 0.5; }
.star:nth-child(6)  { left: 38%; top: 48%; --dur: 2.5s; --delay: 0.6s;  --opacity: 0.7; }
.star:nth-child(7)  { left: 42%; top: 18%; --dur: 3.8s; --delay: 2.2s;  --opacity: 0.6; }
.star:nth-child(8)  { left: 48%; top: 6%;  --dur: 2.4s; --delay: 0.9s;  --opacity: 0.9; }
.star:nth-child(9)  { left: 52%; top: 42%; --dur: 3.2s; --delay: 1.5s;  --opacity: 0.5; }
.star:nth-child(10) { left: 58%; top: 28%; --dur: 4.2s; --delay: 0.3s;  --opacity: 0.7; }
.star:nth-child(11) { left: 62%; top: 8%;  --dur: 2.6s; --delay: 2.5s;  --opacity: 0.6; }
.star:nth-child(12) { left: 68%; top: 52%; --dur: 3.6s; --delay: 0.7s;  --opacity: 0.8; }
.star:nth-child(13) { left: 72%; top: 15%; --dur: 2.9s; --delay: 1.2s;  --opacity: 0.5; }
.star:nth-child(14) { left: 78%; top: 38%; --dur: 3.4s; --delay: 2s;    --opacity: 0.7; }
.star:nth-child(15) { left: 82%; top: 6%;  --dur: 2.3s; --delay: 0.5s;  --opacity: 0.6; }
.star:nth-child(16) { left: 88%; top: 25%; --dur: 4s;   --delay: 1.7s;  --opacity: 0.9; }
.star:nth-child(17) { left: 92%; top: 45%; --dur: 3.1s; --delay: 0.8s;  --opacity: 0.5; }
.star:nth-child(18) { left: 8%;  top: 55%; --dur: 2.7s; --delay: 2.3s;  --opacity: 0.7; }
.star:nth-child(19) { left: 15%; top: 72%; --dur: 3.9s; --delay: 1s;    --opacity: 0.6; }
.star:nth-child(20) { left: 22%; top: 65%; --dur: 2.5s; --delay: 0.1s;  --opacity: 0.8; }
.star:nth-child(21) { left: 28%; top: 82%; --dur: 3.3s; --delay: 1.6s;  --opacity: 0.5; }
.star:nth-child(22) { left: 35%; top: 58%; --dur: 2.8s; --delay: 2.8s;  --opacity: 0.7; }
.star:nth-child(23) { left: 45%; top: 75%; --dur: 4.1s; --delay: 0.4s;  --opacity: 0.6; }
.star:nth-child(24) { left: 55%; top: 68%; --dur: 2.2s; --delay: 1.9s;  --opacity: 0.9; }
.star:nth-child(25) { left: 65%; top: 78%; --dur: 3.7s; --delay: 0.6s;  --opacity: 0.5; }
.star:nth-child(26) { left: 75%; top: 62%; --dur: 2.4s; --delay: 2.1s;  --opacity: 0.7; }
.star:nth-child(27) { left: 85%; top: 72%; --dur: 3.5s; --delay: 1.3s;  --opacity: 0.6; }
.star:nth-child(28) { left: 95%; top: 58%; --dur: 2.9s; --delay: 0.2s;  --opacity: 0.8; }
.star:nth-child(29) { left: 3%;  top: 38%; --dur: 3.8s; --delay: 1.4s;  --opacity: 0.5; }
.star:nth-child(30) { left: 50%; top: 88%; --dur: 2.6s; --delay: 2.6s;  --opacity: 0.7; }
.star:nth-child(31) { left: 60%; top: 92%; --dur: 3.2s; --delay: 0.9s;  --opacity: 0.6; }
.star:nth-child(32) { left: 70%; top: 85%; --dur: 4s;   --delay: 1.8s;  --opacity: 0.5; }
.star:nth-child(33) { left: 40%; top: 32%; --dur: 2.3s; --delay: 2.4s;  --opacity: 0.8; }
.star:nth-child(34) { left: 90%; top: 88%; --dur: 3.6s; --delay: 0.3s;  --opacity: 0.7; }
.star:nth-child(35) { left: 10%; top: 92%; --dur: 2.8s; --delay: 1.1s;  --opacity: 0.6; }
.star:nth-child(36) { left: 30%; top: 95%; --dur: 3.4s; --delay: 2s;    --opacity: 0.9; }

@keyframes starTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* 流星 */
.shooting-star {
    position: absolute;
    top: 10%;
    left: -10%;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,230,180,0.6) 100%);
    border-radius: 2px;
    transform: rotate(-35deg);
    animation: shoot 8s ease-in infinite;
    opacity: 0;
}

.shooting-star.delay {
    top: 25%;
    width: 60px;
    animation-delay: 4.5s;
    animation-duration: 10s;
}

@keyframes shoot {
    0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
    2% { opacity: 1; }
    8% { opacity: 0; transform: rotate(-35deg) translateX(120vw); }
    100% { opacity: 0; transform: rotate(-35deg) translateX(120vw); }
}

/* 漂浮光点 */
.fireflies {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-glow);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--gold-light), 0 0 16px rgba(245, 215, 110, 0.4);
    animation: floatFirefly 8s ease-in-out infinite;
    opacity: 0;
}

.firefly:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; animation-duration: 7s; }
.firefly:nth-child(2) { left: 25%; top: 60%; animation-delay: 1.5s; animation-duration: 9s; }
.firefly:nth-child(3) { left: 70%; top: 25%; animation-delay: 3s; animation-duration: 8s; }
.firefly:nth-child(4) { left: 85%; top: 70%; animation-delay: 0.8s; animation-duration: 10s; }
.firefly:nth-child(5) { left: 50%; top: 85%; animation-delay: 2.5s; animation-duration: 7.5s; }

@keyframes floatFirefly {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; }
    50% { opacity: 1; transform: translateY(-30px) scale(1); }
    80% { opacity: 0.6; }
}

.bg-lantern {
    position: fixed;
    font-size: 2.5rem;
    opacity: 0.2;
    animation: sway 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 12px rgba(255, 100, 50, 0.4));
}
.bg-lantern.left { top: 10%; left: 4%; animation-delay: 0s; }
.bg-lantern.right { top: 15%; right: 4%; animation-delay: 2.5s; }

@keyframes sway {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(4deg) translateY(-8px); }
}

/* 主容器 */
.greeting-wrapper {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 月宫场景 */
.moon-scene {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 200px;
    margin: 0 auto 1rem;
    animation: moonrise 1.4s ease-out;
}

.moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 150, 0.35) 0%, rgba(245, 215, 110, 0.12) 40%, transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

.moon-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 230, 150, 0.06) 10deg, transparent 20deg,
        transparent 40deg, rgba(255, 230, 150, 0.05) 50deg, transparent 60deg,
        transparent 80deg, rgba(255, 230, 150, 0.06) 90deg, transparent 100deg,
        transparent 120deg, rgba(255, 230, 150, 0.05) 130deg, transparent 140deg,
        transparent 160deg, rgba(255, 230, 150, 0.06) 170deg, transparent 180deg,
        transparent 200deg, rgba(255, 230, 150, 0.05) 210deg, transparent 220deg,
        transparent 240deg, rgba(255, 230, 150, 0.06) 250deg, transparent 260deg,
        transparent 280deg, rgba(255, 230, 150, 0.05) 290deg, transparent 300deg,
        transparent 320deg, rgba(255, 230, 150, 0.06) 330deg, transparent 340deg
    );
    border-radius: 50%;
    animation: raysSpin 60s linear infinite;
    opacity: 0.8;
}

@keyframes raysSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fffef5, #fff3b0 35%, #f5d76e 60%, #e6b422 85%);
    box-shadow:
        0 0 50px rgba(255, 230, 150, 0.7),
        0 0 100px rgba(245, 215, 110, 0.35),
        inset -10px -10px 24px rgba(180, 130, 20, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.moon::before {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: rgba(180, 130, 20, 0.12);
    border-radius: 50%;
    top: 28%; left: 58%;
    box-shadow: 14px 22px 0 rgba(180, 130, 20, 0.08), -20px 30px 0 rgba(180, 130, 20, 0.06);
}

.moon-rabbit {
    font-size: 1.6rem;
    opacity: 0.35;
    filter: grayscale(20%);
    animation: rabbitBob 4s ease-in-out infinite;
}

@keyframes rabbitBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* 月宫飘带（抽象线条，非人形） */
.moon-silk {
    position: absolute;
    top: 35%;
    width: 60px;
    height: 100px;
    border: 2px solid rgba(255, 230, 180, 0.15);
    border-color: transparent transparent rgba(255, 230, 180, 0.2) transparent;
    border-radius: 50%;
    animation: silkFlow 6s ease-in-out infinite;
}

.moon-silk-left {
    left: 18%;
    transform: rotate(-25deg);
    animation-delay: 0s;
}

.moon-silk-right {
    right: 18%;
    animation: silkFlowRight 6s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes silkFlow {
    0%, 100% { opacity: 0.3; transform: rotate(-25deg) translateY(0); }
    50% { opacity: 0.6; transform: rotate(-20deg) translateY(-8px); }
}

@keyframes silkFlowRight {
    0%, 100% { opacity: 0.3; transform: rotate(25deg) scaleX(-1) translateY(0); }
    50% { opacity: 0.6; transform: rotate(20deg) scaleX(-1) translateY(-8px); }
}

/* 桂花点缀 */
.osmanthus {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0.45;
    animation: osmanthusSway 5s ease-in-out infinite;
}

.osmanthus-left { bottom: 18%; left: 12%; animation-delay: 0s; }
.osmanthus-right { bottom: 22%; right: 10%; animation-delay: 2.5s; }

@keyframes osmanthusSway {
    0%, 100% { transform: rotate(-5deg); opacity: 0.35; }
    50% { transform: rotate(5deg); opacity: 0.55; }
}

.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50px;
    filter: blur(2px);
    animation: cloudDrift 12s ease-in-out infinite;
}

.cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-1 {
    width: 80px; height: 24px;
    bottom: 20%; left: 5%;
    animation-delay: 0s;
}
.cloud-1::before { width: 35px; height: 35px; top: -18px; left: 12px; }
.cloud-1::after { width: 28px; height: 28px; top: -12px; left: 40px; }

.cloud-2 {
    width: 60px; height: 18px;
    bottom: 35%; right: 15%;
    animation-delay: 4s;
    animation-duration: 15s;
}
.cloud-2::before { width: 28px; height: 28px; top: -14px; left: 8px; }
.cloud-2::after { width: 22px; height: 22px; top: -10px; left: 32px; }

.cloud-3 {
    width: 50px; height: 16px;
    top: 30%; left: 20%;
    animation-delay: 2s;
    animation-duration: 18s;
}
.cloud-3::before { width: 24px; height: 24px; top: -12px; left: 6px; }
.cloud-3::after { width: 18px; height: 18px; top: -8px; left: 28px; }

@keyframes cloudDrift {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(15px); opacity: 0.8; }
}

.moon-container {
    text-align: center;
    margin-bottom: 1.2rem;
    animation: fadeIn 1s ease 0.5s both;
}

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

.festival-title {
    font-family: 'Ma Shan Zheng', 'KaiTi', cursive;
    font-size: 2.8rem;
    background: linear-gradient(135deg, #fff8dc, var(--gold-light), #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    letter-spacing: 0.3em;
    margin-top: 0.5rem;
}

.subtitle {
    color: rgba(245, 215, 110, 0.85);
    font-size: 0.95rem;
    letter-spacing: 0.35em;
    margin-top: 0.6rem;
    font-style: italic;
}

.poem-banner {
    text-align: center;
    color: rgba(255, 230, 180, 0.75);
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    margin-bottom: 1.2rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(212, 160, 23, 0.25);
    border-bottom: 1px solid rgba(212, 160, 23, 0.25);
    animation: fadeIn 1s ease 0.7s both;
    line-height: 1.8;
}

.poem-banner em {
    font-style: normal;
    color: var(--gold-light);
}

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

/* 贺卡主体 */
.card {
    width: 100%;
    background: linear-gradient(145deg, #fffdf8 0%, var(--cream) 40%, #ffe8a3 100%);
    border-radius: 6px;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    box-shadow:
        0 24px 64px var(--shadow),
        0 0 0 1px rgba(212, 160, 23, 0.35),
        0 0 80px rgba(245, 215, 110, 0.08),
        inset 0 0 60px rgba(212, 160, 23, 0.04);
    animation: cardIn 0.9s ease 0.6s both;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(212, 160, 23, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes cardIn {
    from { opacity: 0; transform: scale(0.96) translateY(24px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.card-border-outer,
.card-border-inner {
    position: absolute;
    pointer-events: none;
    border-radius: 3px;
}
.card-border-outer {
    inset: 10px;
    border: 2px solid var(--gold);
    opacity: 0.45;
}
.card-border-inner {
    inset: 16px;
    border: 1px solid rgba(212, 160, 23, 0.28);
}

.corner-deco {
    position: absolute;
    width: 40px;
    height: 40px;
    color: var(--red-main);
    font-size: 1.4rem;
    opacity: 0.55;
    z-index: 2;
}
.corner-deco.tl { top: 6px; left: 6px; }
.corner-deco.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.corner-deco.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.corner-deco.br { bottom: 6px; right: 6px; transform: scale(-1); }

/* 收件人 */
.recipient {
    text-align: center;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 1;
}

.recipient-label {
    font-size: 0.85rem;
    color: var(--red-main);
    letter-spacing: 0.4em;
    margin-bottom: 0.5rem;
}

.recipient-name {
    font-family: 'Ma Shan Zheng', 'KaiTi', cursive;
    font-size: 2.1rem;
    color: var(--red-deep);
    letter-spacing: 0.12em;
    text-shadow: 0 1px 2px rgba(139, 0, 0, 0.1);
}

.recipient-company {
    font-size: 1rem;
    color: #777;
    margin-top: 0.35rem;
}

.cooperation-badge {
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.3rem 1.1rem;
    background: linear-gradient(135deg, var(--red-main), var(--red-deep));
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(196, 30, 58, 0.35);
}

.message-intro {
    text-align: center;
    font-size: 0.92rem;
    color: #996;
    font-style: italic;
    letter-spacing: 0.08em;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed rgba(212, 160, 23, 0.35);
    position: relative;
    z-index: 1;
    line-height: 1.9;
}

/* 正文 */
.message-body {
    position: relative;
    z-index: 1;
    line-height: 2.1;
    font-size: 1.02rem;
    color: var(--text-dark);
    text-align: justify;
}

.message-body p {
    margin-bottom: 1rem;
    text-indent: 2em;
}

.message-body p:last-child {
    margin-bottom: 0;
}

.message-body p:first-child::first-letter {
    font-size: 1.4em;
    color: var(--red-main);
    font-weight: 600;
}

/* 落款 */
.signature {
    text-align: right;
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(212, 160, 23, 0.25);
    position: relative;
    z-index: 1;
}

.signature-company {
    font-family: 'Noto Serif SC', 'KaiTi', serif;
    font-size: 1rem;
    color: var(--red-deep);
    letter-spacing: 0.05em;
    line-height: 1.9;
}

.signature-date {
    font-size: 0.85rem;
    color: #999;
    margin-top: 0.5rem;
}

/* 底部 */
.footer-deco {
    text-align: center;
    margin-top: 1.8rem;
    color: rgba(245, 215, 110, 0.65);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    line-height: 2;
    animation: fadeIn 1s ease 1s both;
}

.footer-deco .footer-poem {
    font-family: 'Ma Shan Zheng', 'KaiTi', cursive;
    font-size: 1.05rem;
    color: rgba(255, 230, 180, 0.8);
    letter-spacing: 0.2em;
    margin-bottom: 0.4rem;
}

.footer-deco span { margin: 0 0.4rem; }

/* 飘落花瓣 */
.petals {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.petal {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(255, 182, 193, 0.6) 0%, rgba(255, 150, 170, 0.2) 100%);
    border-radius: 50% 0 50% 50%;
    animation: fallPetal 12s linear infinite;
    opacity: 0;
}

.petal:nth-child(1) { left: 15%; animation-delay: 0s; animation-duration: 14s; }
.petal:nth-child(2) { left: 35%; animation-delay: 3s; animation-duration: 11s; }
.petal:nth-child(3) { left: 55%; animation-delay: 6s; animation-duration: 13s; }
.petal:nth-child(4) { left: 75%; animation-delay: 2s; animation-duration: 15s; }
.petal:nth-child(5) { left: 90%; animation-delay: 8s; animation-duration: 12s; }

@keyframes fallPetal {
    0% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
    10% { opacity: 0.7; }
    90% { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(100vh) rotate(360deg); }
}

/* 错误页 */
.error-page {
    text-align: center;
    color: var(--gold-light);
    padding: 4rem 2rem;
}

.error-page h1 {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.error-page p {
    opacity: 0.7;
    line-height: 1.8;
}

@media (max-width: 480px) {
    .moon-scene { height: 170px; max-width: 320px; }
    .moon { width: 90px; height: 90px; }
    .moon-rays { width: 180px; height: 180px; }
    .festival-title { font-size: 2rem; letter-spacing: 0.15em; }
    .card { padding: 1.8rem 1.2rem; }
    .recipient-name { font-size: 1.65rem; }
    .message-body { font-size: 0.95rem; }
}

@media print {
    body { background: white; }
    .bg-stars, .stars-dynamic, .bg-lantern, .fireflies, .petals, .moon-scene, .poem-banner, .footer-deco { display: none; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}