\u9634\u5386\u56db\u6708 \u00b7 \u69d0\u6708<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+SC:wght@300;400;700&family=ZCOOL+XiaoWei&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --night-deep: #0c0f1a;\n --night-mid: #141827;\n --night-soft: #1c2035;\n --ink-dim: #2a2d3e;\n --moon: #e8f0f8;\n --moon-glow: #d4e5f7;\n --moon-soft: #a8bcd9;\n --gold-dim: #7a6840;\n --gold: #c9a84c;\n --gold-warm: #e8c878;\n --plum: #8b6b7a;\n --plum-light: #b89aaa;\n --plum-pale: #d4c4ce;\n --star: rgba(200, 212, 224, 0.6);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Noto Serif SC', serif;\n background: var(--night-deep);\n color: var(--moon);\n overflow-x: hidden;\n line-height: 1.9;\n }\n\n \/* ==================== STARS BACKGROUND ==================== *\/\n .stars-container {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .star {\n position: absolute;\n background: var(--moon-soft);\n border-radius: 50%;\n animation: twinkle var(--dur) ease-in-out infinite;\n animation-delay: var(--delay);\n }\n @keyframes twinkle {\n 0%, 100% { opacity: 0.1; transform: scale(0.5); }\n 50% { opacity: 1; transform: scale(1); }\n }\n\n \/* ==================== MOON ==================== *\/\n .moon-wrap {\n position: fixed;\n top: 8%;\n right: 12%;\n z-index: 1;\n pointer-events: none;\n animation: moonFloat 8s ease-in-out infinite alternate;\n }\n @keyframes moonFloat {\n 0% { transform: translateY(0px) rotate(-2deg); }\n 100% { transform: translateY(-20px) rotate(2deg); }\n }\n .moon-glow {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(212,229,247,0.12) 0%, transparent 70%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n }\n .moon-body {\n width: 120px;\n height: 120px;\n background: radial-gradient(circle at 35% 35%, #f0f6ff 0%, #d4e5f7 40%, #a8bcd9 100%);\n border-radius: 50%;\n position: relative;\n box-shadow: \n 0 0 60px rgba(212, 229, 247, 0.3),\n 0 0 120px rgba(212, 229, 247, 0.1),\n inset -8px -8px 20px rgba(0, 0, 0, 0.1);\n }\n .moon-body::before {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n background: rgba(168, 188, 217, 0.3);\n border-radius: 50%;\n top: 30%;\n left: 25%;\n }\n .moon-body::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n background: rgba(168, 188, 217, 0.2);\n border-radius: 50%;\n top: 55%;\n left: 60%;\n }\n\n \/* ==================== LOADER ==================== *\/\n .loader {\n position: fixed;\n inset: 0;\n background: var(--night-deep);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s;\n }\n .loader.hidden { opacity: 0; visibility: hidden; }\n .loader-moon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, #f0f6ff, #a8bcd9);\n box-shadow: 0 0 40px rgba(212, 229, 247, 0.4);\n animation: loaderPulse 2s ease-in-out infinite;\n }\n @keyframes loaderPulse {\n 0%, 100% { transform: scale(0.9); box-shadow: 0 0 30px rgba(212,229,247,0.3); }\n 50% { transform: scale(1.1); box-shadow: 0 0 60px rgba(212,229,247,0.5); }\n }\n .loader-text {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 2.5rem;\n color: var(--moon-soft);\n margin-top: 2rem;\n letter-spacing: 0.3em;\n opacity: 0.7;\n }\n\n \/* ==================== NAV ==================== *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n padding: 1.5rem 3rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n transition: all 0.5s ease;\n }\n nav.scrolled {\n background: rgba(12, 15, 26, 0.9);\n backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(200, 212, 224, 0.05);\n }\n .nav-logo {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.3rem;\n color: var(--moon-soft);\n letter-spacing: 0.2em;\n opacity: 0.6;\n }\n .nav-links {\n display: flex;\n gap: 2.5rem;\n list-style: none;\n }\n .nav-links a {\n color: var(--moon-soft);\n text-decoration: none;\n font-size: 0.85rem;\n letter-spacing: 0.1em;\n opacity: 0.5;\n transition: opacity 0.3s ease;\n }\n .nav-links a:hover { opacity: 1; }\n\n \/* ==================== HERO ==================== *\/\n .hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n padding: 2rem;\n text-align: center;\n }\n\n \/* Crescent sweep light *\/\n .hero-light {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: \n radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212, 229, 247, 0.04) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .month-name {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(0.85rem, 1.5vw, 1rem);\n color: var(--gold);\n letter-spacing: 0.5em;\n margin-bottom: 2rem;\n opacity: 0;\n animation: fadeUp 1s 2.2s ease forwards;\n text-transform: uppercase;\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .big-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(5rem, 16vw, 14rem);\n font-weight: 400;\n color: var(--moon);\n letter-spacing: 0.1em;\n line-height: 1;\n position: relative;\n opacity: 0;\n animation: titleReveal 1.5s 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n @keyframes titleReveal {\n from { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(30px); }\n to { opacity: 1; clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); transform: translateY(0); }\n }\n .big-title .slash {\n color: var(--gold);\n opacity: 0.5;\n display: inline-block;\n margin: 0 0.1em;\n }\n\n .hero-sub {\n font-size: clamp(0.9rem, 2vw, 1.3rem);\n color: var(--moon-soft);\n letter-spacing: 0.4em;\n margin-top: 1.5rem;\n opacity: 0;\n animation: fadeUp 1s 3s ease forwards;\n font-weight: 300;\n }\n\n .hero-divider {\n width: 1px;\n height: 60px;\n background: linear-gradient(to bottom, var(--moon-soft), transparent);\n margin: 3rem auto;\n opacity: 0;\n animation: fadeUp 1s 3.3s ease forwards;\n }\n\n .hero-date {\n font-size: 0.85rem;\n color: var(--moon-soft);\n letter-spacing: 0.25em;\n opacity: 0;\n animation: fadeUp 1s 3.6s ease forwards;\n opacity: 0.5;\n }\n\n .hero-date .sep {\n color: var(--gold);\n opacity: 0.4;\n margin: 0 1rem;\n }\n\n \/* Scroll hint *\/\n .scroll-hint {\n position: absolute;\n bottom: 3rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n opacity: 0;\n animation: fadeUp 1s 4s ease forwards;\n }\n .scroll-hint span {\n font-size: 0.7rem;\n color: var(--moon-soft);\n letter-spacing: 0.3em;\n opacity: 0.4;\n }\n .scroll-hint .arrow {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, var(--moon-soft), transparent);\n opacity: 0.3;\n animation: arrowDown 2s ease-in-out infinite;\n }\n @keyframes arrowDown {\n 0%, 100% { transform: translateY(0); opacity: 0.3; }\n 50% { transform: translateY(8px); opacity: 0.6; }\n }\n\n \/* ==================== MONTH INTRO ==================== *\/\n .intro {\n padding: 10rem 2rem;\n max-width: 900px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .intro-text {\n font-size: clamp(1.2rem, 3vw, 1.8rem);\n line-height: 2.4;\n color: var(--moon-soft);\n letter-spacing: 0.08em;\n font-weight: 300;\n text-align: center;\n opacity: 0;\n transition: opacity 1s ease, transform 1s ease;\n }\n .intro-text.visible {\n opacity: 1;\n }\n .intro-text em {\n color: var(--gold-warm);\n font-style: normal;\n }\n\n \/* ==================== MONTHS NAMES ==================== *\/\n .month-names {\n padding: 8rem 2rem;\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .month-names .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .section-label {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 0.85rem;\n color: var(--gold);\n letter-spacing: 0.4em;\n margin-bottom: 1rem;\n opacity: 0.7;\n }\n .section-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(1.8rem, 4vw, 2.8rem);\n color: var(--moon);\n letter-spacing: 0.15em;\n }\n .name-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 1.5rem;\n }\n .name-card {\n padding: 2.5rem 2rem;\n border: 1px solid rgba(200, 212, 224, 0.08);\n border-radius: 2px;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(30px);\n }\n .name-card.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .name-card:hover {\n border-color: rgba(201, 168, 76, 0.2);\n background: rgba(201, 168, 76, 0.03);\n transform: translateY(-4px);\n }\n .name-card h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.6rem;\n color: var(--gold-warm);\n letter-spacing: 0.1em;\n margin-bottom: 0.5rem;\n }\n .name-card .sub {\n font-size: 0.8rem;\n color: var(--moon-soft);\n opacity: 0.4;\n letter-spacing: 0.15em;\n margin-bottom: 1rem;\n }\n .name-card p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.6;\n line-height: 1.9;\n }\n\n \/* ==================== POETRY ==================== *\/\n .poetry-section {\n padding: 10rem 2rem;\n max-width: 900px;\n margin: 0 auto;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .poem-block {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .poem-block.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .poem-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.8rem;\n color: var(--moon);\n letter-spacing: 0.2em;\n margin-bottom: 0.5rem;\n }\n .poem-author {\n font-size: 0.85rem;\n color: var(--moon-soft);\n opacity: 0.4;\n letter-spacing: 0.15em;\n margin-bottom: 3rem;\n }\n .poem-lines {\n font-size: clamp(1.1rem, 2.5vw, 1.35rem);\n line-height: 2.8;\n color: var(--moon-soft);\n letter-spacing: 0.12em;\n }\n .poem-lines .line {\n display: block;\n opacity: 0;\n transform: translateY(15px);\n transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .poem-lines.visible .line {\n opacity: 0.8;\n transform: translateY(0);\n }\n\n .poem-divider {\n width: 80px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n margin: 5rem auto;\n opacity: 0.3;\n }\n\n \/* ==================== FESTIVALS ==================== *\/\n .festivals {\n padding: 8rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .festivals .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .festival-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 1px;\n background: rgba(200, 212, 224, 0.05);\n }\n .festival-item {\n background: var(--night-deep);\n padding: 3.5rem 3rem;\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2rem;\n align-items: start;\n transition: all 0.4s ease;\n opacity: 0;\n transform: translateX(-30px);\n }\n .festival-item.visible {\n opacity: 1;\n transform: translateX(0);\n }\n .festival-item:hover {\n background: rgba(200, 212, 224, 0.02);\n }\n .festival-date {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1rem;\n color: var(--gold);\n letter-spacing: 0.2em;\n opacity: 0.6;\n border-left: 1px solid rgba(201, 168, 76, 0.2);\n padding-left: 1rem;\n }\n .festival-content h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.3rem;\n color: var(--moon);\n letter-spacing: 0.1em;\n margin-bottom: 0.8rem;\n }\n .festival-content p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.5;\n line-height: 2;\n }\n\n \/* ==================== LORE ==================== *\/\n .lore {\n padding: 10rem 2rem;\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .lore .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .lore-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n .lore-card {\n padding: 3rem;\n border: 1px solid rgba(200, 212, 224, 0.06);\n border-radius: 2px;\n transition: all 0.5s ease;\n opacity: 0;\n transform: translateY(30px);\n }\n .lore-card.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .lore-card:hover {\n border-color: rgba(139, 107, 122, 0.3);\n background: rgba(139, 107, 122, 0.03);\n }\n .lore-icon {\n font-size: 2rem;\n margin-bottom: 1.5rem;\n opacity: 0.7;\n }\n .lore-card h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.2rem;\n color: var(--plum-light);\n letter-spacing: 0.1em;\n margin-bottom: 1rem;\n }\n .lore-card p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.5;\n line-height: 2;\n }\n\n \/* ==================== CLOSING ==================== *\/\n .closing {\n padding: 10rem 2rem;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .closing-glyph {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 10rem;\n color: rgba(200, 212, 224, 0.03);\n line-height: 1;\n user-select: none;\n pointer-events: none;\n }\n .closing-quote {\n font-size: clamp(1rem, 2.5vw, 1.5rem);\n color: var(--moon-soft);\n letter-spacing: 0.15em;\n line-height: 2.2;\n max-width: 600px;\n margin: 0 auto;\n opacity: 0;\n transition: opacity 1s ease;\n }\n .closing-quote.visible { opacity: 0.6; }\n\n \/* ==================== FOOTER ==================== *\/\n footer {\n text-align: center;\n padding: 4rem 2rem;\n position: relative;\n z-index: 2;\n border-top: 1px solid rgba(200, 212, 224, 0.04);\n }\n footer p {\n font-size: 0.8rem;\n color: var(--moon-soft);\n letter-spacing: 0.25em;\n opacity: 0.3;\n }\n\n \/* ==================== FALLING PLUM PETALS ==================== *\/\n .plum-container {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n overflow: hidden;\n }\n .plum-petal {\n position: absolute;\n font-size: 0.6rem;\n opacity: 0;\n color: var(--plum-pale);\n animation: plumFall linear infinite;\n }\n @keyframes plumFall {\n 0% {\n opacity: 0;\n transform: translateY(-5vh) rotate(0deg) translateX(0);\n }\n 10% { opacity: 0.5; }\n 90% { opacity: 0.3; }\n 100% {\n opacity: 0;\n transform: translateY(105vh) rotate(540deg) translateX(100px);\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links { display: none; }\n .moon-wrap { display: none; }\n .festival-list { grid-template-columns: 1fr; }\n .lore-grid { grid-template-columns: 1fr; }\n .festival-item {\n grid-template-columns: 1fr;\n }\n .festival-date {\n writing-mode: horizontal-tb;\n border-left: none;\n border-bottom: 1px solid rgba(201, 168, 76, 0.2);\n padding-left: 0;\n padding-bottom: 0.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"stars-container\" id=\"stars\"><\/div>\n\n \n <div class=\"moon-wrap\">\n <div class=\"moon-glow\"><\/div>\n <div class=\"moon-body\"><\/div>\n <\/div>\n\n \n <div class=\"plum-container\" id=\"plums\"><\/div>\n\n \n <div class=\"loader\" id=\"loader\">\n <div class=\"loader-moon\"><\/div>\n <div class=\"loader-text\">\u56db\u6708<\/div>\n <\/div>\n\n \n <nav id=\"nav\">\n <div class=\"nav-logo\">\u9634\u5386\u5341\u4e8c\u6708<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#names\">\u522b\u540d<\/a><\/li>\n <li><a href=\"#poetry\">\u8bd7\u8bcd<\/a><\/li>\n <li><a href=\"#festivals\">\u8282\u4ee4<\/a><\/li>\n <li><a href=\"#lore\">\u6c11\u4fd7<\/a><\/li>\n <\/ul>\n <\/nav>\n\n \n <section class=\"hero\" id=\"hero\">\n <div class=\"hero-light\"><\/div>\n <div>\n <div class=\"month-name\">YIN LI SI YUE<\/div>\n <h1 class=\"big-title\">\n \u9634\u5386<span class=\"slash\">\/<\/span>\u56db\u6708\n <\/h1>\n <p class=\"hero-sub\">\u5b5f\u590f\u4e4b\u6708 \u00b7 \u4e07\u7269\u7e41\u76db<\/p>\n <div class=\"hero-divider\"><\/div>\n <div class=\"hero-date\">\n \u4e19\u5348\u5e74\u56db\u6708<span class=\"sep\">\u00b7<\/span>2026\u5e745\u670817\u65e5\u8d77\n <\/div>\n <\/div>\n <div class=\"scroll-hint\">\n <span>\u6708\u5347\u4e4b\u65f6<\/span>\n <div class=\"arrow\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"intro\">\n <p class=\"intro-text\" id=\"introText\">\n \u9634\u5386\u56db\u6708\uff0c\u590f\u6c14\u6e10\u76db\uff0c\u4e07\u7269\u81f3\u6b64<em>\u7686\u5df2\u957f\u5927<\/em>\u3002<br>\n \u69d0\u82b1\u5f00\u5c3d\uff0c\u6787\u6777\u91d1\u9ec4\uff0c\u7a3b\u7530\u91cc\u7684\u86d9\u58f0\u6b64\u8d77\u5f7c\u4f0f\u3002<br>\n \u8fd9\u662f<em>\u5b5f\u590f<\/em>\uff0c\u662f\"\u6885\u5b50\u9ec4\u65f6\u96e8\"\u7684\u5e8f\u66f2\uff0c<br>\n \u4e5f\u662f\u53e4\u4eba\u773c\u4e2d<em>\u4eba\u751f\u6700\u597d\u662f\u5c0f\u6ee1<\/em>\u7684\u65f6\u8282\u3002\n <\/p>\n <\/section>\n\n \n <section class=\"month-names\" id=\"names\">\n <div class=\"section-header reveal-section\">\n <div class=\"section-label\">\u522b\u79f0<\/div>\n <h2 class=\"section-title\">\u56db\u6708\u7684\u540d\u5b57<\/h2>\n <\/div>\n <div class=\"name-grid\">\n <div class=\"name-card\">\n <h3>\u69d0\u6708<\/h3>\n <div class=\"sub\">HUAI MONTH<\/div>\n <p>\u69d0\u6811\u53c8\u540d\"\u56fd\u69d0\"\uff0c\u56db\u6708\u6b63\u662f\u82b1\u671f\uff0c\u6ee1\u6811\u767d\u82b1\u5982\u96ea\uff0c\u9999\u6c14\u88ad\u4eba\u3002\u69d0\u82b1\u53ef\u5165\u836f\u3001\u53ef\u98df\uff0c\u4ea6\u662f\u53e4\u4ee3\u79d1\u4e3e\u7684\u8c61\u5f81\uff0c\"\u69d0\u82b1\u9ec4\uff0c\u4e3e\u5b50\u5fd9\"\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u5b5f\u590f<\/h3>\n <div class=\"sub\">MENGXIA<\/div>\n <p>\u590f\u5b63\u7684\u7b2c\u4e00\u4e2a\u6708\u79f0\"\u5b5f\u590f\"\u3002\u300a\u793c\u8bb0\u00b7\u6708\u4ee4\u300b\u8f7d\uff1a\"\u5b5f\u590f\u4e4b\u6708\uff0c\u65e5\u5728\u6bd5\uff0c\u660f\u7ffc\u4e2d\uff0c\u65e6\u5a7a\u5973\u4e2d\u3002\"\u6b64\u65f6\u5929\u5730\u59cb\u70ed\uff0c\u4e07\u7269\u5e76\u79c0\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u9634\u6708<\/h3>\n <div class=\"sub\">YINYUE<\/div>\n <p>\u56db\u6708\u53c8\u79f0\"\u9634\u6708\"\uff0c\u6b64\u65f6\u9634\u6c14\u5c1a\u5b58\uff0c\u9633\u6c14\u6e10\u957f\uff0c\u5929\u6c14\u5c1a\u672a\u5927\u70ed\uff0c\u6545\u79f0\"\u9634\"\u3002\u300a\u5317\u5802\u4e66\u949e\u300b\u5f15\u300a\u5d14\u5bd4\u56db\u6c11\u6708\u4ee4\u300b\u6709\"\u56db\u6708\u9634\u6708\"\u4e4b\u8bf4\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u4e4f\u6708<\/h3>\n <div class=\"sub\">FAYUE<\/div>\n <p>\u519c\u8c1a\u4e91\uff1a\"\u56db\u6708\u4eba\u4eec\u4e4f\u3002\"\u6b64\u65f6\u9752\u9ec4\u4e0d\u63a5\uff0c\u65e7\u7cae\u5c06\u5c3d\uff0c\u65b0\u9ea6\u672a\u719f\uff0c\u519c\u5bb6\u6700\u4e3a\u5fd9\u788c\u8f9b\u82e6\uff0c\u6545\u6709\"\u4e4f\u6708\"\u4e4b\u79f0\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"poetry-section\" id=\"poetry\">\n <div class=\"poem-block\" id=\"poem1\">\n <h3 class=\"poem-title\">\u56db\u65f6\u7530\u56ed\u6742\u5174 \u00b7 \u5176\u4e00<\/h3>\n <p class=\"poem-author\">\u5b8b \u00b7 \u8303\u6210\u5927<\/p>\n <div class=\"poem-lines\" id=\"poem1Lines\">\n <span class=\"line\" style=\"transition-delay:0.1s\">\u6885\u5b50\u91d1\u9ec4\u674f\u5b50\u80a5\uff0c\u9ea6\u82b1\u96ea\u767d\u83dc\u82b1\u7a00\u3002<\/span>\n <span class=\"line\" style=\"transition-delay:0.5s\">\u65e5\u957f\u7bf1\u843d\u65e0\u4eba\u8fc7\uff0c\u60df\u6709\u873b\u8713\u86f1\u8776\u98de\u3002<\/span>\n <\/div>\n <\/div>\n <div class=\"poem-divider\"><\/div>\n <div class=\"poem-block\" id=\"poem2\">\n <h3 class=\"poem-title\">\u4e61\u6751\u56db\u6708<\/h3>\n <p class=\"poem-author\">\u5b8b \u00b7 \u7fc1\u5377<\/p>\n <div class=\"poem-lines\" id=\"poem2Lines\">\n <span class=\"line\" style=\"transition-delay:0.1s\">\u7eff\u904d\u5c71\u539f\u767d\u6ee1\u5ddd\uff0c\u5b50\u89c4\u58f0\u91cc\u96e8\u5982\u70df\u3002<\/span>\n <span class=\"line\" style=\"transition-delay:0.5s\">\u4e61\u6751\u56db\u6708\u95f2\u4eba\u5c11\uff0c\u624d\u4e86\u8695\u6851\u53c8\u63d2\u7530\u3002<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"festivals\" id=\"festivals\">\n <div class=\"section-header\">\n <div class=\"section-label\">\u8282\u4ee4<\/div>\n <h2 class=\"section-title\">\u672c\u6708\u91cd\u8981\u65f6\u4ee4<\/h2>\n <\/div>\n <div class=\"festival-list\">\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u56db\u6708\u5341\u56db<\/div>\n <div class=\"festival-content\">\n <h3>\u5415\u7956\u8bde\u8fb0<\/h3>\n <p>\u56db\u6708\u5341\u56db\u65e5\u4e3a\u516b\u4ed9\u4e4b\u4e00\u5415\u6d1e\u5bbe\u8bde\u8fb0\uff0c\u9053\u6559\u4fe1\u4f17\u4e8e\u6b64\u65e5\u796d\u7940\u5415\u7956\uff0c\u7948\u6c42\u6d88\u707e\u89e3\u96be\u3001\u5b66\u4e1a\u8fdb\u6b65\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u5c0f\u6ee1\u524d\u540e<\/div>\n <div class=\"festival-content\">\n <h3>\u5c0f\u6ee1\u52a8\u4e09\u8f66<\/h3>\n <p>\u6b64\u65f6\u5c0f\u9ea6\u5373\u5c06\u6210\u719f\uff0c\u519c\u4eba\u987b\u540c\u65f6\u7167\u6599\u6c34\u8f66\u3001\u6cb9\u8f66\u3001\u4e1d\u8f66\u3002\"\u5c0f\u6ee1\u52a8\u4e09\u8f66\"\u662f\u6c5f\u5357\u519c\u5fd9\u7684\u771f\u5b9e\u5199\u7167\uff0c\u7948\u613f\u98ce\u8c03\u96e8\u987a\u3001\u4e94\u8c37\u4e30\u767b\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u56db\u6708\u4e0b\u65ec<\/div>\n <div class=\"festival-content\">\n <h3>\u9001\u82b1\u795e<\/h3>\n <p>\u519c\u5386\u4e8c\u6708\u8fce\u82b1\u795e\uff0c\u56db\u6708\u9001\u82b1\u795e\u3002\u767e\u82b1\u5df2\u5f00\u8fc7\u4e00\u904d\uff0c\u6c11\u95f4\u6709\"\u9001\u82b1\u795e\"\u7684\u4e60\u4fd7\uff0c\u4ee5\u8c22\u82b1\u795e\u5e87\u4f51\u6765\u5e74\u518d\u5f00\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u6885\u5b50\u9ec4\u65f6<\/div>\n <div class=\"festival-content\">\n <h3>\u9752\u6885\u716e\u9152<\/h3>\n <p>\u6885\u5b50\u4e8e\u56db\u6708\u7531\u9752\u8f6c\u9ec4\uff0c\u6b64\u65f6\u7684\u9752\u6885\u9178\u6da9\u5165\u9152\u6700\u4e3a\u76f8\u5b9c\u3002\u53e4\u4eba\u4ee5\u9752\u6885\u4f50\u9152\uff0c\u65e2\u53d6\u5176\u9178\u4ee5\u5f00\u80c3\uff0c\u4ea6\u5bd3\u610f\"\u6885\u5f00\u4e94\u798f\"\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"lore\" id=\"lore\">\n <div class=\"section-header\">\n <div class=\"section-label\">\u6c11\u4fd7<\/div>\n <h2 class=\"section-title\">\u5c81\u65f6\u6742\u8bb0<\/h2>\n <\/div>\n <div class=\"lore-grid\">\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83c\udf3e<\/div>\n <h3>\u56db\u6708\u7684\u7530\u91ce<\/h3>\n <p>\u5317\u65b9\u5c0f\u9ea6\u626c\u82b1\u704c\u6d46\uff0c\u5357\u65b9\u65e9\u7a3b\u63d2\u79e7\u5b8c\u6bd5\u3002\u7530\u95f4\u7ba1\u7406\u8fdb\u5165\u5173\u952e\u671f\uff0c\u9632\u866b\u3001\u704c\u6e89\u3001\u8ffd\u80a5\uff0c\u4e00\u523b\u4e0d\u5f97\u95f2\u3002\u6b64\u65f6\u7684\u7530\u91ce\uff0c\u662f\u4e00\u5e74\u4e2d\u6700\u5fd9\u788c\u3001\u4e5f\u6700\u5145\u6ee1\u5e0c\u671b\u7684\u666f\u8c61\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83c\udf3f<\/div>\n <h3>\u56db\u6708\u7684\u6ecb\u5473<\/h3>\n <p>\u6787\u6777\u3001\u6a31\u6843\u3001\u9752\u6885\u3001\u674e\u5b50\u6b21\u7b2c\u6210\u719f\u3002\u6c5f\u5357\u6709\"\u7acb\u590f\u5c1d\u4e09\u9c9c\"\u4e4b\u8bf4\uff1a\u6a31\u6843\u3001\u9752\u6885\u4e0e\u9ca5\u9c7c\u3002\u56db\u6708\u4e5f\u662f\u5403\u82e6\u83dc\u7684\u65f6\u8282\uff0c\u53e4\u4eba\u4ee5\u6b64\u6e05\u70ed\u89e3\u6bd2\uff0c\u5e94\u5bf9\u6e10\u76db\u7684\u6691\u6c14\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\u2614<\/div>\n <h3>\u9ec4\u6885\u96e8\u8d77<\/h3>\n <p>\u56db\u6708\u540e\u671f\uff0c\u957f\u6c5f\u4e2d\u4e0b\u6e38\u6e10\u5165\u6885\u96e8\u5b63\u8282\u3002\u7ec6\u96e8\u7ef5\u7ef5\uff0c\u6e7f\u5ea6\u5927\u589e\uff0c\"\u6885\u5b50\u9ec4\u65f6\u96e8\"\u6210\u4e3a\u6b64\u65f6\u6700\u5178\u578b\u7684\u5929\u6c14\u7b26\u53f7\uff0c\u4e5f\u50ac\u751f\u4e86\u65e0\u6570\u8bd7\u8bcd\u6b4c\u8d4b\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83d\udcd6<\/div>\n <h3>\u56db\u6708\u4e0e\u8bfb\u4e66<\/h3>\n <p>\u53e4\u8c1a\uff1a\"\u56db\u6708\u4e0d\u70ed\uff0c\u4e94\u8c37\u4e0d\u7ed3\u3002\"\u519c\u5fd9\u4e4b\u4f59\uff0c\u8bfb\u4e66\u4eba\u4ea6\u4e0d\u865a\u5ea6\u3002\"\u69d0\u82b1\u9ec4\uff0c\u4e3e\u5b50\u5fd9\"\u2014\u2014\u69d0\u82b1\u5f00\u65f6\uff0c\u6b63\u662f\u58eb\u5b50\u7528\u529f\u3001\u6e29\u4e66\u5907\u8003\u7684\u65f6\u8282\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"closing\">\n <div class=\"closing-glyph\">\u56db<\/div>\n <p class=\"closing-quote\" id=\"closingQuote\">\n \u56db\u6708\u6e05\u548c\u96e8\u4e4d\u6674\uff0c<br>\n \u5357\u5c71\u5f53\u6237\u8f6c\u5206\u660e\u3002<br>\n \u66f4\u65e0\u67f3\u7d6e\u56e0\u98ce\u8d77\uff0c<br>\n \u60df\u6709\u8475\u82b1\u5411\u65e5\u503e\u3002\n <\/p>\n <\/section>\n\n \n <footer>\n <p>\u9634\u5386\u56db\u6708 \u00b7 \u4e19\u5348\u5e74 \u00b7 \u4e07\u7269\u7e41\u76db<\/p>\n <\/footer>\n\n <script>\n \/\/ Loader\n window.addEventListener('load', () => {\n setTimeout(() => {\n document.getElementById('loader').classList.add('hidden');\n }, 2200);\n });\n\n \/\/ Stars\n const starsContainer = document.getElementById('stars');\n for (let i = 0; i < 100; i++) {\n const star = document.createElement('div');\n star.className = 'star';\n star.style.cssText = `\n left: ${Math.random() * 100}%;\n top: ${Math.random() * 100}%;\n width: ${Math.random() * 2 + 1}px;\n height: ${Math.random() * 2 + 1}px;\n --dur: ${Math.random() * 4 + 2}s;\n --delay: ${Math.random() * 5}s;\n `;\n starsContainer.appendChild(star);\n }\n\n \/\/ Falling plum petals\n const plumContainer = document.getElementById('plums');\n const petalChars = ['\u274b', '\u273f', '\u273e', '\u2740'];\n function createPetal() {\n const p = document.createElement('div');\n p.className = 'plum-petal';\n p.textContent = petalChars[Math.floor(Math.random() * petalChars.length)];\n p.style.left = Math.random() * 100 + '%';\n p.style.fontSize = (Math.random() * 0.8 + 0.4) + 'rem';\n p.style.animationDuration = (Math.random() * 10 + 15) + 's';\n p.style.animationDelay = Math.random() * 5 + 's';\n p.style.color = Math.random() > 0.5 ? 'rgba(212,196,206,0.5)' : 'rgba(139,107,122,0.4)';\n plumContainer.appendChild(p);\n setTimeout(() => p.remove(), 25000);\n }\n for (let i = 0; i < 10; i++) setTimeout(createPetal, i * 1000);\n setInterval(createPetal, 5000);\n\n \/\/ Nav scroll\n const nav = document.getElementById('nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 80);\n });\n\n \/\/ Intro reveal\n const introText = document.getElementById('introText');\n const introObs = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) introText.classList.add('visible'); });\n }, { threshold: 0.3 });\n introObs.observe(introText);\n\n \/\/ Name cards stagger\n const nameCards = document.querySelectorAll('.name-card');\n const cardObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 120);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n nameCards.forEach(card => cardObs.observe(card));\n\n \/\/ Poem blocks\n const poem1 = document.getElementById('poem1');\n const poem2 = document.getElementById('poem2');\n const poemObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n const lines = e.target.querySelectorAll('.poem-lines');\n lines.forEach(l => l.classList.add('visible'));\n }\n });\n }, { threshold: 0.3 });\n poemObs.observe(poem1);\n poemObs.observe(poem2);\n\n \/\/ Festival items stagger\n const festivalItems = document.querySelectorAll('.festival-item');\n const festObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 150);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n festivalItems.forEach(item => festObs.observe(item));\n\n \/\/ Lore cards\n const loreCards = document.querySelectorAll('.lore-card');\n const loreObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 150);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n loreCards.forEach(card => loreObs.observe(card));\n\n \/\/ Closing quote\n const closingQuote = document.getElementById('closingQuote');\n const closeObs = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) closingQuote.classList.add('visible'); });\n }, { threshold: 0.5 });\n closeObs.observe(closingQuote);\n\n \/\/ Smooth scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n e.preventDefault();\n const t = document.querySelector(a.getAttribute('href'));\n if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"\u9634\u5386\u56db\u6708 \u00b7 \u69d0\u6708 \u56db\u6708 \u9634\u5386\u5341\u4e8c\u6708 \u522b\u540d \u8bd7\u8bcd \u8282\u4ee4 \u6c11\u4fd7 YIN LI SI YUE \u9634\u5386\/\u56db\u6708 \u5b5f\u590f\u4e4b\u6708 […]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1687","post","type-post","status-publish","format-standard","hentry","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1687"}],"version-history":[{"count":4,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687\/revisions"}],"predecessor-version":[{"id":1694,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687\/revisions\/1694"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1687,"date":"2026-05-17T22:27:38","date_gmt":"2026-05-17T14:27:38","guid":{"rendered":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/17\/%e6%a7%90%e6%9c%88%ef%bc%9a%e9%bb%84%e6%a2%85%e9%9b%a8%e8%b5%b7\/"},"modified":"2026-05-17T22:54:13","modified_gmt":"2026-05-17T14:54:13","slug":"%e6%a7%90%e6%9c%88%ef%bc%9a%e9%bb%84%e6%a2%85%e9%9b%a8%e8%b5%b7","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/17\/%e6%a7%90%e6%9c%88%ef%bc%9a%e9%bb%84%e6%a2%85%e9%9b%a8%e8%b5%b7\/","title":{"rendered":"\u69d0\u6708\uff1a\u9ec4\u6885\u96e8\u8d77"},"content":{"rendered":"\n\n\n\n \n \n \u9634\u5386\u56db\u6708 \u00b7 \u69d0\u6708<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+SC:wght@300;400;700&family=ZCOOL+XiaoWei&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --night-deep: #0c0f1a;\n --night-mid: #141827;\n --night-soft: #1c2035;\n --ink-dim: #2a2d3e;\n --moon: #e8f0f8;\n --moon-glow: #d4e5f7;\n --moon-soft: #a8bcd9;\n --gold-dim: #7a6840;\n --gold: #c9a84c;\n --gold-warm: #e8c878;\n --plum: #8b6b7a;\n --plum-light: #b89aaa;\n --plum-pale: #d4c4ce;\n --star: rgba(200, 212, 224, 0.6);\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Noto Serif SC', serif;\n background: var(--night-deep);\n color: var(--moon);\n overflow-x: hidden;\n line-height: 1.9;\n }\n\n \/* ==================== STARS BACKGROUND ==================== *\/\n .stars-container {\n position: fixed;\n inset: 0;\n z-index: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .star {\n position: absolute;\n background: var(--moon-soft);\n border-radius: 50%;\n animation: twinkle var(--dur) ease-in-out infinite;\n animation-delay: var(--delay);\n }\n @keyframes twinkle {\n 0%, 100% { opacity: 0.1; transform: scale(0.5); }\n 50% { opacity: 1; transform: scale(1); }\n }\n\n \/* ==================== MOON ==================== *\/\n .moon-wrap {\n position: fixed;\n top: 8%;\n right: 12%;\n z-index: 1;\n pointer-events: none;\n animation: moonFloat 8s ease-in-out infinite alternate;\n }\n @keyframes moonFloat {\n 0% { transform: translateY(0px) rotate(-2deg); }\n 100% { transform: translateY(-20px) rotate(2deg); }\n }\n .moon-glow {\n position: absolute;\n width: 200px;\n height: 200px;\n background: radial-gradient(circle, rgba(212,229,247,0.12) 0%, transparent 70%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border-radius: 50%;\n }\n .moon-body {\n width: 120px;\n height: 120px;\n background: radial-gradient(circle at 35% 35%, #f0f6ff 0%, #d4e5f7 40%, #a8bcd9 100%);\n border-radius: 50%;\n position: relative;\n box-shadow: \n 0 0 60px rgba(212, 229, 247, 0.3),\n 0 0 120px rgba(212, 229, 247, 0.1),\n inset -8px -8px 20px rgba(0, 0, 0, 0.1);\n }\n .moon-body::before {\n content: '';\n position: absolute;\n width: 20px;\n height: 20px;\n background: rgba(168, 188, 217, 0.3);\n border-radius: 50%;\n top: 30%;\n left: 25%;\n }\n .moon-body::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n background: rgba(168, 188, 217, 0.2);\n border-radius: 50%;\n top: 55%;\n left: 60%;\n }\n\n \/* ==================== LOADER ==================== *\/\n .loader {\n position: fixed;\n inset: 0;\n background: var(--night-deep);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n z-index: 9999;\n transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.5s;\n }\n .loader.hidden { opacity: 0; visibility: hidden; }\n .loader-moon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, #f0f6ff, #a8bcd9);\n box-shadow: 0 0 40px rgba(212, 229, 247, 0.4);\n animation: loaderPulse 2s ease-in-out infinite;\n }\n @keyframes loaderPulse {\n 0%, 100% { transform: scale(0.9); box-shadow: 0 0 30px rgba(212,229,247,0.3); }\n 50% { transform: scale(1.1); box-shadow: 0 0 60px rgba(212,229,247,0.5); }\n }\n .loader-text {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 2.5rem;\n color: var(--moon-soft);\n margin-top: 2rem;\n letter-spacing: 0.3em;\n opacity: 0.7;\n }\n\n \/* ==================== NAV ==================== *\/\n nav {\n position: fixed;\n top: 0; left: 0; right: 0;\n padding: 1.5rem 3rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n z-index: 100;\n transition: all 0.5s ease;\n }\n nav.scrolled {\n background: rgba(12, 15, 26, 0.9);\n backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(200, 212, 224, 0.05);\n }\n .nav-logo {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.3rem;\n color: var(--moon-soft);\n letter-spacing: 0.2em;\n opacity: 0.6;\n }\n .nav-links {\n display: flex;\n gap: 2.5rem;\n list-style: none;\n }\n .nav-links a {\n color: var(--moon-soft);\n text-decoration: none;\n font-size: 0.85rem;\n letter-spacing: 0.1em;\n opacity: 0.5;\n transition: opacity 0.3s ease;\n }\n .nav-links a:hover { opacity: 1; }\n\n \/* ==================== HERO ==================== *\/\n .hero {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 2;\n padding: 2rem;\n text-align: center;\n }\n\n \/* Crescent sweep light *\/\n .hero-light {\n position: absolute;\n top: 0; left: 0; right: 0; bottom: 0;\n background: \n radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212, 229, 247, 0.04) 0%, transparent 70%);\n pointer-events: none;\n }\n\n .month-name {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(0.85rem, 1.5vw, 1rem);\n color: var(--gold);\n letter-spacing: 0.5em;\n margin-bottom: 2rem;\n opacity: 0;\n animation: fadeUp 1s 2.2s ease forwards;\n text-transform: uppercase;\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .big-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(5rem, 16vw, 14rem);\n font-weight: 400;\n color: var(--moon);\n letter-spacing: 0.1em;\n line-height: 1;\n position: relative;\n opacity: 0;\n animation: titleReveal 1.5s 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n }\n @keyframes titleReveal {\n from { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transform: translateY(30px); }\n to { opacity: 1; clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); transform: translateY(0); }\n }\n .big-title .slash {\n color: var(--gold);\n opacity: 0.5;\n display: inline-block;\n margin: 0 0.1em;\n }\n\n .hero-sub {\n font-size: clamp(0.9rem, 2vw, 1.3rem);\n color: var(--moon-soft);\n letter-spacing: 0.4em;\n margin-top: 1.5rem;\n opacity: 0;\n animation: fadeUp 1s 3s ease forwards;\n font-weight: 300;\n }\n\n .hero-divider {\n width: 1px;\n height: 60px;\n background: linear-gradient(to bottom, var(--moon-soft), transparent);\n margin: 3rem auto;\n opacity: 0;\n animation: fadeUp 1s 3.3s ease forwards;\n }\n\n .hero-date {\n font-size: 0.85rem;\n color: var(--moon-soft);\n letter-spacing: 0.25em;\n opacity: 0;\n animation: fadeUp 1s 3.6s ease forwards;\n opacity: 0.5;\n }\n\n .hero-date .sep {\n color: var(--gold);\n opacity: 0.4;\n margin: 0 1rem;\n }\n\n \/* Scroll hint *\/\n .scroll-hint {\n position: absolute;\n bottom: 3rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.8rem;\n opacity: 0;\n animation: fadeUp 1s 4s ease forwards;\n }\n .scroll-hint span {\n font-size: 0.7rem;\n color: var(--moon-soft);\n letter-spacing: 0.3em;\n opacity: 0.4;\n }\n .scroll-hint .arrow {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, var(--moon-soft), transparent);\n opacity: 0.3;\n animation: arrowDown 2s ease-in-out infinite;\n }\n @keyframes arrowDown {\n 0%, 100% { transform: translateY(0); opacity: 0.3; }\n 50% { transform: translateY(8px); opacity: 0.6; }\n }\n\n \/* ==================== MONTH INTRO ==================== *\/\n .intro {\n padding: 10rem 2rem;\n max-width: 900px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .intro-text {\n font-size: clamp(1.2rem, 3vw, 1.8rem);\n line-height: 2.4;\n color: var(--moon-soft);\n letter-spacing: 0.08em;\n font-weight: 300;\n text-align: center;\n opacity: 0;\n transition: opacity 1s ease, transform 1s ease;\n }\n .intro-text.visible {\n opacity: 1;\n }\n .intro-text em {\n color: var(--gold-warm);\n font-style: normal;\n }\n\n \/* ==================== MONTHS NAMES ==================== *\/\n .month-names {\n padding: 8rem 2rem;\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .month-names .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .section-label {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 0.85rem;\n color: var(--gold);\n letter-spacing: 0.4em;\n margin-bottom: 1rem;\n opacity: 0.7;\n }\n .section-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(1.8rem, 4vw, 2.8rem);\n color: var(--moon);\n letter-spacing: 0.15em;\n }\n .name-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 1.5rem;\n }\n .name-card {\n padding: 2.5rem 2rem;\n border: 1px solid rgba(200, 212, 224, 0.08);\n border-radius: 2px;\n transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n opacity: 0;\n transform: translateY(30px);\n }\n .name-card.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .name-card:hover {\n border-color: rgba(201, 168, 76, 0.2);\n background: rgba(201, 168, 76, 0.03);\n transform: translateY(-4px);\n }\n .name-card h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.6rem;\n color: var(--gold-warm);\n letter-spacing: 0.1em;\n margin-bottom: 0.5rem;\n }\n .name-card .sub {\n font-size: 0.8rem;\n color: var(--moon-soft);\n opacity: 0.4;\n letter-spacing: 0.15em;\n margin-bottom: 1rem;\n }\n .name-card p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.6;\n line-height: 1.9;\n }\n\n \/* ==================== POETRY ==================== *\/\n .poetry-section {\n padding: 10rem 2rem;\n max-width: 900px;\n margin: 0 auto;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .poem-block {\n opacity: 0;\n transform: translateY(40px);\n transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .poem-block.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .poem-title {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.8rem;\n color: var(--moon);\n letter-spacing: 0.2em;\n margin-bottom: 0.5rem;\n }\n .poem-author {\n font-size: 0.85rem;\n color: var(--moon-soft);\n opacity: 0.4;\n letter-spacing: 0.15em;\n margin-bottom: 3rem;\n }\n .poem-lines {\n font-size: clamp(1.1rem, 2.5vw, 1.35rem);\n line-height: 2.8;\n color: var(--moon-soft);\n letter-spacing: 0.12em;\n }\n .poem-lines .line {\n display: block;\n opacity: 0;\n transform: translateY(15px);\n transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .poem-lines.visible .line {\n opacity: 0.8;\n transform: translateY(0);\n }\n\n .poem-divider {\n width: 80px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n margin: 5rem auto;\n opacity: 0.3;\n }\n\n \/* ==================== FESTIVALS ==================== *\/\n .festivals {\n padding: 8rem 2rem;\n max-width: 1200px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .festivals .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .festival-list {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));\n gap: 1px;\n background: rgba(200, 212, 224, 0.05);\n }\n .festival-item {\n background: var(--night-deep);\n padding: 3.5rem 3rem;\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2rem;\n align-items: start;\n transition: all 0.4s ease;\n opacity: 0;\n transform: translateX(-30px);\n }\n .festival-item.visible {\n opacity: 1;\n transform: translateX(0);\n }\n .festival-item:hover {\n background: rgba(200, 212, 224, 0.02);\n }\n .festival-date {\n writing-mode: vertical-rl;\n text-orientation: mixed;\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1rem;\n color: var(--gold);\n letter-spacing: 0.2em;\n opacity: 0.6;\n border-left: 1px solid rgba(201, 168, 76, 0.2);\n padding-left: 1rem;\n }\n .festival-content h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.3rem;\n color: var(--moon);\n letter-spacing: 0.1em;\n margin-bottom: 0.8rem;\n }\n .festival-content p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.5;\n line-height: 2;\n }\n\n \/* ==================== LORE ==================== *\/\n .lore {\n padding: 10rem 2rem;\n max-width: 1100px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n .lore .section-header {\n text-align: center;\n margin-bottom: 5rem;\n }\n .lore-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n .lore-card {\n padding: 3rem;\n border: 1px solid rgba(200, 212, 224, 0.06);\n border-radius: 2px;\n transition: all 0.5s ease;\n opacity: 0;\n transform: translateY(30px);\n }\n .lore-card.visible {\n opacity: 1;\n transform: translateY(0);\n }\n .lore-card:hover {\n border-color: rgba(139, 107, 122, 0.3);\n background: rgba(139, 107, 122, 0.03);\n }\n .lore-icon {\n font-size: 2rem;\n margin-bottom: 1.5rem;\n opacity: 0.7;\n }\n .lore-card h3 {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1.2rem;\n color: var(--plum-light);\n letter-spacing: 0.1em;\n margin-bottom: 1rem;\n }\n .lore-card p {\n font-size: 0.9rem;\n color: var(--moon-soft);\n opacity: 0.5;\n line-height: 2;\n }\n\n \/* ==================== CLOSING ==================== *\/\n .closing {\n padding: 10rem 2rem;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n .closing-glyph {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 10rem;\n color: rgba(200, 212, 224, 0.03);\n line-height: 1;\n user-select: none;\n pointer-events: none;\n }\n .closing-quote {\n font-size: clamp(1rem, 2.5vw, 1.5rem);\n color: var(--moon-soft);\n letter-spacing: 0.15em;\n line-height: 2.2;\n max-width: 600px;\n margin: 0 auto;\n opacity: 0;\n transition: opacity 1s ease;\n }\n .closing-quote.visible { opacity: 0.6; }\n\n \/* ==================== FOOTER ==================== *\/\n footer {\n text-align: center;\n padding: 4rem 2rem;\n position: relative;\n z-index: 2;\n border-top: 1px solid rgba(200, 212, 224, 0.04);\n }\n footer p {\n font-size: 0.8rem;\n color: var(--moon-soft);\n letter-spacing: 0.25em;\n opacity: 0.3;\n }\n\n \/* ==================== FALLING PLUM PETALS ==================== *\/\n .plum-container {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n overflow: hidden;\n }\n .plum-petal {\n position: absolute;\n font-size: 0.6rem;\n opacity: 0;\n color: var(--plum-pale);\n animation: plumFall linear infinite;\n }\n @keyframes plumFall {\n 0% {\n opacity: 0;\n transform: translateY(-5vh) rotate(0deg) translateX(0);\n }\n 10% { opacity: 0.5; }\n 90% { opacity: 0.3; }\n 100% {\n opacity: 0;\n transform: translateY(105vh) rotate(540deg) translateX(100px);\n }\n }\n\n \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-links { display: none; }\n .moon-wrap { display: none; }\n .festival-list { grid-template-columns: 1fr; }\n .lore-grid { grid-template-columns: 1fr; }\n .festival-item {\n grid-template-columns: 1fr;\n }\n .festival-date {\n writing-mode: horizontal-tb;\n border-left: none;\n border-bottom: 1px solid rgba(201, 168, 76, 0.2);\n padding-left: 0;\n padding-bottom: 0.5rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <div class=\"stars-container\" id=\"stars\"><\/div>\n\n \n <div class=\"moon-wrap\">\n <div class=\"moon-glow\"><\/div>\n <div class=\"moon-body\"><\/div>\n <\/div>\n\n \n <div class=\"plum-container\" id=\"plums\"><\/div>\n\n \n <div class=\"loader\" id=\"loader\">\n <div class=\"loader-moon\"><\/div>\n <div class=\"loader-text\">\u56db\u6708<\/div>\n <\/div>\n\n \n <nav id=\"nav\">\n <div class=\"nav-logo\">\u9634\u5386\u5341\u4e8c\u6708<\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#names\">\u522b\u540d<\/a><\/li>\n <li><a href=\"#poetry\">\u8bd7\u8bcd<\/a><\/li>\n <li><a href=\"#festivals\">\u8282\u4ee4<\/a><\/li>\n <li><a href=\"#lore\">\u6c11\u4fd7<\/a><\/li>\n <\/ul>\n <\/nav>\n\n \n <section class=\"hero\" id=\"hero\">\n <div class=\"hero-light\"><\/div>\n <div>\n <div class=\"month-name\">YIN LI SI YUE<\/div>\n <h1 class=\"big-title\">\n \u9634\u5386<span class=\"slash\">\/<\/span>\u56db\u6708\n <\/h1>\n <p class=\"hero-sub\">\u5b5f\u590f\u4e4b\u6708 \u00b7 \u4e07\u7269\u7e41\u76db<\/p>\n <div class=\"hero-divider\"><\/div>\n <div class=\"hero-date\">\n \u4e19\u5348\u5e74\u56db\u6708<span class=\"sep\">\u00b7<\/span>2026\u5e745\u670817\u65e5\u8d77\n <\/div>\n <\/div>\n <div class=\"scroll-hint\">\n <span>\u6708\u5347\u4e4b\u65f6<\/span>\n <div class=\"arrow\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"intro\">\n <p class=\"intro-text\" id=\"introText\">\n \u9634\u5386\u56db\u6708\uff0c\u590f\u6c14\u6e10\u76db\uff0c\u4e07\u7269\u81f3\u6b64<em>\u7686\u5df2\u957f\u5927<\/em>\u3002<br>\n \u69d0\u82b1\u5f00\u5c3d\uff0c\u6787\u6777\u91d1\u9ec4\uff0c\u7a3b\u7530\u91cc\u7684\u86d9\u58f0\u6b64\u8d77\u5f7c\u4f0f\u3002<br>\n \u8fd9\u662f<em>\u5b5f\u590f<\/em>\uff0c\u662f\"\u6885\u5b50\u9ec4\u65f6\u96e8\"\u7684\u5e8f\u66f2\uff0c<br>\n \u4e5f\u662f\u53e4\u4eba\u773c\u4e2d<em>\u4eba\u751f\u6700\u597d\u662f\u5c0f\u6ee1<\/em>\u7684\u65f6\u8282\u3002\n <\/p>\n <\/section>\n\n \n <section class=\"month-names\" id=\"names\">\n <div class=\"section-header reveal-section\">\n <div class=\"section-label\">\u522b\u79f0<\/div>\n <h2 class=\"section-title\">\u56db\u6708\u7684\u540d\u5b57<\/h2>\n <\/div>\n <div class=\"name-grid\">\n <div class=\"name-card\">\n <h3>\u69d0\u6708<\/h3>\n <div class=\"sub\">HUAI MONTH<\/div>\n <p>\u69d0\u6811\u53c8\u540d\"\u56fd\u69d0\"\uff0c\u56db\u6708\u6b63\u662f\u82b1\u671f\uff0c\u6ee1\u6811\u767d\u82b1\u5982\u96ea\uff0c\u9999\u6c14\u88ad\u4eba\u3002\u69d0\u82b1\u53ef\u5165\u836f\u3001\u53ef\u98df\uff0c\u4ea6\u662f\u53e4\u4ee3\u79d1\u4e3e\u7684\u8c61\u5f81\uff0c\"\u69d0\u82b1\u9ec4\uff0c\u4e3e\u5b50\u5fd9\"\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u5b5f\u590f<\/h3>\n <div class=\"sub\">MENGXIA<\/div>\n <p>\u590f\u5b63\u7684\u7b2c\u4e00\u4e2a\u6708\u79f0\"\u5b5f\u590f\"\u3002\u300a\u793c\u8bb0\u00b7\u6708\u4ee4\u300b\u8f7d\uff1a\"\u5b5f\u590f\u4e4b\u6708\uff0c\u65e5\u5728\u6bd5\uff0c\u660f\u7ffc\u4e2d\uff0c\u65e6\u5a7a\u5973\u4e2d\u3002\"\u6b64\u65f6\u5929\u5730\u59cb\u70ed\uff0c\u4e07\u7269\u5e76\u79c0\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u9634\u6708<\/h3>\n <div class=\"sub\">YINYUE<\/div>\n <p>\u56db\u6708\u53c8\u79f0\"\u9634\u6708\"\uff0c\u6b64\u65f6\u9634\u6c14\u5c1a\u5b58\uff0c\u9633\u6c14\u6e10\u957f\uff0c\u5929\u6c14\u5c1a\u672a\u5927\u70ed\uff0c\u6545\u79f0\"\u9634\"\u3002\u300a\u5317\u5802\u4e66\u949e\u300b\u5f15\u300a\u5d14\u5bd4\u56db\u6c11\u6708\u4ee4\u300b\u6709\"\u56db\u6708\u9634\u6708\"\u4e4b\u8bf4\u3002<\/p>\n <\/div>\n <div class=\"name-card\">\n <h3>\u4e4f\u6708<\/h3>\n <div class=\"sub\">FAYUE<\/div>\n <p>\u519c\u8c1a\u4e91\uff1a\"\u56db\u6708\u4eba\u4eec\u4e4f\u3002\"\u6b64\u65f6\u9752\u9ec4\u4e0d\u63a5\uff0c\u65e7\u7cae\u5c06\u5c3d\uff0c\u65b0\u9ea6\u672a\u719f\uff0c\u519c\u5bb6\u6700\u4e3a\u5fd9\u788c\u8f9b\u82e6\uff0c\u6545\u6709\"\u4e4f\u6708\"\u4e4b\u79f0\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"poetry-section\" id=\"poetry\">\n <div class=\"poem-block\" id=\"poem1\">\n <h3 class=\"poem-title\">\u56db\u65f6\u7530\u56ed\u6742\u5174 \u00b7 \u5176\u4e00<\/h3>\n <p class=\"poem-author\">\u5b8b \u00b7 \u8303\u6210\u5927<\/p>\n <div class=\"poem-lines\" id=\"poem1Lines\">\n <span class=\"line\" style=\"transition-delay:0.1s\">\u6885\u5b50\u91d1\u9ec4\u674f\u5b50\u80a5\uff0c\u9ea6\u82b1\u96ea\u767d\u83dc\u82b1\u7a00\u3002<\/span>\n <span class=\"line\" style=\"transition-delay:0.5s\">\u65e5\u957f\u7bf1\u843d\u65e0\u4eba\u8fc7\uff0c\u60df\u6709\u873b\u8713\u86f1\u8776\u98de\u3002<\/span>\n <\/div>\n <\/div>\n <div class=\"poem-divider\"><\/div>\n <div class=\"poem-block\" id=\"poem2\">\n <h3 class=\"poem-title\">\u4e61\u6751\u56db\u6708<\/h3>\n <p class=\"poem-author\">\u5b8b \u00b7 \u7fc1\u5377<\/p>\n <div class=\"poem-lines\" id=\"poem2Lines\">\n <span class=\"line\" style=\"transition-delay:0.1s\">\u7eff\u904d\u5c71\u539f\u767d\u6ee1\u5ddd\uff0c\u5b50\u89c4\u58f0\u91cc\u96e8\u5982\u70df\u3002<\/span>\n <span class=\"line\" style=\"transition-delay:0.5s\">\u4e61\u6751\u56db\u6708\u95f2\u4eba\u5c11\uff0c\u624d\u4e86\u8695\u6851\u53c8\u63d2\u7530\u3002<\/span>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"festivals\" id=\"festivals\">\n <div class=\"section-header\">\n <div class=\"section-label\">\u8282\u4ee4<\/div>\n <h2 class=\"section-title\">\u672c\u6708\u91cd\u8981\u65f6\u4ee4<\/h2>\n <\/div>\n <div class=\"festival-list\">\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u56db\u6708\u5341\u56db<\/div>\n <div class=\"festival-content\">\n <h3>\u5415\u7956\u8bde\u8fb0<\/h3>\n <p>\u56db\u6708\u5341\u56db\u65e5\u4e3a\u516b\u4ed9\u4e4b\u4e00\u5415\u6d1e\u5bbe\u8bde\u8fb0\uff0c\u9053\u6559\u4fe1\u4f17\u4e8e\u6b64\u65e5\u796d\u7940\u5415\u7956\uff0c\u7948\u6c42\u6d88\u707e\u89e3\u96be\u3001\u5b66\u4e1a\u8fdb\u6b65\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u5c0f\u6ee1\u524d\u540e<\/div>\n <div class=\"festival-content\">\n <h3>\u5c0f\u6ee1\u52a8\u4e09\u8f66<\/h3>\n <p>\u6b64\u65f6\u5c0f\u9ea6\u5373\u5c06\u6210\u719f\uff0c\u519c\u4eba\u987b\u540c\u65f6\u7167\u6599\u6c34\u8f66\u3001\u6cb9\u8f66\u3001\u4e1d\u8f66\u3002\"\u5c0f\u6ee1\u52a8\u4e09\u8f66\"\u662f\u6c5f\u5357\u519c\u5fd9\u7684\u771f\u5b9e\u5199\u7167\uff0c\u7948\u613f\u98ce\u8c03\u96e8\u987a\u3001\u4e94\u8c37\u4e30\u767b\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u56db\u6708\u4e0b\u65ec<\/div>\n <div class=\"festival-content\">\n <h3>\u9001\u82b1\u795e<\/h3>\n <p>\u519c\u5386\u4e8c\u6708\u8fce\u82b1\u795e\uff0c\u56db\u6708\u9001\u82b1\u795e\u3002\u767e\u82b1\u5df2\u5f00\u8fc7\u4e00\u904d\uff0c\u6c11\u95f4\u6709\"\u9001\u82b1\u795e\"\u7684\u4e60\u4fd7\uff0c\u4ee5\u8c22\u82b1\u795e\u5e87\u4f51\u6765\u5e74\u518d\u5f00\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"festival-item\">\n <div class=\"festival-date\">\u6885\u5b50\u9ec4\u65f6<\/div>\n <div class=\"festival-content\">\n <h3>\u9752\u6885\u716e\u9152<\/h3>\n <p>\u6885\u5b50\u4e8e\u56db\u6708\u7531\u9752\u8f6c\u9ec4\uff0c\u6b64\u65f6\u7684\u9752\u6885\u9178\u6da9\u5165\u9152\u6700\u4e3a\u76f8\u5b9c\u3002\u53e4\u4eba\u4ee5\u9752\u6885\u4f50\u9152\uff0c\u65e2\u53d6\u5176\u9178\u4ee5\u5f00\u80c3\uff0c\u4ea6\u5bd3\u610f\"\u6885\u5f00\u4e94\u798f\"\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"lore\" id=\"lore\">\n <div class=\"section-header\">\n <div class=\"section-label\">\u6c11\u4fd7<\/div>\n <h2 class=\"section-title\">\u5c81\u65f6\u6742\u8bb0<\/h2>\n <\/div>\n <div class=\"lore-grid\">\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83c\udf3e<\/div>\n <h3>\u56db\u6708\u7684\u7530\u91ce<\/h3>\n <p>\u5317\u65b9\u5c0f\u9ea6\u626c\u82b1\u704c\u6d46\uff0c\u5357\u65b9\u65e9\u7a3b\u63d2\u79e7\u5b8c\u6bd5\u3002\u7530\u95f4\u7ba1\u7406\u8fdb\u5165\u5173\u952e\u671f\uff0c\u9632\u866b\u3001\u704c\u6e89\u3001\u8ffd\u80a5\uff0c\u4e00\u523b\u4e0d\u5f97\u95f2\u3002\u6b64\u65f6\u7684\u7530\u91ce\uff0c\u662f\u4e00\u5e74\u4e2d\u6700\u5fd9\u788c\u3001\u4e5f\u6700\u5145\u6ee1\u5e0c\u671b\u7684\u666f\u8c61\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83c\udf3f<\/div>\n <h3>\u56db\u6708\u7684\u6ecb\u5473<\/h3>\n <p>\u6787\u6777\u3001\u6a31\u6843\u3001\u9752\u6885\u3001\u674e\u5b50\u6b21\u7b2c\u6210\u719f\u3002\u6c5f\u5357\u6709\"\u7acb\u590f\u5c1d\u4e09\u9c9c\"\u4e4b\u8bf4\uff1a\u6a31\u6843\u3001\u9752\u6885\u4e0e\u9ca5\u9c7c\u3002\u56db\u6708\u4e5f\u662f\u5403\u82e6\u83dc\u7684\u65f6\u8282\uff0c\u53e4\u4eba\u4ee5\u6b64\u6e05\u70ed\u89e3\u6bd2\uff0c\u5e94\u5bf9\u6e10\u76db\u7684\u6691\u6c14\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\u2614<\/div>\n <h3>\u9ec4\u6885\u96e8\u8d77<\/h3>\n <p>\u56db\u6708\u540e\u671f\uff0c\u957f\u6c5f\u4e2d\u4e0b\u6e38\u6e10\u5165\u6885\u96e8\u5b63\u8282\u3002\u7ec6\u96e8\u7ef5\u7ef5\uff0c\u6e7f\u5ea6\u5927\u589e\uff0c\"\u6885\u5b50\u9ec4\u65f6\u96e8\"\u6210\u4e3a\u6b64\u65f6\u6700\u5178\u578b\u7684\u5929\u6c14\u7b26\u53f7\uff0c\u4e5f\u50ac\u751f\u4e86\u65e0\u6570\u8bd7\u8bcd\u6b4c\u8d4b\u3002<\/p>\n <\/div>\n <div class=\"lore-card\">\n <div class=\"lore-icon\">\ud83d\udcd6<\/div>\n <h3>\u56db\u6708\u4e0e\u8bfb\u4e66<\/h3>\n <p>\u53e4\u8c1a\uff1a\"\u56db\u6708\u4e0d\u70ed\uff0c\u4e94\u8c37\u4e0d\u7ed3\u3002\"\u519c\u5fd9\u4e4b\u4f59\uff0c\u8bfb\u4e66\u4eba\u4ea6\u4e0d\u865a\u5ea6\u3002\"\u69d0\u82b1\u9ec4\uff0c\u4e3e\u5b50\u5fd9\"\u2014\u2014\u69d0\u82b1\u5f00\u65f6\uff0c\u6b63\u662f\u58eb\u5b50\u7528\u529f\u3001\u6e29\u4e66\u5907\u8003\u7684\u65f6\u8282\u3002<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"closing\">\n <div class=\"closing-glyph\">\u56db<\/div>\n <p class=\"closing-quote\" id=\"closingQuote\">\n \u56db\u6708\u6e05\u548c\u96e8\u4e4d\u6674\uff0c<br>\n \u5357\u5c71\u5f53\u6237\u8f6c\u5206\u660e\u3002<br>\n \u66f4\u65e0\u67f3\u7d6e\u56e0\u98ce\u8d77\uff0c<br>\n \u60df\u6709\u8475\u82b1\u5411\u65e5\u503e\u3002\n <\/p>\n <\/section>\n\n \n <footer>\n <p>\u9634\u5386\u56db\u6708 \u00b7 \u4e19\u5348\u5e74 \u00b7 \u4e07\u7269\u7e41\u76db<\/p>\n <\/footer>\n\n <script>\n \/\/ Loader\n window.addEventListener('load', () => {\n setTimeout(() => {\n document.getElementById('loader').classList.add('hidden');\n }, 2200);\n });\n\n \/\/ Stars\n const starsContainer = document.getElementById('stars');\n for (let i = 0; i < 100; i++) {\n const star = document.createElement('div');\n star.className = 'star';\n star.style.cssText = `\n left: ${Math.random() * 100}%;\n top: ${Math.random() * 100}%;\n width: ${Math.random() * 2 + 1}px;\n height: ${Math.random() * 2 + 1}px;\n --dur: ${Math.random() * 4 + 2}s;\n --delay: ${Math.random() * 5}s;\n `;\n starsContainer.appendChild(star);\n }\n\n \/\/ Falling plum petals\n const plumContainer = document.getElementById('plums');\n const petalChars = ['\u274b', '\u273f', '\u273e', '\u2740'];\n function createPetal() {\n const p = document.createElement('div');\n p.className = 'plum-petal';\n p.textContent = petalChars[Math.floor(Math.random() * petalChars.length)];\n p.style.left = Math.random() * 100 + '%';\n p.style.fontSize = (Math.random() * 0.8 + 0.4) + 'rem';\n p.style.animationDuration = (Math.random() * 10 + 15) + 's';\n p.style.animationDelay = Math.random() * 5 + 's';\n p.style.color = Math.random() > 0.5 ? 'rgba(212,196,206,0.5)' : 'rgba(139,107,122,0.4)';\n plumContainer.appendChild(p);\n setTimeout(() => p.remove(), 25000);\n }\n for (let i = 0; i < 10; i++) setTimeout(createPetal, i * 1000);\n setInterval(createPetal, 5000);\n\n \/\/ Nav scroll\n const nav = document.getElementById('nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 80);\n });\n\n \/\/ Intro reveal\n const introText = document.getElementById('introText');\n const introObs = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) introText.classList.add('visible'); });\n }, { threshold: 0.3 });\n introObs.observe(introText);\n\n \/\/ Name cards stagger\n const nameCards = document.querySelectorAll('.name-card');\n const cardObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 120);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n nameCards.forEach(card => cardObs.observe(card));\n\n \/\/ Poem blocks\n const poem1 = document.getElementById('poem1');\n const poem2 = document.getElementById('poem2');\n const poemObs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n e.target.classList.add('visible');\n const lines = e.target.querySelectorAll('.poem-lines');\n lines.forEach(l => l.classList.add('visible'));\n }\n });\n }, { threshold: 0.3 });\n poemObs.observe(poem1);\n poemObs.observe(poem2);\n\n \/\/ Festival items stagger\n const festivalItems = document.querySelectorAll('.festival-item');\n const festObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 150);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n festivalItems.forEach(item => festObs.observe(item));\n\n \/\/ Lore cards\n const loreCards = document.querySelectorAll('.lore-card');\n const loreObs = new IntersectionObserver((entries) => {\n entries.forEach((e, i) => {\n if (e.isIntersecting) {\n setTimeout(() => e.target.classList.add('visible'), i * 150);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n loreCards.forEach(card => loreObs.observe(card));\n\n \/\/ Closing quote\n const closingQuote = document.getElementById('closingQuote');\n const closeObs = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) closingQuote.classList.add('visible'); });\n }, { threshold: 0.5 });\n closeObs.observe(closingQuote);\n\n \/\/ Smooth scroll\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n e.preventDefault();\n const t = document.querySelector(a.getAttribute('href'));\n if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"\u9634\u5386\u56db\u6708 \u00b7 \u69d0\u6708 \u56db\u6708 \u9634\u5386\u5341\u4e8c\u6708 \u522b\u540d \u8bd7\u8bcd \u8282\u4ee4 \u6c11\u4fd7 YIN LI SI YUE \u9634\u5386\/\u56db\u6708 \u5b5f\u590f\u4e4b\u6708 […]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-1687","post","type-post","status-publish","format-standard","hentry","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1687"}],"version-history":[{"count":4,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687\/revisions"}],"predecessor-version":[{"id":1694,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1687\/revisions\/1694"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}