/* =========================================================
   良辰囍帖 v4 · 顶级质感升级
   墨迹加载 / 启门光芒 / 粒子囍字 / 逐字显现 / 帷幕揭图
   金色光标 / 落花 / 烟花终章
   ========================================================= */

/* ---------- 墨迹加载（在喜封内，最先出现） ---------- */
.ceremony-loader{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(ellipse at 50% 45%,#8e1a27 0%,#5c0c18 70%,#45070f 100%);color:var(--gold-light);transition:opacity 1s var(--ease),visibility 1s}
.ceremony-loader.is-done{opacity:0;visibility:hidden}
.ceremony-loader.is-done .loader-xi{transform:scale(1.6);opacity:0}
.loader-xi{width:min(210px,52vw);height:auto;overflow:visible;transition:transform 1.1s var(--ease),opacity .9s}
.loader-xi text{font:400 150px var(--brush);fill:url(#loader-gold);fill-opacity:0;stroke:url(#loader-gold);stroke-width:1.4;stroke-dasharray:1100;stroke-dashoffset:1100}
.loader-ring{transform-box:fill-box;fill:none;stroke:#d9b47744;stroke-width:1;stroke-dasharray:578;stroke-dashoffset:578;transform:rotate(-90deg);transform-origin:center}
.ceremony-loader.ink text{animation:ink-draw 1.7s cubic-bezier(.45,0,.25,1) forwards,ink-fill .9s ease 1.35s forwards}
.ceremony-loader.ink .loader-ring{animation:ring-draw 2.2s var(--ease) forwards}
@keyframes ink-draw{to{stroke-dashoffset:0}}
@keyframes ink-fill{to{fill-opacity:1;stroke-width:.4}}
@keyframes ring-draw{to{stroke-dashoffset:0}}
.loader-line{font-size:12px;letter-spacing:5px;opacity:.8;animation:rise-in 1s var(--ease) .4s both}
.loader-pct{font:400 13px var(--latin);letter-spacing:3px;opacity:.6;font-variant-numeric:tabular-nums}
.loader-pct b{font-weight:400;font-size:18px}

/* 加载结束后，喜封元素依次入场 */
.ceremony-dialog:not(.stage-ready) .ceremony-heading,.ceremony-dialog:not(.stage-ready) .ceremony-couple,.ceremony-dialog:not(.stage-ready) .ceremony-hint{opacity:0;transform:translateY(24px)}
.ceremony-dialog:not(.stage-ready) .gold-clasp{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-90deg)}
.ceremony-dialog:not(.stage-ready) .ceremony-door{filter:brightness(.6)}
.stage-ready:not(.is-open) .ceremony-heading{transition-delay:.15s;transition-duration:1s}
.stage-ready:not(.is-open) .gold-clasp{transition:transform 1.2s cubic-bezier(.2,1.4,.4,1) .45s,opacity .8s .45s}
.stage-ready:not(.is-open) .ceremony-couple{transition-delay:.75s;transition-duration:1s}
.stage-ready:not(.is-open) .ceremony-hint{transition:opacity 1s 1.1s}

/* 门缝里透出的光 */
.ceremony-stage::after{content:'';position:absolute;left:50%;top:6%;bottom:6%;width:2px;margin-left:-1px;z-index:5;background:linear-gradient(180deg,transparent,#ffe7b0 20%,#fff6dc 50%,#ffe7b0 80%,transparent);box-shadow:0 0 18px 4px #ffcf7a66;opacity:.0;pointer-events:none;animation:seam 3.2s ease-in-out infinite}
.stage-ready .ceremony-stage::after{opacity:1}
.is-open .ceremony-stage::after{animation:seam-flare .9s ease-out forwards}
@keyframes seam{0%,100%{opacity:.35}50%{opacity:.9}}
@keyframes seam-flare{0%{opacity:1;transform:scaleX(1)}40%{opacity:1;transform:scaleX(40)}100%{opacity:0;transform:scaleX(120)}}

/* 启门光芒 */
.ceremony-burst{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;z-index:3;pointer-events:none;opacity:0}
.ceremony-burst::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe6a855 0deg 3deg,transparent 3deg 12deg);mask-image:radial-gradient(circle,#000 0,#000 8%,transparent 55%);-webkit-mask-image:radial-gradient(circle,#000 0,#000 8%,transparent 55%)}
.ceremony-burst i{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#fff8e0 0%,#ffd98a66 25%,transparent 60%)}
.is-bursting .ceremony-burst{animation:burst 2.2s cubic-bezier(.2,.7,.3,1) forwards}
.is-bursting .ceremony-burst::before{animation:spin-slow 2.2s linear forwards}
@keyframes burst{0%{opacity:0;transform:scale(.2)}18%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes spin-slow{to{transform:rotate(40deg)}}
.is-bursting .ceremony-stage{animation:push-in 2s var(--ease)}
@keyframes push-in{0%{transform:scale(1)}35%{transform:scale(1.045)}100%{transform:scale(1)}}
.door-sparks{position:absolute;inset:0;z-index:8;pointer-events:none}
.ceremony-door{box-shadow:inset 0 0 0 1px #d9b47722}
.is-open .ceremony-door{filter:brightness(.55)!important}
.gold-clasp{transition:transform .5s var(--ease),opacity .5s}
.gold-clasp .clasp-character{background:linear-gradient(115deg,#7d1a24 30%,#c4483f 50%,#7d1a24 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:clasp-sheen 3.6s ease-in-out infinite}
@keyframes clasp-sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ---------- 首屏粒子囍 ---------- */
.hero-emblem.has-particles>span{opacity:0}
.xi-canvas{position:absolute;left:50%;top:50%;width:260%;height:260%;transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.hero-background img{animation:hero-drift 26s ease-in-out infinite alternate}
@keyframes hero-drift{from{scale:1.04}to{scale:1.12}}
.hero::after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffe2a61a 48%,#fff1cf26 50%,#ffe2a61a 52%,transparent 65%);background-size:300% 100%;animation:silk-light 9s ease-in-out infinite}
@keyframes silk-light{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.hero h1.ink-title span{background:linear-gradient(110deg,#d6b072,#fbe7b8 40%,#d9b475 55%,#fff1c9 70%,#c9a062);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:title-sheen 7s ease-in-out infinite}
.hero-play .hero h1.ink-title span{animation:ink-in 1.1s var(--ease) forwards,title-sheen 7s ease-in-out 2s infinite;animation-delay:calc(var(--n,0) * 180ms + 350ms),2s}
@keyframes title-sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ---------- 标题逐字显现 ---------- */
.split-ready .ch{display:inline-block;opacity:0;transform:translateY(.45em) scale(.94);filter:blur(8px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i) * 42ms + 120ms)}
.split-ready.chars-in .ch{opacity:1;transform:none;filter:none}

/* ---------- 帷幕揭图 ---------- */
.curtain-host{position:relative}
.curtain{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;container-type:size;background:radial-gradient(ellipse at 50% 46%,#bb2c37 0%,#9c1f2c 52%,#7a1421 100%);clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1)}
.curtain::before{content:'';position:absolute;inset:10px;border:1px solid #ecd09a80;box-shadow:inset 0 0 0 5px #9c1f2c,inset 0 0 0 6px #ecd09a40}
.curtain::after{content:'\56CD';position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.94);font:400 clamp(60px,13vw,160px)/1 var(--brush);font-size:min(56cqh,64cqw);background:linear-gradient(110deg,#b5884c,#f4dfaa 36%,#d5b16e 53%,#ffedc0 72%,#bf9454);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 6px #4a0c1570);transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
.curtain-host.is-unveiled .curtain{clip-path:inset(0 0 0 100%)}
.curtain-host.is-unveiled .curtain.to-left{clip-path:inset(0 100% 0 0)}
.curtain-host.is-unveiled .curtain::after{transform:translate(-50%,-46%) scale(1.08)}
.curtain-host img{transition:transform 1.8s var(--ease)}
.curtain-host:not(.is-unveiled) img{transform:scale(1.18)}

/* ---------- 金色光标（仅电脑） ---------- */
.gold-cursor,.gold-cursor-dot{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.gold-cursor{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid #d9b477cc;display:grid;place-items:center;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s;mix-blend-mode:normal}
.gold-cursor span{font:11px var(--serif);letter-spacing:2px;color:#5c0c18;opacity:0;transition:opacity .25s;white-space:nowrap}
.gold-cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#d9b477}
.cursor-on .gold-cursor,.cursor-on .gold-cursor-dot{opacity:1}
.gold-cursor.is-hover{width:58px;height:58px;margin:-29px 0 0 -29px;background:#f2dbab22;border-color:#f2dbab}
.gold-cursor.has-label{width:78px;height:78px;margin:-39px 0 0 -39px;background:#f2dbabee;border-color:#f2dbab}
.gold-cursor.has-label span{opacity:1}
.gold-cursor.is-down{transform:scale(.85)}

/* ---------- 落花 ---------- */
.petal-layer{position:fixed;inset:0;z-index:41;pointer-events:none}

/* ---------- 终章 · 烟花 ---------- */
.site-footer{background:radial-gradient(ellipse at 50% 120%,#a6232d 0%,#6e1320 45%,#3e0711 100%);padding-top:150px;overflow:hidden;cursor:crosshair}
.site-footer>*:not(.fireworks){position:relative;z-index:1}
.fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.fireworks-hint{font-size:11px;letter-spacing:4px;opacity:.55;margin-top:18px;animation:hint-bob 2.6s ease-in-out infinite}
.footer-seal{text-shadow:0 0 30px #ffcf7a66}

/* ---------- 按钮光泽 ---------- */
.button::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff40 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.button:hover::after{transform:translateX(120%)}
.button-red,.button-gold,.button-outline{translate:var(--magnetic-x,0px) var(--magnetic-y,0px)}

@media(max-width:800px){
  .site-footer{padding-top:120px;cursor:default}
  .xi-canvas{width:240%;height:240%}
}
@media(prefers-reduced-motion:reduce){
  .ceremony-loader.ink text{animation:none;fill-opacity:1;stroke-dashoffset:0}
  .ceremony-loader.ink .loader-ring{animation:none;stroke-dashoffset:0}
  .split-ready .ch{opacity:1;transform:none;filter:none;transition:none}
  .curtain{display:none}
  .curtain-host:not(.is-unveiled) img{transform:none}
  .hero-background img,.hero::after,.hero h1.ink-title span,.gold-clasp .clasp-character{animation:none}
  .ceremony-stage::after{animation:none}
}
.hero h1{text-shadow:none;filter:drop-shadow(0 3px 10px #4a0b1666)}

/* =========================================================
   v4.1 细节打磨
   ========================================================= */
/* 音乐键收进顶栏，不再遮挡内容 */
.header-actions{display:flex;align-items:center;gap:12px}
.site-header .music-toggle{position:static!important;inset:auto!important;box-shadow:none;background:transparent;backdrop-filter:none;padding:7px 14px 7px 7px;border:1px solid #d9b47766;border-radius:40px;font-size:11px;letter-spacing:2px;gap:10px;transition:background .3s,border-color .3s}
.site-header .music-toggle:hover{background:#d9b47718;border-color:#d9b477}
.site-header .music-toggle .music-disc{width:28px;height:28px}
@media(max-width:800px){
  .site-header .music-toggle{padding:5px;gap:0}
  .site-header .music-toggle .music-bars,.site-header .music-toggle .music-label{display:none}
  .header-actions{gap:8px}
}

/* 大号水印囍改为描金空心字 */
.rsvp-character,.moments::before,.share::before{color:transparent!important;-webkit-text-stroke:1px #c39c6e33;text-stroke:1px #c39c6e33}
.moments::before,.share::before{-webkit-text-stroke-color:#f2dbab24}

/* 标题按短语换行，标点不落单 */
.phrase{display:inline-block;white-space:nowrap}

/* 喜签与喜炮卡片等高、内容居中 */
.luck-grid{align-items:stretch}
.lot-card,.cracker-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.lot-card .lot-result{width:100%}

/* 启门光束更柔和 */
@keyframes seam-flare{0%{opacity:1;transform:scaleX(1);filter:blur(0)}35%{opacity:.95;transform:scaleX(22);filter:blur(6px)}100%{opacity:0;transform:scaleX(70);filter:blur(16px)}}
.preview-label{white-space:nowrap}
@media(max-width:600px){.preview-label{left:50%!important;right:auto!important;transform:translateX(-50%);bottom:14px!important;font-size:8px;opacity:.75}}

/* =========================================================
   小彩蛋
   ========================================================= */
.egg-rain{position:fixed;top:-60px;z-index:160;pointer-events:none;font:400 var(--size,22px)/1 var(--brush);color:#e8b85c;text-shadow:0 2px 10px #7a162255;animation:egg-fall var(--dur,3s) cubic-bezier(.35,.1,.6,1) forwards}
@keyframes egg-fall{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate(var(--drift),110vh) rotate(var(--rot));opacity:.9}}
.egg-wiggle{animation:egg-wiggle .45s ease}
@keyframes egg-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(10deg) scale(1.05)}}
.brand-seal{display:inline-block}
.footer-seal{display:inline-block;cursor:pointer}
.chosen-date{cursor:pointer}
.chosen-date:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.egg-pop{animation:emblem-pulse .8s var(--ease)}
.hero .couple{cursor:pointer;transition:filter .4s,transform .4s var(--ease)}
.hero .couple.egg-pressing{transform:scale(.97);filter:brightness(1.2)}
.hero .couple.egg-glow span{color:#fff3d0;text-shadow:0 0 18px #ffd27a,0 0 36px #ffb84d99;transition:text-shadow .6s,color .6s}
/* 隐藏签 */
.lot-result.is-hidden-lot{background:linear-gradient(135deg,#fff3d6,#f1d7a0 45%,#fbe9c3 60%,#e6c487);border-color:#b5884c;box-shadow:0 0 0 3px #f2dbab88,0 14px 34px -12px #b5884c;overflow:hidden}
.lot-result.is-hidden-lot::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#ffffffaa 50%,transparent 65%);transform:translateX(-100%);animation:hidden-shine 2.4s ease-in-out .3s infinite;pointer-events:none}
@keyframes hidden-shine{60%,100%{transform:translateX(100%)}}
.lot-result.is-hidden-lot .lot-level{background:linear-gradient(110deg,#7a1622,#c4383f);letter-spacing:4px}
.lot-progress{display:block;height:3px;margin:14px auto 6px;max-width:200px;background:#a6232d1a;border-radius:3px;overflow:hidden}
.lot-progress i{display:block;height:100%;background:linear-gradient(90deg,#c9a466,#a6232d);border-radius:3px;transition:width .8s var(--ease)}
.lot-count{display:block;font-size:11px;letter-spacing:1px;color:var(--ink-soft)}
/* 彩蛋计数 */
.egg-counter{display:inline-flex;align-items:center;gap:8px;margin:26px auto 0;font-size:12px;letter-spacing:2px;color:var(--gold-light);opacity:.75;padding:8px 16px;border:1px dashed #d9b47766;border-radius:30px;transition:opacity .3s,background .3s}
.egg-counter:hover{opacity:1;background:#d9b47712}
.egg-counter b{font:400 16px var(--latin);color:#ffe2a6}
.egg-counter i{font-style:normal;font-size:11px;opacity:.7;border-bottom:1px solid #d9b47766}
.egg-panel{max-width:360px;margin:14px auto 0;padding:18px 22px;text-align:left;background:#3e0711cc;border:1px solid #d9b47744;backdrop-filter:blur(6px);animation:rise-in .5s var(--ease)}
.egg-panel p{font-size:11px;letter-spacing:4px;opacity:.7;margin-bottom:10px;text-align:center}
.egg-panel ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.egg-panel li{display:flex;gap:10px;align-items:center;font-size:13px;letter-spacing:1px;opacity:.85}
.egg-panel li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid #d9b47788;font:400 11px var(--latin);flex-shrink:0}
.egg-panel li.is-found{opacity:.55;text-decoration:line-through;text-decoration-color:#d9b47788}
.egg-panel li.is-found span{background:var(--gold-light);color:var(--red-dark);border-color:var(--gold-light)}

/* =========================================================
   日历：公历 + 农历
   ========================================================= */
.date-card .calendar-days{row-gap:4px}
.date-card .calendar-days>span{height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1}
.date-card .calendar-days b{font-weight:inherit}
.date-card .calendar-days small{font:400 9px/1 var(--serif);letter-spacing:0;opacity:.55;white-space:nowrap}
.date-card .calendar-days .is-mark small{opacity:1;color:#ffd99a}
.date-card .chosen-date::before{top:0;bottom:0;height:auto;width:40px;border-radius:9px}
.date-card .chosen-date small{opacity:.8;color:#7d1b27}
.date-card .chosen-date i{bottom:-4px;right:calc(50% - 26px)}
.lunar-line{font-style:normal;font-size:12px;letter-spacing:2px;color:var(--gold-light);opacity:.92}
.lunar-note{font-size:.92em;color:var(--ink-soft);letter-spacing:1px}
.inner-lunar{font-size:12px;letter-spacing:3px;color:#a27b65;margin-top:6px}
@media(max-width:600px){
  .date-card .calendar-days>span{height:38px;gap:2px}
  .date-card .calendar-days small{font-size:8px}
  .date-card .chosen-date::before{width:34px}
  .date-card .chosen-date i{right:calc(50% - 22px)}
  .lunar-line{font-size:10px;letter-spacing:1px}
}
.wx-thumb{position:absolute;left:-10000px;top:0;width:300px;height:300px;opacity:0;pointer-events:none}