:root, html, body {
color-scheme: only light !important;
}
html {
background: #F9B9B8 !important;
}
body {
background: #F9B9B8 !important;
}
*{box-sizing:border-box}
:root{
--pink:#F9B9B8;
--pink2:#F7AEAD;
--cream:#FFF7EC;
--black:#111111;
--orange:#F7A64A;
--orangeSoft:#FFD39A;
--yellow:#FFD85E;
--red:#F06B72;
--blue:#9AC3DE;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--pink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;color:var(--black)}
button{font:inherit}
.paper-noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.02;background-image:url("assets/ui/PaperNoise_100x100.svg")}
.progress{position:fixed;left:0;right:0;top:0;height:4px;background:#ffffffaa;z-index:1400}.progress span{display:block;height:100%;width:0;background:var(--red);transition:.35s}
.page-dots{position:fixed;right:max(8px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:1350;display:flex;flex-direction:column;gap:7px}.page-dots i{width:7px;height:7px;border-radius:50%;background:#fff;border:2px solid var(--orange);transition:.3s}.page-dots i.on{height:20px;border-radius:10px;background:var(--yellow)}
.deck{position:fixed;inset:0;width:100%;height:100dvh;height:100svh;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.page{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:calc(142px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--pink) 0%,var(--pink2) 100%);transform:translateY(105%) scale(.965);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.22,.8,.22,1),opacity .25s ease}
.page::after{content:"";position:absolute;right:-145px;bottom:-145px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#FFF9D3 0,#FFF9D329 44%,transparent 70%);pointer-events:none}
.page.active{transform:translateY(var(--drag-y,0px)) scale(1);opacity:1;pointer-events:auto;z-index:10}
.page.prev{transform:translateY(-105%) scale(.965);opacity:0;z-index:1}
.pattern{position:absolute;inset:0;background-image:url("assets/ui/Pattern_PaperDots_Default.svg");background-size:270px 270px;opacity:.12;pointer-events:none}
/* COVER — pink remains the dominant surface */
.cover{padding:calc(12px + env(safe-area-inset-top)) 16px calc(14px + env(safe-area-inset-bottom));display:block}
.cover-head{position:relative;z-index:4;text-align:center}.brand-mini{max-width:430px;margin:0 auto;text-align:left;font-size:10px;letter-spacing:1.5px;font-weight:900;color:var(--black)}
.title-art{display:block;width:min(92vw,430px);margin:0 auto -4px}.pill{display:inline-block;padding:9px 16px;border-radius:999px;background:var(--cream);border:2px solid var(--orange);color:var(--black);font-weight:900;font-size:13px}
.cover-stage{position:absolute;left:0;right:0;top:29%;height:53%;z-index:3}.gift-area{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,340px);height:340px;touch-action:manipulation}
.gift-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:292px;height:292px;border-radius:50%;background:radial-gradient(circle,#FFF9D7 0,#FFD85E55 42%,transparent 70%)}
.gift{position:absolute;inset:18px}.gift-body{position:absolute;left:15%;right:15%;bottom:12%;height:43%;background:var(--cream);border:3px solid var(--orange);border-radius:18px 18px 28px 28px;box-shadow:0 5px 0 #F6C99A}.gift-body:after{content:"";position:absolute;inset:8px;border:1.5px solid #FFDDBA;border-radius:13px}
.gift-lid{position:absolute;left:10%;right:10%;top:27%;height:18%;background:#FFEFD6;border:3px solid var(--orange);border-radius:20px;box-shadow:0 4px 0 #F6D1A8;z-index:6;transform-origin:18% 90%;transition:.7s cubic-bezier(.16,1,.3,1)}
.ribbon-v{position:absolute;left:46%;top:27%;width:11%;height:58%;background:var(--red);border-left:2px solid var(--orange);border-right:2px solid var(--orange);z-index:4}.ribbon-h{position:absolute;left:16%;right:16%;top:51%;height:11%;background:var(--red);border-top:2px solid var(--orange);border-bottom:2px solid var(--orange);z-index:4}
.bow{position:absolute;top:17%;width:20%;height:14%;background:var(--red);border:3px solid var(--orange);z-index:8}.bow-l{left:30%;border-radius:72% 28% 68% 35%;transform:rotate(-18deg)}.bow-r{right:30%;border-radius:28% 72% 35% 68%;transform:rotate(18deg)}.knot{position:absolute;left:46%;top:20%;width:9%;height:9%;background:var(--red);border:3px solid var(--orange);border-radius:50%;z-index:9}
.gift-heart{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);font-size:31px;color:var(--yellow);z-index:8}.gift-date{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);font-size:22px;font-weight:900;color:var(--red);z-index:8}
.gift-hit{position:absolute;inset:0;border:0;background:transparent;z-index:30;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cover-popout{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.72);width:min(88vw,365px);opacity:0;filter:drop-shadow(0 6px 8px rgba(180,90,80,.14));transition:.7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.cover.open .gift{opacity:.12;transition:.38s}.cover.open .gift-lid{transform:rotate(-20deg) translate(-13px,-12px)}.cover.open .cover-popout{opacity:1;transform:translate(-50%,-46%) scale(1)}
.cover-note,.cover-sub{position:absolute;left:0;right:0;text-align:center;z-index:4;color:var(--black)}.cover-note{bottom:7.3%;font-size:13px;font-weight:900}.cover-sub{bottom:3.9%;font-size:11px;font-weight:800}
/* FLOATING STORY — no background block, only transparent characters and lines */
.floating-story{position:fixed;left:50%;top:4px;transform:translate(-50%,-150%) scale(1.2);width:min(96vw,450px);height:122px;z-index:1250;opacity:0;pointer-events:none;transition:.52s cubic-bezier(.16,1,.3,1)}
.floating-story.visible{opacity:1;transform:translate(-50%,0) scale(1)}
.romance-line{position:absolute;inset:1px 0 auto;width:100%;height:111px;opacity:.9}
.float-scene{position:absolute;left:50%;top:46%;transform:translate(-50%,-52%);max-width:59%;max-height:92px;filter:drop-shadow(0 4px 5px rgba(180,90,80,.12));transition:max-width .4s,max-height .4s,transform .4s}
.float-caption{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:10.5px;font-weight:900;color:var(--black);white-space:nowrap;background:#FFF7EC;border:1px solid #FFD39A;border-radius:999px;padding:3px 8px;line-height:1.1}
.floating-story.final-mode{top:53%;height:300px;width:min(98vw,480px);transform:translate(-50%,-50%) scale(1);z-index:1240}.floating-story.final-mode .romance-line,.floating-story.final-mode .float-caption{opacity:0}.floating-story.final-mode .float-scene{max-width:91%;max-height:250px;transform:translate(-50%,-50%);z-index:1}
/* CARDS — cream is contained; pink stays visibly dominant around it */
.card{position:relative;width:min(86vw,390px);height:calc(100dvh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100svh - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:390px;max-height:620px;z-index:3;background:var(--cream);border:2.5px solid var(--orange);border-radius:32px 36px 31px 38px;box-shadow:0 5px 0 rgba(247,166,74,.22);transform:translateY(24px) scale(.975) rotate(.65deg);opacity:.48;transition:.44s cubic-bezier(.2,.8,.2,1)}
.page.active .card{transform:translateY(0) scale(1) rotate(0);opacity:1}
.card:before{content:"";position:absolute;inset:8px;border:1.5px solid var(--orangeSoft);border-radius:27px 31px 28px 33px;pointer-events:none}
.card:after{content:"";position:absolute;width:58px;height:18px;left:50%;top:-10px;transform:translateX(-50%) rotate(-3deg);background:#FFD85E88;border-radius:4px;pointer-events:none}
.panel-bg{display:none}
.card-content{position:absolute;inset:8% 9% 7%;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--black)}
.card-content>small{font-size:10px;letter-spacing:1.45px;font-weight:900;color:var(--black);margin-bottom:8px}.card-content h2{font-size:29px;line-height:1.15;margin:0 0 13px;color:var(--red)}.card-content p{font-size:15px;line-height:1.68;margin:0;color:var(--black);font-weight:600}
.seal{margin-top:17px;padding:9px 15px;border-radius:999px;background:var(--yellow);border:2px solid var(--orange);font-weight:900;color:var(--black)}.seal b{margin-right:7px;color:var(--red)}.seal.pink{background:#FFD7DA}
.big-number{font-size:72px;line-height:.9;color:var(--red);font-weight:900;margin:9px 0 4px}.days-word{font-size:14px;letter-spacing:2px;font-weight:900;color:var(--black)}.clock{font-size:27px;font-weight:900;color:var(--black);margin-top:15px}.rule{width:70%;height:2px;background:#FFD39A;margin:14px 0 11px}.date{font-size:12px!important;letter-spacing:.8px}.countdown strong{font-size:22px;color:var(--orange);margin-top:7px}
.photo-card-page{max-height:650px}.photo-grid{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:4px}.photo-slot{position:relative;aspect-ratio:1/1}.photo-slot.big{grid-column:1/3;aspect-ratio:1.55/1}.ph{position:absolute;inset:8%;background:#FFDDE0;border:1.7px dashed #F3A6A9;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--black);z-index:1}.ph span{font-size:24px;color:var(--red)}.ph b{font-size:13px;margin-top:4px}.ph small{font-size:10px;margin-top:4px}.photo-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.venue-name{font-size:24px;font-weight:900;color:var(--red);margin:4px 0}.venue-date{font-size:16px;font-weight:900;color:var(--orange);margin-bottom:10px}.rows{width:100%;border-top:1.7px solid #FFD39A}.rows p{display:flex;justify-content:space-between;gap:8px;width:100%;padding:9px 0!important;border-bottom:1px solid #FFD39A;margin:0!important;font-size:12px!important;line-height:1.35!important}.rows b{color:var(--red)}.rows span{text-align:right;flex:1}.venue button{margin-top:15px;border:0;border-radius:999px;background:var(--yellow);color:var(--black);font-weight:900;padding:9px 16px;border:1.7px solid var(--orange)}
/* FINAL — reserve a clean middle stage. Heart overlays the couple, both stay away from text. */
.final-card{height:calc(100dvh - 175px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100svh - 175px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.final-content{justify-content:flex-start;padding-top:6px}
.final-content h2{margin-bottom:0}
.final-visual-zone{flex:1;width:100%;min-height:300px}
.ending{font-size:9px;letter-spacing:1px;font-weight:900;color:var(--black);margin-bottom:3px}
.final-heart{position:fixed;left:50%;top:53%;transform:translate(-50%,-50%) scale(.15);width:220px;height:190px;z-index:2200;opacity:0;pointer-events:none;transition:.7s .62s cubic-bezier(.16,1,.3,1)}.final-heart.show{opacity:1;transform:translate(-50%,-50%) scale(.92)}
.heart-lobe{position:absolute;top:10px;width:116px;height:116px;border-radius:50%;background:var(--red);border:3px solid var(--orange)}.hl{left:23px}.hr{right:23px}.heart-core{position:absolute;left:50%;top:66px;width:146px;height:146px;transform:translateX(-50%) rotate(45deg);background:var(--red);border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);border-radius:12px;z-index:2}.heart-core:after{content:'';position:absolute;inset:22px;background:var(--cream);border-radius:12px}.heart-core>*{position:absolute;left:50%;z-index:2;transform:translateX(-50%) rotate(-45deg);white-space:nowrap;color:var(--black)}.heart-core span{top:31px;font-size:12.5px;font-weight:900}.heart-core b{top:61px;font-size:28px;color:var(--red)}.heart-core small{top:96px;font-size:10.5px;font-weight:900}
@media(max-width:360px){
.page{padding-top:calc(132px + env(safe-area-inset-top))}
.floating-story{height:112px}.float-scene{max-height:83px}.float-caption{font-size:10px}
.card{width:min(87vw,360px);height:calc(100svh - 168px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:365px}
.card-content h2{font-size:25px}.card-content p{font-size:13px}
.floating-story.final-mode{top:53%}.final-heart{position:fixed;left:50%;top:53%;transform:translate(-50%,-50%) scale(.15);width:220px;height:190px;z-index:2200;opacity:0;pointer-events:none;transition:.7s .62s cubic-bezier(.16,1,.3,1)}.final-heart.show{opacity:1;transform:translate(-50%,-50%) scale(.92)}
}
@media(max-height:700px){
.page{padding-top:calc(128px + env(safe-area-inset-top))}
.floating-story{height:106px}.float-scene{max-height:78px}
.card{height:calc(100svh - 155px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:350px}
.card-content h2{font-size:24px}.card-content p{font-size:12.5px}.big-number{font-size:58px}
.final-visual-zone{min-height:225px}.floating-story.final-mode{top:52%;height:250px}.floating-story.final-mode .float-scene{max-height:205px}
.final-heart{position:fixed;left:50%;top:53%;transform:translate(-50%,-50%) scale(.15);width:220px;height:190px;z-index:2200;opacity:0;pointer-events:none;transition:.7s .62s cubic-bezier(.16,1,.3,1)}.final-heart.show{opacity:1;transform:translate(-50%,-50%) scale(.92)}
}
/* ===== V15: independent cross-screen characters ===== */
.floating-story{
--boy-x: 3%;
--girl-x: 3%;
--person-h: 96px;
}
.romance-line{
z-index:1 !important;
pointer-events:none;
}
.float-pair{
position:absolute;
inset:0;
z-index:3;
}
.float-person{
position:absolute;
top:8px;
max-height:var(--person-h);
width:auto;
object-fit:contain;
z-index:4;
filter:drop-shadow(0 4px 5px rgba(180,90,80,.12));
transition:left .52s cubic-bezier(.16,1,.3,1),
right .52s cubic-bezier(.16,1,.3,1),
max-height .42s ease,
transform .42s ease,
opacity .24s ease;
}
.float-boy{left:var(--boy-x);transform:rotate(-3deg)}
.float-girl{right:var(--girl-x);transform:rotate(3deg)}
.float-together{
display:none;
position:absolute;
left:50%;
top:47%;
transform:translate(-50%,-50%);
max-height:102px;
max-width:73%;
z-index:4;
filter:drop-shadow(0 4px 5px rgba(180,90,80,.12));
transition:max-height .4s,max-width .4s,transform .4s,opacity .25s;
}
.floating-story.together-mode .float-pair{display:none}
.floating-story.together-mode .float-together{display:block}
.floating-story.final-mode .float-together{
display:block;
max-width:91%;
max-height:250px;
top:50%;
transform:translate(-50%,-50%);
}
.floating-story.final-mode .float-pair{display:none}
.floating-story.final-mode .romance-line,
.floating-story.final-mode .float-caption{opacity:0}
/* line remains visually underneath every character */
.romance-line{z-index:1}
.float-pair,.float-together{z-index:4}
.float-caption{z-index:6}
/* Real SVG heart + restored invitation copy */
.final-heart{
position:fixed;
left:50%;
top:54%;
width:198px;
height:179px;
transform:translate(-50%,-50%) scale(.15);
z-index:2400 !important;
opacity:0;
pointer-events:none;
transition:opacity .35s ease .68s, transform .72s cubic-bezier(.16,1,.3,1) .68s;
}
.final-heart.show{
opacity:1;
transform:translate(-50%,-50%) scale(.84);
}
.heart-shape{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:1;
}
.heart-copy{
position:absolute;
left:50%;
top:53%;
transform:translate(-50%,-50%);
width:78%;
text-align:center;
z-index:2;
color:var(--black);
display:flex;
flex-direction:column;
align-items:center;
line-height:1.1;
}
.heart-copy span{font-size:13px;font-weight:900;white-space:nowrap}
.heart-copy b{font-size:29px;color:#F06B72;margin:7px 0 4px;-webkit-text-stroke:1.8px #E8D2A6;paint-order:stroke fill;text-shadow:-1px 0 0 #E8D2A6,1px 0 0 #E8D2A6,0 -1px 0 #E8D2A6,0 1px 0 #E8D2A6,-1px -1px 0 #E8D2A6,1px -1px 0 #E8D2A6,-1px 1px 0 #E8D2A6,1px 1px 0 #E8D2A6}
.heart-copy small{font-size:11px;font-weight:900;white-space:nowrap}
@media(max-width:360px){
.floating-story{--person-h:84px}
.final-heart{width:182px;height:165px;top:54%}
}
@media(max-height:700px){
.floating-story{--person-h:78px}
.final-heart{width:170px;height:153px;top:53%}
}
/* ===== V15.2: keep floating characters the same size until the final enlargement ===== */
/* Page 5 "together" state must NOT grow before the final page. */
.float-together{
max-height:var(--person-h) !important;
max-width:70% !important;
top:46% !important;
transform:translate(-50%,-50%) !important;
}
/* Only page 6 final-mode is allowed to enlarge. Move the whole final visual stage downward. */
.floating-story.final-mode{
top:60% !important;
height:300px !important;
}
.floating-story.final-mode .float-together{
max-width:91% !important;
max-height:250px !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
}
/* Heart shares the same lowered visual centre and stays above the couple. */
.final-heart{
top:60% !important;
z-index:2400 !important;
}
/* Keep title and THANK YOU clear on smaller / shorter phones. */
@media(max-width:360px){
.floating-story.final-mode{top:59% !important}
.floating-story.final-mode .float-together{max-height:220px !important}
.final-heart{top:59% !important}
}
@media(max-height:700px){
.floating-story.final-mode{top:59% !important;height:250px !important}
.floating-story.final-mode .float-together{max-height:205px !important}
.final-heart{top:59% !important}
}
/* ===== V15.3: homepage date badge contrast ===== */
.gift-date{
color:#D94747 !important;
background:rgba(255,247,236,.96) !important;
border:2px solid #F7A64A !important;
border-radius:999px !important;
padding:3px 10px !important;
-webkit-text-stroke:1px #FFF7EC;
text-shadow:0 1px 0 #FFF7EC !important;
line-height:1.05;
}
/* All runtime character PNGs now have normalized canvases.
Keep CSS sizing independent of source-art bounding boxes. */
.float-person{
width:112px !important;
height:98px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
.float-together{
width:142px !important;
height:118px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
.floating-story.final-mode .float-together{
width:min(88vw,360px) !important;
height:min(73vw,300px) !important;
}
@media(max-width:360px){
.float-person{width:102px !important;height:90px !important}
.float-together{width:132px !important;height:110px !important}
}
/* ===== V15.4 semantic color hooks (kept for easy palette editing) ===== */
:root{
--page-dot-stroke:#F7A64A;
--page-dot-fill:#FFD85E;
--progress-fill:#F06B72;
}
.progress span{background:var(--progress-fill) !important}
.page-dots i{border-color:var(--page-dot-stroke) !important}
.page-dots i.on{background:var(--page-dot-fill) !important}
/* Keep ALL pre-final floating characters at one visual height.
Starry, Walk and Wedding-together use the same 98px stage height.
Only .final-mode is enlarged. */
.float-person{
width:auto !important;
height:98px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
.float-together{
width:auto !important;
height:98px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
.floating-story.final-mode .float-together{
width:min(88vw,360px) !important;
height:min(73vw,300px) !important;
}
@media(max-width:360px){
.float-person,.float-together{height:90px !important}
}
@media(max-height:700px){
.float-person,.float-together{height:82px !important}
}
/* Standard dark-preference fallback: retain exactly the designed palette. */
@media (prefers-color-scheme: dark){
:root{
color-scheme:only light !important;
--pink:#F9B9B8;
--pink2:#F7AEAD;
--cream:#FFF7EC;
--black:#111111;
--orange:#F7A64A;
--orangeSoft:#FFD39A;
--yellow:#FFD85E;
--red:#F06B72;
--blue:#9AC3DE;
--page-dot-stroke:#F7A64A;
--page-dot-fill:#FFD85E;
--progress-fill:#F06B72;
}
}
/* ===== V15.4.1 TEMP COLOR TOOL BINDING FIX ===== */
html,body{
background:var(--pink) !important;
color:var(--black) !important;
}
.page{
background:linear-gradient(180deg,var(--pink) 0%,var(--pink2) 100%) !important;
}
/* ===== V16.1: generated independent-character assets + anti-cropping ===== */
/* Keep the floating strip visually open so full limbs are never cut off by the container. */
.floating-story,
.float-pair,
.cover-stage{
overflow: visible !important;
}
.cover-popout{
width:min(88vw,372px) !important;
max-height:280px !important;
object-fit:contain !important;
}
/* Use fixed stage sizing so the new full-body PNGs behave consistently regardless of internal transparent margins. */
.floating-story{
width:min(98vw,470px) !important;
--person-w: 116px;
--person-h: 102px;
}
.float-person{
width:var(--person-w) !important;
height:var(--person-h) !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
transform-origin:center bottom !important;
top:10px !important;
}
.float-boy{ left:var(--boy-x); }
.float-girl{ right:var(--girl-x); }
/* Slightly smaller for walking frames so feet, sleeves and bouquets stay inside the stage. */
.float-person[data-pose="walking"]{
width:110px !important;
height:96px !important;
top:11px !important;
}
.float-person[data-pose="starry"]{
width:112px !important;
height:98px !important;
top:9px !important;
}
/* Together asset before final zoom: same steady size, clean center alignment. */
.float-together{
width:150px !important;
height:124px !important;
object-fit:contain !important;
top:47% !important;
left:50% !important;
}
/* Final stage enlargement remains the same visual logic, but give the new art a little more room. */
.floating-story.final-mode .float-together{
width:294px !important;
height:245px !important;
max-width:none !important;
max-height:none !important;
top:52% !important;
}
/* Mobile safety: slightly reduce sizes on very narrow screens to prevent edge contact. */
@media(max-width:380px){
.floating-story{
--person-w:108px;
--person-h:96px;
}
.float-person[data-pose="walking"]{
width:104px !important;
height:92px !important;
}
.float-together{
width:144px !important;
height:118px !important;
}
.floating-story.final-mode .float-together{
width:270px !important;
height:225px !important;
}
}
/* ===== V16.3: moving characters keep exactly the same size ===== */
/* Starry -> Walk no longer changes the rendered width/height. */
.floating-story{
--moving-person-w:112px;
--moving-person-h:98px;
}
.float-person,
.float-person[data-pose="starry"],
.float-person[data-pose="walking"]{
width:var(--moving-person-w) !important;
height:var(--moving-person-h) !important;
max-width:none !important;
max-height:none !important;
top:9px !important;
object-fit:contain !important;
transform-origin:center bottom !important;
}
/* Keep the same visual size on small / short phones too. */
@media(max-width:380px){
.floating-story{
--moving-person-w:106px;
--moving-person-h:93px;
}
}
@media(max-height:700px){
.floating-story{
--moving-person-w:100px;
--moving-person-h:88px;
}
}
/* ===== V16.4: wedding info split into date page + address page ===== */
.info-card .card-content{
justify-content:flex-start;
padding-top:4px;
}
.info-card .card-content h2{
margin-bottom:10px;
}
.info-lead{
font-size:13px !important;
line-height:1.6 !important;
max-width:280px;
margin:0 auto 14px !important;
}
.wedding-date-card{
gap:0;
}
.kawaii-calendar{
width:min(100%,292px);
margin:4px auto 12px;
background:linear-gradient(180deg,#FFF9F0 0%, #FFF0F2 100%);
border:2px solid var(--orange);
border-radius:24px 24px 26px 26px;
box-shadow:0 7px 0 rgba(247,166,74,.18);
position:relative;
}
.kawaii-calendar:before{
content:"";
position:absolute;
inset:8px;
border:1.5px solid #FFD7B6;
border-radius:18px 18px 20px 20px;
pointer-events:none;
}
.calendar-top{
position:relative;
padding:14px 14px 12px;
background:linear-gradient(180deg,#FFD65B 0%, #FFC86C 100%);
border-bottom:2px dashed rgba(240,107,114,.45);
border-radius:22px 22px 18px 18px;
}
.calendar-rings{
position:absolute;
top:-11px;
left:0; right:0;
display:flex;
justify-content:center;
gap:64px;
}
.calendar-rings i{
width:16px; height:24px;
border:3px solid var(--orange);
border-bottom:none;
border-radius:12px 12px 0 0;
background:#FFF7EC;
box-shadow:0 3px 0 rgba(255,255,255,.7) inset;
}
.calendar-month{
display:flex;
align-items:flex-end;
justify-content:center;
gap:8px;
color:var(--black);
}
.calendar-month span{
font-size:11px;
letter-spacing:1.1px;
font-weight:900;
}
.calendar-month b{
font-size:24px;
line-height:1;
color:var(--red);
}
.calendar-badge{
margin:8px auto 0;
width:max-content;
padding:5px 12px;
border-radius:999px;
border:1.5px solid var(--orange);
background:#FFF7EC;
color:var(--black);
font-size:11px;
font-weight:900;
}
.calendar-body{
padding:14px 14px 16px;
}
.week-head, .date-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
}
.week-head{
margin-bottom:8px;
}
.week-head span{
text-align:center;
font-size:10px;
font-weight:900;
color:#AA6B4B;
}
.date-grid span{
position:relative;
display:flex;
align-items:center;
justify-content:center;
height:30px;
border-radius:10px;
font-size:13px;
font-weight:900;
color:var(--black);
background:#FFFFFFA8;
border:1px solid #FFE3CC;
}
.date-grid span.muted{
background:#FFF3E6;
}
.date-grid span.empty{
opacity:0;
pointer-events:none;
}
.date-grid .day-love{
background:linear-gradient(180deg,#F06B72 0%, #F48282 100%);
color:#fff;
border-color:#E87171;
box-shadow:0 4px 0 rgba(240,107,114,.22);
transform:translateY(-1px) scale(1.02);
}
.date-grid .day-love i{
position:absolute;
right:4px;
top:2px;
font-size:11px;
font-style:normal;
color:#FFE37E;
}
.date-strap{
width:min(100%,292px);
margin:0 auto;
border:2px solid var(--orange);
border-radius:999px;
background:linear-gradient(180deg,#FFF8EE 0%, #FFE8EA 100%);
padding:10px 14px 11px;
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
box-shadow:0 4px 0 rgba(247,166,74,.12);
}
.date-strap span{
font-size:12px;
font-weight:900;
}
.date-strap b{
font-size:28px;
line-height:1;
color:var(--red);
}
.date-strap small{
font-size:9.5px;
letter-spacing:.8px;
font-weight:900;
text-align:center;
}
.address-page-card .info-lead{
margin-bottom:12px !important;
}
.map-preview-wrap{
width:100%;
display:flex;
justify-content:center;
margin:2px 0 12px;
}
.map-frame{
width:min(100%,292px);
padding:10px;
border-radius:26px 26px 30px 28px;
background:linear-gradient(180deg,#FFF8EC 0%, #FFEEDB 100%);
border:2px solid var(--orange);
box-shadow:0 6px 0 rgba(247,166,74,.18);
position:relative;
}
.map-frame:before{
content:"";
position:absolute;
inset:8px;
border:1.5px dashed #F2B487;
border-radius:18px 18px 22px 20px;
pointer-events:none;
}
.map-frame-top{
position:relative;
z-index:2;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
padding:0 4px;
}
.map-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:5px 10px;
border-radius:999px;
background:#FFD85E;
border:1.5px solid var(--orange);
font-size:10px;
font-weight:900;
}
.map-pin{
font-size:16px;
line-height:1;
}
.map-canvas{
position:relative;
height:182px;
border-radius:20px;
overflow:hidden;
background:linear-gradient(180deg,#FFFDF9 0%, #FFF6EE 100%);
border:2px solid #F0C79A;
}
.map-grid{
position:absolute;
inset:0;
background:
linear-gradient(rgba(247,166,74,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(247,166,74,.11) 1px, transparent 1px);
background-size:28px 28px;
}
.map-water{
position:absolute;
left:-12px;
top:18px;
width:120px;
height:62px;
background:linear-gradient(180deg,#A9D6EE 0%, #C9E9F8 100%);
border:2px solid #7AB6D8;
border-radius:36px;
transform:rotate(-9deg);
opacity:.9;
}
.map-road{
position:absolute;
background:#FFDFA6;
border:1.5px solid #F4B45A;
border-radius:999px;
box-shadow:0 0 0 3px rgba(255,255,255,.55);
}
.road-a{ left:-16px; top:96px; width:190px; height:20px; transform:rotate(-9deg); }
.road-b{ right:-8px; top:34px; width:154px; height:18px; transform:rotate(22deg); }
.road-c{ left:124px; top:112px; width:130px; height:18px; transform:rotate(38deg); }
.map-block{
position:absolute;
background:#FFF4CF;
border:1.5px solid #EDC07E;
border-radius:14px;
}
.block-a{ left:42px; top:56px; width:48px; height:40px; }
.block-b{ right:26px; top:78px; width:58px; height:46px; }
.block-c{ left:96px; bottom:18px; width:66px; height:36px; }
.block-d{ right:96px; bottom:32px; width:42px; height:34px; }
.map-marker{
position:absolute;
left:59%;
top:44%;
transform:translate(-50%,-50%);
z-index:3;
display:flex;
flex-direction:column;
align-items:center;
}
.marker-dot{
width:30px;
height:30px;
border-radius:50% 50% 50% 0;
transform:rotate(-45deg);
background:var(--red);
border:2px solid var(--orange);
box-shadow:0 5px 0 rgba(240,107,114,.18);
position:relative;
}
.marker-dot:after{
content:"";
position:absolute;
left:50%;
top:50%;
width:10px;
height:10px;
border-radius:50%;
background:#FFF7EC;
transform:translate(-50%,-50%) rotate(45deg);
}
.marker-label{
margin-top:8px;
padding:5px 10px;
border-radius:999px;
background:#FFF7EC;
border:1.5px solid var(--orange);
font-size:11px;
font-weight:900;
color:var(--black);
box-shadow:0 3px 0 rgba(247,166,74,.12);
white-space:nowrap;
}
.map-note{
position:absolute;
left:50%;
bottom:10px;
transform:translateX(-50%);
width:86%;
text-align:center;
font-size:10px;
font-weight:800;
line-height:1.35;
color:#8B6445;
background:rgba(255,247,236,.92);
border:1px solid #FFD9B2;
border-radius:12px;
padding:5px 8px;
}
.map-rows{
margin-top:2px;
}
@media(max-width:360px){
.kawaii-calendar,
.date-strap,
.map-frame{
width:min(100%,280px);
}
.date-grid span{
height:28px;
font-size:12px;
}
.map-canvas{
height:168px;
}
}
@media(max-height:700px){
.info-lead{
font-size:12px !important;
margin-bottom:10px !important;
}
.kawaii-calendar{
margin-bottom:10px;
}
.calendar-body{
padding:12px 12px 14px;
}
.date-grid span{
height:27px;
font-size:12px;
}
.map-canvas{
height:156px;
}
}
/* ===== V16.5: date/address page fit + richer cute borders ===== */
/* Both new information pages must stay inside the viewport. */
.date-card-page,
.address-card-page{
height:calc(100svh - 178px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
min-height:0 !important;
max-height:610px !important;
overflow:hidden;
}
.date-card-page .card-content,
.address-card-page .card-content{
inset:5.2% 7.5% 4.2% !important;
justify-content:flex-start !important;
}
.date-card-page .card-content>small,
.address-card-page .card-content>small{
margin-bottom:5px !important;
}
.date-card-page .card-content h2,
.address-card-page .card-content h2{
font-size:clamp(21px,6vw,27px) !important;
line-height:1.08 !important;
margin:0 0 7px !important;
}
.date-card-page .info-lead,
.address-card-page .info-lead{
font-size:clamp(11px,3.2vw,13px) !important;
line-height:1.45 !important;
margin:0 auto 8px !important;
max-width:286px !important;
}
/* ---------- Calendar: more compact but richer ---------- */
.kawaii-calendar{
width:min(100%,292px) !important;
margin:2px auto 8px !important;
border-width:2.5px !important;
border-radius:26px 29px 25px 31px !important;
box-shadow:
0 6px 0 rgba(247,166,74,.17),
0 0 0 5px rgba(255,255,255,.34) inset !important;
overflow:visible;
}
.kawaii-calendar:before{
inset:7px !important;
border:1.5px dashed #F4B786 !important;
border-radius:20px 23px 19px 25px !important;
}
.kawaii-calendar:after{
content:"";
position:absolute;
left:18px; right:18px; bottom:-7px;
height:14px;
background:
radial-gradient(circle at 7px 0,#FFF7EC 7px,transparent 7.5px) 0 0/28px 14px repeat-x;
pointer-events:none;
}
.calendar-deco{
position:absolute;
z-index:4;
font-style:normal;
pointer-events:none;
filter:drop-shadow(0 2px 0 rgba(255,255,255,.7));
}
.deco-star{left:-10px;top:44px;color:var(--yellow);font-size:22px;transform:rotate(-14deg)}
.deco-heart{right:-8px;top:68px;color:var(--red);font-size:20px;transform:rotate(10deg)}
.deco-spark{right:18px;bottom:14px;color:var(--orange);font-size:15px}
.calendar-top{
padding:11px 12px 9px !important;
border-radius:23px 26px 17px 20px !important;
}
.calendar-rings{
top:-10px !important;
gap:58px !important;
}
.calendar-rings i{
width:15px !important;
height:22px !important;
}
.calendar-month b{
font-size:21px !important;
}
.calendar-badge{
margin-top:6px !important;
padding:4px 10px !important;
font-size:10px !important;
}
.calendar-body{
padding:10px 12px 12px !important;
}
.week-head,.date-grid{
gap:4px !important;
}
.week-head{
margin-bottom:6px !important;
}
.week-head span{
font-size:9px !important;
}
.date-grid span{
height:25px !important;
border-radius:8px !important;
font-size:11.5px !important;
}
.date-grid .day-love{
box-shadow:0 3px 0 rgba(240,107,114,.2) !important;
}
.date-strap{
width:min(100%,292px) !important;
padding:7px 12px 8px !important;
border-radius:22px 24px 21px 26px !important;
box-shadow:0 4px 0 rgba(247,166,74,.12) !important;
}
.date-strap span{font-size:11px !important}
.date-strap b{font-size:24px !important}
.date-strap small{font-size:8.5px !important}
/* ---------- Map: more space for the actual future map ---------- */
.address-page-card .venue-name{
font-size:21px !important;
margin:0 0 5px !important;
}
.map-preview-wrap{
margin:2px 0 0 !important;
flex:1;
min-height:0;
align-items:center;
}
.map-frame{
width:min(100%,300px) !important;
padding:11px !important;
border-width:2.5px !important;
border-radius:29px 25px 32px 27px !important;
background:
linear-gradient(180deg,#FFF9EE 0%,#FFE9DB 100%) !important;
box-shadow:
0 7px 0 rgba(247,166,74,.17),
0 0 0 5px rgba(255,255,255,.38) inset !important;
overflow:visible;
}
.map-frame:before{
inset:7px !important;
border:1.5px dashed #F0B17D !important;
border-radius:22px 18px 25px 20px !important;
}
.map-frame:after{
content:"";
position:absolute;
left:19px; right:19px; bottom:-7px;
height:14px;
background:
radial-gradient(circle at 7px 0,#FFF7EC 7px,transparent 7.5px) 0 0/28px 14px repeat-x;
pointer-events:none;
}
.map-deco{
position:absolute;
z-index:4;
pointer-events:none;
filter:drop-shadow(0 2px 0 rgba(255,255,255,.7));
}
.map-star{left:-11px;top:36px;color:var(--yellow);font-size:23px;transform:rotate(-12deg)}
.map-heart{right:-9px;top:50px;color:var(--red);font-size:20px;transform:rotate(11deg)}
.map-spark{right:15px;bottom:15px;color:var(--orange);font-size:15px}
.map-tape{
position:absolute;
z-index:3;
width:54px;
height:17px;
background:rgba(255,216,94,.72);
border:1px solid rgba(247,166,74,.42);
border-radius:4px;
top:-8px;
}
.tape-left{left:26px;transform:rotate(-7deg)}
.tape-right{right:28px;transform:rotate(6deg)}
.map-frame-top{
margin-bottom:7px !important;
}
.map-pill{
font-size:9.5px !important;
padding:4px 9px !important;
}
.map-canvas{
height:clamp(210px,35vh,286px) !important;
border-radius:21px !important;
border-width:2px !important;
box-shadow:0 0 0 3px rgba(255,255,255,.55) inset;
}
.map-note{
bottom:9px !important;
font-size:9.5px !important;
padding:5px 7px !important;
}
/* The address page no longer needs legacy rows or a map button. */
.address-card-page .rows,
.address-card-page button[disabled]{
display:none !important;
}
/* ---------- Short phone handling ---------- */
@media(max-height:760px){
.date-card-page,
.address-card-page{
height:calc(100svh - 166px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}
.date-card-page .card-content,
.address-card-page .card-content{
inset:4.5% 7% 3.8% !important;
}
.date-card-page .info-lead,
.address-card-page .info-lead{
margin-bottom:6px !important;
}
.calendar-top{padding:9px 11px 8px !important}
.calendar-body{padding:8px 10px 10px !important}
.date-grid span{height:23px !important;font-size:10.5px !important}
.date-strap{padding:6px 10px 7px !important}
.date-strap b{font-size:22px !important}
.map-canvas{height:clamp(185px,33vh,240px) !important}
}
@media(max-height:680px){
.date-card-page .card-content h2,
.address-card-page .card-content h2{
font-size:20px !important;
margin-bottom:5px !important;
}
.date-card-page .info-lead,
.address-card-page .info-lead{
font-size:10.5px !important;
line-height:1.35 !important;
}
.calendar-month b{font-size:19px !important}
.calendar-body{padding:7px 9px 8px !important}
.week-head{margin-bottom:4px !important}
.date-grid{gap:3px !important}
.date-grid span{height:21px !important;font-size:10px !important}
.date-strap small{display:none}
.map-canvas{height:170px !important}
}
/* ===== V16.6: dynamic approach + clean calendar border ===== */
/* Date page: keep the moving characters visibly separate. */
.page[data-scene="date"] .card{
overflow:visible;
}
/* Calendar border now uses one consistent rounded rectangle.
Remove the previous uneven/scalloped pseudo bottom edge. */
.kawaii-calendar{
border-radius:26px !important;
border:2.5px solid var(--orange) !important;
overflow:visible !important;
box-shadow:
0 6px 0 rgba(247,166,74,.16),
0 0 0 4px rgba(255,255,255,.35) inset !important;
}
.kawaii-calendar:before{
inset:8px !important;
border:1.5px dashed #F4B786 !important;
border-radius:19px !important;
}
.kawaii-calendar:after{
display:none !important;
}
/* Put the top binding rings in a clean dedicated zone, away from month/year. */
.calendar-top{
min-height:73px;
padding:18px 13px 9px !important;
border-radius:23px 23px 15px 15px !important;
}
.calendar-rings{
top:-9px !important;
gap:62px !important;
z-index:5;
}
.calendar-rings i{
width:15px !important;
height:22px !important;
background:#FFF7EC !important;
box-shadow:none !important;
}
.calendar-month{
min-height:28px;
gap:7px !important;
align-items:center !important;
}
.calendar-month span{
font-size:10px !important;
}
.calendar-month b{
font-size:21px !important;
}
.calendar-badge{
margin-top:5px !important;
}
/* Keep decorations outside the information area so they never collide with text/cells. */
.deco-star{
left:-12px !important;
top:82px !important;
}
.deco-heart{
right:-10px !important;
top:96px !important;
}
.deco-spark{
right:12px !important;
bottom:10px !important;
}
/* Slightly calmer calendar grid with equal spacing. */
.calendar-body{
padding:10px 12px 13px !important;
}
.week-head,
.date-grid{
column-gap:4px !important;
row-gap:4px !important;
}
.week-head{
margin-bottom:5px !important;
}
.date-grid span{
height:24px !important;
border-radius:8px !important;
line-height:24px !important;
}
/* Give the bottom strap its own breathing room. */
.date-strap{
margin-top:3px !important;
}
/* Narrow / short phones: preserve separation and avoid overlap. */
@media(max-width:360px){
.calendar-top{
min-height:69px;
padding-top:17px !important;
}
.calendar-rings{
gap:55px !important;
}
.date-grid span{
height:22px !important;
line-height:22px !important;
font-size:10.5px !important;
}
}
@media(max-height:700px){
.calendar-top{
min-height:64px;
padding:15px 11px 7px !important;
}
.calendar-body{
padding:7px 9px 9px !important;
}
.date-grid span{
height:20px !important;
line-height:20px !important;
}
.date-strap{
margin-top:2px !important;
}
}
/* ===== V16.7: two-frame walk + lighter premium visual system ===== */
:root{
--thin-line:1.35px;
--mid-line:1.6px;
--text-regular:500;
--text-medium:600;
--text-strong:700;
}
/* Refined type stack and lighter overall weight. */
html,body{
font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",Arial,sans-serif !important;
font-weight:var(--text-regular);
}
.brand-mini,
.cover-note,
.cover-sub,
.pill,
.float-caption,
.card-content>small,
.seal,
.days-word,
.clock,
.countdown strong,
.venue-name,
.venue-date,
.ending,
.date-strap span,
.date-strap small,
.calendar-month span,
.calendar-month b,
.calendar-badge,
.week-head span,
.date-grid span,
.map-pill,
.marker-label,
.map-note,
.gift-date{
font-weight:var(--text-medium) !important;
}
.card-content h2,
.big-number,
.date-strap b{
font-weight:var(--text-strong) !important;
}
.card-content p,
.info-lead{
font-weight:var(--text-regular) !important;
}
/* Cleaner, thinner borders. */
.card{
border-width:var(--mid-line) !important;
box-shadow:0 3px 0 rgba(247,166,74,.14) !important;
}
.card:before{
border-width:1px !important;
}
.pill,
.seal,
.gift-date,
.calendar-badge,
.map-pill,
.marker-label{
border-width:var(--thin-line) !important;
}
.page-dots i{
border-width:1.25px !important;
}
.ph{
border-width:1px !important;
}
.kawaii-calendar,
.map-frame{
border-width:var(--mid-line) !important;
box-shadow:0 4px 0 rgba(247,166,74,.12) !important;
}
.kawaii-calendar:before,
.map-frame:before{
border-width:1px !important;
}
.date-grid span{
border-width:.8px !important;
}
.map-canvas{
border-width:1.3px !important;
}
.marker-dot{
border-width:1.4px !important;
}
.calendar-rings i{
border-width:2px !important;
border-bottom:none !important;
}
.gift-body,
.gift-lid,
.bow,
.knot{
border-width:2px !important;
}
.ribbon-v{
border-left-width:1.3px !important;
border-right-width:1.3px !important;
}
.ribbon-h{
border-top-width:1.3px !important;
border-bottom-width:1.3px !important;
}
/* Reduce visual heaviness of decorative shadows. */
.float-person,
.float-together,
.cover-popout{
filter:drop-shadow(0 3px 4px rgba(180,90,80,.10)) !important;
}
/* Single walking pose restored. */
.float-person[data-pose="starry"].float-boy{
transform:rotate(-2deg) !important;
}
.float-person[data-pose="starry"].float-girl{
transform:rotate(2deg) !important;
}
/* Slightly more restrained UI details. */
.card-content h2{
letter-spacing:.1px;
}
.card-content p,
.info-lead{
letter-spacing:.05px;
}
.calendar-top,
.map-frame{
background-blend-mode:normal;
}
/* ===== V17: pre-final character size consistency + redrawn gift art ===== */
/* ---- character size consistency before final enlargement ----
Single moving characters keep the same size;
the "together" couple uses a matching per-character scale.
Only final-mode is enlarged. */
.floating-story{
--moving-person-w:112px;
--moving-person-h:98px;
--together-pre-h:108px;
}
.float-person,
.float-person[data-pose="starry"],
.float-person[data-pose="walking"]{
width:var(--moving-person-w) !important;
height:var(--moving-person-h) !important;
top:9px !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
}
.float-together{
width:auto !important;
height:var(--together-pre-h) !important;
max-width:none !important;
max-height:none !important;
top:47% !important;
left:50% !important;
object-fit:contain !important;
}
.floating-story.final-mode .float-together{
width:294px !important;
height:245px !important;
top:50% !important;
}
@media(max-width:380px){
.floating-story{
--moving-person-w:106px;
--moving-person-h:93px;
--together-pre-h:103px;
}
}
@media(max-height:700px){
.floating-story{
--moving-person-w:100px;
--moving-person-h:88px;
--together-pre-h:97px;
}
}
/* ---- gift art built from local assets ---- */
.gift-area{
width:min(86vw,356px) !important;
height:350px !important;
}
.gift-art{
position:absolute;
inset:0;
opacity:1;
}
.gift-body-art,
.gift-lid-art{
position:absolute;
left:50%;
display:block;
width:100%;
max-width:100%;
object-fit:contain;
filter:drop-shadow(0 6px 8px rgba(228,145,88,.14));
user-select:none;
-webkit-user-drag:none;
}
.gift-body-art{
bottom:5px;
transform:translateX(-50%);
z-index:5;
}
.gift-lid-art{
top:16px;
transform:translateX(-50%);
transform-origin:22% 82%;
z-index:8;
transition:transform .72s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.gift-date{
position:absolute;
left:50%;
bottom:61px !important;
transform:translateX(-50%);
z-index:12;
color:#D84E66 !important;
background:rgba(255,250,242,.96) !important;
border:1.6px solid #F4A448 !important;
border-radius:999px !important;
padding:4px 12px !important;
font-size:20px !important;
line-height:1;
letter-spacing:.6px;
-webkit-text-stroke:0 transparent !important;
text-shadow:0 1px 0 rgba(255,255,255,.55) !important;
box-shadow:0 2px 0 rgba(244,164,72,.12) !important;
}
.cover.open .gift-art{
opacity:.18;
transition:.38s;
}
.cover.open .gift-lid-art{
transform:translateX(-50%) rotate(-19deg) translate(-18px,-12px);
}
.cover.open .gift-date{
opacity:0;
transition:.2s ease;
}
/* remove legacy css-drawn gift pieces from layout without touching old code */
.gift-body,
.gift-lid,
.ribbon-v,
.ribbon-h,
.bow,
.knot,
.gift-heart{
display:none !important;
}
/* ===== V17.3: true-transparent closed/open theatre scene ===== */
.story-gift{
width:min(94vw,430px) !important;
height:356px !important;
transform:translate(-50%,-50%) !important;
overflow:visible !important;
}
.story-glow{
width:330px !important;
height:330px !important;
background:radial-gradient(circle,#FFF8D9 0,#FFD85E42 42%,transparent 72%) !important;
opacity:.82;
}
.gift-scene{
position:absolute;
inset:-8px -6px -6px -6px;
z-index:8;
pointer-events:none;
}
.gift-scene img{
position:absolute;
left:50%;
top:50%;
width:min(96vw,420px);
max-width:100%;
height:auto;
object-fit:contain;
user-select:none;
-webkit-user-drag:none;
pointer-events:none;
filter:drop-shadow(0 7px 11px rgba(176,94,64,.15));
transition:
opacity .46s ease,
transform .76s cubic-bezier(.16,1,.3,1);
}
.gift-scene-closed{
opacity:1;
transform:translate(-50%,-50%) scale(1);
z-index:2;
}
.gift-scene-open{
opacity:0;
transform:translate(-50%,-47%) scale(.94);
z-index:3;
}
.cover.open .gift-scene-closed{
opacity:0;
transform:translate(-50%,-53%) scale(.97);
}
.cover.open .gift-scene-open{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
/* The transparent hit layer always remains above the artwork until first click. */
.story-gift .gift-hit{
position:absolute !important;
inset:0 !important;
z-index:40 !important;
display:block !important;
pointer-events:auto !important;
background:transparent !important;
border:0 !important;
}
.cover.open .story-gift .gift-hit{
pointer-events:none !important;
}
/* Old CSS-built box/popout are no longer part of the cover scene. */
.cover-popout,
.gift-art,
.gift-body-art,
.gift-lid-art{
display:none !important;
}
@media(max-width:360px){
.story-gift{
width:min(95vw,390px) !important;
height:330px !important;
}
.gift-scene img{
width:min(97vw,390px) !important;
}
}
@media(max-height:700px){
.story-gift{
height:310px !important;
}
.gift-scene img{
width:min(92vw,380px) !important;
}
}
/* ===== V17.4 全屏幕帘开场版 ===== */
.page.cover {
background: #f8ecde !important;
}
.page.cover .pattern,
.page.cover .cover-head,
.page.cover .cover-stage,
.page.cover .cover-note,
.page.cover .cover-sub,
.page.cover .gift,
.page.cover .gift-art,
.page.cover .gift-body-art,
.page.cover .gift-lid-art,
.page.cover .cover-popout {
display: none !important;
}
.curtain-cover {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 5;
background: #f8ecde;
}
.curtain-scene {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
transition:
opacity .72s ease,
transform .88s cubic-bezier(.16,1,.3,1);
}
.curtain-scene-closed {
opacity: 1;
transform: scale(1);
z-index: 1;
}
.curtain-scene-open {
opacity: 0;
transform: scale(1.018);
z-index: 2;
}
.curtain-couple {
position: absolute;
left: 50%;
bottom: 14.6%;
width: min(61vw, 292px);
transform: translateX(-50%) translateY(22px) scale(.92);
transform-origin: center bottom;
opacity: 0;
z-index: 3;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
filter: drop-shadow(0 7px 10px rgba(173, 88, 62, .18));
transition:
opacity .46s ease .16s,
transform .82s cubic-bezier(.16,1,.3,1) .12s;
}
.curtain-hit {
position: absolute !important;
inset: 0 !important;
z-index: 10 !important;
background: transparent !important;
border: 0 !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.curtain-tip {
position: absolute;
left: 50%;
bottom: 2.5%;
transform: translateX(-50%);
z-index: 9;
padding: 7px 14px;
border-radius: 999px;
background: rgba(255, 248, 240, .78);
border: 1px solid rgba(187, 141, 112, .34);
box-shadow: 0 4px 10px rgba(179, 129, 95, .08);
color: #8c4a46;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
pointer-events: none;
white-space: nowrap;
}
.cover.open .curtain-scene-closed {
opacity: 0;
transform: scale(1.02);
}
.cover.open .curtain-scene-open {
opacity: 1;
transform: scale(1);
}
.cover.open .curtain-couple {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.cover.open .curtain-hit {
pointer-events: none;
}
.cover.open .curtain-tip {
opacity: 0;
transform: translateX(-50%) translateY(10px);
transition: .35s ease;
}
@media (max-width: 390px) {
.curtain-couple {
width: min(63vw, 280px);
bottom: 13.6%;
}
}
@media (max-height: 720px) {
.curtain-couple {
width: min(56vw, 250px);
bottom: 13.8%;
}
.curtain-tip {
bottom: 2.1%;
font-size: 11px;
padding: 6px 12px;
}
}
/* ===== V17.5: 独立角色跃出 + 落地撒花 ===== */
/* Replaces the simple fade-in from V17.4 with a staged entrance. */
.curtain-couple{
transition:none !important;
opacity:0;
transform:translateX(-50%) translateY(46px) scale(.80);
will-change:transform,opacity;
}
.curtain-couple-shadow{
position:absolute;
left:50%;
bottom:14.1%;
width:min(39vw,188px);
height:20px;
border-radius:50%;
background:radial-gradient(ellipse at center,
rgba(130,67,53,.26) 0%,
rgba(130,67,53,.13) 48%,
rgba(130,67,53,0) 76%);
transform:translateX(-50%) scaleX(.48);
transform-origin:center;
opacity:0;
z-index:2;
pointer-events:none;
filter:blur(1px);
}
.cover.open .curtain-couple{
animation:curtainCoupleEntrance 1.02s cubic-bezier(.2,.8,.2,1) .13s both !important;
}
.cover.open .curtain-couple-shadow{
animation:curtainCoupleShadow 1.02s ease-out .13s both;
}
/* A small 'come out from behind the curtain -> hop -> land' motion.
Scale always returns to exactly 1, so the asset's final size stays stable. */
@keyframes curtainCoupleEntrance{
0%{
opacity:0;
transform:translateX(-50%) translateY(54px) scale(.78,.86) rotate(-1.8deg);
}
18%{
opacity:1;
}
42%{
opacity:1;
transform:translateX(-50%) translateY(-17px) scale(1.045,.965) rotate(1.1deg);
}
58%{
transform:translateX(-50%) translateY(5px) scale(.985,1.018) rotate(-.4deg);
}
73%{
transform:translateX(-50%) translateY(-6px) scale(1.012,.993) rotate(.2deg);
}
86%{
transform:translateX(-50%) translateY(2px) scale(.997,1.005) rotate(0);
}
100%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1) rotate(0);
}
}
@keyframes curtainCoupleShadow{
0%{
opacity:0;
transform:translateX(-50%) scaleX(.46);
}
35%{
opacity:.20;
transform:translateX(-50%) scaleX(.68);
}
48%{
opacity:.08;
transform:translateX(-50%) scaleX(.52);
}
60%{
opacity:.34;
transform:translateX(-50%) scaleX(1.03);
}
74%{
opacity:.22;
transform:translateX(-50%) scaleX(.88);
}
100%{
opacity:.24;
transform:translateX(-50%) scaleX(.94);
}
}
/* The opened palace gets a tiny cinematic push-in while the couple appears. */
.cover.open .curtain-scene-open{
animation:curtainSceneReveal 1.3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes curtainSceneReveal{
0%{opacity:0;transform:scale(1.022)}
42%{opacity:1;transform:scale(1.006)}
100%{opacity:1;transform:scale(1)}
}
/* Make the click hint feel integrated, not like a separate app control. */
.curtain-tip{
transition:opacity .28s ease, transform .28s ease;
}
.cover.open .curtain-tip{
opacity:0 !important;
transform:translateX(-50%) translateY(8px) !important;
}
/* Small phones: keep the landing shadow aligned to the role asset. */
@media(max-width:390px){
.curtain-couple-shadow{
width:min(40vw,176px);
bottom:13.0%;
}
}
@media(max-height:720px){
.curtain-couple-shadow{
width:min(35vw,160px);
bottom:13.2%;
}
}
/* Reduced motion: preserve the reveal but avoid jumping. */
@media(prefers-reduced-motion:reduce){
.cover.open .curtain-couple{
animation:curtainCoupleEntranceReduced .35s ease .08s both !important;
}
.cover.open .curtain-couple-shadow{
animation:none;
opacity:.22;
transform:translateX(-50%) scaleX(.94);
}
@keyframes curtainCoupleEntranceReduced{
from{opacity:0;transform:translateX(-50%) translateY(16px) scale(.96)}
to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
}
/* ===== V17.6: Crush on you title shimmer ===== */
.crush-fx{
position:absolute;
left:11%;
right:11%;
top:16.6%;
height:23.5%;
z-index:4;
pointer-events:none;
overflow:hidden;
border-radius:45% / 38%;
mix-blend-mode:screen;
}
/* very soft breathing halo behind the baked-in title plaque */
.crush-fx::before{
content:"";
position:absolute;
inset:10% 4%;
border-radius:50%;
background:
radial-gradient(ellipse at center,
rgba(255,250,219,.30) 0%,
rgba(255,223,128,.12) 38%,
rgba(255,255,255,0) 72%);
filter:blur(8px);
animation:crushHalo 3.2s ease-in-out infinite;
}
/* one restrained light sweep across the title, repeating slowly */
.crush-fx::after{
content:"";
position:absolute;
top:-22%;
bottom:-22%;
width:30%;
left:-44%;
background:
linear-gradient(105deg,
transparent 0%,
rgba(255,255,255,0) 26%,
rgba(255,247,210,.18) 39%,
rgba(255,255,255,.72) 50%,
rgba(255,222,113,.20) 58%,
rgba(255,255,255,0) 72%,
transparent 100%);
filter:blur(2px);
transform:skewX(-14deg);
animation:crushSweep 4.6s cubic-bezier(.45,0,.22,1) infinite 1.0s;
}
.crush-spark{
position:absolute;
width:7px;
height:7px;
transform:rotate(45deg);
background:#fff6c9;
box-shadow:
0 0 0 1px rgba(255,205,86,.48),
0 0 10px 3px rgba(255,224,132,.32);
opacity:0;
}
.crush-spark::before,
.crush-spark::after{
content:"";
position:absolute;
background:#fff9dd;
border-radius:999px;
}
.crush-spark::before{
left:50%;
top:-5px;
width:1px;
height:17px;
transform:translateX(-50%);
}
.crush-spark::after{
top:50%;
left:-5px;
width:17px;
height:1px;
transform:translateY(-50%);
}
.crush-spark.s1{left:12%;top:32%;animation:crushSpark 2.8s ease-in-out infinite .2s}
.crush-spark.s2{right:13%;top:24%;animation:crushSpark 3.1s ease-in-out infinite 1.1s}
.crush-spark.s3{right:24%;bottom:17%;width:5px;height:5px;animation:crushSpark 2.6s ease-in-out infinite 1.8s}
/* when the curtain opens, give the title one brighter celebratory pulse */
.cover.open .crush-fx::before{
animation:crushOpenFlash .72s ease-out both, crushHalo 3.2s ease-in-out .72s infinite;
}
.cover.open .crush-fx::after{
animation:crushOpenSweep .82s cubic-bezier(.16,1,.3,1) both;
}
@keyframes crushHalo{
0%,100%{opacity:.50;transform:scale(.96)}
50%{opacity:.90;transform:scale(1.04)}
}
@keyframes crushSweep{
0%,62%{left:-44%;opacity:0}
68%{opacity:.8}
88%{left:116%;opacity:.76}
100%{left:116%;opacity:0}
}
@keyframes crushSpark{
0%,100%{opacity:0;transform:rotate(45deg) scale(.45)}
42%{opacity:1;transform:rotate(45deg) scale(1.12)}
62%{opacity:.58;transform:rotate(45deg) scale(.86)}
}
@keyframes crushOpenFlash{
0%{opacity:.35;transform:scale(.96)}
40%{opacity:1;transform:scale(1.10)}
100%{opacity:.74;transform:scale(1)}
}
@keyframes crushOpenSweep{
0%{left:-44%;opacity:0}
20%{opacity:.95}
100%{left:116%;opacity:0}
}
@media(prefers-reduced-motion:reduce){
.crush-fx::before{
animation:none;
opacity:.62;
}
.crush-fx::after,
.crush-spark{
animation:none !important;
opacity:0;
}
}
/* ===== V17.7：首页人物放大 & 高清背景 ===== */
.curtain-couple{
width:min(70vw, 336px) !important;
bottom:12.9% !important;
}
.curtain-couple-shadow{
width:min(44vw, 214px) !important;
bottom:12.5% !important;
}
@media (max-width:390px){
.curtain-couple{
width:min(73vw, 318px) !important;
bottom:12.1% !important;
}
.curtain-couple-shadow{
width:min(46vw, 198px) !important;
bottom:11.7% !important;
}
}
@media (max-height:720px){
.curtain-couple{
width:min(63vw, 286px) !important;
bottom:12.2% !important;
}
.curtain-couple-shadow{
width:min(38vw, 176px) !important;
bottom:12.0% !important;
}
}
/* ===== V17.8：首页更大人物 + 高清轻量折中 ===== */
.curtain-couple{
width:min(76vw, 364px) !important;
bottom:12.1% !important;
}
.curtain-couple-shadow{
width:min(48vw, 232px) !important;
bottom:11.8% !important;
}
@media (max-width:390px){
.curtain-couple{
width:min(79vw, 344px) !important;
bottom:11.4% !important;
}
.curtain-couple-shadow{
width:min(50vw, 206px) !important;
bottom:11.1% !important;
}
}
@media (max-height:720px){
.curtain-couple{
width:min(68vw, 312px) !important;
bottom:11.6% !important;
}
.curtain-couple-shadow{
width:min(42vw, 186px) !important;
bottom:11.4% !important;
}
}
/* ===== V18: 第二页双照片相遇版 ===== */
.page.encounter-story-page{
background:linear-gradient(180deg,var(--pink) 0%,var(--pink2) 100%) !important;
padding-left:10px !important;
padding-right:10px !important;
}
.page.encounter-story-page::after{
display:none !important;
}
.encounter-stage{
position:relative;
width:min(96vw,430px);
height:calc(100dvh - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
height:calc(100svh - 156px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
min-height:470px;
max-height:760px;
border-radius:30px;
overflow:hidden;
box-shadow:
0 18px 44px rgba(46,43,79,.18),
inset 0 0 0 1.5px rgba(255,244,233,.72);
transform:translateY(26px) scale(.978);
opacity:.56;
transition:.44s cubic-bezier(.2,.8,.2,1);
background:#20315F;
}
.page.encounter-story-page.active .encounter-stage{
transform:translateY(0) scale(1);
opacity:1;
}
.encounter-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.encounter-overlay{
position:absolute;
inset:0;
background:
linear-gradient(180deg, rgba(13,20,56,.20) 0%, rgba(14,22,62,.04) 23%, rgba(14,18,48,0) 46%, rgba(22,17,33,.12) 78%, rgba(22,14,24,.18) 100%);
pointer-events:none;
}
.encounter-copy{
position:absolute;
left:50%;
top:9.8%;
transform:translateX(-50%);
width:min(82%,320px);
text-align:center;
z-index:3;
}
.encounter-copy h2{
margin:0;
font-size:31px;
line-height:1.36;
font-weight:900;
color:#FFFDF7;
text-shadow:0 2px 10px rgba(25,18,49,.34);
}
.encounter-seal{
margin:16px auto 0;
display:inline-flex;
align-items:center;
gap:8px;
min-height:40px;
padding:0 18px;
border-radius:999px;
border:1.5px solid rgba(255,231,183,.86);
background:rgba(255,249,238,.76);
color:#8E5C56;
box-shadow:0 6px 18px rgba(21,24,69,.12);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}
.encounter-seal b{
color:#F2AE48;
font-size:16px;
}
.encounter-seal span{
font-size:14px;
font-weight:900;
letter-spacing:.5px;
}
.encounter-photo-slots{
position:absolute;
left:50%;
top:34.2%;
transform:translateX(-50%);
width:min(86%,340px);
display:flex;
justify-content:space-between;
gap:10px;
z-index:3;
}
.soft-photo-slot{
position:relative;
flex:1 1 0;
max-width:148px;
aspect-ratio:5 / 6.2;
}
.soft-photo-feather{
position:absolute;
inset:0;
border-radius:42% 42% 38% 38% / 28% 28% 44% 44%;
background:
radial-gradient(ellipse at center,
rgba(255,252,247,.99) 0 35%,
rgba(255,249,241,.94) 47%,
rgba(255,244,233,.70) 62%,
rgba(255,244,233,.28) 78%,
rgba(255,244,233,0) 100%);
box-shadow:0 14px 28px rgba(31,28,76,.12);
border:1px dashed rgba(255,255,255,.74);
filter:drop-shadow(0 4px 18px rgba(31,28,76,.10));
}
.soft-photo-slot::before{
content:"";
position:absolute;
inset:8% 10%;
border-radius:40% 40% 38% 38% / 28% 28% 40% 40%;
border:1.2px solid rgba(255,255,255,.84);
opacity:.92;
}
.soft-photo-slot::after{
content:"";
position:absolute;
inset:12% 14%;
border-radius:38% 38% 34% 34% / 28% 28% 36% 36%;
background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.24) 0, rgba(255,255,255,.18) 28%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 75%);
filter:blur(1px);
}
.slot-left{transform:translateY(12px) rotate(-5deg)}
.slot-right{transform:translateY(2px) rotate(5deg)}
.slot-label{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
z-index:2;
color:#8B6A62;
text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.slot-label span{
font-size:14px;
font-weight:900;
letter-spacing:1px;
}
.slot-label small{
margin-top:6px;
font-size:11px;
font-weight:700;
}
.encounter-bottom-stars{
position:absolute;
left:50%;
bottom:16.8%;
transform:translateX(-50%);
width:min(78%,290px);
display:flex;
justify-content:space-between;
color:#F7D96A;
font-size:20px;
text-shadow:0 0 10px rgba(255,210,74,.22);
z-index:2;
}
.encounter-bottom-stars i{
font-style:normal;
opacity:.95;
}
.encounter-characters{
position:absolute;
left:0;
right:0;
bottom:1.8%;
height:25%;
z-index:3;
pointer-events:none;
}
.encounter-char{
position:absolute;
bottom:0;
height:min(22vw,126px);
width:auto;
object-fit:contain;
filter:drop-shadow(0 6px 10px rgba(29,26,69,.22));
}
.encounter-boy{
left:8.5%;
transform:rotate(-4deg);
}
.encounter-girl{
right:7.5%;
transform:rotate(4deg);
}
@media (max-width:390px){
.encounter-stage{
width:min(96vw,390px);
border-radius:26px;
}
.encounter-copy{
top:10.4%;
width:min(84%,300px);
}
.encounter-copy h2{
font-size:28px;
}
.encounter-seal{
margin-top:14px;
padding:0 16px;
}
.encounter-photo-slots{
top:35.2%;
width:min(88%,320px);
gap:8px;
}
.soft-photo-slot{
max-width:136px;
}
.slot-label span{font-size:13px}
.slot-label small{font-size:10px}
.encounter-bottom-stars{
bottom:17.8%;
width:min(76%,274px);
}
.encounter-char{
height:min(23vw,116px);
}
}
@media (max-height:760px){
.encounter-stage{
height:calc(100svh - 148px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
min-height:430px;
}
.encounter-copy{
top:8.7%;
}
.encounter-copy h2{
font-size:28px;
}
.encounter-photo-slots{
top:32.8%;
}
.encounter-char{
height:min(20vw,108px);
}
}
/* ===== V18.1: 第二页使用用户提供的独立人物素材 ===== */
.encounter-stage{
width:min(96vw,434px);
}
.encounter-copy{
top:9.4%;
}
.encounter-photo-slots{
top:33.6%;
width:min(86%,344px);
gap:8px;
}
.soft-photo-slot{
max-width:150px;
}
.encounter-characters{
bottom:0.2%;
height:31%;
}
.encounter-char{
height:auto;
width:auto;
max-height:min(27vw,178px);
max-width:min(34vw,154px);
object-fit:contain;
transform-origin:bottom center;
filter:drop-shadow(0 7px 12px rgba(29,26,69,.22));
}
.encounter-boy{
left:7.8%;
bottom:0;
transform:rotate(-4deg);
}
.encounter-girl{
right:5.6%;
bottom:0;
transform:rotate(4deg);
}
@media (max-width:390px){
.encounter-copy{
top:10.2%;
}
.encounter-photo-slots{
top:34.6%;
width:min(88%,324px);
}
.soft-photo-slot{
max-width:138px;
}
.encounter-characters{
height:29.5%;
}
.encounter-char{
max-height:min(28vw,152px);
max-width:min(35vw,140px);
}
.encounter-boy{left:6.5%;}
.encounter-girl{right:4.8%;}
}
@media (max-height:760px){
.encounter-copy{
top:8.7%;
}
.encounter-photo-slots{
top:32.6%;
}
.encounter-characters{
height:28.5%;
}
.encounter-char{
max-height:min(25vw,144px);
max-width:min(31vw,132px);
}
}
/* ===== V18.3: 全屏星光背景 + 桥面人物升入进度条 ===== */
/* The second-page artwork now truly covers the entire viewport. */
.page.encounter-story-page{
padding:0 !important;
align-items:stretch !important;
overflow:hidden !important;
background:#18274f !important;
}
.encounter-stage{
position:absolute !important;
inset:0 !important;
width:100vw !important;
height:100dvh !important;
height:100svh !important;
min-height:0 !important;
max-height:none !important;
border-radius:0 !important;
box-shadow:none !important;
transform:none !important;
opacity:1 !important;
overflow:hidden !important;
}
.encounter-bg{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
}
/* Keep copy clear of the progress rail while using the full-height composition. */
.encounter-copy{
top:18.2% !important;
}
.encounter-photo-slots{
top:39.2% !important;
}
/* Characters stand on the stone bridge/parapet in the background image. */
.encounter-characters{
position:absolute !important;
left:0 !important;
right:0 !important;
bottom:10.7% !important;
height:25% !important;
z-index:6 !important;
}
.encounter-char{
max-height:min(25vw,174px) !important;
max-width:min(33vw,154px) !important;
transition:opacity .12s ease;
}
.encounter-boy{
left:7.5% !important;
bottom:0 !important;
}
.encounter-girl{
right:5.5% !important;
bottom:0 !important;
}
/* On this page, the progress rail itself remains, but the two characters are
intentionally hidden. They become the landing targets for the lift animation. */
.floating-story.encounter-bridge-mode .float-pair{
opacity:0 !important;
transition:opacity .18s ease !important;
}
.floating-story.encounter-bridge-mode.encounter-arrived .float-pair{
opacity:1 !important;
}
.floating-story.encounter-bridge-mode .float-caption{
opacity:0 !important;
}
.float-person[data-pose="encounter"]{
width:auto !important;
height:98px !important;
object-fit:contain !important;
}
/* Flight copies sit above both the page and the rail during the story transition. */
.encounter-flight-clone{
filter:drop-shadow(0 7px 12px rgba(27,25,65,.22));
}
/* ---------- Animated sky ---------- */
.encounter-ambient{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
overflow:hidden;
}
.sky-twinkle{
position:absolute;
color:#FFE17B;
font-style:normal;
line-height:1;
text-shadow:
0 0 8px rgba(255,224,107,.72),
0 0 18px rgba(255,224,107,.30);
transform-origin:center;
opacity:.35;
animation:encounterTwinkle 2.7s ease-in-out infinite;
}
.sky-twinkle.t1{left:11%;top:12%;font-size:13px;animation-delay:.1s}
.sky-twinkle.t2{left:29%;top:8%;font-size:9px;animation-delay:1.4s}
.sky-twinkle.t3{right:14%;top:13%;font-size:14px;animation-delay:.8s}
.sky-twinkle.t4{right:29%;top:21%;font-size:8px;animation-delay:2.0s}
.sky-twinkle.t5{left:17%;top:27%;font-size:12px;animation-delay:1.0s}
.sky-twinkle.t6{left:48%;top:31%;font-size:8px;animation-delay:.4s}
.sky-twinkle.t7{right:12%;top:34%;font-size:10px;animation-delay:1.7s}
.sky-twinkle.t8{left:36%;top:42%;font-size:11px;animation-delay:2.2s}
@keyframes encounterTwinkle{
0%,100%{opacity:.24;transform:scale(.62) rotate(0deg)}
42%{opacity:1;transform:scale(1.24) rotate(18deg)}
62%{opacity:.68;transform:scale(.92) rotate(30deg)}
}
.shooting-light{
position:absolute;
width:74px;
height:1.5px;
border-radius:999px;
background:linear-gradient(90deg,transparent,rgba(255,224,123,.92),#fff9d5);
box-shadow:0 0 8px rgba(255,220,104,.34);
opacity:0;
transform:rotate(-33deg) translateX(-20px);
}
.shooting-light::after{
content:"";
position:absolute;
right:-2px;
top:50%;
width:5px;
height:5px;
border-radius:50%;
background:#FFF1A9;
transform:translateY(-50%);
box-shadow:0 0 9px rgba(255,227,119,.75);
}
.shooting-light.sh1{
left:15%;
top:24%;
animation:shootingStar 6.3s ease-in-out infinite 1.4s;
}
.shooting-light.sh2{
right:12%;
top:37%;
animation:shootingStar 7.4s ease-in-out infinite 4.0s;
}
@keyframes shootingStar{
0%,72%{opacity:0;transform:rotate(-33deg) translateX(-18px)}
77%{opacity:1}
91%{opacity:.92;transform:rotate(-33deg) translateX(105px)}
100%{opacity:0;transform:rotate(-33deg) translateX(132px)}
}
/* ---------- Warm building lights ---------- */
.house-light{
position:absolute;
width:7px;
height:12px;
border-radius:50% 50% 42% 42%;
background:linear-gradient(180deg,#FFF5C1,#FFC95D 62%,#E99630);
box-shadow:
0 0 5px 2px rgba(255,208,91,.52),
0 0 14px 5px rgba(255,188,59,.18);
transform-origin:50% 100%;
opacity:.72;
animation:houseLampSway 2.1s ease-in-out infinite alternate;
}
.house-light::after{
content:"";
position:absolute;
left:50%;
bottom:-5px;
width:15px;
height:12px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,201,75,.22),transparent 72%);
transform:translateX(-50%);
}
.house-light.h1{left:13%;top:66%;animation-delay:.1s}
.house-light.h2{left:25%;top:70%;width:6px;height:10px;animation-delay:.8s}
.house-light.h3{left:36%;top:72%;width:6px;height:11px;animation-delay:1.4s}
.house-light.h4{left:47%;top:74%;width:5px;height:9px;animation-delay:.4s}
.house-light.h5{right:40%;top:70%;width:6px;height:11px;animation-delay:1.8s}
.house-light.h6{right:29%;top:67%;width:7px;height:12px;animation-delay:.7s}
.house-light.h7{right:17%;top:69%;width:6px;height:10px;animation-delay:1.2s}
.house-light.h8{right:8%;top:64%;width:7px;height:12px;animation-delay:2.0s}
.house-light.h9{left:55%;top:78%;width:5px;height:8px;animation-delay:1.0s}
@keyframes houseLampSway{
0%{
opacity:.48;
transform:translateX(-1px) scaleY(.90) rotate(-4deg);
filter:brightness(.90);
}
45%{
opacity:1;
transform:translateX(1px) scaleY(1.08) rotate(4deg);
filter:brightness(1.15);
}
70%{
opacity:.70;
transform:translateX(0) scaleY(.96) rotate(-2deg);
}
100%{
opacity:.92;
transform:translateX(1.5px) scaleY(1.03) rotate(3deg);
filter:brightness(1.04);
}
}
/* Responsive bridge alignment. */
@media(max-width:390px){
.encounter-copy{top:18.7% !important}
.encounter-photo-slots{top:39.8% !important}
.encounter-characters{bottom:10.2% !important}
.encounter-char{
max-height:min(27vw,158px) !important;
max-width:min(34vw,142px) !important;
}
}
@media(max-height:720px){
.encounter-copy{top:17.3% !important}
.encounter-photo-slots{top:37.6% !important}
.encounter-characters{bottom:9.6% !important}
.encounter-char{
max-height:min(23vw,138px) !important;
max-width:min(30vw,126px) !important;
}
}
/* Respect OS reduced-motion preferences without changing layout. */
@media(prefers-reduced-motion:reduce){
.sky-twinkle,.shooting-light,.house-light{
animation:none !important;
}
.sky-twinkle{opacity:.62}
.house-light{opacity:.78}
}
/* ===== V18.4: 桥面抬高 / 右上→左下流星 / 建筑热浪 / 无闪烁升轨 ===== */
/* 1. Raise the bridge characters by about half a body height. */
.encounter-characters{
bottom:20.3% !important;
}
@media(max-width:390px){
.encounter-characters{
bottom:19.5% !important;
}
}
@media(max-height:720px){
.encounter-characters{
bottom:18.6% !important;
}
}
/* 2. Shooting stars now travel from upper-right toward lower-left. */
.shooting-light{
width:92px !important;
height:1.4px !important;
background:linear-gradient(
90deg,
#FFF7C8 0%,
rgba(255,232,140,.88) 18%,
rgba(255,217,104,.46) 52%,
transparent 100%
) !important;
transform-origin:left center;
transform:rotate(-43deg);
}
.shooting-light::after{
left:-3px !important;
right:auto !important;
width:5px !important;
height:5px !important;
}
.shooting-light.sh1{
left:auto !important;
right:-8% !important;
top:9% !important;
animation:shootingStarDownLeft 6.8s ease-in-out infinite 1.2s !important;
}
.shooting-light.sh2{
left:auto !important;
right:-18% !important;
top:26% !important;
animation:shootingStarDownLeft 8.2s ease-in-out infinite 4.4s !important;
}
@keyframes shootingStarDownLeft{
0%,70%{
opacity:0;
transform:translate3d(0,0,0) rotate(-43deg);
}
75%{
opacity:1;
}
91%{
opacity:.92;
transform:translate3d(-92vw,52vh,0) rotate(-43deg);
}
100%{
opacity:0;
transform:translate3d(-112vw,64vh,0) rotate(-43deg);
}
}
/* 3. Building atmosphere:
use a clipped distorted duplicate of the actual background so the effect
follows the real architecture instead of guessing window positions. */
.encounter-fx-defs{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
.encounter-building-heat{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
z-index:1;
pointer-events:none;
opacity:.30;
filter:url(#encounterHeatDistort);
clip-path:inset(55% 0 7% 0);
-webkit-mask-image:linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.55) 10%,
#000 28%,
#000 78%,
transparent 100%
);
mask-image:linear-gradient(
to bottom,
transparent 0%,
rgba(0,0,0,.55) 10%,
#000 28%,
#000 78%,
transparent 100%
);
animation:buildingHeatOpacity 4.4s ease-in-out infinite;
}
@keyframes buildingHeatOpacity{
0%,100%{opacity:.19}
38%{opacity:.34}
68%{opacity:.25}
}
/* Legacy fake house/window lights are completely disabled. */
.house-light{
display:none !important;
}
/* 4. Rail landing: exact fixed size + no transform scale at handoff. */
.floating-story.encounter-bridge-mode .float-person[data-pose="encounter"]{
width:auto !important;
height:98px !important;
max-width:none !important;
max-height:none !important;
top:9px !important;
object-fit:contain !important;
transform:none !important;
transition:none !important;
}
/* Do not fade the rail pair in with its old opacity transition; the clone
crossfade in JS now handles the handoff. */
.floating-story.encounter-bridge-mode .float-pair{
opacity:0 !important;
transition:none !important;
}
.floating-story.encounter-bridge-mode.encounter-arrived .float-pair{
opacity:1 !important;
}
/* Arrival bounce changes only Y/rotation — never scale — so character size
remains exactly identical before and after the handoff. */
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-boy[data-pose="encounter"]{
animation:railBounceBoy .52s cubic-bezier(.22,.8,.22,1) both;
}
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-girl[data-pose="encounter"]{
animation:railBounceGirl .52s cubic-bezier(.22,.8,.22,1) both;
}
@keyframes railBounceBoy{
0%{transform:translateY(0) rotate(0)}
30%{transform:translateY(-9px) rotate(-2deg)}
56%{transform:translateY(2px) rotate(.6deg)}
76%{transform:translateY(-4px) rotate(-.8deg)}
100%{transform:translateY(0) rotate(0)}
}
@keyframes railBounceGirl{
0%{transform:translateY(0) rotate(0)}
30%{transform:translateY(-9px) rotate(2deg)}
56%{transform:translateY(2px) rotate(-.6deg)}
76%{transform:translateY(-4px) rotate(.8deg)}
100%{transform:translateY(0) rotate(0)}
}
/* Reduced-motion fallback: keep atmospheric layer still and skip bounce. */
@media(prefers-reduced-motion:reduce){
.encounter-building-heat{
animation:none !important;
opacity:.22;
}
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-person[data-pose="encounter"]{
animation:none !important;
}
}
/* ===== V18.5: 桥面固定锚点 + 同尺寸升轨 + 首页星光 ===== */
/* Bridge character container spans the whole viewport. The actual feet anchor
is calculated from the rendered background's object-fit:cover geometry. */
.encounter-characters{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
bottom:auto !important;
z-index:6 !important;
}
.encounter-char{
top:var(--bridge-y,87.2%) !important;
bottom:auto !important;
max-height:min(25vw,174px) !important;
max-width:min(33vw,154px) !important;
}
.encounter-boy{
left:7.5% !important;
bottom:auto !important;
transform:translateY(-97.7%) rotate(-4deg) !important;
}
.encounter-girl{
right:5.5% !important;
bottom:auto !important;
transform:translateY(-99.1%) rotate(4deg) !important;
}
@media(max-width:390px){
.encounter-char{
max-height:min(27vw,158px) !important;
max-width:min(34vw,142px) !important;
}
}
@media(max-height:720px){
.encounter-char{
max-height:min(23vw,138px) !important;
max-width:min(30vw,126px) !important;
}
}
/* Calibrate the high-res Solo assets so their VISIBLE size matches the
following 98px walking sprites instead of looking ~10% larger. */
.float-boy[data-pose="encounter"]{
width:auto !important;
height:90px !important;
max-width:none !important;
max-height:none !important;
}
.float-girl[data-pose="encounter"]{
width:auto !important;
height:86px !important;
max-width:none !important;
max-height:none !important;
}
/* During the page-2 rail landing, keep exact geometry; no scale or transition. */
.floating-story.encounter-bridge-mode .float-person[data-pose="encounter"]{
top:9px !important;
object-fit:contain !important;
transform:none !important;
transition:none !important;
}
/* Visible bounce at arrival.
Use CSS individual transform properties so transform:none!important cannot
suppress the motion. No scale is used anywhere. */
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-boy[data-pose="encounter"]{
animation:railHopBoy .55s cubic-bezier(.18,.82,.22,1) both !important;
}
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-girl[data-pose="encounter"]{
animation:railHopGirl .55s cubic-bezier(.18,.82,.22,1) both !important;
}
@keyframes railHopBoy{
0%{translate:0 0;rotate:0deg}
28%{translate:0 -10px;rotate:-3deg}
52%{translate:0 2px;rotate:.8deg}
72%{translate:0 -4px;rotate:-1deg}
100%{translate:0 0;rotate:0deg}
}
@keyframes railHopGirl{
0%{translate:0 0;rotate:0deg}
28%{translate:0 -10px;rotate:3deg}
52%{translate:0 2px;rotate:-.8deg}
72%{translate:0 -4px;rotate:1deg}
100%{translate:0 0;rotate:0deg}
}
/* ---------- First page: twinkling stars ---------- */
.cover-star-fx{
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
overflow:hidden;
}
.cover-glint{
position:absolute;
color:#FFE073;
font-style:normal;
line-height:1;
opacity:.20;
text-shadow:
0 0 7px rgba(255,221,102,.78),
0 0 18px rgba(255,221,102,.30);
transform-origin:center;
animation:coverStarBlink 2.9s ease-in-out infinite;
}
.cover-glint.g1{left:10%;top:12%;font-size:11px;animation-delay:.1s}
.cover-glint.g2{left:25%;top:8%;font-size:8px;animation-delay:1.2s}
.cover-glint.g3{right:13%;top:11%;font-size:13px;animation-delay:.7s}
.cover-glint.g4{right:27%;top:20%;font-size:8px;animation-delay:1.8s}
.cover-glint.g5{left:15%;top:31%;font-size:12px;animation-delay:.9s}
.cover-glint.g6{right:10%;top:35%;font-size:9px;animation-delay:2.1s}
.cover-glint.g7{left:35%;top:43%;font-size:8px;animation-delay:1.5s}
.cover-glint.g8{right:19%;top:49%;font-size:11px;animation-delay:.3s}
.cover-glint.g9{left:50%;top:25%;font-size:7px;animation-delay:2.4s}
@keyframes coverStarBlink{
0%,100%{opacity:.16;transform:scale(.58) rotate(0deg)}
38%{opacity:1;transform:scale(1.24) rotate(16deg)}
58%{opacity:.62;transform:scale(.88) rotate(30deg)}
}
/* Keep first-page sparkles behind the click target but above background art. */
.curtain-hit{
z-index:10 !important;
}
@media(prefers-reduced-motion:reduce){
.cover-glint{
animation:none !important;
opacity:.55;
}
.floating-story.encounter-bridge-mode.encounter-arrived.encounter-bounce
.float-person[data-pose="encounter"]{
animation:none !important;
}
}
/* ===== V18.6: 桥面人物 1.5x + 整个升轨动效在第二页完成 ===== */
/* Initial bridge characters are intentionally 1.5x larger.
Their FEET remain locked to --bridge-y, so enlargement grows upward
without moving them away from the bridge surface. */
.encounter-char{
max-height:min(40.5vw,237px) !important;
max-width:min(51vw,213px) !important;
}
.encounter-boy{
transform:translateY(-97.7%) rotate(-4deg) !important;
}
.encounter-girl{
transform:translateY(-99.1%) rotate(4deg) !important;
}
@media(max-width:390px){
.encounter-char{
max-height:min(40.5vw,237px) !important;
max-width:min(51vw,213px) !important;
}
}
@media(max-height:720px){
.encounter-char{
max-height:min(34.5vw,207px) !important;
max-width:min(45vw,189px) !important;
}
}
/* On page 2 the rail target is the normal WALKING sprite, hidden but measurable.
Do not apply any Solo/encounter size overrides to it. */
.floating-story.encounter-bridge-mode .float-person[data-pose="walking"]{
width:var(--moving-person-w) !important;
height:var(--moving-person-h) !important;
max-width:none !important;
max-height:none !important;
top:9px !important;
object-fit:contain !important;
transition:none !important;
}
/* The real rail pair stays invisible for the WHOLE page-2 animation.
Only the temporary flying clone is visible. */
.floating-story.encounter-bridge-mode .float-pair,
.floating-story.encounter-bridge-mode.encounter-arrived .float-pair{
opacity:0 !important;
transition:none !important;
}
/* Old rail-bounce classes are no longer used in V18.6; bounce happens on the
single visible clone before the page changes, eliminating double images. */
.floating-story.encounter-bridge-mode.encounter-bounce .float-person{
animation:none !important;
}
/* Flight clone starts as the large Solo character, shrinks during ascent,
becomes the walking sprite at the rail, then bounces without scale. */
.encounter-flight-clone{
object-fit:contain !important;
transform-origin:center center !important;
will-change:left,top,width,height,transform,opacity;
}
/* ===== V18.7: 第三页暖光共读版 ===== */
.reading-story-page{
padding:0 !important;
background:transparent !important;
overflow:hidden;
}
.reading-story-page::after{display:none !important}
.reading-stage{
position:absolute;
inset:0;
overflow:hidden;
isolation:isolate;
}
.reading-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
z-index:1;
}
.reading-shade{
position:absolute;
left:0;right:0;
pointer-events:none;
z-index:2;
}
.reading-shade-top{
top:0;
height:43%;
background:linear-gradient(180deg, rgba(32,20,36,.30) 0%, rgba(32,20,36,.16) 46%, rgba(32,20,36,0) 100%);
}
.reading-shade-bottom{
bottom:0;
height:34%;
background:linear-gradient(180deg, rgba(248,239,224,0) 0%, rgba(248,239,224,.08) 36%, rgba(62,36,31,.18) 100%);
}
.reading-copy{
position:absolute;
left:50%;
top:calc(150px + env(safe-area-inset-top));
transform:translateX(-50%);
width:min(84vw,340px);
text-align:center;
color:#fffaf2;
z-index:4;
text-shadow:0 2px 10px rgba(35,22,18,.32), 0 1px 2px rgba(35,22,18,.35);
}
.reading-copy > small{
display:block;
margin-bottom:10px;
font-size:10px;
letter-spacing:1.7px;
font-weight:900;
color:#f3e7d6;
opacity:.96;
}
.reading-copy h2{
margin:0 0 14px;
font-size:29px;
line-height:1.22;
font-weight:800;
color:#fff7f0;
}
.reading-copy p{
margin:0;
font-size:15px;
line-height:1.7;
font-weight:600;
color:#fff7f0;
}
.reading-copy .seal{
margin-top:18px;
background:rgba(255,245,237,.92);
border-color:#E2B070;
color:#8f5f58;
box-shadow:0 8px 18px rgba(77,52,41,.12);
}
.reading-copy .seal b{color:#E3B359}
.reading-couple-wrap{
position:absolute;
left:50%;
bottom:calc(2px + env(safe-area-inset-bottom));
width:min(106vw,520px);
transform:translateX(-50%);
z-index:3;
pointer-events:none;
}
.reading-couple{
display:block;
width:100%;
height:auto;
filter:drop-shadow(0 14px 28px rgba(35,20,17,.18));
}
@media(max-width:390px){
.reading-copy{
top:calc(145px + env(safe-area-inset-top));
width:min(85vw,326px);
}
.reading-copy h2{font-size:26px}
.reading-copy p{font-size:13.5px}
.reading-couple-wrap{width:min(110vw,500px)}
}
@media(max-height:720px){
.reading-copy{
top:calc(138px + env(safe-area-inset-top));
width:min(82vw,320px);
}
.reading-copy h2{font-size:24px;margin-bottom:10px}
.reading-copy p{font-size:13px;line-height:1.58}
.reading-copy .seal{margin-top:13px;padding:8px 14px}
.reading-couple-wrap{width:min(102vw,470px)}
}
/* ===== V18.8: 第三页全屏视差版 ===== */
/* 背景保持满屏铺放，并增加轻微晃动；人物层独立轻微浮动，形成可感知的视差。 */
.reading-stage{
position:absolute;
inset:0;
width:100vw;
height:100dvh;
height:100svh;
overflow:hidden;
background:#e7d6c7;
}
.reading-bg{
position:absolute;
left:-4%;
top:-4%;
width:108%;
height:108%;
object-fit:cover;
object-position:center center;
transform-origin:center center;
animation:readingBgDrift 14s ease-in-out infinite alternate;
will-change:transform;
}
.reading-couple-wrap{
position:absolute;
left:50%;
bottom:calc(-8px + env(safe-area-inset-bottom));
width:min(116vw,580px);
transform:translateX(-50%);
z-index:3;
pointer-events:none;
animation:none;
will-change:auto;
}
.reading-couple{
display:block;
width:100%;
height:auto;
filter:drop-shadow(0 14px 28px rgba(35,20,17,.18));
}
.reading-copy{
z-index:4;
}
@keyframes readingBgDrift{
0%{transform:translate3d(-1.1%, -.6%, 0) scale(1.02) rotate(-.25deg)}
25%{transform:translate3d(.4%, -.2%, 0) scale(1.03) rotate(.12deg)}
50%{transform:translate3d(1.1%, .65%, 0) scale(1.035) rotate(.25deg)}
75%{transform:translate3d(.2%, .2%, 0) scale(1.028) rotate(.05deg)}
100%{transform:translate3d(-.9%, .9%, 0) scale(1.03) rotate(-.18deg)}
}
@keyframes readingCoupleParallax{
0%{transform:translateX(-50%) translateY(0) rotate(0deg)}
25%{transform:translateX(calc(-50% - 3px)) translateY(-2px) rotate(-.35deg)}
50%{transform:translateX(calc(-50% + 4px)) translateY(1px) rotate(.28deg)}
75%{transform:translateX(calc(-50% + 1px)) translateY(-1px) rotate(.1deg)}
100%{transform:translateX(calc(-50% - 2px)) translateY(2px) rotate(-.22deg)}
}
@media (max-width:390px){
.reading-couple-wrap{width:min(120vw,600px)}
.reading-bg{left:-5%;top:-5%;width:110%;height:110%;}
}
@media (max-height:720px){
.reading-couple-wrap{width:min(112vw,540px)}
}
@media (prefers-reduced-motion:reduce){
.reading-bg,.reading-couple-wrap{animation:none !important}
}
/* V18.9 修正：前景层不晃动，底部完整覆盖 */
.reading-couple-wrap{animation:none !important;transform:translateX(-50%) !important;}
.reading-couple{width:100%;height:auto;display:block;}
/* ===== V18.10: 第三页真实视差微晃版 =====
目标：像“镜头轻微晃动”，而不是桌子自己在动。
原则：
- 背景与前景同方向、同节奏运动
- 前景因为更靠近镜头，位移幅度略大
- 两层不做反向摆动，避免违背真实视差
- 前景更大、更低，彻底覆盖屏幕底部
*/
/* 背景：慢、轻、同向移动，模拟远景随镜头轻微漂移 */
.reading-bg{
left:-5.5% !important;
top:-5.5% !important;
width:111% !important;
height:111% !important;
animation:readingCameraBg 12.8s ease-in-out infinite alternate !important;
will-change:transform;
}
/* 前景：更大、更低；位移方向与背景一致，但幅度略大，形成自然近景视差 */
.reading-couple-wrap{
bottom:calc(-26px + env(safe-area-inset-bottom)) !important;
width:min(124vw,620px) !important;
animation:readingCameraFg 12.8s ease-in-out infinite alternate !important;
will-change:transform;
transform-origin:center bottom;
}
/* 远景位移约 2~4px，近景约 4~7px；方向保持一致 */
@keyframes readingCameraBg{
0%{
transform:translate3d(-3px,-2px,0) scale(1.018) rotate(-.10deg);
}
25%{
transform:translate3d(2px,-3px,0) scale(1.022) rotate(.05deg);
}
50%{
transform:translate3d(4px,2px,0) scale(1.024) rotate(.10deg);
}
75%{
transform:translate3d(2px,3px,0) scale(1.022) rotate(.04deg);
}
100%{
transform:translate3d(-3px,3px,0) scale(1.021) rotate(-.08deg);
}
}
@keyframes readingCameraFg{
0%{
transform:translateX(-50%) translate3d(-6px,-3px,0) rotate(-.12deg);
}
25%{
transform:translateX(-50%) translate3d(3px,-5px,0) rotate(.06deg);
}
50%{
transform:translateX(-50%) translate3d(8px,3px,0) rotate(.12deg);
}
75%{
transform:translateX(-50%) translate3d(3px,5px,0) rotate(.05deg);
}
100%{
transform:translateX(-50%) translate3d(-6px,4px,0) rotate(-.10deg);
}
}
@media(max-width:390px){
.reading-couple-wrap{
width:min(130vw,610px) !important;
bottom:calc(-30px + env(safe-area-inset-bottom)) !important;
}
.reading-bg{
left:-6% !important;
top:-6% !important;
width:112% !important;
height:112% !important;
}
}
@media(max-height:720px){
.reading-couple-wrap{
width:min(118vw,570px) !important;
bottom:calc(-30px + env(safe-area-inset-bottom)) !important;
}
}
/* 系统减少动态时，保留构图但关闭晃动 */
@media(prefers-reduced-motion:reduce){
.reading-bg,
.reading-couple-wrap{
animation:none !important;
}
}
/* ===== V18.12: 第三页景深飞入照片版 ===== */
.reading-memory-overlay{
position:absolute;
inset:0;
z-index:9;
pointer-events:none;
opacity:0;
transition:opacity .45s ease;
}
.reading-memory-vignette{
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 44%, rgba(255,248,239,.08) 0%, rgba(35,23,28,.08) 34%, rgba(22,16,21,.34) 72%, rgba(14,10,16,.48) 100%);
opacity:0;
transition:opacity .45s ease;
}
.reading-memory-hint{
position:absolute;
left:50%;
top:calc(132px + env(safe-area-inset-top));
transform:translateX(-50%);
padding:10px 16px;
border-radius:999px;
background:rgba(248,239,227,.92);
border:1px solid rgba(228,191,137,.72);
color:#8a645d;
font-size:12px;
font-weight:700;
letter-spacing:.3px;
box-shadow:0 10px 24px rgba(29,18,24,.16);
opacity:0;
transition:opacity .42s ease, transform .42s ease;
}
.memory-polaroid{
position:absolute;
width:min(34vw,146px);
max-width:146px;
opacity:0;
filter:drop-shadow(0 18px 30px rgba(19,13,19,.28));
will-change:transform,opacity;
}
.memory-paper{
width:100%;
background:linear-gradient(180deg,#fffdfa 0%,#f6efe7 100%);
border-radius:18px;
padding:10px 10px 18px;
border:1px solid rgba(255,255,255,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(222,204,187,.55), 0 4px 14px rgba(66,46,42,.1);
}
.memory-photo-hole{
aspect-ratio:4 / 5;
border-radius:14px;
overflow:hidden;
position:relative;
background:linear-gradient(180deg, rgba(255,248,243,.95) 0%, rgba(242,231,219,.96) 100%);
box-shadow:inset 0 0 0 1px rgba(228,214,200,.88);
}
.memory-photo-hole::after{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 42%, rgba(255,255,255,.04) 0%, rgba(255,255,255,.0) 44%, rgba(217,200,181,.14) 100%);
pointer-events:none;
}
.memory-photo-fill{
position:absolute;
inset:8px;
border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(245,240,235,.88) 100%);
box-shadow:inset 0 0 0 1px rgba(225,212,201,.9);
}
.memory-photo-fill::before{
content:'PHOTO';
position:absolute;
left:50%; top:50%;
transform:translate(-50%,-56%);
font-size:17px;
font-weight:800;
letter-spacing:2px;
color:rgba(145,116,112,.64);
}
.memory-photo-fill::after{
content:'替换真人照片';
position:absolute;
left:50%; top:calc(50% + 16px);
transform:translateX(-50%);
font-size:11px;
font-weight:600;
letter-spacing:.4px;
color:rgba(155,127,122,.72);
white-space:nowrap;
}
.memory-caption{
padding-top:10px;
text-align:center;
color:#8a5f5d;
font-weight:900;
font-size:14px;
letter-spacing:1.2px;
}
.memory-caption span{
display:block;
margin-top:4px;
font-size:11px;
font-weight:700;
letter-spacing:.5px;
color:#b28a84;
}
.polaroid-left{
left:6.5%;
top:40%;
transform:translate3d(-42vw,58vh,0) rotate(-24deg) scale(.86);
}
.polaroid-center{
left:50%;
top:28%;
transform:translate3d(-50%,-55vh,0) rotate(4deg) scale(.9);
}
.polaroid-right{
right:6.5%;
top:43%;
transform:translate3d(42vw,58vh,0) rotate(22deg) scale(.86);
}
.reading-story-page.memory-open .reading-memory-overlay{opacity:1;pointer-events:none;}
.reading-story-page.memory-open .reading-memory-vignette{opacity:1;}
.reading-story-page.memory-open .reading-memory-hint{opacity:1;transform:translateX(-50%) translateY(-4px);}
.reading-story-page.memory-open .reading-bg,
.reading-story-page.memory-open .reading-shade,
.reading-story-page.memory-open .reading-copy,
.reading-story-page.memory-open .reading-couple-wrap{
filter:blur(8px) saturate(.88) brightness(.82);
}
.reading-story-page.memory-open .reading-copy{opacity:.42;}
.reading-story-page.memory-open .polaroid-left{
opacity:1;
transform:translate3d(0,0,0) rotate(-12deg) scale(1);
transition:transform .82s cubic-bezier(.18,.82,.22,1), opacity .56s ease;
transition-delay:.04s;
animation:memoryPhotoFloat1 4.8s ease-in-out .9s infinite;
}
.reading-story-page.memory-open .polaroid-center{
opacity:1;
transform:translate3d(-50%,0,0) rotate(3deg) scale(1.03);
transition:transform .86s cubic-bezier(.18,.82,.22,1), opacity .58s ease;
transition-delay:.14s;
animation:memoryPhotoFloat2 5.2s ease-in-out 1s infinite;
}
.reading-story-page.memory-open .polaroid-right{
opacity:1;
transform:translate3d(0,0,0) rotate(12deg) scale(1);
transition:transform .9s cubic-bezier(.18,.82,.22,1), opacity .60s ease;
transition-delay:.22s;
animation:memoryPhotoFloat3 4.9s ease-in-out 1.12s infinite;
}
@keyframes memoryPhotoFloat1{
0%,100%{transform:translate3d(0,0,0) rotate(-12deg)}
50%{transform:translate3d(0,-8px,0) rotate(-9deg)}
}
@keyframes memoryPhotoFloat2{
0%,100%{transform:translate3d(-50%,0,0) rotate(3deg) scale(1.03)}
50%{transform:translate3d(-50%,-10px,0) rotate(.8deg) scale(1.035)}
}
@keyframes memoryPhotoFloat3{
0%,100%{transform:translate3d(0,0,0) rotate(12deg)}
50%{transform:translate3d(0,-7px,0) rotate(9deg)}
}
@media(max-width:390px){
.reading-memory-hint{top:calc(124px + env(safe-area-inset-top));font-size:11px;padding:9px 14px;}
.memory-polaroid{width:min(35.5vw,136px);}
.polaroid-left{left:4.8%;top:42%;}
.polaroid-center{top:30%;}
.polaroid-right{right:4.8%;top:44%;}
}
@media(max-height:720px){
.memory-polaroid{width:min(31.5vw,124px);}
.polaroid-left{top:43%;}
.polaroid-center{top:31%;}
.polaroid-right{top:45%;}
}
@media(prefers-reduced-motion:reduce){
.reading-story-page.memory-open .polaroid-left,
.reading-story-page.memory-open .polaroid-center,
.reading-story-page.memory-open .polaroid-right{animation:none !important;}
}
/* ===== V18.13：第三页照片放大 + 景深翻页拦截修正 ===== */
/* 景深状态下，右侧页码弱化；顶部进度条和人物进度轨保持完全清晰。 */
body.reading-memory-active .page-dots{
opacity:.12;
filter:blur(3px);
transition:opacity .35s ease, filter .35s ease;
}
body.reading-memory-active .progress,
body.reading-memory-active .floating-story{
filter:none !important;
opacity:1 !important;
}
/* 相纸整体明显放大，让“看照片”成为这一段的视觉主体。 */
.memory-polaroid{
width:min(45vw,188px) !important;
max-width:188px !important;
}
.polaroid-center{
width:min(49vw,204px) !important;
max-width:204px !important;
z-index:4;
top:26% !important;
}
.polaroid-left{
left:-1.5% !important;
top:42% !important;
z-index:3;
}
.polaroid-right{
right:-1.5% !important;
top:43% !important;
z-index:3;
}
/* 收窄相纸白边，把更多面积留给未来的真人照片。 */
.memory-paper{
padding:8px 8px 13px !important;
border-radius:17px !important;
}
.memory-photo-hole{
border-radius:13px !important;
}
.memory-photo-fill{
inset:5px !important;
border-radius:10px !important;
}
.memory-caption{
padding-top:8px !important;
font-size:13px !important;
}
.memory-caption span{
margin-top:3px !important;
font-size:10px !important;
}
/* 景深稍微更明显一点，但依旧保留场景可辨识度。 */
.reading-story-page.memory-open .reading-bg,
.reading-story-page.memory-open .reading-shade,
.reading-story-page.memory-open .reading-copy,
.reading-story-page.memory-open .reading-couple-wrap{
filter:blur(9px) saturate(.84) brightness(.78) !important;
}
/* 放大后重新校准飞入起点，仍然从屏幕外进入。 */
.polaroid-left{
transform:translate3d(-55vw,58vh,0) rotate(-25deg) scale(.80);
}
.polaroid-center{
transform:translate3d(-50%,-62vh,0) rotate(4deg) scale(.84);
}
.polaroid-right{
transform:translate3d(55vw,58vh,0) rotate(23deg) scale(.80);
}
@media(max-width:390px){
.memory-polaroid{
width:min(46vw,178px) !important;
max-width:178px !important;
}
.polaroid-center{
width:min(50vw,194px) !important;
max-width:194px !important;
top:27% !important;
}
.polaroid-left{
left:-2.5% !important;
top:43% !important;
}
.polaroid-right{
right:-2.5% !important;
top:44% !important;
}
}
@media(max-height:720px){
.memory-polaroid{
width:min(40vw,162px) !important;
max-width:162px !important;
}
.polaroid-center{
width:min(44vw,178px) !important;
max-width:178px !important;
top:27.5% !important;
}
}
/* ===== V18.14：第三页相纸错层 + 屏内安全排版 =====
目标：
1. 三张照片明显错开，不再横向挤成一排；
2. 所有相纸完整留在屏幕内；
3. 中间照片稍大，视觉主次更明确；
4. 保留从屏幕外飞入和轻微漂浮。
*/
/* 左、右相纸适当收一点，给错层留空间。 */
.memory-polaroid{
width:min(38vw,156px) !important;
max-width:156px !important;
}
/* 左上 */
.polaroid-left{
left:5% !important;
right:auto !important;
top:35% !important;
z-index:3 !important;
transform:translate3d(-55vw,28vh,0) rotate(-24deg) scale(.82);
}
/* 中间偏下，作为主照片 */
.polaroid-center{
left:50% !important;
right:auto !important;
top:48% !important;
width:min(43vw,178px) !important;
max-width:178px !important;
z-index:5 !important;
transform:translate3d(-50%,-66vh,0) rotate(3deg) scale(.86);
}
/* 右上，但比左边略低一点 */
.polaroid-right{
right:5% !important;
left:auto !important;
top:38% !important;
z-index:4 !important;
transform:translate3d(55vw,28vh,0) rotate(22deg) scale(.82);
}
/* 飞入后保持错层结构 */
.reading-story-page.memory-open .polaroid-left{
transform:translate3d(0,0,0) rotate(-10deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-center{
transform:translate3d(-50%,0,0) rotate(2deg) scale(1.02) !important;
}
.reading-story-page.memory-open .polaroid-right{
transform:translate3d(0,0,0) rotate(10deg) scale(1) !important;
}
/* 漂浮幅度也稍微收敛，避免晃出屏幕。 */
@keyframes memoryPhotoFloat1{
0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}
50%{transform:translate3d(2px,-6px,0) rotate(-8deg)}
}
@keyframes memoryPhotoFloat2{
0%,100%{transform:translate3d(-50%,0,0) rotate(2deg) scale(1.02)}
50%{transform:translate3d(calc(-50% + 2px),-7px,0) rotate(.5deg) scale(1.025)}
}
@keyframes memoryPhotoFloat3{
0%,100%{transform:translate3d(0,0,0) rotate(10deg)}
50%{transform:translate3d(-2px,-5px,0) rotate(8deg)}
}
/* 窄屏：进一步收紧宽度和左右边距，确保完整在屏幕内。 */
@media(max-width:390px){
.memory-polaroid{
width:min(37vw,144px) !important;
max-width:144px !important;
}
.polaroid-left{
left:4% !important;
top:36% !important;
}
.polaroid-center{
top:49% !important;
width:min(42vw,164px) !important;
max-width:164px !important;
}
.polaroid-right{
right:4% !important;
top:39% !important;
}
}
/* 矮屏：压缩纵向间距，避免中间相纸底部出界。 */
@media(max-height:720px){
.memory-polaroid{
width:min(34vw,136px) !important;
max-width:136px !important;
}
.polaroid-left{
top:34% !important;
}
.polaroid-center{
top:46% !important;
width:min(38vw,150px) !important;
max-width:150px !important;
}
.polaroid-right{
top:36% !important;
}
}
/* 极矮屏再兜底：三张相纸仍不出界。 */
@media(max-height:620px){
.memory-polaroid{
width:min(31vw,124px) !important;
max-width:124px !important;
}
.polaroid-left{top:32% !important;}
.polaroid-center{
top:44% !important;
width:min(35vw,138px) !important;
max-width:138px !important;
}
.polaroid-right{top:34% !important;}
}
/* ===== V18.15：第三页照片不重叠安全排版 ===== */
/* 目标：三张相纸完全分开，不发生互相压住。 */
.reading-story-page .memory-polaroid{
width:min(33vw, 132px) !important;
max-width:132px !important;
}
/* 左上 */
.reading-story-page .polaroid-left{
left:4.5% !important;
right:auto !important;
top:36% !important;
z-index:3 !important;
transform:translate3d(-52vw,25vh,0) rotate(-11deg) scale(.84) !important;
}
/* 中间偏下，稍大但不压到左右 */
.reading-story-page .polaroid-center{
left:50% !important;
right:auto !important;
top:51% !important;
width:min(35vw, 142px) !important;
max-width:142px !important;
z-index:5 !important;
transform:translate3d(-50%,-62vh,0) rotate(1.5deg) scale(.88) !important;
}
/* 右上 */
.reading-story-page .polaroid-right{
right:4.5% !important;
left:auto !important;
top:37.5% !important;
z-index:4 !important;
transform:translate3d(52vw,25vh,0) rotate(11deg) scale(.84) !important;
}
.reading-story-page.memory-open .polaroid-left{
transform:translate3d(0,0,0) rotate(-8deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-center{
transform:translate3d(-50%,0,0) rotate(1.5deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-right{
transform:translate3d(0,0,0) rotate(8deg) scale(1) !important;
}
/* 轻微晃动但不碰撞 */
@keyframes memoryPhotoFloat1_V1815{
0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
50%{transform:translate3d(2px,-5px,0) rotate(-6deg)}
}
@keyframes memoryPhotoFloat2_V1815{
0%,100%{transform:translate3d(-50%,0,0) rotate(1.5deg)}
50%{transform:translate3d(calc(-50% + 1px),-5px,0) rotate(.5deg)}
}
@keyframes memoryPhotoFloat3_V1815{
0%,100%{transform:translate3d(0,0,0) rotate(8deg)}
50%{transform:translate3d(-2px,-5px,0) rotate(6deg)}
}
.reading-story-page.memory-open .polaroid-left{animation:memoryPhotoFloat1_V1815 4.8s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-center{animation:memoryPhotoFloat2_V1815 5.2s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-right{animation:memoryPhotoFloat3_V1815 5s ease-in-out infinite !important;}
/* 常见手机宽度 */
@media (max-width: 430px){
.reading-story-page .memory-polaroid{
width:min(31.5vw,126px) !important;
max-width:126px !important;
}
.reading-story-page .polaroid-left{left:4.2% !important; top:37% !important;}
.reading-story-page .polaroid-center{top:51% !important; width:min(33.5vw,134px) !important; max-width:134px !important;}
.reading-story-page .polaroid-right{right:4.2% !important; top:38.5% !important;}
}
/* 矮屏进一步分层，避免碰撞和出屏 */
@media (max-height: 760px){
.reading-story-page .memory-polaroid{
width:min(29.5vw,118px) !important;
max-width:118px !important;
}
.reading-story-page .polaroid-left{top:36.5% !important;}
.reading-story-page .polaroid-center{top:49.5% !important; width:min(31.5vw,126px) !important; max-width:126px !important;}
.reading-story-page .polaroid-right{top:38% !important;}
}
/* 更矮屏兜底 */
@media (max-height: 680px){
.reading-story-page .memory-polaroid{
width:min(27.5vw,110px) !important;
max-width:110px !important;
}
.reading-story-page .polaroid-left{left:4% !important; top:35.5% !important;}
.reading-story-page .polaroid-center{top:48% !important; width:min(29.5vw,118px) !important; max-width:118px !important;}
.reading-story-page .polaroid-right{right:4% !important; top:37% !important;}
}
/* ===== V18.16：第三页删提示与文字，照片放大 ===== */
/* 删除提示文案与相纸文字，把空间都让给照片。 */
.reading-memory-hint,
.memory-caption{
display:none !important;
}
.memory-paper{
padding:8px !important;
border-radius:17px !important;
}
.memory-photo-hole{
aspect-ratio:4 / 5 !important;
border-radius:13px !important;
}
.memory-photo-fill{
inset:4px !important;
border-radius:10px !important;
}
.memory-photo-fill::before,
.memory-photo-fill::after{
content:none !important;
display:none !important;
}
/* 更大的三张相纸，仍保证不重叠、都在屏幕内。 */
.reading-story-page .memory-polaroid{
width:min(36vw, 148px) !important;
max-width:148px !important;
}
.reading-story-page .polaroid-left{
left:4.2% !important;
top:34% !important;
transform:translate3d(-52vw,24vh,0) rotate(-8deg) scale(.84) !important;
}
.reading-story-page .polaroid-center{
left:50% !important;
top:49% !important;
width:min(39vw, 162px) !important;
max-width:162px !important;
transform:translate3d(-50%,-58vh,0) rotate(1.5deg) scale(.88) !important;
}
.reading-story-page .polaroid-right{
right:4.2% !important;
top:35.5% !important;
transform:translate3d(52vw,24vh,0) rotate(8deg) scale(.84) !important;
}
.reading-story-page.memory-open .polaroid-left{
transform:translate3d(0,0,0) rotate(-7deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-center{
transform:translate3d(-50%,0,0) rotate(1.5deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-right{
transform:translate3d(0,0,0) rotate(7deg) scale(1) !important;
}
@keyframes memoryPhotoFloat1_V1816{
0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}
50%{transform:translate3d(2px,-6px,0) rotate(-5deg)}
}
@keyframes memoryPhotoFloat2_V1816{
0%,100%{transform:translate3d(-50%,0,0) rotate(1.5deg)}
50%{transform:translate3d(calc(-50% + 1px),-6px,0) rotate(.5deg)}
}
@keyframes memoryPhotoFloat3_V1816{
0%,100%{transform:translate3d(0,0,0) rotate(7deg)}
50%{transform:translate3d(-2px,-6px,0) rotate(5deg)}
}
.reading-story-page.memory-open .polaroid-left{animation:memoryPhotoFloat1_V1816 4.8s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-center{animation:memoryPhotoFloat2_V1816 5.1s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-right{animation:memoryPhotoFloat3_V1816 4.9s ease-in-out infinite !important;}
@media (max-width:430px){
.reading-story-page .memory-polaroid{
width:min(35vw, 142px) !important;
max-width:142px !important;
}
.reading-story-page .polaroid-left{left:4% !important; top:35% !important;}
.reading-story-page .polaroid-center{top:49.5% !important; width:min(38vw, 154px) !important; max-width:154px !important;}
.reading-story-page .polaroid-right{right:4% !important; top:36.5% !important;}
}
@media (max-height:760px){
.reading-story-page .memory-polaroid{
width:min(32vw, 130px) !important;
max-width:130px !important;
}
.reading-story-page .polaroid-left{top:34% !important;}
.reading-story-page .polaroid-center{top:47.5% !important; width:min(35vw, 142px) !important; max-width:142px !important;}
.reading-story-page .polaroid-right{top:35.5% !important;}
}
@media (max-height:680px){
.reading-story-page .memory-polaroid{
width:min(29.5vw, 118px) !important;
max-width:118px !important;
}
.reading-story-page .polaroid-left{top:33% !important;}
.reading-story-page .polaroid-center{top:46.5% !important; width:min(32vw, 128px) !important; max-width:128px !important;}
.reading-story-page .polaroid-right{top:34.5% !important;}
}
/* ===== V18.17：第三页大照片人脸清晰版 =====
目标：照片进一步明显放大，不只占据中间三分之一。
版式：上方左右两张 + 下方中间一张，三张都完整留在屏幕内，不重叠。
*/
.reading-story-page .memory-paper{
padding:7px !important;
border-radius:16px !important;
}
.reading-story-page .memory-photo-hole{
border-radius:12px !important;
}
.reading-story-page .memory-photo-fill{
inset:3px !important;
border-radius:10px !important;
}
/* 默认尺寸：显著放大 */
.reading-story-page .memory-polaroid{
width:min(41vw, 172px) !important;
max-width:172px !important;
}
.reading-story-page .polaroid-left{
left:3.5% !important;
right:auto !important;
top:26% !important;
transform:translate3d(-56vw, 16vh, 0) rotate(-8deg) scale(.86) !important;
}
.reading-story-page .polaroid-right{
right:3.5% !important;
left:auto !important;
top:27.5% !important;
transform:translate3d(56vw, 16vh, 0) rotate(8deg) scale(.86) !important;
}
.reading-story-page .polaroid-center{
left:50% !important;
top:51.5% !important;
width:min(50vw, 208px) !important;
max-width:208px !important;
transform:translate3d(-50%, 42vh, 0) rotate(1deg) scale(.88) !important;
}
/* 飞入结束后的落点：三张完整且不重叠 */
.reading-story-page.memory-open .polaroid-left{
transform:translate3d(0,0,0) rotate(-7deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-right{
transform:translate3d(0,0,0) rotate(7deg) scale(1) !important;
}
.reading-story-page.memory-open .polaroid-center{
transform:translate3d(-50%,0,0) rotate(1deg) scale(1) !important;
}
/* 漂浮幅度很轻，但仍保留生命感 */
@keyframes memoryPhotoFloat1_V1817{
0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}
50%{transform:translate3d(2px,-7px,0) rotate(-5deg)}
}
@keyframes memoryPhotoFloat2_V1817{
0%,100%{transform:translate3d(0,0,0) rotate(7deg)}
50%{transform:translate3d(-2px,-6px,0) rotate(5deg)}
}
@keyframes memoryPhotoFloat3_V1817{
0%,100%{transform:translate3d(-50%,0,0) rotate(1deg)}
50%{transform:translate3d(calc(-50% + 1px),-7px,0) rotate(0deg)}
}
.reading-story-page.memory-open .polaroid-left{animation:memoryPhotoFloat1_V1817 4.8s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-right{animation:memoryPhotoFloat2_V1817 5.0s ease-in-out infinite !important;}
.reading-story-page.memory-open .polaroid-center{animation:memoryPhotoFloat3_V1817 5.2s ease-in-out infinite !important;}
/* 常见手机宽度：继续保证更大照片 */
@media (max-width: 430px){
.reading-story-page .memory-polaroid{
width:min(40vw, 164px) !important;
max-width:164px !important;
}
.reading-story-page .polaroid-left{left:3.3% !important; top:27% !important;}
.reading-story-page .polaroid-right{right:3.3% !important; top:28.2% !important;}
.reading-story-page .polaroid-center{
top:52% !important;
width:min(48vw, 196px) !important;
max-width:196px !important;
}
}
/* 矮屏：稍微压缩，避免底部出界 */
@media (max-height: 760px){
.reading-story-page .memory-polaroid{
width:min(37vw, 150px) !important;
max-width:150px !important;
}
.reading-story-page .polaroid-left{top:25.5% !important;}
.reading-story-page .polaroid-right{top:27% !important;}
.reading-story-page .polaroid-center{
top:50% !important;
width:min(44vw, 178px) !important;
max-width:178px !important;
}
}
/* 更矮屏兜底 */
@media (max-height: 680px){
.reading-story-page .memory-polaroid{
width:min(34vw, 136px) !important;
max-width:136px !important;
}
.reading-story-page .polaroid-left{top:24.5% !important;}
.reading-story-page .polaroid-right{top:25.8% !important;}
.reading-story-page .polaroid-center{
top:48.5% !important;
width:min(40vw, 160px) !important;
max-width:160px !important;
}
}
/* ===== V18.18：第三页更大飞入照片版 =====
目标：照片继续放大，但不能出屏幕；并强化“飞进来”的观感。
布局：上方左右大图 + 下方中间主图，三张都完整可见、不重叠。
*/
.reading-story-page .memory-polaroid{
will-change: transform, opacity;
}
.reading-story-page .memory-paper{
padding:6px !important;
border-radius:16px !important;
}
.reading-story-page .memory-photo-hole{
border-radius:12px !important;
}
.reading-story-page .memory-photo-fill{
inset:2px !important;
border-radius:10px !important;
}
/* 默认状态：更明显的飞入起点 */
.reading-story-page .memory-polaroid{
transition: transform .96s cubic-bezier(.19,.88,.22,1), opacity .48s ease !important;
}
.reading-story-page .memory-polaroid{
width:min(42.5vw, 178px) !important;
max-width:178px !important;
}
.reading-story-page .polaroid-left{
left:2.6% !important;
top:20.5% !important;
right:auto !important;
opacity:0 !important;
transform:translate3d(-72vw, 20vh, 0) rotate(-18deg) scale(.84) !important;
}
.reading-story-page .polaroid-right{
right:2.6% !important;
top:22% !important;
left:auto !important;
opacity:0 !important;
transform:translate3d(72vw, 20vh, 0) rotate(18deg) scale(.84) !important;
}
.reading-story-page .polaroid-center{
left:50% !important;
top:47.5% !important;
width:min(55vw, 228px) !important;
max-width:228px !important;
opacity:0 !important;
transform:translate3d(-50%, 54vh, 0) rotate(2.5deg) scale(.82) !important;
}
/* 飞入完成后的最终位置 */
.reading-story-page.memory-open .polaroid-left{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(-7deg) scale(1) !important;
animation:memoryPhotoFloat1_V1818 4.8s ease-in-out 1.02s infinite !important;
}
.reading-story-page.memory-open .polaroid-right{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(7deg) scale(1) !important;
animation:memoryPhotoFloat2_V1818 5.0s ease-in-out 1.12s infinite !important;
}
.reading-story-page.memory-open .polaroid-center{
opacity:1 !important;
transform:translate3d(-50%,0,0) rotate(1deg) scale(1) !important;
animation:memoryPhotoFloat3_V1818 5.2s ease-in-out 1.22s infinite !important;
}
@keyframes memoryPhotoFloat1_V1818{
0%,100%{transform:translate3d(0,0,0) rotate(-7deg)}
50%{transform:translate3d(2px,-6px,0) rotate(-5deg)}
}
@keyframes memoryPhotoFloat2_V1818{
0%,100%{transform:translate3d(0,0,0) rotate(7deg)}
50%{transform:translate3d(-2px,-6px,0) rotate(5deg)}
}
@keyframes memoryPhotoFloat3_V1818{
0%,100%{transform:translate3d(-50%,0,0) rotate(1deg)}
50%{transform:translate3d(calc(-50% + 1px),-7px,0) rotate(0deg)}
}
/* 常见手机：继续做大，但仍完整留在屏幕内 */
@media (max-width:430px){
.reading-story-page .memory-polaroid{
width:min(41.5vw, 170px) !important;
max-width:170px !important;
}
.reading-story-page .polaroid-left{left:2.4% !important; top:21.2% !important;}
.reading-story-page .polaroid-right{right:2.4% !important; top:22.8% !important;}
.reading-story-page .polaroid-center{
top:48.2% !important;
width:min(53vw, 214px) !important;
max-width:214px !important;
}
}
/* 中短屏：略缩一圈，避免下边界出屏 */
@media (max-height:760px){
.reading-story-page .memory-polaroid{
width:min(39vw, 158px) !important;
max-width:158px !important;
}
.reading-story-page .polaroid-left{top:20.2% !important;}
.reading-story-page .polaroid-right{top:21.6% !important;}
.reading-story-page .polaroid-center{
top:47% !important;
width:min(49vw, 192px) !important;
max-width:192px !important;
}
}
/* 更矮屏兜底 */
@media (max-height:680px){
.reading-story-page .memory-polaroid{
width:min(35.5vw, 144px) !important;
max-width:144px !important;
}
.reading-story-page .polaroid-left{top:19.6% !important;}
.reading-story-page .polaroid-right{top:20.8% !important;}
.reading-story-page .polaroid-center{
top:45.5% !important;
width:min(44.5vw, 174px) !important;
max-width:174px !important;
}
}
/* ===== V18.19：第三页自然散落发牌版 =====
目标：照片不要排得像“两眼一嘴”，改成更自然的相纸散开排版；
允许轻微重叠；从屏幕下方飞入，像发牌一样依次进场。
*/
.reading-story-page .memory-polaroid{
will-change:transform,opacity;
transition:
transform 1.02s cubic-bezier(.16,.88,.2,1),
opacity .46s ease !important;
}
.reading-story-page .memory-paper{
padding:6px !important;
border-radius:16px !important;
}
.reading-story-page .memory-photo-hole{
border-radius:12px !important;
}
.reading-story-page .memory-photo-fill{
inset:2px !important;
border-radius:10px !important;
}
/* 更自然的散落终局尺寸 */
.reading-story-page .memory-polaroid{
width:min(41vw, 172px) !important;
max-width:172px !important;
}
/* 初始状态：统一从屏幕下方飞入，像发牌 */
.reading-story-page .polaroid-left{
left:4.2% !important;
top:24.8% !important;
right:auto !important;
z-index:2 !important;
opacity:0 !important;
transform:translate3d(-12vw, 88vh, 0) rotate(-22deg) scale(.8) !important;
}
.reading-story-page .polaroid-right{
right:4.2% !important;
top:18.8% !important;
left:auto !important;
z-index:4 !important;
opacity:0 !important;
transform:translate3d(16vw, 92vh, 0) rotate(24deg) scale(.8) !important;
}
.reading-story-page .polaroid-center{
left:18.5% !important;
top:45.5% !important;
width:min(52vw, 216px) !important;
max-width:216px !important;
z-index:3 !important;
opacity:0 !important;
transform:translate3d(3vw, 98vh, 0) rotate(8deg) scale(.78) !important;
}
/* 终局：自然散落，略微重叠 */
.reading-story-page.memory-open .polaroid-left{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(-9deg) scale(1) !important;
transition-delay:.03s !important;
animation:memoryPhotoFloat1_V1819 5.0s ease-in-out 1.06s infinite !important;
}
.reading-story-page.memory-open .polaroid-right{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(8deg) scale(1) !important;
transition-delay:.20s !important;
animation:memoryPhotoFloat2_V1819 5.3s ease-in-out 1.18s infinite !important;
}
.reading-story-page.memory-open .polaroid-center{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(4deg) scale(1) !important;
transition-delay:.11s !important;
animation:memoryPhotoFloat3_V1819 5.2s ease-in-out 1.26s infinite !important;
}
@keyframes memoryPhotoFloat1_V1819{
0%,100%{transform:translate3d(0,0,0) rotate(-9deg)}
50%{transform:translate3d(2px,-7px,0) rotate(-7deg)}
}
@keyframes memoryPhotoFloat2_V1819{
0%,100%{transform:translate3d(0,0,0) rotate(8deg)}
50%{transform:translate3d(-2px,-7px,0) rotate(10deg)}
}
@keyframes memoryPhotoFloat3_V1819{
0%,100%{transform:translate3d(0,0,0) rotate(4deg)}
50%{transform:translate3d(1px,-8px,0) rotate(2deg)}
}
/* 常见手机尺寸下，进一步优化散落感与边界安全 */
@media (max-width:430px){
.reading-story-page .memory-polaroid{
width:min(40vw, 166px) !important;
max-width:166px !important;
}
.reading-story-page .polaroid-left{
left:3.8% !important;
top:24.6% !important;
}
.reading-story-page .polaroid-right{
right:3.8% !important;
top:18.2% !important;
}
.reading-story-page .polaroid-center{
left:17.2% !important;
top:45.2% !important;
width:min(50.5vw, 204px) !important;
max-width:204px !important;
}
}
@media (max-height:760px){
.reading-story-page .memory-polaroid{
width:min(37.5vw, 152px) !important;
max-width:152px !important;
}
.reading-story-page .polaroid-left{top:23.8% !important;}
.reading-story-page .polaroid-right{top:18.2% !important;}
.reading-story-page .polaroid-center{
left:18.5% !important;
top:44.3% !important;
width:min(46.5vw, 186px) !important;
max-width:186px !important;
}
}
@media (max-height:680px){
.reading-story-page .memory-polaroid{
width:min(34.5vw, 138px) !important;
max-width:138px !important;
}
.reading-story-page .polaroid-left{top:22.8% !important; left:4% !important;}
.reading-story-page .polaroid-right{top:17.8% !important; right:4% !important;}
.reading-story-page .polaroid-center{
left:19.5% !important;
top:43.2% !important;
width:min(43vw, 168px) !important;
max-width:168px !important;
}
}
/* ===== V18.20：更大相纸 + 三张同尺寸 + 更真实发牌飞入 ===== */
.reading-story-page .memory-polaroid{
width:min(43vw, 178px) !important;
max-width:178px !important;
}
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(43vw, 178px) !important;
max-width:178px !important;
}
/* 终局排版：充分占用屏幕，三张分散，不集中在中间 */
.reading-story-page .polaroid-left{
left:1.8% !important;
top:19.5% !important;
right:auto !important;
z-index:2 !important;
opacity:0 !important;
transform:translate3d(-18vw, 112vh, 0) rotate(-26deg) scale(.78) !important;
transition-duration:1.08s, .42s !important;
transition-timing-function:cubic-bezier(.12,.82,.22,1), ease !important;
}
.reading-story-page .polaroid-right{
right:1.8% !important;
top:20.8% !important;
left:auto !important;
z-index:4 !important;
opacity:0 !important;
transform:translate3d(20vw, 118vh, 0) rotate(28deg) scale(.78) !important;
transition-duration:1.28s, .42s !important;
transition-timing-function:cubic-bezier(.1,.82,.22,1), ease !important;
}
.reading-story-page .polaroid-center{
left:28.3% !important;
top:49.6% !important;
z-index:3 !important;
opacity:0 !important;
transform:translate3d(0, 126vh, 0) rotate(6deg) scale(.76) !important;
transition-duration:1.54s, .42s !important;
transition-timing-function:cubic-bezier(.08,.8,.18,1), ease !important;
}
.reading-story-page.memory-open .polaroid-left{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(-10deg) scale(1) !important;
transition-delay:.02s !important;
animation:memoryPhotoFloat1_V1820 4.9s ease-in-out 1.16s infinite !important;
}
.reading-story-page.memory-open .polaroid-right{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(9deg) scale(1) !important;
transition-delay:.22s !important;
animation:memoryPhotoFloat2_V1820 5.2s ease-in-out 1.40s infinite !important;
}
.reading-story-page.memory-open .polaroid-center{
opacity:1 !important;
transform:translate3d(0,0,0) rotate(3deg) scale(1) !important;
transition-delay:.46s !important;
animation:memoryPhotoFloat3_V1820 5.0s ease-in-out 1.72s infinite !important;
}
@keyframes memoryPhotoFloat1_V1820{
0%,100%{transform:translate3d(0,0,0) rotate(-10deg)}
50%{transform:translate3d(1px,-8px,0) rotate(-8deg)}
}
@keyframes memoryPhotoFloat2_V1820{
0%,100%{transform:translate3d(0,0,0) rotate(9deg)}
50%{transform:translate3d(-2px,-7px,0) rotate(11deg)}
}
@keyframes memoryPhotoFloat3_V1820{
0%,100%{transform:translate3d(0,0,0) rotate(3deg)}
50%{transform:translate3d(2px,-9px,0) rotate(1deg)}
}
@media (max-width:430px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(42.5vw, 170px) !important;
max-width:170px !important;
}
.reading-story-page .polaroid-left{left:1.5% !important; top:19.8% !important;}
.reading-story-page .polaroid-right{right:1.5% !important; top:21.2% !important;}
.reading-story-page .polaroid-center{left:27.5% !important; top:49.2% !important;}
}
@media (max-height:760px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(39.5vw, 156px) !important;
max-width:156px !important;
}
.reading-story-page .polaroid-left{top:18.5% !important;}
.reading-story-page .polaroid-right{top:19.8% !important;}
.reading-story-page .polaroid-center{left:29% !important; top:47.8% !important;}
}
@media (max-height:680px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(36vw, 142px) !important;
max-width:142px !important;
}
.reading-story-page .polaroid-left{top:17.4% !important;}
.reading-story-page .polaroid-right{top:18.6% !important;}
.reading-story-page .polaroid-center{left:30% !important; top:46.5% !important;}
}
/* ===== V18.22：第三页超大相纸 + 发牌落桌回弹 =====
依据手机实机截图重新校准：
- 三张相纸约为上一版的 1.4~1.5 倍视觉面积；
- 三张保持同尺寸；
- S 形自然散落，不再是倒三角；
- 保证常见手机比例下完整留在屏幕内；
- 无圆角；
- 从屏幕下方依次“发牌”飞入，落桌时有缓冲和轻微回弹。
*/
/* 真相纸：方角、窄白边，不放任何文字。 */
.reading-story-page .memory-paper{
padding:6px 6px 11px !important;
border-radius:0 !important;
background:#fffdf9 !important;
}
.reading-story-page .memory-photo-hole,
.reading-story-page .memory-photo-fill,
.reading-story-page .memory-photo-hole::after{
border-radius:0 !important;
}
.reading-story-page .memory-photo-fill{
inset:2px !important;
}
.reading-story-page .memory-photo-fill::before,
.reading-story-page .memory-photo-fill::after,
.reading-story-page .memory-caption,
.reading-story-page .reading-memory-hint{
content:none !important;
display:none !important;
}
/* 所有相纸同尺寸。62vw 在常见 390~430px 手机上约 242~267px，
接近用户红框示意的视觉占比。 */
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(62vw, 258px) !important;
max-width:258px !important;
transform:none !important;
transition:none !important;
will-change:translate,rotate,scale,filter;
}
/* 最终排版采用 S 形散落：左上 → 右中 → 左下。
允许轻微重叠，但分布覆盖屏幕主要区域。 */
.reading-story-page .polaroid-left{
left:3.5% !important;
right:auto !important;
top:18.4% !important;
z-index:2 !important;
opacity:0 !important;
translate:-10vw 112vh;
rotate:-7deg;
scale:.82;
}
.reading-story-page .polaroid-right{
left:auto !important;
right:3.2% !important;
top:31.0% !important;
z-index:4 !important;
opacity:0 !important;
translate:12vw 120vh;
rotate:7deg;
scale:.82;
}
.reading-story-page .polaroid-center{
left:12.5% !important;
right:auto !important;
top:54.0% !important;
z-index:3 !important;
opacity:0 !important;
translate:2vw 128vh;
rotate:-5deg;
scale:.82;
}
/* 打开记忆层后：只用 individual transform properties 做动画，
避免旧版本 transform:...!important 把飞入动画压掉。 */
.reading-story-page.memory-open .polaroid-left{
opacity:1 !important;
animation:
memoryDealLeft_V1822 .98s cubic-bezier(.14,.88,.18,1) .02s both,
memoryPhotoFloatLeft_V1822 5.2s ease-in-out 1.16s infinite !important;
}
.reading-story-page.memory-open .polaroid-right{
opacity:1 !important;
animation:
memoryDealRight_V1822 1.16s cubic-bezier(.12,.86,.18,1) .22s both,
memoryPhotoFloatRight_V1822 5.4s ease-in-out 1.50s infinite !important;
}
.reading-story-page.memory-open .polaroid-center{
opacity:1 !important;
animation:
memoryDealCenter_V1822 1.34s cubic-bezier(.10,.84,.16,1) .48s both,
memoryPhotoFloatCenter_V1822 5.3s ease-in-out 1.96s infinite !important;
}
/* 发牌落桌：先快速上冲，略微越过落点，再下压、回弹、稳定。 */
@keyframes memoryDealLeft_V1822{
0% {translate:-10vw 112vh; rotate:-15deg; scale:.82; filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));}
62% {translate:2px -20px; rotate:-5.5deg; scale:1.018; filter:drop-shadow(0 22px 34px rgba(20,12,18,.30));}
79% {translate:-1px 8px; rotate:-7.8deg; scale:.992; filter:drop-shadow(0 10px 18px rgba(20,12,18,.22));}
91% {translate:0 -4px; rotate:-6.5deg; scale:1.004;}
100% {translate:0 0; rotate:-7deg; scale:1; filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));}
}
@keyframes memoryDealRight_V1822{
0% {translate:12vw 120vh; rotate:16deg; scale:.82; filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));}
63% {translate:-2px -18px; rotate:5.4deg; scale:1.018; filter:drop-shadow(0 22px 34px rgba(20,12,18,.30));}
80% {translate:1px 7px; rotate:7.9deg; scale:.992; filter:drop-shadow(0 10px 18px rgba(20,12,18,.22));}
91% {translate:0 -4px; rotate:6.4deg; scale:1.004;}
100% {translate:0 0; rotate:7deg; scale:1; filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));}
}
@keyframes memoryDealCenter_V1822{
0% {translate:2vw 128vh; rotate:-12deg; scale:.82; filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));}
64% {translate:1px -22px; rotate:-3.8deg; scale:1.02; filter:drop-shadow(0 24px 36px rgba(20,12,18,.31));}
81% {translate:-1px 9px; rotate:-5.8deg; scale:.991; filter:drop-shadow(0 11px 18px rgba(20,12,18,.22));}
92% {translate:0 -5px; rotate:-4.4deg; scale:1.004;}
100% {translate:0 0; rotate:-5deg; scale:1; filter:drop-shadow(0 17px 27px rgba(20,12,18,.25));}
}
/* 落稳后的轻微纸张漂浮。 */
@keyframes memoryPhotoFloatLeft_V1822{
0%,100%{translate:0 0; rotate:-7deg; scale:1;}
50%{translate:2px -7px; rotate:-5.8deg; scale:1;}
}
@keyframes memoryPhotoFloatRight_V1822{
0%,100%{translate:0 0; rotate:7deg; scale:1;}
50%{translate:-2px -7px; rotate:8.2deg; scale:1;}
}
@keyframes memoryPhotoFloatCenter_V1822{
0%,100%{translate:0 0; rotate:-5deg; scale:1;}
50%{translate:1px -8px; rotate:-3.8deg; scale:1;}
}
/* 常见窄屏：尺寸仍很大，但留出旋转后的安全边。 */
@media (max-width:430px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(60vw, 244px) !important;
max-width:244px !important;
}
.reading-story-page .polaroid-left{left:3.8% !important; top:18.7% !important;}
.reading-story-page .polaroid-right{right:3.8% !important; top:31.3% !important;}
.reading-story-page .polaroid-center{left:13.5% !important; top:54.0% !important;}
}
/* 矮屏优先保证不出屏，仍比 V18.20 大一截。 */
@media (max-height:760px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(55vw, 224px) !important;
max-width:224px !important;
}
.reading-story-page .polaroid-left{top:17.8% !important;}
.reading-story-page .polaroid-right{top:29.7% !important;}
.reading-story-page .polaroid-center{left:15% !important; top:52.5% !important;}
}
@media (max-height:680px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(50vw, 202px) !important;
max-width:202px !important;
}
.reading-story-page .polaroid-left{top:17.3% !important;}
.reading-story-page .polaroid-right{top:28.7% !important;}
.reading-story-page .polaroid-center{left:17% !important; top:50.7% !important;}
}
@media (prefers-reduced-motion:reduce){
.reading-story-page.memory-open .polaroid-left,
.reading-story-page.memory-open .polaroid-right,
.reading-story-page.memory-open .polaroid-center{
animation:none !important;
opacity:1 !important;
translate:0 0;
scale:1;
}
}
/* ===== V18.23：相纸缩小10% + 中间/下方下移 =====
在 V18.22 基础上做小幅校准：
- 三张相纸统一缩小约 10%
- 右侧中间相纸向下移动
- 下方相纸进一步向下移动
- 保留现有发牌飞入、落桌缓冲和回弹
*/
/* 统一缩小约 10% */
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(56vw, 232px) !important;
max-width:232px !important;
}
/* 左上基本保持，右中与下方下移 */
.reading-story-page .polaroid-right{
top:34.0% !important;
}
.reading-story-page .polaroid-center{
top:58.0% !important;
}
/* 常见手机 */
@media (max-width:430px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(54vw, 220px) !important;
max-width:220px !important;
}
.reading-story-page .polaroid-right{
top:34.4% !important;
}
.reading-story-page .polaroid-center{
top:57.8% !important;
}
}
/* 矮屏继续保证完整留在屏幕内 */
@media (max-height:760px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(49.5vw, 202px) !important;
max-width:202px !important;
}
.reading-story-page .polaroid-right{
top:32.5% !important;
}
.reading-story-page .polaroid-center{
top:56.0% !important;
}
}
@media (max-height:680px){
.reading-story-page .memory-polaroid,
.reading-story-page .polaroid-left,
.reading-story-page .polaroid-right,
.reading-story-page .polaroid-center{
width:min(45vw, 182px) !important;
max-width:182px !important;
}
.reading-story-page .polaroid-right{
top:31.4% !important;
}
.reading-story-page .polaroid-center{
top:54.0% !important;
}
}
/* ===== V18.24：三张相纸整体继续下移，底部相纸进一步下沉 =====
调整目标：
1) 三张相纸整体略下移；
2) 左上第一张的右上角大致贴近“快乐开始变多”文案区域下缘；
3) 下方相纸继续下移，减少被中间视觉遮挡；
4) 保持发牌飞入、落桌缓冲、轻微回弹不变。
*/
.reading-story-page .polaroid-left{
top:21.0% !important;
}
.reading-story-page .polaroid-right{
top:36.1% !important;
}
.reading-story-page .polaroid-center{
top:61.2% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-left{
top:21.2% !important;
}
.reading-story-page .polaroid-right{
top:36.4% !important;
}
.reading-story-page .polaroid-center{
top:61.5% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-left{
top:20.4% !important;
}
.reading-story-page .polaroid-right{
top:34.5% !important;
}
.reading-story-page .polaroid-center{
top:59.0% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-left{
top:19.8% !important;
}
.reading-story-page .polaroid-right{
top:33.2% !important;
}
.reading-story-page .polaroid-center{
top:57.2% !important;
}
}
/* ===== V18.25：顶图微右移，中图与底图继续下沉 =====
目标：
1) 最上的相纸轻微向右；
2) 中间与最下方相纸再向下，减少遮挡；
3) 保持三张相纸都不出屏；
4) 仅调整第三页落位，不改已有飞入与回弹逻辑。
*/
.reading-story-page .polaroid-left{
left:7.0% !important;
top:21.0% !important;
}
.reading-story-page .polaroid-right{
top:38.0% !important;
}
.reading-story-page .polaroid-center{
top:64.0% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-left{
left:7.2% !important;
top:21.1% !important;
}
.reading-story-page .polaroid-right{
top:38.2% !important;
}
.reading-story-page .polaroid-center{
top:64.2% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-left{
left:6.7% !important;
top:20.4% !important;
}
.reading-story-page .polaroid-right{
top:36.2% !important;
}
.reading-story-page .polaroid-center{
top:60.8% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-left{
left:6.3% !important;
top:19.8% !important;
}
.reading-story-page .polaroid-right{
top:35.0% !important;
}
.reading-story-page .polaroid-center{
top:59.0% !important;
}
}
/* ===== V18.26：第三页相纸位置微调 =====
1. 第二张（中间）相纸向左移动一些；
2. 第三张（下方/右侧）相纸继续向下移动一些。
*/
.reading-story-page .polaroid-center{
left: 46.8% !important;
}
.reading-story-page .polaroid-right{
top: 40.8% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-center{
left: 46.2% !important;
}
.reading-story-page .polaroid-right{
top: 41.2% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-center{
left: 47.0% !important;
}
.reading-story-page .polaroid-right{
top: 38.8% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-center{
left: 47.2% !important;
}
.reading-story-page .polaroid-right{
top: 37.8% !important;
}
}
/* ===== V18.27：第三页相纸映射修正 =====
1) 最上相纸保留轻微偏右；
2) 第二张（中间那张，原 polaroid-right）向左挪一些；
3) 第三张（最下那张，原 polaroid-center）继续下移，但仍保证留在屏幕内。
*/
.reading-story-page .polaroid-left{
left:7.0% !important;
top:21.0% !important;
}
.reading-story-page .polaroid-right{
right:10.2% !important;
top:38.0% !important;
}
.reading-story-page .polaroid-center{
left:18.5% !important;
top:66.3% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-left{
left:7.2% !important;
top:21.1% !important;
}
.reading-story-page .polaroid-right{
right:10.8% !important;
top:38.2% !important;
}
.reading-story-page .polaroid-center{
left:18.2% !important;
top:66.6% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-left{
left:6.7% !important;
top:20.4% !important;
}
.reading-story-page .polaroid-right{
right:9.5% !important;
top:36.2% !important;
}
.reading-story-page .polaroid-center{
left:18.7% !important;
top:62.8% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-left{
left:6.3% !important;
top:19.8% !important;
}
.reading-story-page .polaroid-right{
right:9.0% !important;
top:35.0% !important;
}
.reading-story-page .polaroid-center{
left:19.2% !important;
top:61.0% !important;
}
}
/* ===== V18.28：第三张相纸继续下移 ===== */
.reading-story-page .polaroid-center{
top:69.0% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-center{
top:69.4% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-center{
top:65.0% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-center{
top:63.0% !important;
}
}
/* ===== V18.29：第三张相纸轻微左移 ===== */
.reading-story-page .polaroid-center{
left:16.9% !important;
}
@media (max-width:430px){
.reading-story-page .polaroid-center{
left:16.6% !important;
}
}
@media (max-height:760px){
.reading-story-page .polaroid-center{
left:17.1% !important;
}
}
@media (max-height:680px){
.reading-story-page .polaroid-center{
left:17.5% !important;
}
}
/* ===== V19.0：日历页全新分层素材版 ===== */
.date-art-page{
padding:0 !important;
background:#f8efe3 !important;
overflow:hidden;
}
.date-art-page::after{display:none !important;}
.date-art-stage{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:hidden;
isolation:isolate;
display:flex;
align-items:center;
justify-content:center;
}
.date-art-board{
position:relative;
overflow:hidden;
width:100vw;
height:calc(100vw * 1672 / 941);
max-width:100vw;
max-height:100vh;
}
@media (min-aspect-ratio: 941/1672){
.date-art-board{
width:calc(100vh * 941 / 1672);
height:100vh;
}
}
.date-art-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:fill;
object-position:center center;
z-index:0;
pointer-events:none;
}
.date-art-copy{
position:absolute;
left:50%;
top:18.8%;
transform:translateX(-50%);
width:74%;
max-width:320px;
z-index:4;
text-align:center;
color:#6e4b47;
}
.date-art-copy small{
display:none;
}
.date-art-copy h2{
margin:0 0 14px;
font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;
font-size:26px;
line-height:1.22;
font-weight:600;
letter-spacing:.6px;
color:#86544f;
text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.date-art-copy p{
width:88%;
margin:0 auto;
font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;
font-size:12px;
line-height:1.68;
font-weight:400;
color:#7a5a55;
}
.date-art-calendar{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
}
.date-ribbon-frame{display:none !important;}
.date-bow{
position:absolute;
left:50%;
top:32.8%;
width:24.2%;
height:auto;
transform:translateX(-50%);
z-index:5;
filter:drop-shadow(0 5px 8px rgba(135,88,79,.12));
}
.date-star{
position:absolute;
width:9.5%;
height:auto;
object-fit:contain;
z-index:6;
filter:drop-shadow(0 2px 4px rgba(168,115,45,.12));
animation:dateStarTwinkle 3.6s ease-in-out infinite;
}
.date-star-a{left:7.2%;top:25.8%;transform:rotate(-11deg);animation-delay:.1s;}
.date-star-b{right:7.0%;top:25.4%;width:8.4%;transform:rotate(10deg);animation-delay:1.2s;}
.date-star-c{left:6.0%;top:57.6%;width:8.0%;transform:rotate(-8deg);animation-delay:2.1s;}
.date-star-d{right:6.4%;top:72.6%;width:9.0%;transform:rotate(7deg);animation-delay:.7s;}
@keyframes dateStarTwinkle{
0%,100%{opacity:.78;scale:.94;}
48%{opacity:1;scale:1.06;}
}
.date-calendar-copy{
position:absolute;
left:6.8%;
top:36.65%;
width:86.45%;
height:40.9%;
z-index:4;
color:#77514d;
}
.date-month-row{
position:absolute;
left:4.6%;
top:1.2%;
width:90.8%;
display:flex;
align-items:baseline;
justify-content:center;
gap:13px;
font-family:Georgia,'Times New Roman',serif;
color:#80534f;
}
.date-month-row b,
.date-month-row span{
font-size:22px;
line-height:1;
font-weight:500;
letter-spacing:.8px;
}
.date-month-row em{
padding:4px 9px 3px;
border:1px solid rgba(208,137,126,.45);
border-radius:999px;
font-size:10px;
line-height:1;
font-weight:500;
font-style:normal;
letter-spacing:.8px;
color:#b06f68;
background:rgba(255,250,243,.42);
}
.date-week-head{
position:absolute;
left:1.2%;
top:18.9%;
width:97.6%;
display:grid;
grid-template-columns:repeat(7,1fr);
align-items:center;
text-align:center;
font-family:Georgia,'Times New Roman',serif;
font-size:9px;
font-weight:600;
letter-spacing:.35px;
color:#a1635f;
}
.date-week-head span:first-child,
.date-week-head span:last-child{color:#d16c68;}
.date-number-grid{
position:absolute;
left:1.2%;
top:24.1%;
width:97.6%;
height:74.6%;
display:grid;
grid-template-columns:repeat(7,1fr);
grid-template-rows:repeat(5,1fr);
align-items:center;
justify-items:center;
font-family:Georgia,'Times New Roman',serif;
font-size:12px;
font-weight:500;
color:#78504d;
}
.date-number-grid > span{
position:relative;
display:grid;
place-items:center;
width:100%;
height:100%;
line-height:1;
}
.date-number-grid .date-love{
color:white;
font-weight:700;
z-index:1;
}
.date-number-grid .date-love i{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-49%) scale(2.35,2.1);
z-index:-1;
font-style:normal;
font-size:17px;
line-height:1;
color:#ef7e82;
text-shadow:0 2px 5px rgba(196,82,88,.12);
}
.date-art-footer{
position:absolute;
left:50%;
bottom:6.4%;
transform:translateX(-50%);
width:74%;
max-width:320px;
z-index:4;
text-align:center;
color:#79534f;
font-family:'Songti SC','STSong','Noto Serif CJK SC',serif;
}
.date-art-footer span{
display:block;
font-size:12px;
letter-spacing:1px;
}
.date-art-footer b{
display:block;
margin:5px 0 3px;
font-family:Georgia,'Times New Roman',serif;
font-size:26px;
line-height:1;
font-weight:500;
letter-spacing:2px;
color:#c36f69;
}
.date-art-footer small{
display:block;
font-family:Georgia,'Times New Roman',serif;
font-size:8px;
font-weight:600;
letter-spacing:1.3px;
color:#ab7a73;
}
@media(max-width:390px){
.date-art-copy{top:19.2%;width:76%;}
.date-art-copy h2{font-size:24px;}
.date-art-copy p{font-size:11.5px;line-height:1.65;}
.date-bow{width:25.8%;}
.date-calendar-copy{left:6.7%;width:86.6%;}
.date-number-grid{font-size:11px;}
.date-month-row b,.date-month-row span{font-size:20px;}
.date-art-footer{bottom:6.1%;}
}
@media(max-height:720px){
.date-art-copy{top:18.2%;}
.date-art-copy h2{font-size:22px;margin-bottom:10px;}
.date-art-copy p{font-size:11px;line-height:1.56;}
.date-bow{top:32.2%;}
.date-calendar-copy{top:36.8%;height:40.8%;}
.date-art-footer{bottom:5.4%;}
.date-art-footer b{font-size:23px;}
}
@media(prefers-reduced-motion:reduce){
.date-star{animation:none !important;}
}
/* ===== V19.3 日历页：固定画布 + 烘焙日历 + 局部红心锚定 ===== */
.date-art-page{
padding:0 !important;
background:#f8efe3 !important;
overflow:hidden !important;
}
.date-art-stage{
position:absolute !important;
inset:0 !important;
overflow:hidden !important;
background:#f8efe3 !important;
}
/* Cover-fit design board. Background and every overlay share one coordinate system. */
.date-art-board{
position:absolute !important;
left:50% !important;
top:50% !important;
width:max(100vw,calc(100dvh * 941 / 1672)) !important;
aspect-ratio:941 / 1672 !important;
height:auto !important;
transform:translate(-50%,-50%) !important;
overflow:hidden !important;
}
@supports not (height:100dvh){
.date-art-board{width:max(100vw,calc(100vh * 941 / 1672)) !important;}
}
.date-art-bg{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:fill !important;
z-index:0 !important;
}
/* Text remains editable and independent from the background image. */
.date-art-copy{
position:absolute !important;
left:50% !important;
top:18.7% !important;
transform:translateX(-50%) !important;
width:69% !important;
max-width:none !important;
z-index:7 !important;
text-align:center !important;
}
.date-art-copy small{display:none !important;}
.date-art-copy h2{
margin:0 0 1.25em !important;
font-family:'Songti SC','STSong','Noto Serif CJK SC',serif !important;
font-size:clamp(21px,5.8vw,29px) !important;
line-height:1.22 !important;
font-weight:600 !important;
letter-spacing:.06em !important;
color:#86544f !important;
}
.date-art-copy p{
width:86% !important;
margin:0 auto !important;
font-family:'Songti SC','STSong','Noto Serif CJK SC',serif !important;
font-size:clamp(10px,2.8vw,13px) !important;
line-height:1.75 !important;
color:#745854 !important;
}
/* Decorations stay independent for future replacement. */
.date-art-decor{position:absolute;inset:0;z-index:6;pointer-events:none;}
.date-bow{
left:50% !important;
top:33.0% !important;
width:23.0% !important;
transform:translateX(-50%) !important;
}
.date-star-a{left:8.0% !important;top:27.2% !important;width:8.2% !important;}
.date-star-b{right:8.0% !important;top:27.2% !important;width:7.8% !important;}
.date-star-c{left:6.5% !important;top:59.5% !important;width:7.3% !important;}
.date-star-d{right:6.5% !important;top:73.2% !important;width:8.2% !important;}
/* Old DOM-rendered calendar text is deliberately disabled in V19.3. */
.date-calendar-copy,.date-month-row,.date-week-head,.date-number-grid{display:none !important;}
/* Local calendar anchor: exact baked grid rectangle in the 941x1672 artwork. */
.date-calendar-panel{
position:absolute !important;
left:7.226% !important; /* 68 / 941 */
top:43.541% !important; /* 728 / 1672 */
width:85.547% !important;/* 805 / 941 */
height:33.732% !important;/* 564 / 1672 */
z-index:8 !important;
pointer-events:none !important;
}
.date-grid-anchor{position:absolute;inset:0;}
/* 21 Nov 2026 = Saturday, third date row. Anchor is relative to calendar panel, not page. */
.date-heart-marker{
position:absolute !important;
left:92.80% !important;
top:57.62% !important;
width:12.1% !important;
height:auto !important;
transform:translate(-50%,-50%) scale(1) !important;
transform-origin:center !important;
filter:drop-shadow(0 3px 5px rgba(146,65,67,.16)) !important;
animation:dateHeartPulse 2.5s ease-in-out infinite !important;
}
@keyframes dateHeartPulse{
0%,100%{transform:translate(-50%,-50%) scale(.98);}
50%{transform:translate(-50%,-50%) scale(1.07);}
}
.date-art-footer{
position:absolute !important;
left:50% !important;
bottom:6.5% !important;
transform:translateX(-50%) !important;
width:72% !important;
max-width:none !important;
z-index:7 !important;
}
@media(max-height:720px){
.date-art-copy{top:18.3% !important;}
.date-art-copy h2{margin-bottom:1.0em !important;}
.date-bow{top:32.7% !important;}
}
@media(prefers-reduced-motion:reduce){.date-heart-marker{animation:none !important;}}
/* ===== V19.5 日历页：恢复进度文案 + 去标题腾挪空间 ===== */
.date-art-copy{
top:17.9% !important;
width:78% !important;
z-index:7 !important;
}
.date-art-copy h2{display:none !important;}
.date-art-copy p{
width:100% !important;
margin:0 auto !important;
font-size:clamp(11px,3.1vw,15px) !important;
line-height:1.8 !important;
color:#765753 !important;
}
.date-art-decor{z-index:6 !important;}
.date-bow{
top:34.5% !important;
width:18.5% !important;
filter:drop-shadow(0 4px 6px rgba(135,88,79,.10)) !important;
}
.date-star-a{left:6.2% !important;top:28.5% !important;width:7.8% !important;}
.date-star-b{right:6.2% !important;top:28.3% !important;width:7.5% !important;}
.date-star-c{left:7.2% !important;top:57.8% !important;width:7.0% !important;}
.date-star-d{right:7.2% !important;top:72.5% !important;width:7.6% !important;}
.date-art-footer{bottom:6.0% !important;}
/* Ensure the floating progress caption is visible on the date page. */
.float-caption{
z-index:1305 !important;
opacity:1 !important;
}
@media (max-width:390px){
.date-art-copy{top:17.6% !important;width:80% !important;}
.date-art-copy p{font-size:clamp(10.5px,3vw,13.5px) !important;line-height:1.74 !important;}
.date-bow{top:34.3% !important;width:18.8% !important;}
}
@media (max-height:720px){
.date-art-copy{top:17.4% !important;}
.date-art-copy p{line-height:1.72 !important;}
.date-bow{top:34.1% !important;width:18.0% !important;}
}
/* ===== V19.6 日历页：蝴蝶结重排版 ===== */
.date-bow{
left:auto !important;
right:9.2% !important;
top:31.6% !important;
width:23.5% !important;
transform:rotate(8deg) !important;
z-index:6 !important;
filter:drop-shadow(0 7px 10px rgba(135,88,79,.16)) !important;
}
.date-art-copy{
top:18.4% !important;
width:76% !important;
}
.date-art-copy p{
max-width:100% !important;
padding:0 3px !important;
}
@media (max-width:390px){
.date-bow{
right:8.4% !important;
top:31.3% !important;
width:24.2% !important;
}
.date-art-copy{
top:18.0% !important;
width:78% !important;
}
}
@media (max-height:720px){
.date-bow{
right:8.8% !important;
top:31.2% !important;
width:22.8% !important;
}
.date-art-copy{
top:18.0% !important;
}
}
/* ===== V19.7 日历页：大字醒目版 ===== */
.date-art-copy{
top:18.0% !important;
width:82% !important;
}
.date-art-copy p{
font-size:clamp(13px,3.7vw,18px) !important;
line-height:1.82 !important;
color:#745552 !important;
}
.date-bow{
right:6.4% !important;
top:29.8% !important;
width:29.2% !important;
transform:rotate(8deg) !important;
filter:drop-shadow(0 8px 12px rgba(135,88,79,.18)) !important;
}
.date-star-a{left:5.1% !important;top:27.9% !important;width:10.0% !important;}
.date-star-b{right:4.8% !important;top:27.5% !important;width:9.5% !important;}
.date-star-c{left:5.7% !important;top:57.2% !important;width:8.8% !important;}
.date-star-d{right:5.4% !important;top:71.5% !important;width:9.6% !important;}
.date-heart-marker{
width:15.4% !important;
filter:drop-shadow(0 4px 8px rgba(146,65,67,.20)) !important;
}
.date-art-footer{
bottom:5.8% !important;
width:78% !important;
}
.date-art-footer span{
font-size:15px !important;
letter-spacing:1.2px !important;
}
.date-art-footer b{
font-size:35px !important;
margin:7px 0 5px !important;
letter-spacing:2.5px !important;
}
.date-art-footer small{
font-size:10px !important;
letter-spacing:1.6px !important;
}
.float-caption{
font-size:12.5px !important;
padding:4px 10px !important;
}
@media (max-width:390px){
.date-art-copy{top:17.8% !important;width:84% !important;}
.date-art-copy p{font-size:clamp(12px,3.5vw,16px) !important;line-height:1.78 !important;}
.date-bow{right:5.8% !important;top:29.5% !important;width:30.0% !important;}
.date-heart-marker{width:15.9% !important;}
.date-art-footer span{font-size:14px !important;}
.date-art-footer b{font-size:33px !important;}
.date-art-footer small{font-size:9.5px !important;}
}
@media (max-height:720px){
.date-art-copy{top:17.6% !important;}
.date-bow{top:29.4% !important;width:28.4% !important;}
}
/* ===== V19.8 日历页：月份回框 + 蝴蝶结微风动画 ===== */
.date-bow{
right:10.4% !important;
top:29.2% !important;
width:27.6% !important;
transform:rotate(6deg) !important;
transform-origin:50% 18% !important;
animation:dateBowBreeze 6.8s ease-in-out infinite !important;
will-change:transform;
}
.date-star-b{
right:3.8% !important;
top:28.1% !important;
width:9.2% !important;
}
.date-star-a{
left:5.2% !important;
top:28.2% !important;
width:10.0% !important;
}
@keyframes dateBowBreeze{
0%,14%,32%,48%,70%,100%{transform:rotate(6deg) translate3d(0,0,0);}
17%{transform:rotate(8deg) translate3d(1px,-1px,0);}
20%{transform:rotate(2deg) translate3d(-2px,1px,0);}
23%{transform:rotate(7deg) translate3d(1px,0,0);}
26%{transform:rotate(4deg) translate3d(-1px,1px,0);}
29%{transform:rotate(6.5deg) translate3d(0,0,0);}
52%{transform:rotate(9deg) translate3d(1px,-1px,0);}
56%{transform:rotate(3deg) translate3d(-2px,1px,0);}
60%{transform:rotate(7.5deg) translate3d(1px,0,0);}
64%{transform:rotate(4.5deg) translate3d(-1px,1px,0);}
67%{transform:rotate(6deg) translate3d(0,0,0);}
76%{transform:rotate(7.5deg) translate3d(1px,-1px,0);}
79%{transform:rotate(4deg) translate3d(-1px,1px,0);}
82%{transform:rotate(6deg) translate3d(0,0,0);}
}
@media (max-width:390px){
.date-bow{
right:10.9% !important;
top:29.1% !important;
width:28.4% !important;
}
.date-star-b{right:3.2% !important;top:28.2% !important;width:9.3% !important;}
}
@media (max-height:720px){
.date-bow{top:28.9% !important;width:26.8% !important;}
}
@media(prefers-reduced-motion:reduce){
.date-bow{animation:none !important;}
}
/* ===== V19.10 日历页：文案逐字浮现 ===== */
.date-art-copy{
overflow:visible !important;
}
.date-copy-seq{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:.22em !important;
width:100% !important;
}
.date-copy-line{
display:block !important;
white-space:nowrap !important;
letter-spacing:.02em !important;
}
.date-copy-line .reveal-char{
display:inline-block;
opacity:0;
transform:translate3d(0,12px,0) scale(.96);
filter:blur(3px);
will-change:transform,opacity,filter;
transition:
opacity .42s ease,
transform .56s cubic-bezier(.2,.82,.2,1),
filter .56s ease;
transition-delay:var(--char-delay,0s);
}
.date-art-page.date-enter-active .date-copy-line .reveal-char{
opacity:1;
transform:translate3d(0,0,0) scale(1);
filter:blur(0);
}
.date-art-page .date-art-footer span,
.date-art-page .date-art-footer b,
.date-art-page .date-art-footer small{
opacity:0;
transform:translateY(10px);
transition:opacity .45s ease, transform .55s cubic-bezier(.2,.82,.2,1);
}
.date-art-page.date-enter-active .date-art-footer span,
.date-art-page.date-enter-active .date-art-footer b,
.date-art-page.date-enter-active .date-art-footer small{
opacity:1;
transform:translateY(0);
}
.date-art-page.date-enter-active .date-art-footer span{transition-delay:1.08s;}
.date-art-page.date-enter-active .date-art-footer b{transition-delay:1.18s;}
.date-art-page.date-enter-active .date-art-footer small{transition-delay:1.28s;}
.date-art-page .date-heart-marker{
animation:dateHeartPulse 2.5s ease-in-out infinite !important;
}
@media(prefers-reduced-motion:reduce){
.date-copy-line .reveal-char,
.date-art-page .date-art-footer span,
.date-art-page .date-art-footer b,
.date-art-page .date-art-footer small{
opacity:1 !important;
transform:none !important;
filter:none !important;
transition:none !important;
}
}
/* ===== V19.11 日历页：动效修复增强 ===== */
/* Text must remain visible if JS is unavailable. Only hide characters after JS marks reveal-ready. */
.date-copy-line .reveal-char{
opacity:1 !important;
transform:none !important;
filter:none !important;
}
.date-art-page.date-reveal-ready .date-copy-line .reveal-char{
opacity:0 !important;
transform:translate3d(0,13px,0) scale(.965) !important;
filter:blur(3px) !important;
transition:
opacity .44s ease,
transform .58s cubic-bezier(.2,.82,.2,1),
filter .58s ease !important;
transition-delay:var(--char-delay,0s) !important;
}
.date-art-page.date-reveal-ready.date-enter-active .date-copy-line .reveal-char{
opacity:1 !important;
transform:translate3d(0,0,0) scale(1) !important;
filter:blur(0) !important;
}
.date-art-page .date-art-footer span,
.date-art-page .date-art-footer b,
.date-art-page .date-art-footer small{
opacity:1 !important;
transform:none !important;
}
.date-art-page.date-reveal-ready .date-art-footer span,
.date-art-page.date-reveal-ready .date-art-footer b,
.date-art-page.date-reveal-ready .date-art-footer small{
opacity:0 !important;
transform:translateY(10px) !important;
transition:opacity .45s ease, transform .55s cubic-bezier(.2,.82,.2,1) !important;
}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer span,
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer b,
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer small{
opacity:1 !important;
transform:translateY(0) !important;
}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer span{transition-delay:1.12s !important;}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer b{transition-delay:1.22s !important;}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer small{transition-delay:1.34s !important;}
/* Subtle floating of the entire date art board, independent from centering transform. */
.date-art-page.active .date-art-board{
animation:dateBoardFloatV1911 6.4s ease-in-out infinite !important;
will-change:translate;
}
@keyframes dateBoardFloatV1911{
0%,100%{translate:0 0;}
30%{translate:0 -2px;}
55%{translate:0 -5px;}
78%{translate:0 -1px;}
}
/* Bow: use individual rotate/translate so older transform rules cannot swallow the animation. */
.date-bow{
transform:none !important;
rotate:5deg !important;
translate:0 0 !important;
transform-origin:52% 15% !important;
animation:dateBowWindV1911 7.6s ease-in-out infinite !important;
will-change:rotate,translate;
}
@keyframes dateBowWindV1911{
0%,13%,35%,49%,72%,100%{rotate:5deg;translate:0 0;}
16%{rotate:8deg;translate:1px -1px;}
19%{rotate:2deg;translate:-2px 1px;}
22%{rotate:7deg;translate:1px 0;}
25%{rotate:3deg;translate:-1px 1px;}
28%{rotate:6deg;translate:1px 0;}
31%{rotate:5deg;translate:0 0;}
53%{rotate:9deg;translate:1px -1px;}
57%{rotate:2deg;translate:-2px 1px;}
61%{rotate:7deg;translate:1px 0;}
65%{rotate:4deg;translate:-1px 1px;}
68%{rotate:5deg;translate:0 0;}
78%{rotate:7deg;translate:1px -1px;}
81%{rotate:3deg;translate:-1px 1px;}
84%{rotate:5deg;translate:0 0;}
}
/* Heart is still locally anchored to the calendar panel. */
.date-heart-wrap{
position:absolute !important;
left:92.80% !important;
top:57.62% !important;
width:18.6% !important;
aspect-ratio:1.08 / 1 !important;
transform:translate(-50%,-50%) !important;
z-index:9 !important;
pointer-events:none !important;
}
.date-heart-marker{
position:absolute !important;
left:50% !important;
top:50% !important;
width:88% !important;
height:auto !important;
transform:translate(-50%,-50%) scale(1) !important;
transform-origin:center !important;
filter:drop-shadow(0 4px 8px rgba(198,75,88,.22)) !important;
animation:dateHeartBeatV1911 2.65s ease-in-out infinite !important;
z-index:3 !important;
}
@keyframes dateHeartBeatV1911{
0%,100%{transform:translate(-50%,-50%) scale(.98);filter:drop-shadow(0 4px 8px rgba(198,75,88,.20));}
48%{transform:translate(-50%,-50%) scale(1.075);filter:drop-shadow(0 5px 13px rgba(240,107,114,.38));}
}
.date-heart-ripple{
position:absolute !important;
left:50% !important;
top:51% !important;
width:72% !important;
aspect-ratio:1 / .64 !important;
border:2px solid rgba(240,107,114,.58) !important;
border-radius:50% !important;
transform:translate(-50%,-50%) scale(.46) !important;
opacity:0;
box-shadow:
0 0 8px rgba(240,107,114,.34),
0 0 18px rgba(240,107,114,.20) !important;
animation:dateHeartRippleV1911 2.9s cubic-bezier(.18,.66,.34,1) infinite !important;
z-index:1 !important;
}
.date-heart-ripple.ripple-b{animation-delay:1.42s !important;}
@keyframes dateHeartRippleV1911{
0%{opacity:0;transform:translate(-50%,-50%) scale(.42);}
12%{opacity:.78;}
68%{opacity:.18;}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.58);}
}
/* More noticeable asynchronous star shimmer. */
.date-star{
animation-name:dateStarTwinkleV1911 !important;
animation-timing-function:ease-in-out !important;
animation-iteration-count:infinite !important;
}
.date-star-a{animation-duration:3.2s !important;animation-delay:.2s !important;}
.date-star-b{animation-duration:4.1s !important;animation-delay:1.1s !important;}
.date-star-c{animation-duration:3.7s !important;animation-delay:2.0s !important;}
.date-star-d{animation-duration:4.5s !important;animation-delay:.7s !important;}
@keyframes dateStarTwinkleV1911{
0%,100%{opacity:.62;scale:.90;filter:drop-shadow(0 2px 4px rgba(168,115,45,.10));}
38%{opacity:1;scale:1.12;filter:drop-shadow(0 2px 9px rgba(255,205,76,.40));}
58%{opacity:.82;scale:.98;}
}
@media(max-width:390px){
.date-heart-wrap{width:19.5% !important;}
}
/* User explicitly requested visible motion on this page; keep the effects even on devices that report reduced motion. */
.date-art-page .date-bow{animation:dateBowWindV1911 7.6s ease-in-out infinite !important;}
.date-art-page .date-heart-marker{animation:dateHeartBeatV1911 2.65s ease-in-out infinite !important;}
.date-art-page .date-heart-ripple{animation:dateHeartRippleV1911 2.9s cubic-bezier(.18,.66,.34,1) infinite !important;}
.date-art-page .date-heart-ripple.ripple-b{animation-delay:1.42s !important;}
.date-art-page.active .date-art-board{animation:dateBoardFloatV1911 6.4s ease-in-out infinite !important;}
/* ===== V19.12 日历页：三行文案完整浮现 + 更明显蝴蝶结风吹 + 心形涟漪 ===== */
.date-art-page .date-copy-line{
opacity:1;
transform:none;
filter:none;
}
.date-art-page.date-reveal-ready .date-copy-line{
opacity:0;
transform:translateY(12px);
filter:blur(2px);
transition:
opacity .52s ease,
transform .68s cubic-bezier(.2,.82,.2,1),
filter .68s ease !important;
transition-delay:var(--line-delay,0s) !important;
}
.date-art-page.date-reveal-ready.date-enter-active .date-copy-line{
opacity:1;
transform:none;
filter:none;
}
.date-art-page.date-reveal-ready .date-copy-line .reveal-char{
transition-delay:calc(var(--line-delay,0s) + var(--char-delay,0s)) !important;
}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer span{transition-delay:2.20s !important;}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer b{transition-delay:2.34s !important;}
.date-art-page.date-reveal-ready.date-enter-active .date-art-footer small{transition-delay:2.48s !important;}
.date-art-page .date-bow{
animation:dateBowWindV1912 5.9s cubic-bezier(.38,.02,.24,1) infinite !important;
transform-origin:52% 16% !important;
}
@keyframes dateBowWindV1912{
0%,100%{rotate:5deg;translate:0 0;}
9%{rotate:12deg;translate:3px -2px;}
13%{rotate:1deg;translate:-4px 2px;}
17%{rotate:10deg;translate:2px -1px;}
21%{rotate:3deg;translate:-2px 1px;}
25%{rotate:7deg;translate:0 0;}
43%{rotate:6deg;translate:0 0;}
49%{rotate:14deg;translate:4px -2px;}
54%{rotate:-1deg;translate:-4px 2px;}
59%{rotate:11deg;translate:2px -1px;}
64%{rotate:2deg;translate:-2px 1px;}
69%{rotate:6deg;translate:0 0;}
84%{rotate:10deg;translate:2px -1px;}
88%{rotate:3deg;translate:-2px 1px;}
92%{rotate:6deg;translate:0 0;}
}
.date-heart-wrap{
width:22.4% !important;
aspect-ratio:1 / 1 !important;
}
.date-heart-marker{
width:76% !important;
z-index:4 !important;
}
.date-heart-ripple{
position:absolute !important;
left:50% !important;
top:50% !important;
width:124% !important;
aspect-ratio:1 / 1 !important;
background:url("assets/date/DateHeartRipple_Outline.svg") center/contain no-repeat !important;
transform:translate(-50%,-50%) scale(.44) !important;
opacity:0;
filter:drop-shadow(0 0 8px rgba(242,140,152,.36));
animation:dateHeartRippleV1912 2.95s cubic-bezier(.15,.7,.25,1) infinite !important;
z-index:2 !important;
}
.date-heart-ripple::before,
.date-heart-ripple::after{content:none !important;}
.date-heart-ripple.ripple-b{animation-delay:1.47s !important;}
@keyframes dateHeartRippleV1912{
0%{opacity:0;transform:translate(-50%,-50%) scale(.44);}
10%{opacity:.96;}
68%{opacity:.20;}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.42);}
}
@media(max-width:390px){
.date-heart-wrap{width:23.2% !important;}
}
/* ===== V19.13：蝴蝶结独立风动容器 + 真正心形涟漪 ===== */
/* The wrapper owns all motion. The bow image itself is static inside it,
so legacy !important transform rules can no longer swallow the animation. */
.date-bow-wind{
position:absolute !important;
right:10.4% !important;
top:29.1% !important;
width:27.6% !important;
height:auto !important;
z-index:7 !important;
pointer-events:none !important;
transform-origin:54% 16% !important;
animation:dateBowWindV1913 5.6s cubic-bezier(.32,.04,.25,1) infinite !important;
will-change:transform;
}
.date-bow-wind .date-bow{
position:relative !important;
inset:auto !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
height:auto !important;
display:block !important;
transform:rotate(6deg) !important;
rotate:0deg !important;
translate:none !important;
animation:none !important;
filter:drop-shadow(0 8px 12px rgba(135,88,79,.18)) !important;
}
@keyframes dateBowWindV1913{
0%,12%,36%,58%,82%,100%{transform:rotate(0deg) translate3d(0,0,0);}
16%{transform:rotate(7deg) translate3d(4px,-2px,0);}
20%{transform:rotate(-5deg) translate3d(-4px,2px,0);}
24%{transform:rotate(5deg) translate3d(3px,-1px,0);}
28%{transform:rotate(-2deg) translate3d(-2px,1px,0);}
32%{transform:rotate(1deg) translate3d(0,0,0);}
62%{transform:rotate(8deg) translate3d(4px,-2px,0);}
66%{transform:rotate(-6deg) translate3d(-4px,2px,0);}
70%{transform:rotate(6deg) translate3d(3px,-1px,0);}
74%{transform:rotate(-3deg) translate3d(-2px,1px,0);}
78%{transform:rotate(0deg) translate3d(0,0,0);}
87%{transform:rotate(5deg) translate3d(3px,-1px,0);}
91%{transform:rotate(-3deg) translate3d(-2px,1px,0);}
95%{transform:rotate(0deg) translate3d(0,0,0);}
}
/* Real heart-outline ripples. Explicitly cancel all older circle borders/backgrounds. */
.date-heart-wrap{
width:23.0% !important;
overflow:visible !important;
}
.date-heart-marker{
width:72% !important;
z-index:5 !important;
}
.date-heart-ripple{
position:absolute !important;
left:50% !important;
top:50% !important;
width:148% !important;
height:auto !important;
aspect-ratio:100 / 92 !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
opacity:0;
color:#f28c98 !important;
transform:translate(-50%,-50%) scale(.52) !important;
transform-origin:center !important;
animation:dateHeartRippleV1913 3.25s cubic-bezier(.12,.70,.22,1) infinite !important;
z-index:2 !important;
filter:
drop-shadow(0 0 5px rgba(242,140,152,.48))
drop-shadow(0 0 12px rgba(240,107,114,.22)) !important;
}
.date-heart-ripple path{
fill:none !important;
stroke:#f28c98 !important;
stroke-width:4.6 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
vector-effect:non-scaling-stroke;
}
.date-heart-ripple.ripple-a{animation-delay:0s !important;}
.date-heart-ripple.ripple-b{animation-delay:1.08s !important;}
.date-heart-ripple.ripple-c{animation-delay:2.16s !important;}
@keyframes dateHeartRippleV1913{
0%{
opacity:0;
transform:translate(-50%,-50%) scale(.52);
}
9%{opacity:.92;}
30%{opacity:.72;}
68%{opacity:.24;}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(1.62);
}
}
@media(max-width:390px){
.date-bow-wind{
right:10.8% !important;
top:29.0% !important;
width:28.4% !important;
}
.date-heart-wrap{width:24.0% !important;}
}
@media(max-height:720px){
.date-bow-wind{
top:28.8% !important;
width:27.0% !important;
}
}
/* ===== V19.14：中心风动 + 稳定逐字浮现 + 三层同心心形涟漪 ===== */
/* ---- Bow: pivot exactly at the center of the whole bow ---- */
.date-bow-wind{
transform-origin:50% 50% !important;
animation:dateBowCenterWindV1914 5.15s cubic-bezier(.34,.02,.22,1) infinite !important;
will-change:transform;
}
@keyframes dateBowCenterWindV1914{
0%,10%,36%,57%,82%,100%{transform:rotate(0deg) translate3d(0,0,0);}
14%{transform:rotate(7.5deg) translate3d(3px,-1px,0);}
18%{transform:rotate(-6deg) translate3d(-3px,1px,0);}
22%{transform:rotate(5deg) translate3d(2px,0,0);}
26%{transform:rotate(-3.2deg) translate3d(-2px,1px,0);}
30%{transform:rotate(1.5deg) translate3d(1px,0,0);}
34%{transform:rotate(0deg) translate3d(0,0,0);}
61%{transform:rotate(8deg) translate3d(3px,-1px,0);}
65%{transform:rotate(-6.5deg) translate3d(-3px,1px,0);}
69%{transform:rotate(5.5deg) translate3d(2px,0,0);}
73%{transform:rotate(-3deg) translate3d(-2px,1px,0);}
77%{transform:rotate(1.2deg) translate3d(1px,0,0);}
80%{transform:rotate(0deg) translate3d(0,0,0);}
87%{transform:rotate(5deg) translate3d(2px,-1px,0);}
91%{transform:rotate(-3.8deg) translate3d(-2px,1px,0);}
95%{transform:rotate(0deg) translate3d(0,0,0);}
}
/* ---- Text: new v14 character class; legacy reveal-char rules no longer apply ---- */
.date-copy-line .date-char-v14{
display:inline-block;
opacity:1;
transform:none;
filter:none;
will-change:opacity,transform,filter;
}
.date-footer-motion-v14{
display:block;
width:100%;
will-change:opacity,transform,filter;
}
.date-footer-motion-v14 > span,
.date-footer-motion-v14 > b,
.date-footer-motion-v14 > small{
display:block !important;
}
/* ---- Heart marker: shrink to hug the number 21 more closely ---- */
.date-heart-wrap{
left:92.80% !important;
top:57.62% !important;
width:18.0% !important;
aspect-ratio:240 / 220 !important;
transform:translate(-50%,-50%) !important;
overflow:visible !important;
}
.date-heart-marker{
left:50% !important;
top:50% !important;
width:76% !important;
transform:translate(-50%,-50%) scale(1) !important;
z-index:5 !important;
}
/* Three waves use the exact same alpha silhouette as the heart asset.
This guarantees the wave center and heart center are identical. */
.date-heart-ripple{
position:absolute !important;
left:50% !important;
top:50% !important;
width:76% !important;
height:76% !important;
border:0 !important;
border-radius:0 !important;
background:rgba(242,140,152,.74) !important;
box-shadow:none !important;
opacity:0;
transform:translate(-50%,-50%) scale(.98) !important;
transform-origin:50% 50% !important;
-webkit-mask-image:url("assets/date/DateHeartMarker_RedPlush_240x220px.png") !important;
mask-image:url("assets/date/DateHeartMarker_RedPlush_240x220px.png") !important;
-webkit-mask-repeat:no-repeat !important;
mask-repeat:no-repeat !important;
-webkit-mask-position:center !important;
mask-position:center !important;
-webkit-mask-size:contain !important;
mask-size:contain !important;
filter:
drop-shadow(0 0 5px rgba(242,140,152,.50))
drop-shadow(0 0 11px rgba(240,107,114,.24)) !important;
animation:dateHeartRippleV1914 3.0s cubic-bezier(.13,.70,.25,1) infinite !important;
z-index:2 !important;
}
.date-heart-ripple.ripple-a{animation-delay:0s !important;}
.date-heart-ripple.ripple-b{animation-delay:-1.0s !important;}
.date-heart-ripple.ripple-c{animation-delay:-2.0s !important;}
@keyframes dateHeartRippleV1914{
0%{
opacity:.82;
transform:translate(-50%,-50%) scale(.98);
}
22%{opacity:.66;}
52%{opacity:.38;}
78%{opacity:.16;}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(2.05);
}
}
/* Keep the central heart breathing, but much subtler than the ripples. */
.date-heart-marker{
animation:dateHeartBeatV1914 2.7s ease-in-out infinite !important;
}
@keyframes dateHeartBeatV1914{
0%,100%{
transform:translate(-50%,-50%) scale(.985) !important;
filter:drop-shadow(0 3px 7px rgba(198,75,88,.18)) !important;
}
50%{
transform:translate(-50%,-50%) scale(1.035) !important;
filter:drop-shadow(0 4px 11px rgba(240,107,114,.30)) !important;
}
}
@media(max-width:390px){
.date-heart-wrap{width:18.6% !important;}
}
/* ===== V19.15：蝴蝶结结点旋转 + 可见三层心形涟漪 ===== */
/*
Bow canvas is 420x240. The actual knot is visually around x=213px, y=109px,
so the pivot is ~50.7% / 45.4%, not the transparent canvas center.
Motion is rotation-only; no translation, so the knot stays fixed.
*/
.date-bow-wind{
transform-origin:50.7% 45.4% !important;
animation:dateBowKnotWindV1915 5.45s cubic-bezier(.34,.03,.23,1) infinite !important;
will-change:transform;
}
@keyframes dateBowKnotWindV1915{
0%,12%,38%,59%,83%,100%{transform:rotate(0deg);}
16%{transform:rotate(5.0deg);}
20%{transform:rotate(-4.0deg);}
24%{transform:rotate(3.5deg);}
28%{transform:rotate(-2.1deg);}
32%{transform:rotate(1.0deg);}
36%{transform:rotate(0deg);}
63%{transform:rotate(5.3deg);}
67%{transform:rotate(-4.2deg);}
71%{transform:rotate(3.6deg);}
75%{transform:rotate(-2.0deg);}
79%{transform:rotate(.8deg);}
82%{transform:rotate(0deg);}
88%{transform:rotate(3.7deg);}
92%{transform:rotate(-2.8deg);}
96%{transform:rotate(0deg);}
}
/*
Ripple SVGs share the exact 240x220 coordinate system of the PNG heart.
Their box center and the heart image box center are therefore identical.
*/
.date-heart-wrap{
overflow:visible !important;
}
.date-heart-ripple{
position:absolute !important;
left:50% !important;
top:50% !important;
width:76% !important;
height:auto !important;
aspect-ratio:240 / 220 !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
filter:
drop-shadow(0 0 4px rgba(242,140,152,.48))
drop-shadow(0 0 10px rgba(240,107,114,.22)) !important;
opacity:0;
transform:translate(-50%,-50%) scale(.99) !important;
transform-origin:50% 60% !important;
animation:dateHeartWaterRippleV1915 3.3s cubic-bezier(.12,.70,.22,1) infinite !important;
z-index:2 !important;
}
.date-heart-ripple path{
fill:none !important;
stroke:#f28c98 !important;
stroke-width:4.2 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
vector-effect:non-scaling-stroke !important;
}
.date-heart-ripple.ripple-a{animation-delay:0s !important;}
.date-heart-ripple.ripple-b{animation-delay:-1.10s !important;}
.date-heart-ripple.ripple-c{animation-delay:-2.20s !important;}
@keyframes dateHeartWaterRippleV1915{
0%{
opacity:.86;
transform:translate(-50%,-50%) scale(.99);
}
16%{opacity:.74;}
38%{opacity:.52;}
64%{opacity:.28;}
82%{opacity:.12;}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(2.18);
}
}
/* Central plush heart remains smaller than the outer ripples. */
.date-heart-marker{
width:72% !important;
z-index:5 !important;
}
/* ===== V19.16：心形涟漪强化可见版 ===== */
/*
Keep the plush heart itself compact around "21".
Make the three waves much easier to perceive on a phone:
- start just outside the heart
- expand to ~3.2x
- stronger stroke/glow
- slower fade
- three clearly staggered phases
*/
.date-heart-wrap{
overflow:visible !important;
}
.date-heart-marker{
width:72% !important;
z-index:6 !important;
}
.date-heart-ripple{
left:50% !important;
top:50% !important;
width:76% !important;
height:auto !important;
aspect-ratio:240 / 220 !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
opacity:0;
transform:translate(-50%,-50%) scale(1.04) !important;
transform-origin:50% 50% !important;
animation:dateHeartWaterRippleV1916 3.9s cubic-bezier(.12,.66,.22,1) infinite !important;
z-index:4 !important;
filter:
drop-shadow(0 0 5px rgba(242,140,152,.72))
drop-shadow(0 0 13px rgba(240,107,114,.42))
drop-shadow(0 0 22px rgba(255,181,188,.20)) !important;
}
.date-heart-ripple path{
fill:none !important;
stroke:#ee7f8c !important;
stroke-width:6.4 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
vector-effect:non-scaling-stroke !important;
}
.date-heart-ripple.ripple-a{animation-delay:0s !important;}
.date-heart-ripple.ripple-b{animation-delay:-1.30s !important;}
.date-heart-ripple.ripple-c{animation-delay:-2.60s !important;}
@keyframes dateHeartWaterRippleV1916{
0%{
opacity:.98;
transform:translate(-50%,-50%) scale(1.04);
}
14%{
opacity:.94;
transform:translate(-50%,-50%) scale(1.28);
}
32%{
opacity:.76;
transform:translate(-50%,-50%) scale(1.72);
}
52%{
opacity:.54;
transform:translate(-50%,-50%) scale(2.20);
}
72%{
opacity:.30;
transform:translate(-50%,-50%) scale(2.68);
}
88%{
opacity:.12;
transform:translate(-50%,-50%) scale(3.02);
}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(3.22);
}
}
/* ===== V19.17：心形涟漪放大增强版 ===== */
/*
User wants visibly larger heart waves:
- the smallest wave: just a little larger than the plush heart
- the middle wave: clearly larger than the heart
- the largest wave: exceeds the calendar cell boundary
*/
.date-heart-wrap{
overflow:visible !important;
}
/* keep the heart itself compact around the number */
.date-heart-marker{
width:68% !important;
z-index:6 !important;
}
.date-heart-ripple{
left:50% !important;
top:50% !important;
width:84% !important;
height:auto !important;
aspect-ratio:240 / 220 !important;
overflow:visible !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
box-shadow:none !important;
opacity:0;
transform:translate(-50%,-50%) scale(var(--start-scale,1.0)) !important;
transform-origin:50% 50% !important;
z-index:4 !important;
filter:
drop-shadow(0 0 6px rgba(242,140,152,.82))
drop-shadow(0 0 16px rgba(240,107,114,.46))
drop-shadow(0 0 30px rgba(255,181,188,.28)) !important;
}
.date-heart-ripple path{
fill:none !important;
stroke:#ee7f8c !important;
stroke-width:6.8 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
vector-effect:non-scaling-stroke !important;
}
/* Smallest wave: barely larger than the heart */
.date-heart-ripple.ripple-a{
--start-scale:1.02;
animation:dateHeartRippleSmallV1917 4.0s cubic-bezier(.14,.66,.24,1) infinite !important;
}
/* Middle wave: noticeably larger than the heart */
.date-heart-ripple.ripple-b{
--start-scale:1.08;
animation:dateHeartRippleMidV1917 4.0s cubic-bezier(.14,.66,.24,1) infinite !important;
animation-delay:-1.33s !important;
}
/* Largest wave: allowed to exceed the cell */
.date-heart-ripple.ripple-c{
--start-scale:1.14;
animation:dateHeartRippleLargeV1917 4.0s cubic-bezier(.14,.66,.24,1) infinite !important;
animation-delay:-2.66s !important;
}
@keyframes dateHeartRippleSmallV1917{
0%{opacity:.95;transform:translate(-50%,-50%) scale(1.02);}
35%{opacity:.82;transform:translate(-50%,-50%) scale(1.18);}
70%{opacity:.42;transform:translate(-50%,-50%) scale(1.30);}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.42);}
}
@keyframes dateHeartRippleMidV1917{
0%{opacity:.92;transform:translate(-50%,-50%) scale(1.08);}
24%{opacity:.90;transform:translate(-50%,-50%) scale(1.34);}
55%{opacity:.62;transform:translate(-50%,-50%) scale(1.78);}
100%{opacity:0;transform:translate(-50%,-50%) scale(2.24);}
}
@keyframes dateHeartRippleLargeV1917{
0%{opacity:.88;transform:translate(-50%,-50%) scale(1.14);}
20%{opacity:.86;transform:translate(-50%,-50%) scale(1.62);}
45%{opacity:.68;transform:translate(-50%,-50%) scale(2.36);}
72%{opacity:.34;transform:translate(-50%,-50%) scale(3.34);}
100%{opacity:0;transform:translate(-50%,-50%) scale(4.18);}
}
/* ===== V19.22 地图页：气球仅本体浮动，绳底锚定地图框 ===== */
.venue-heart-balloon{
right:2.2% !important;
top:10.4% !important;
width:12.6% !important;
z-index:6 !important;
pointer-events:none;
animation:none !important;
}
.venue-heart-balloon img{
position:relative;
display:block;
width:100%;
z-index:2;
transform-origin:50% 92%;
animation:venueHeartBalloonBody 4.8s ease-in-out infinite !important;
}
.venue-heart-balloon .balloon-string{
position:absolute;
left:50%;
top:57% !important;
width:2px;
height:153% !important;
background:linear-gradient(180deg, rgba(184,142,125,.82) 0%, rgba(184,142,125,.60) 35%, rgba(184,142,125,.42) 68%, rgba(184,142,125,.18) 100%) !important;
transform:translateX(-50%);
transform-origin:50% 100%;
border-radius:999px;
z-index:1;
}
.venue-heart-balloon .balloon-string::after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
width:12px;
height:12px;
transform:translateX(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #f5dfc9 0%, #d9af87 55%, #b78564 100%);
box-shadow:0 0 0 2px rgba(245,233,221,.85), 0 2px 5px rgba(151,111,91,.22);
}
@keyframes venueHeartBalloonBody{
0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
25%{transform:translate3d(2px,-8px,0) rotate(0deg)}
50%{transform:translate3d(-1px,-14px,0) rotate(4deg)}
75%{transform:translate3d(-3px,-7px,0) rotate(1deg)}
}
/* ===== V19.23：地图框缩小10% + 气球绳双端实时锚定 ===== */
/* Map frame is exactly 10% smaller than V19.20 and keeps the same visual center. */
.venue-map-frame-wrap{
left:10.13% !important;
top:28.80% !important;
width:79.74% !important;
aspect-ratio:1122 / 1402 !important;
animation:none !important;
transform:none !important;
z-index:3 !important;
}
/* Keep all map content completely static. */
.venue-map-window,
.venue-map-skin,
.venue-map-frame{
animation:none !important;
}
/* Decorative assets scale/reposition with the smaller map frame. */
.venue-envelope{
left:-2.8% !important;
bottom:6.2% !important;
width:20.2% !important;
}
.venue-flower{
right:-10.0% !important;
bottom:-2.2% !important;
width:46.0% !important;
}
/*
The balloon host is fixed to the map frame.
The anchor is placed high — roughly where the balloon was sitting previously.
The host itself never moves.
*/
.venue-heart-balloon{
position:absolute !important;
right:-0.5% !important;
top:4.0% !important;
width:15.0% !important;
height:31.0% !important;
z-index:8 !important;
pointer-events:none !important;
animation:none !important;
transform:none !important;
overflow:visible !important;
}
/* Fixed anchor point on the frame. */
.venue-heart-balloon .balloon-anchor{
position:absolute;
left:50%;
top:67%;
width:12px;
height:12px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #f5dfc9 0%, #d9af87 55%, #b78564 100%);
box-shadow:
0 0 0 2px rgba(245,233,221,.88),
0 2px 5px rgba(151,111,91,.22);
z-index:5;
}
/* Only the heart balloon itself moves. */
.venue-heart-balloon .balloon-heart{
position:absolute !important;
left:50% !important;
top:-2% !important;
width:88% !important;
height:auto !important;
max-width:none !important;
z-index:4 !important;
transform-origin:50% 72% !important;
animation:venueHeartBalloonBodyV1923 4.8s ease-in-out infinite !important;
filter:drop-shadow(0 8px 12px rgba(229,120,145,.18)) !important;
}
/*
Rope geometry is updated by JS every frame:
bottom = fixed anchor center;
top = a fixed attachment point on the moving heart, around 72% down from its top.
*/
.venue-heart-balloon .balloon-string{
position:absolute !important;
left:50% !important;
top:0 !important;
width:2px !important;
height:1px;
transform-origin:50% 100% !important;
border-radius:999px;
background:linear-gradient(
180deg,
rgba(184,142,125,.72) 0%,
rgba(184,142,125,.58) 45%,
rgba(184,142,125,.30) 100%
) !important;
z-index:3 !important;
pointer-events:none;
}
.venue-heart-balloon .balloon-string::after{
content:none !important;
}
@keyframes venueHeartBalloonBodyV1923{
0%,100%{
transform:translateX(-50%) translate3d(0,0,0) rotate(-3deg);
}
25%{
transform:translateX(-50%) translate3d(3px,-7px,0) rotate(0deg);
}
50%{
transform:translateX(-50%) translate3d(-2px,-13px,0) rotate(3deg);
}
75%{
transform:translateX(-50%) translate3d(-3px,-6px,0) rotate(1deg);
}
}
/* Re-space stars around the smaller frame and keep the bottom-center heart unobstructed. */
.venue-star.star-d{left:7.0% !important; top:33.0% !important; width:8.8% !important;}
.venue-star.star-e{right:5.0% !important; top:34.0% !important; width:8.2% !important;}
.venue-star.star-f{left:5.0% !important; top:61.5% !important; width:8.0% !important;}
.venue-star.star-g{right:7.0% !important; bottom:10.5% !important; width:7.0% !important;}
@media(max-width:390px){
.venue-map-frame-wrap{
left:9.8% !important;
top:29.2% !important;
width:80.4% !important;
}
.venue-heart-balloon{
right:-0.8% !important;
top:3.8% !important;
width:15.3% !important;
}
}
/* ===== V19.24：地图框避让底部心形 + 气球锚点绑定修正版 ===== */
.venue-map-frame-wrap{
left:11.4% !important;
top:18.0% !important;
width:71.6% !important;
aspect-ratio:1122 / 1402 !important;
animation:none !important;
transform:none !important;
z-index:3 !important;
}
.venue-map-window,
.venue-map-skin,
.venue-map-frame{
animation:none !important;
transform:none !important;
}
.venue-envelope{
left:-3.0% !important;
bottom:8.8% !important;
width:20.5% !important;
z-index:7 !important;
}
.venue-flower{
right:-11.5% !important;
bottom:2.0% !important;
width:45.0% !important;
z-index:7 !important;
}
.venue-heart-balloon{
--anchor-x: 87.2%;
--anchor-y: 15.2%;
position:absolute !important;
inset:0 !important;
z-index:8 !important;
pointer-events:none !important;
overflow:visible !important;
animation:none !important;
transform:none !important;
}
.venue-heart-balloon .balloon-anchor{
position:absolute;
left:var(--anchor-x);
top:var(--anchor-y);
width:12px;
height:12px;
transform:translate(-50%,-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #f5dfc9 0%, #d9af87 55%, #b78564 100%);
box-shadow:0 0 0 2px rgba(245,233,221,.88), 0 2px 5px rgba(151,111,91,.22);
}
.venue-heart-balloon .balloon-rope{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
}
.venue-heart-balloon .balloon-rope-path{
fill:none;
stroke:rgba(184,142,125,.74);
stroke-width:2.2;
stroke-linecap:round;
vector-effect:non-scaling-stroke;
filter:drop-shadow(0 1px 1px rgba(151,111,91,.12));
}
.venue-heart-balloon .balloon-body{
position:absolute;
left:var(--anchor-x);
top:var(--anchor-y);
width:15.2%;
transform-origin:50% 78%;
animation:venueHeartBalloonBodyV1924 4.8s ease-in-out infinite;
will-change:transform;
}
.venue-heart-balloon .balloon-heart{
display:block;
width:100%;
height:auto;
filter:drop-shadow(0 8px 12px rgba(229,120,145,.18));
}
@keyframes venueHeartBalloonBodyV1924{
0%,100%{ transform:translate(-16%, -112%) rotate(-4deg); }
25%{ transform:translate(-10%, -118%) rotate(-1deg); }
50%{ transform:translate(-14%, -126%) rotate(3deg); }
75%{ transform:translate(-20%, -119%) rotate(1deg); }
}
.venue-star.star-d{ left:7.2% !important; top:29.5% !important; width:8.5% !important; }
.venue-star.star-e{ right:7.0% !important; top:30.6% !important; width:8.0% !important; }
.venue-star.star-f{ left:4.7% !important; top:58.3% !important; width:7.8% !important; }
.venue-star.star-g{ right:6.6% !important; bottom:13.4% !important; width:6.8% !important; }
@media (max-width:390px){
.venue-map-frame-wrap{
left:11.0% !important;
top:17.7% !important;
width:72.1% !important;
}
.venue-heart-balloon{
--anchor-x: 87.0%;
--anchor-y: 15.0%;
}
.venue-heart-balloon .balloon-body{
width:15.7%;
}
}
/* ===== STYLE BLOCK ===== */
/* ============================================================
TEMP COLOR TOOL — PREVIEW ONLY
V15.4.2: custom fine-adjust editor
V20.02: styles retained for optional ?colorDebug=1 use.
============================================================ */
#temp-color-btn{
position:fixed;right:max(16px,env(safe-area-inset-right));
bottom:calc(18px + env(safe-area-inset-bottom));
z-index:5200;border:2px solid #F7A64A;border-radius:999px;
padding:10px 15px;background:#FFF7EC;color:#111;font-weight:900;
box-shadow:0 5px 18px rgba(80,40,20,.16);cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
#temp-color-panel{
position:fixed;z-index:5190;right:max(12px,env(safe-area-inset-right));
bottom:calc(68px + env(safe-area-inset-bottom));
width:min(94vw,410px);max-height:min(76vh,700px);overflow:auto;
background:#FFFDF8;color:#111;border:2px solid #F7A64A;border-radius:22px;
box-shadow:0 18px 45px rgba(30,20,10,.24);padding:14px;
transform:translateY(18px) scale(.98);opacity:0;pointer-events:none;
transition:.22s ease;overscroll-behavior:contain;touch-action:pan-y;
}
#temp-color-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.temp-color-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.temp-color-head b{font-size:16px}
.temp-color-close{width:32px;height:32px;border:0;border-radius:50%;background:#FFE8DB;color:#111;font-size:20px}
.temp-color-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.temp-color-actions button{border:1.5px solid #F7A64A;border-radius:12px;padding:10px 8px;background:#FFF4E6;color:#111;font-weight:800}
#temp-color-reset{grid-column:1/-1;background:#FFD85E}
.temp-color-row{
display:grid;grid-template-columns:1.3fr 92px 54px;
gap:8px;align-items:center;padding:9px 0;border-top:1px solid #F1DFD4;
}
.temp-color-label{font-size:12px;line-height:1.25;font-weight:800}
.temp-color-hex{
width:100%;border:1px solid #D7C7BD;border-radius:9px;padding:8px 6px;background:#fff;color:#111;
font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;
}
.temp-color-current{
width:54px;height:36px;border:1.5px solid #CDBCB0;border-radius:9px;padding:0;background:#fff;
position:relative;cursor:pointer;overflow:hidden;
}
.temp-color-current::after{
content:"";position:absolute;inset:4px;border-radius:6px;background:var(--swatch,#fff);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.temp-color-note{font-size:10px;line-height:1.5;color:#555;margin:10px 2px 0}
.temp-color-toast{position:sticky;bottom:0;margin-top:8px;text-align:center;font-size:11px;font-weight:800;color:#086c3e;min-height:16px}
/* Fine editor */
#temp-fine-editor{
position:fixed;z-index:5300;left:50%;top:50%;
width:min(92vw,420px);max-height:min(82vh,720px);overflow:auto;
transform:translate(-50%,-50%) scale(.96);opacity:0;pointer-events:none;
background:#FFFDF8;border:2px solid #F7A64A;border-radius:22px;
box-shadow:0 22px 60px rgba(20,10,5,.35);padding:14px;
transition:.18s ease;overscroll-behavior:contain;touch-action:pan-y;
}
#temp-fine-editor.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.temp-fine-backdrop{
position:fixed;inset:0;z-index:5290;background:rgba(0,0,0,.26);
opacity:0;pointer-events:none;transition:.18s ease;
}
.temp-fine-backdrop.open{opacity:1;pointer-events:auto}
.temp-fine-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.temp-fine-title{font-size:15px;font-weight:900}
.temp-fine-close{width:32px;height:32px;border:0;border-radius:50%;background:#FFE8DB;font-size:20px}
.temp-fine-current{
display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center;
padding:10px;border:1px solid #E8D8CC;border-radius:14px;background:#FFF8F1;margin-bottom:12px;
}
.temp-fine-swatch{height:54px;border-radius:12px;border:1px solid #D4C3B8;background:#fff}
.temp-fine-current-meta b{display:block;font-size:12px;margin-bottom:5px}
.temp-fine-current-meta code{font-size:16px;font-weight:900;color:#111}
.temp-fine-grid{display:grid;grid-template-columns:1fr;gap:11px}
.temp-control{
display:grid;grid-template-columns:42px 1fr 68px;gap:8px;align-items:center;
}
.temp-control label{font-size:12px;font-weight:900}
.temp-control input[type=range]{width:100%}
.temp-control input[type=number]{
width:68px;border:1px solid #D7C7BD;border-radius:8px;padding:7px 6px;background:#fff;color:#111;
font:700 12px ui-monospace,SFMono-Regular,Consolas,monospace;
}
.temp-fine-section-title{
margin:14px 0 8px;font-size:11px;font-weight:900;color:#555;letter-spacing:.6px;
border-top:1px solid #EEDFD4;padding-top:10px;
}
.temp-fine-hexrow{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-top:10px}
.temp-fine-hexrow input[type=text]{
border:1px solid #D7C7BD;border-radius:10px;padding:9px;background:#fff;color:#111;
font:800 13px ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase;
}
.temp-wheel-btn{
border:1.5px solid #F7A64A;border-radius:10px;padding:9px;background:#FFF4E6;color:#111;font-weight:900;
position:relative;overflow:hidden;
}
.temp-wheel-btn input[type=color]{
position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.temp-fine-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.temp-fine-actions button{
border:1.5px solid #F7A64A;border-radius:11px;padding:10px;background:#FFF4E6;color:#111;font-weight:900;
}
.temp-fine-actions .primary{background:#FFD85E}
@media(max-height:650px){
#temp-color-panel{max-height:68vh}
#temp-fine-editor{max-height:76vh}
.temp-control{gap:6px}
}
/* ===== V15.4.3 slider smoothness ===== */
.temp-control input[type=range]{
-webkit-appearance:none;
appearance:none;
width:100%;
height:34px;
margin:0;
background:transparent;
touch-action:none; /* horizontal drag belongs to the slider */
overscroll-behavior:contain;
}
.temp-control input[type=range]::-webkit-slider-runnable-track{
height:6px;
border-radius:999px;
background:#E9D9CF;
}
.temp-control input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
appearance:none;
width:26px;
height:26px;
margin-top:-10px;
border-radius:50%;
border:2px solid #F7A64A;
background:#FFF7EC;
box-shadow:0 2px 6px rgba(0,0,0,.16);
}
.temp-control input[type=range]::-moz-range-track{
height:6px;
border-radius:999px;
background:#E9D9CF;
}
.temp-control input[type=range]::-moz-range-thumb{
width:26px;
height:26px;
border-radius:50%;
border:2px solid #F7A64A;
background:#FFF7EC;
box-shadow:0 2px 6px rgba(0,0,0,.16);
}
#temp-fine-editor{
touch-action:pan-y; /* editor can vertically scroll */
}
.temp-control{
touch-action:none; /* slider rows don't get interpreted as page gestures */
}
.temp-hsl-note{
margin:8px 2px 2px;
padding:8px 10px;
border-radius:10px;
background:#FFF4E6;
color:#555;
font-size:10px;
line-height:1.5;
border:1px solid #F1DFD4;
}
/* ===== V15.4.5 local-file clipboard fallback ===== */
#temp-copy-fallback{
position:fixed;inset:0;z-index:5600;
display:grid;place-items:center;
padding:18px;
background:rgba(0,0,0,.28);
}
.temp-copy-dialog{
width:min(92vw,420px);
background:#FFFDF8;
border:2px solid #F7A64A;
border-radius:20px;
box-shadow:0 24px 65px rgba(20,10,5,.35);
padding:14px;
}
.temp-copy-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.temp-copy-head b{font-size:16px}
.temp-copy-close{
width:32px;height:32px;border:0;border-radius:50%;
background:#FFE8DB;color:#111;font-size:20px
}
.temp-copy-note{font-size:11px;line-height:1.55;color:#555;margin-bottom:9px}
.temp-copy-text{
width:100%;min-height:230px;max-height:45vh;
resize:vertical;
border:1px solid #D7C7BD;border-radius:10px;
background:#fff;color:#111;padding:10px;
font:700 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.temp-copy-select{
width:100%;margin-top:9px;padding:10px;
border:1.5px solid #F7A64A;border-radius:11px;
background:#FFD85E;color:#111;font-weight:900;
}
/* ===== V15.4.6: live-value copy + per-item copy ===== */
.temp-color-row{
grid-template-columns:minmax(118px,1.25fr) 88px 44px 48px !important;
}
.temp-color-copy-one{
height:36px;
border:1px solid #D7C7BD;
border-radius:9px;
background:#FFF4E6;
color:#111;
padding:0 7px;
font-size:11px;
font-weight:900;
}
.temp-fine-actions{
grid-template-columns:1fr 1fr !important;
}
#fine-copy-current{
grid-column:1/-1;
background:#FFF4E6;
}
.temp-copy-dialog-single{
width:min(88vw,360px);
}
.temp-copy-single-input{
width:100%;
border:1.5px solid #D7C7BD;
border-radius:10px;
padding:13px 10px;
background:#fff;
color:#111;
font:900 18px ui-monospace,SFMono-Regular,Consolas,monospace;
text-align:center;
}
.temp-copy-list{
display:grid;
gap:7px;
max-height:55vh;
overflow:auto;
overscroll-behavior:contain;
}
.temp-copy-row{
display:grid;
grid-template-columns:minmax(0,1fr) 104px;
align-items:center;
gap:8px;
}
.temp-copy-row span{
font-size:11px;
line-height:1.3;
font-weight:800;
}
.temp-copy-row input{
width:104px;
border:1px solid #D7C7BD;
border-radius:8px;
padding:8px 6px;
background:#fff;
color:#111;
font:800 12px ui-monospace,SFMono-Regular,Consolas,monospace;
text-transform:uppercase;
}
@media(max-width:360px){
.temp-color-row{
grid-template-columns:minmax(102px,1fr) 82px 40px 44px !important;
gap:5px !important;
}
.temp-color-copy-one{font-size:10px;padding:0 4px}
}
/* ===== V19.18: wedding venue art page using separated assets ===== */
.venue-art-page{
padding:calc(94px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
background:transparent !important;
overflow:hidden;
}
.venue-art-page::after{display:none !important}
.venue-art-stage{
position:relative;
width:min(100%, 390px);
aspect-ratio:941/1672;
margin:0 auto;
}
.venue-art-stage img{
display:block;
max-width:100%;
user-select:none;
-webkit-user-drag:none;
}
.venue-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 10px 18px rgba(182,140,110,.12));
}
.venue-map-frame-wrap{
position:absolute;
left:8.4%;
top:19.2%;
width:79.6%;
aspect-ratio:1122/1402;
animation:none;
}
.venue-map-frame{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:4;
pointer-events:none;
}
.venue-map-window{
position:absolute;
left:14.8%;
top:14.2%;
width:69.9%;
height:69.4%;
border-radius:10%;
overflow:hidden;
z-index:2;
background:#f7f1e7;
box-shadow:inset 0 0 0 2px rgba(230,210,194,.75);
}
.venue-map-skin{
position:absolute;
inset:0;
background:
radial-gradient(circle at 74% 76%, rgba(129,178,223,.95) 0 10%, rgba(129,178,223,.75) 10%, rgba(129,178,223,0) 18%),
radial-gradient(circle at 32% 18%, rgba(184,206,176,.9) 0 15%, rgba(184,206,176,.72) 15%, rgba(184,206,176,0) 26%),
radial-gradient(circle at 81% 24%, rgba(198,219,190,.9) 0 12%, rgba(198,219,190,.72) 12%, rgba(198,219,190,0) 23%),
linear-gradient(180deg, #f2efe8 0%, #ece7de 100%);
}
.venue-map-grid,
.venue-map-road,
.venue-map-water,
.venue-map-park,
.venue-map-pin,
.venue-map-label{
position:absolute;
}
.venue-map-grid{
inset:0;
background-image:
linear-gradient(rgba(204,196,185,.25) 1px, transparent 1px),
linear-gradient(90deg, rgba(204,196,185,.25) 1px, transparent 1px);
background-size:16% 16%;
opacity:.55;
}
.venue-map-water{
right:11%;
bottom:5%;
width:24%;
height:29%;
border-radius:44% 46% 51% 48%/53% 42% 58% 47%;
background:rgba(136,190,232,.72);
transform:rotate(12deg);
}
.venue-map-park.park-a{
left:7%; top:8%; width:36%; height:24%;
border-radius:26px;
background:rgba(191,216,185,.72);
transform:rotate(-8deg);
}
.venue-map-park.park-b{
right:9%; top:17%; width:20%; height:18%;
border-radius:22px;
background:rgba(186,212,179,.72);
transform:rotate(10deg);
}
.venue-map-road{
background:#fbfbf9;
box-shadow:0 0 0 1px rgba(214,206,196,.55);
border-radius:999px;
}
.venue-map-road.r1{left:-10%; top:46%; width:68%; height:5%; transform:rotate(-24deg)}
.venue-map-road.r2{left:14%; top:58%; width:57%; height:4%; transform:rotate(8deg)}
.venue-map-road.r3{right:-6%; top:46%; width:45%; height:5%; transform:rotate(62deg)}
.venue-map-road.r4{left:53%; top:7%; width:5%; height:72%; transform:rotate(5deg)}
.venue-map-road.r5{left:16%; top:22%; width:4%; height:60%; transform:rotate(-12deg)}
.venue-map-road.r6{left:7%; top:74%; width:82%; height:4%; transform:rotate(-2deg)}
.venue-map-pin{
left:53%;
top:49%;
width:14%;
aspect-ratio:1/1.28;
transform:translate(-50%,-100%);
z-index:3;
}
.venue-map-pin::before{
content:"";
position:absolute;
left:50%;
top:0;
width:100%;
aspect-ratio:1/1;
background:#df6b5f;
border-radius:50% 50% 50% 0;
transform:translateX(-50%) rotate(-45deg);
box-shadow:0 7px 14px rgba(211,106,96,.26);
}
.venue-map-pin::after{
content:"";
position:absolute;
left:50%; top:28%;
width:34%; height:34%;
border-radius:50%;
background:#fff8f0;
transform:translate(-50%,-50%);
z-index:1;
}
.venue-map-label{
left:55%;
top:53%;
transform:translateX(-8%);
font:700 clamp(10px, 2.3vw, 12px)/1.1 Georgia, serif;
color:#b76b5a;
background:rgba(255,251,246,.92);
border:1px solid rgba(216,186,170,.8);
border-radius:999px;
padding:.35em .7em;
box-shadow:0 2px 6px rgba(143,102,79,.08);
white-space:nowrap;
z-index:3;
}
.venue-heart-balloon{
position:absolute;
right:2.2%;
top:10.4%;
width:12.6%;
z-index:6;
transform-origin:50% 92%;
animation:venueHeartBalloon 4.8s ease-in-out infinite;
}
.venue-heart-balloon img{
width:100%;
filter:drop-shadow(0 8px 12px rgba(229,120,145,.18));
}
.venue-heart-balloon .balloon-string{
position:absolute;
left:50%;
top:72%;
width:2px;
height:138%;
background:linear-gradient(180deg, rgba(184,142,125,.78) 0%, rgba(184,142,125,.55) 40%, rgba(184,142,125,.35) 70%, rgba(184,142,125,.14) 100%);
transform:translateX(-50%);
border-radius:999px;
}
.venue-heart-balloon .balloon-string::after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
width:12px;
height:12px;
transform:translateX(-50%);
border-radius:50%;
background:radial-gradient(circle at 35% 35%, #f5dfc9 0%, #d9af87 55%, #b78564 100%);
box-shadow:0 0 0 2px rgba(245,233,221,.85), 0 2px 5px rgba(151,111,91,.22);
}
.venue-envelope{
position:absolute;
left:-1.5%;
bottom:6.8%;
width:20%;
z-index:7;
transform:rotate(-12deg);
filter:drop-shadow(0 8px 14px rgba(161,126,108,.14));
}
.venue-flower{
position:absolute;
right:-8%;
bottom:0.8%;
width:48%;
z-index:7;
filter:drop-shadow(0 10px 14px rgba(137,119,97,.12));
}
.venue-star{
position:absolute;
display:block;
z-index:8;
transform-origin:50% 50%;
animation:venueStarSwing var(--sway-dur,4.5s) ease-in-out infinite;
}
.venue-star img{
width:100%;
filter:drop-shadow(0 4px 8px rgba(232,196,103,.16));
}
.venue-star .venue-star-flash,
.venue-star .venue-star-flash::before,
.venue-star .venue-star-flash::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:999px;
pointer-events:none;
}
.venue-star .venue-star-flash{
width:42%;
height:42%;
background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,247,197,.9) 22%, rgba(255,231,149,0) 68%);
mix-blend-mode:screen;
opacity:0;
animation:venueStarFlash var(--flash-dur,2.6s) ease-in-out infinite;
}
.venue-star .venue-star-flash::before{
width:16%;
height:120%;
background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,253,240,.96) 50%, rgba(255,255,255,0) 100%);
}
.venue-star .venue-star-flash::after{
width:120%;
height:16%;
background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,253,240,.96) 50%, rgba(255,255,255,0) 100%);
}
.venue-star.star-a{left:6%; top:4.1%; width:6.6%; --sway-dur:4.2s; --flash-dur:2.2s; animation-delay:-.5s}
.venue-star.star-b{left:16.3%; top:2.4%; width:10.5%; --sway-dur:5s; --flash-dur:2.8s; animation-delay:-1.4s}
.venue-star.star-c{left:31%; top:4.2%; width:5.3%; --sway-dur:4.6s; --flash-dur:2.4s; animation-delay:-.9s}
.venue-star.star-d{left:22.2%; top:28%; width:9%; --sway-dur:4.8s; --flash-dur:2.7s; animation-delay:-2.1s}
.venue-star.star-e{right:8%; top:30.8%; width:8.3%; --sway-dur:4.3s; --flash-dur:2.5s; animation-delay:-1.3s}
.venue-star.star-f{left:11.4%; top:60.7%; width:8.1%; --sway-dur:5.1s; --flash-dur:2.9s; animation-delay:-.2s}
.venue-star.star-g{right:9.2%; bottom:10.3%; width:6.9%; --sway-dur:4.7s; --flash-dur:2.3s; animation-delay:-1.7s}
.venue-map-frame-wrap,
.venue-heart-balloon,
.venue-star{will-change:transform,opacity}
@keyframes venueFrameFloat{
0%,100%{transform:translateY(0px)}
50%{transform:translateY(-7px)}
}
@keyframes venueHeartBalloon{
0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
25%{transform:translate3d(2px,-8px,0) rotate(0deg)}
50%{transform:translate3d(-1px,-14px,0) rotate(4deg)}
75%{transform:translate3d(-3px,-7px,0) rotate(1deg)}
}
@keyframes venueStarSwing{
0%,100%{transform:translate3d(0,0,0) rotate(-6deg) scale(1)}
25%{transform:translate3d(1px,-2px,0) rotate(1deg) scale(1.02)}
50%{transform:translate3d(-1px,-4px,0) rotate(7deg) scale(1.03)}
75%{transform:translate3d(1px,-1px,0) rotate(0deg) scale(1.01)}
}
@keyframes venueStarFlash{
0%,100%{opacity:0; transform:translate(-50%,-50%) scale(.48)}
24%{opacity:0}
40%{opacity:.95; transform:translate(-50%,-50%) scale(1)}
56%{opacity:.18; transform:translate(-50%,-50%) scale(1.4)}
72%{opacity:.85; transform:translate(-50%,-50%) scale(.72)}
88%{opacity:0; transform:translate(-50%,-50%) scale(1.12)}
}
@media (max-width:390px){
.venue-art-page{padding-left:8px;padding-right:8px}
.venue-map-window{border-radius:9.2%}
}
/* ===== V19.20 地图页：整体放大 / 标题避让 / 全屏背景 / 星星防裁切 ===== */
.venue-art-page{
padding:0 !important;
align-items:stretch !important;
justify-content:center !important;
background:#f9f0e3 !important;
overflow:hidden !important;
}
.venue-art-page::after{display:none !important}
.venue-art-stage{
position:absolute !important;
left:50% !important;
top:50% !important;
width:max(100vw, calc(100dvh * 941 / 1672)) !important;
height:auto !important;
aspect-ratio:941 / 1672 !important;
margin:0 !important;
transform:translate(-50%,-50%) !important;
overflow:visible !important;
}
@supports not (height:100dvh){
.venue-art-stage{
width:max(100vw, calc(100vh * 941 / 1672)) !important;
}
}
.venue-bg{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:fill !important;
z-index:0 !important;
filter:none !important;
}
/* Map composition larger, but lowered enough to keep "Wedding Venue" completely clear. */
.venue-map-frame-wrap{
left:5.7% !important;
top:25.7% !important;
width:88.6% !important;
aspect-ratio:1122 / 1402 !important;
z-index:3 !important;
}
/* Enlarge the visible map area inside its illustrated frame. */
.venue-map-window{
left:13.8% !important;
top:13.6% !important;
width:72.4% !important;
height:71.4% !important;
border-radius:9.5% !important;
}
/* Heart balloon stays clear of the title and floats beside the frame. */
.venue-heart-balloon{
right:0.4% !important;
top:9.2% !important;
width:13.2% !important;
}
/* Slightly larger decorative corner assets. */
.venue-envelope{
left:-2.5% !important;
bottom:5.0% !important;
width:22.4% !important;
}
.venue-flower{
right:-8.2% !important;
bottom:-1.4% !important;
width:51.0% !important;
}
/* Stars have extra transparent padding in their PNGs and may never clip while swaying. */
.venue-star{
overflow:visible !important;
}
.venue-star img{
display:block !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
overflow:visible !important;
}
/* Re-space stars so none of them cover the title. */
.venue-star.star-a{left:4.7% !important; top:5.7% !important; width:7.2% !important;}
.venue-star.star-b{left:15.0% !important; top:3.1% !important; width:11.0% !important;}
.venue-star.star-c{left:30.2% !important; top:5.4% !important; width:5.8% !important;}
.venue-star.star-d{left:5.7% !important; top:31.8% !important; width:9.4% !important;}
.venue-star.star-e{right:4.3% !important; top:32.5% !important; width:8.8% !important;}
.venue-star.star-f{left:4.0% !important; top:62.0% !important; width:8.7% !important;}
.venue-star.star-g{right:5.2% !important; bottom:8.0% !important; width:7.6% !important;}
/* The stage may crop at the viewport edge, but individual decorations themselves never crop. */
.venue-map-frame-wrap,
.venue-heart-balloon,
.venue-star{
overflow:visible !important;
}
@media(max-width:390px){
.venue-map-frame-wrap{
left:5.2% !important;
top:26.1% !important;
width:89.4% !important;
}
.venue-heart-balloon{
right:.8% !important;
top:9.5% !important;
width:13.0% !important;
}
}
/* ===== STYLE BLOCK ===== */
/* ===== V19.25 FINAL OVERRIDES ===== */
/* Map frame: another 5% smaller than V19.24, and lifted to clear the bottom heart. */
.venue-map-frame-wrap{
left:13.2% !important;
top:16.7% !important;
width:68.0% !important;
aspect-ratio:1122 / 1402 !important;
animation:none !important;
transform:none !important;
z-index:3 !important;
overflow:visible !important;
}
.venue-map-window,
.venue-map-skin,
.venue-map-frame{
animation:none !important;
}
.venue-map-frame{
transform:none !important;
}
/* Decorations remain children of the frame so they scale/reposition with it. */
.venue-envelope{
left:-2.5% !important;
bottom:11.0% !important;
width:20.0% !important;
}
.venue-flower{
right:-10.0% !important;
bottom:4.0% !important;
width:43.0% !important;
}
/* Balloon system fills the frame wrapper; all coordinates below are frame-relative. */
.venue-heart-balloon{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
right:auto !important;
top:auto !important;
z-index:9 !important;
pointer-events:none !important;
overflow:visible !important;
transform:none !important;
animation:none !important;
}
/* This node IS the anchor coordinate. Because it is a child of the map-frame wrapper,
the anchor follows frame scaling/movement automatically. */
.venue-heart-balloon .balloon-anchor-node{
position:absolute !important;
left:88.0% !important;
top:12.5% !important;
width:0 !important;
height:0 !important;
overflow:visible !important;
}
.venue-heart-balloon .balloon-anchor{
position:absolute !important;
left:0 !important;
top:0 !important;
width:10px !important;
height:10px !important;
transform:translate(-50%,-50%) !important;
border-radius:50% !important;
background:radial-gradient(circle at 35% 35%, #f6e1cc 0%, #d7ab82 56%, #ad7857 100%) !important;
box-shadow:0 0 0 2px rgba(255,246,235,.90), 0 2px 5px rgba(124,85,65,.24) !important;
z-index:6 !important;
}
/* Balloon body is a CHILD of the anchor node, so its base coordinate follows the anchor. */
.venue-heart-balloon .balloon-body{
position:absolute !important;
left:0 !important;
top:0 !important;
width:78px !important;
max-width:none !important;
transform-origin:50% 78% !important;
z-index:5 !important;
will-change:transform;
animation:venueHeartBalloonBodyV1925 4.8s ease-in-out infinite !important;
}
.venue-heart-balloon .balloon-heart{
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
transform:none !important;
animation:none !important;
filter:drop-shadow(0 8px 12px rgba(229,120,145,.20)) !important;
}
@keyframes venueHeartBalloonBodyV1925{
0%,100%{transform:translate(-28px,-95px) rotate(-4deg)}
25%{transform:translate(-22px,-102px) rotate(-1deg)}
50%{transform:translate(-30px,-108px) rotate(3deg)}
75%{transform:translate(-35px,-101px) rotate(1deg)}
}
/* SVG rope is drawn over the whole frame wrapper. */
.venue-heart-balloon .balloon-rope{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
overflow:visible !important;
z-index:4 !important;
}
.venue-heart-balloon .balloon-rope-path{
fill:none !important;
stroke:rgba(132,88,67,.96) !important;
stroke-width:2.8 !important;
stroke-linecap:round !important;
vector-effect:non-scaling-stroke !important;
filter:drop-shadow(0 1px 1px rgba(120,80,60,.16));
}
/* Page decorations redistributed to leave the lower center/heart open. */
.venue-star.star-d{left:7.4% !important; top:28.5% !important; width:8.2% !important;}
.venue-star.star-e{right:7.3% !important; top:29.4% !important; width:7.8% !important;}
.venue-star.star-f{left:5.1% !important; top:56.7% !important; width:7.5% !important;}
.venue-star.star-g{right:7.0% !important; bottom:15.0% !important; width:6.5% !important;}
@media(max-width:390px){
.venue-map-frame-wrap{
left:12.9% !important;
top:16.5% !important;
width:68.5% !important;
}
.venue-heart-balloon .balloon-anchor-node{
left:88.0% !important;
top:12.5% !important;
}
.venue-heart-balloon .balloon-body{
width:72px !important;
}
@keyframes venueHeartBalloonBodyV1925{
0%,100%{transform:translate(-26px,-89px) rotate(-4deg)}
25%{transform:translate(-20px,-96px) rotate(-1deg)}
50%{transform:translate(-28px,-102px) rotate(3deg)}
75%{transform:translate(-33px,-95px) rotate(1deg)}
}
}
/* ===== STYLE BLOCK ===== */
/* ===== V19.26：地图框放大并下移；标题下新增酒店名称与特效层 ===== */
/* Baked background title is around 21%~24% of the artboard. Keep a clear title+hotel-name zone. */
.venue-map-frame-wrap{
left:10.7% !important;
top:29.0% !important;
width:73.5% !important;
aspect-ratio:1122 / 1402 !important;
animation:none !important;
transform:none !important;
z-index:3 !important;
overflow:visible !important;
}
.venue-map-window,
.venue-map-skin,
.venue-map-frame{
animation:none !important;
}
.venue-map-frame{ transform:none !important; }
/* Hotel name is real DOM text, lowered further to keep clear spacing from the title, and enlarged for stronger readability. */
.venue-hotel-copy{
position:absolute;
left:50%;
top:28.35%;
width:76%;
height:6.0%;
transform:translate(-50%,-50%);
z-index:4;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
overflow:visible;
}
.venue-hotel-name{
position:relative;
z-index:3;
display:inline-block;
color:#a94f4c;
font-family:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
font-size:clamp(24px,6.0vw,34px);
line-height:1;
font-weight:700;
letter-spacing:.18em;
padding-left:.18em;
text-shadow:
0 1px 0 rgba(255,255,255,.92),
0 3px 10px rgba(190,95,90,.12);
}
/* Dedicated FX layer above/around the text: soft shimmer sweep + luminous haze. */
.venue-hotel-fx{
position:absolute;
left:50%;
top:50%;
width:112%;
height:190%;
transform:translate(-50%,-50%);
z-index:4;
pointer-events:none;
overflow:hidden;
border-radius:999px;
mix-blend-mode:screen;
}
.venue-hotel-fx::before{
content:"";
position:absolute;
inset:28% 7%;
background:radial-gradient(ellipse at center,
rgba(255,244,201,.52) 0%,
rgba(255,218,154,.22) 35%,
rgba(255,255,255,0) 72%);
filter:blur(3px);
animation:venueHotelGlowV1926 3.6s ease-in-out infinite;
}
.venue-hotel-fx::after{
content:"";
position:absolute;
top:-50%;
left:-28%;
width:21%;
height:200%;
transform:rotate(16deg);
background:linear-gradient(90deg,
rgba(255,255,255,0),
rgba(255,255,255,.92),
rgba(255,236,180,.52),
rgba(255,255,255,0));
filter:blur(1px);
animation:venueHotelSweepV1926 3.9s cubic-bezier(.36,.1,.34,1) infinite;
}
.venue-hotel-spark{
position:absolute;
z-index:5;
width:14px;
height:14px;
opacity:0;
pointer-events:none;
animation:venueHotelSparkV1926 2.8s ease-in-out infinite;
}
.venue-hotel-spark::before,
.venue-hotel-spark::after{
content:"";
position:absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff9da,rgba(255,255,255,0));
}
.venue-hotel-spark::before{width:2px;height:100%;}
.venue-hotel-spark::after{width:100%;height:2px;transform:translate(-50%,-50%) rotate(90deg);}
.venue-hotel-spark.spark-l{left:12%;top:22%;animation-delay:-.35s;}
.venue-hotel-spark.spark-r{right:10%;bottom:12%;animation-delay:-1.55s;}
@keyframes venueHotelGlowV1926{
0%,100%{opacity:.28;transform:scale(.92)}
50%{opacity:.72;transform:scale(1.08)}
}
@keyframes venueHotelSweepV1926{
0%,18%{left:-28%;opacity:0}
28%{opacity:.95}
62%{opacity:.72}
78%,100%{left:118%;opacity:0}
}
@keyframes venueHotelSparkV1926{
0%,100%{opacity:0;transform:scale(.45) rotate(0deg)}
36%{opacity:0}
48%{opacity:1;transform:scale(1) rotate(18deg)}
65%{opacity:.15;transform:scale(1.5) rotate(35deg)}
}
/* Rebalance frame decorations after enlarging the frame; keep lower heart clear. */
.venue-envelope{
left:-2.8% !important;
bottom:11.5% !important;
width:19.0% !important;
}
.venue-flower{
right:-9.0% !important;
bottom:5.5% !important;
width:40.5% !important;
}
/* Balloon stays parent/child-bound to the resized frame. */
.venue-heart-balloon .balloon-anchor-node{
left:88.0% !important;
top:12.3% !important;
}
.venue-heart-balloon .balloon-body{
width:80px !important;
}
/* Side stars follow the larger frame but keep the title and lower heart unobstructed. */
.venue-star.star-d{left:6.3% !important;top:33.0% !important;width:8.5% !important;}
.venue-star.star-e{right:5.8% !important;top:34.0% !important;width:8.0% !important;}
.venue-star.star-f{left:4.7% !important;top:62.0% !important;width:7.7% !important;}
.venue-star.star-g{right:6.8% !important;bottom:12.8% !important;width:6.6% !important;}
@media(max-width:390px){
.venue-map-frame-wrap{
left:10.4% !important;
top:29.3% !important;
width:74.0% !important;
}
.venue-hotel-copy{
top:27.6%;
width:74%;
}
.venue-hotel-name{
font-size:23px;
}
.venue-heart-balloon .balloon-body{
width:74px !important;
}
}
/* ===== V19.29：酒店名称点亮增强 + 首页人物上移站上红毯 ===== */
/* 酒店名称字号保持 V19.28 不变，只增强“被点亮”的光效。 */
.venue-hotel-copy{
isolation:isolate;
}
.venue-hotel-copy::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:94%;
height:150%;
transform:translate(-50%,-50%) scale(.94);
border-radius:999px;
z-index:1;
pointer-events:none;
background:
radial-gradient(ellipse at center,
rgba(255,248,212,.76) 0%,
rgba(255,222,155,.35) 36%,
rgba(255,190,118,.12) 58%,
rgba(255,255,255,0) 76%);
filter:blur(5px);
opacity:.58;
animation:venueHotelHaloV1929 3.2s ease-in-out infinite;
}
.venue-hotel-copy::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:82%;
height:62%;
transform:translate(-50%,-50%);
z-index:2;
pointer-events:none;
border-radius:999px;
box-shadow:
0 0 12px rgba(255,245,208,.72),
0 0 24px rgba(255,213,141,.42),
0 0 42px rgba(244,162,101,.16);
opacity:.48;
animation:venueHotelAuraV1929 3.2s ease-in-out infinite;
}
.venue-hotel-name{
/* font-size deliberately unchanged from V19.28 */
text-shadow:
0 1px 0 rgba(255,255,255,.96),
0 0 5px rgba(255,250,222,.98),
0 0 11px rgba(255,225,157,.78),
0 0 22px rgba(247,179,114,.44),
0 4px 12px rgba(168,72,67,.16) !important;
filter:drop-shadow(0 0 3px rgba(255,244,194,.88));
animation:venueHotelTextLightV1929 3.2s ease-in-out infinite;
}
.venue-hotel-fx{
width:124% !important;
height:230% !important;
overflow:visible !important;
opacity:1 !important;
}
.venue-hotel-fx::before{
inset:20% 2% !important;
background:radial-gradient(ellipse at center,
rgba(255,255,232,.86) 0%,
rgba(255,229,165,.46) 30%,
rgba(255,193,116,.17) 52%,
rgba(255,255,255,0) 75%) !important;
filter:blur(4px) !important;
animation:venueHotelGlowV1929 3.2s ease-in-out infinite !important;
}
.venue-hotel-fx::after{
top:-65% !important;
width:25% !important;
height:230% !important;
background:linear-gradient(90deg,
rgba(255,255,255,0),
rgba(255,255,255,.98),
rgba(255,247,209,.96),
rgba(255,207,128,.62),
rgba(255,255,255,0)) !important;
filter:blur(.6px) drop-shadow(0 0 8px rgba(255,228,161,.65)) !important;
animation:venueHotelSweepV1929 3.35s cubic-bezier(.33,.08,.32,1) infinite !important;
}
.venue-hotel-spark{
width:18px !important;
height:18px !important;
filter:drop-shadow(0 0 5px rgba(255,240,176,.95));
animation:venueHotelSparkV1929 2.45s ease-in-out infinite !important;
}
.venue-hotel-spark.spark-l{left:7% !important;top:10% !important;animation-delay:-.2s !important;}
.venue-hotel-spark.spark-r{right:6% !important;bottom:2% !important;animation-delay:-1.25s !important;}
@keyframes venueHotelHaloV1929{
0%,100%{opacity:.42;transform:translate(-50%,-50%) scale(.92)}
45%{opacity:.86;transform:translate(-50%,-50%) scale(1.05)}
65%{opacity:.68;transform:translate(-50%,-50%) scale(1.01)}
}
@keyframes venueHotelAuraV1929{
0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.94)}
50%{opacity:.72;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes venueHotelTextLightV1929{
0%,100%{filter:brightness(1) drop-shadow(0 0 3px rgba(255,244,194,.72))}
43%{filter:brightness(1.10) drop-shadow(0 0 7px rgba(255,238,169,.98))}
57%{filter:brightness(1.04) drop-shadow(0 0 5px rgba(255,223,145,.82))}
}
@keyframes venueHotelGlowV1929{
0%,100%{opacity:.36;transform:scale(.90)}
50%{opacity:.92;transform:scale(1.12)}
}
@keyframes venueHotelSweepV1929{
0%,16%{left:-34%;opacity:0}
27%{opacity:1}
55%{opacity:.94}
73%,100%{left:120%;opacity:0}
}
@keyframes venueHotelSparkV1929{
0%,100%{opacity:0;transform:scale(.35) rotate(0deg)}
30%{opacity:0}
43%{opacity:1;transform:scale(1.08) rotate(16deg)}
57%{opacity:.34;transform:scale(1.62) rotate(31deg)}
70%{opacity:.86;transform:scale(.78) rotate(45deg)}
84%{opacity:0;transform:scale(1.35) rotate(62deg)}
}
/* 首页人物整体上移，让脚落在红毯区域，而不是压在下方白色信息区。 */
.curtain-couple{
bottom:16.4% !important;
}
.curtain-couple-shadow{
bottom:16.0% !important;
}
@media (max-width:390px){
.curtain-couple{
bottom:15.8% !important;
}
.curtain-couple-shadow{
bottom:15.4% !important;
}
}
@media (max-height:720px){
.curtain-couple{
bottom:15.6% !important;
}
.curtain-couple-shadow{
bottom:15.2% !important;
}
}
/* ===== V19.30：酒店光效收束 + 首页人物继续上移 ===== */
/* 光效贴合文字尺寸，不再形成远大于文字的“光波圈”。 */
.venue-hotel-copy::before{
width:86% !important;
height:118% !important;
filter:blur(3px) !important;
opacity:.50 !important;
}
.venue-hotel-copy::after{
width:72% !important;
height:54% !important;
box-shadow:
0 0 8px rgba(255,245,208,.78),
0 0 16px rgba(255,213,141,.44),
0 0 26px rgba(244,162,101,.14) !important;
opacity:.44 !important;
}
/* 保留“点亮”感，但把 FX 画布收回到文字附近。 */
.venue-hotel-fx{
width:96% !important;
height:150% !important;
overflow:hidden !important;
}
.venue-hotel-fx::before{
inset:28% 8% !important;
background:radial-gradient(ellipse at center,
rgba(255,255,232,.78) 0%,
rgba(255,229,165,.40) 34%,
rgba(255,193,116,.13) 56%,
rgba(255,255,255,0) 76%) !important;
filter:blur(2.5px) !important;
}
.venue-hotel-fx::after{
top:-34% !important;
width:18% !important;
height:170% !important;
filter:blur(.5px) drop-shadow(0 0 5px rgba(255,228,161,.55)) !important;
}
/* 闪点也缩回文字左右两侧。 */
.venue-hotel-spark{
width:14px !important;
height:14px !important;
filter:drop-shadow(0 0 4px rgba(255,240,176,.90)) !important;
}
.venue-hotel-spark.spark-l{
left:12% !important;
top:18% !important;
}
.venue-hotel-spark.spark-r{
right:11% !important;
bottom:10% !important;
}
/* 首页人物再上移一点，让脚更自然地落在红毯区域。 */
.curtain-couple{
bottom:18.4% !important;
}
.curtain-couple-shadow{
bottom:18.0% !important;
}
@media (max-width:390px){
.curtain-couple{
bottom:17.8% !important;
}
.curtain-couple-shadow{
bottom:17.4% !important;
}
}
@media (max-height:720px){
.curtain-couple{
bottom:17.6% !important;
}
.curtain-couple-shadow{
bottom:17.2% !important;
}
}
/* ===== V19.31：地图页星星显示修复 + 信封放大 + 花稍放大 + 星星随机尺度 ===== */
/* 目标：
1) 让星星素材不再出现“缺角/显示不全”；
2) 信封放大到上一版约 2 倍；
3) 花稍微放大；
4) 星星尺寸围绕一个基准值上下浮动，更自然。 */
/* 星星容器保留完整边界，图片本体略缩进显示，避免透明边被裁切时看起来像缺角。 */
.venue-star{
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
box-sizing:border-box !important;
}
.venue-star img{
display:block !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
transform:scale(.90) !important;
transform-origin:center center !important;
backface-visibility:hidden !important;
}
/* 星星尺寸做成“基准值上下随机”——整体风格统一，但不会一模一样。 */
.venue-star.star-a{left:4.8% !important; top:5.9% !important; width:7.9% !important;}
.venue-star.star-b{left:14.7% !important; top:3.2% !important; width:10.4% !important;}
.venue-star.star-c{left:30.4% !important; top:5.5% !important; width:6.8% !important;}
.venue-star.star-d{left:5.8% !important; top:32.2% !important; width:8.8% !important;}
.venue-star.star-e{right:4.6% !important; top:32.9% !important; width:7.6% !important;}
.venue-star.star-f{left:4.5% !important; top:61.5% !important; width:9.2% !important;}
.venue-star.star-g{right:5.4% !important; bottom:8.5% !important; width:7.1% !important;}
/* 闪光层同步略微收敛到星星中心，避免视觉上“角被截断”。 */
.venue-star .venue-star-flash{
width:36% !important;
height:36% !important;
}
.venue-star .venue-star-flash::before{height:108% !important;}
.venue-star .venue-star-flash::after{width:108% !important;}
/* 信封放大一倍左右，并略微外探，保持页脚左下角装饰感。 */
.venue-envelope{
left:-8.2% !important;
bottom:9.8% !important;
width:38.0% !important;
z-index:7 !important;
}
/* 花稍微放大一点，同时略下压，让构图更饱满但不压住地图内容。 */
.venue-flower{
right:-10.2% !important;
bottom:3.2% !important;
width:46.5% !important;
z-index:7 !important;
}
@media(max-width:390px){
.venue-envelope{
left:-8.8% !important;
bottom:9.4% !important;
width:39.2% !important;
}
.venue-flower{
right:-10.8% !important;
bottom:2.8% !important;
width:47.2% !important;
}
.venue-star.star-a{left:4.8% !important; top:6.0% !important; width:8.1% !important;}
.venue-star.star-b{left:14.4% !important; top:3.3% !important; width:10.7% !important;}
.venue-star.star-c{left:30.0% !important; top:5.5% !important; width:7.0% !important;}
.venue-star.star-d{left:5.6% !important; top:32.5% !important; width:9.0% !important;}
.venue-star.star-e{right:4.4% !important; top:33.1% !important; width:7.8% !important;}
.venue-star.star-f{left:4.2% !important; top:61.7% !important; width:9.4% !important;}
.venue-star.star-g{right:5.1% !important; bottom:8.2% !important; width:7.3% !important;}
}
/* ===== V19.32：地图页独立星星修复 / 信封真正放大 / 花再放大 ===== */
/*
星星：
- 不再使用有明显缺角的 Star_03。
- 活跃素材只使用完整的 Star_01 / Star_02 / Star_04 独立 PNG。
- 尺寸围绕约 8.2% 的基准随机上下浮动。
- 元素本体留一点安全缩放，避免晃动时被视口边缘裁切。
*/
.venue-star{
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
box-sizing:border-box !important;
}
.venue-star img{
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
object-fit:contain !important;
transform:scale(.94) !important;
transform-origin:50% 50% !important;
backface-visibility:hidden !important;
-webkit-backface-visibility:hidden !important;
}
/* 基准约 8.2%，每颗星做有控制的随机变化。 */
.venue-star.star-a{left:6.0% !important; top:6.2% !important; width:7.2% !important;}
.venue-star.star-b{left:15.4% !important; top:3.8% !important; width:9.7% !important;}
.venue-star.star-c{left:31.2% !important; top:6.1% !important; width:7.8% !important;}
.venue-star.star-d{left:7.0% !important; top:33.0% !important; width:8.9% !important;}
.venue-star.star-e{right:6.1% !important; top:33.8% !important; width:7.4% !important;}
.venue-star.star-f{left:5.5% !important; top:61.5% !important; width:9.2% !important;}
.venue-star.star-g{right:7.0% !important; bottom:9.5% !important; width:8.0% !important;}
.venue-star .venue-star-flash{
width:38% !important;
height:38% !important;
}
/*
信封：
V19.30 的实际宽度为 19%，这里直接固定到 40%。
同时取消 max-width 限制并保留旋转，因此视觉上会确实接近两倍。
*/
.venue-envelope{
left:-10.5% !important;
bottom:9.6% !important;
width:40.0% !important;
max-width:none !important;
height:auto !important;
transform:rotate(-12deg) !important;
transform-origin:50% 50% !important;
z-index:10 !important;
filter:drop-shadow(0 10px 16px rgba(161,126,108,.16)) !important;
}
/* 花继续放大，但主要往右下延展，避免压住底部中心的小心心。 */
.venue-flower{
right:-14.0% !important;
bottom:1.8% !important;
width:52.5% !important;
max-width:none !important;
height:auto !important;
z-index:8 !important;
}
@media(max-width:390px){
.venue-envelope{
left:-11.2% !important;
bottom:9.2% !important;
width:41.0% !important;
}
.venue-flower{
right:-14.8% !important;
bottom:1.3% !important;
width:53.5% !important;
}
.venue-star.star-a{left:6.2% !important; top:6.3% !important; width:7.4% !important;}
.venue-star.star-b{left:15.2% !important; top:3.9% !important; width:9.9% !important;}
.venue-star.star-c{left:31.0% !important; top:6.2% !important; width:8.0% !important;}
.venue-star.star-d{left:6.8% !important; top:33.2% !important; width:9.1% !important;}
.venue-star.star-e{right:6.0% !important; top:34.0% !important; width:7.6% !important;}
.venue-star.star-f{left:5.3% !important; top:61.7% !important; width:9.4% !important;}
.venue-star.star-g{right:6.8% !important; bottom:9.3% !important; width:8.2% !important;}
}
/* ===== V19.34：星星素材安全边距修复 + 信封下移 ===== */
/*
新 Star_01 / 03 / 04 已经直接制作成带透明安全边距的独立 PNG。
因此这里取消上一版对图片本体的缩放，避免星星显得过小。
*/
.venue-star{
overflow:visible !important;
}
.venue-star img{
display:block !important;
width:100% !important;
height:auto !important;
max-width:none !important;
object-fit:contain !important;
transform:none !important;
transform-origin:50% 50% !important;
}
/* 保持随机尺寸关系，但给顶部星星更安全的屏幕边距。 */
.venue-star.star-a{left:6.2% !important; top:6.5% !important; width:7.4% !important;}
.venue-star.star-b{left:15.4% !important; top:4.2% !important; width:9.6% !important;}
.venue-star.star-c{left:31.1% !important; top:6.4% !important; width:7.8% !important;}
.venue-star.star-d{left:7.0% !important; top:33.0% !important; width:8.8% !important;}
.venue-star.star-e{right:6.1% !important; top:33.8% !important; width:7.4% !important;}
.venue-star.star-f{left:5.5% !important; top:61.4% !important; width:9.1% !important;}
.venue-star.star-g{right:7.0% !important; bottom:9.6% !important; width:8.0% !important;}
/* 信封保持约 2 倍大小，只往下移动。 */
.venue-envelope{
left:-10.5% !important;
bottom:5.8% !important;
width:40.0% !important;
max-width:none !important;
height:auto !important;
transform:rotate(-12deg) !important;
z-index:10 !important;
}
@media(max-width:390px){
.venue-envelope{
left:-11.2% !important;
bottom:5.2% !important;
width:41.0% !important;
}
.venue-star.star-a{left:6.2% !important; top:6.6% !important; width:7.6% !important;}
.venue-star.star-b{left:15.1% !important; top:4.3% !important; width:9.8% !important;}
.venue-star.star-c{left:30.9% !important; top:6.5% !important; width:8.0% !important;}
.venue-star.star-d{left:6.8% !important; top:33.2% !important; width:9.0% !important;}
.venue-star.star-e{right:6.0% !important; top:34.0% !important; width:7.6% !important;}
.venue-star.star-f{left:5.3% !important; top:61.6% !important; width:9.3% !important;}
.venue-star.star-g{right:6.8% !important; bottom:9.4% !important; width:8.2% !important;}
}
/* ===== V19.35：地图页左上中间星星上移 + 第三页相纸丝滑回弹 ===== */
/* 左上角三颗星中的中间一颗（star-b）上移，避开进度条星星。 */
.venue-star.star-b{
top:2.25% !important;
}
@media(max-width:390px){
.venue-star.star-b{
top:2.35% !important;
}
}
/*
第三页相纸飞入：保留“落地后轻微回弹”，但把原来明显的
上冲 -> 下压 -> 再上冲 改成连续减速 + 很小的柔和回弹。
飞入轨迹和三张相纸的先后顺序保持不变。
*/
.reading-story-page.memory-open .polaroid-left{
animation:
memoryDealLeft_V1935 1.10s cubic-bezier(.16,.78,.22,1) .02s both,
memoryPhotoFloatLeft_V1822 5.2s ease-in-out 1.22s infinite !important;
}
.reading-story-page.memory-open .polaroid-right{
animation:
memoryDealRight_V1935 1.26s cubic-bezier(.15,.76,.22,1) .22s both,
memoryPhotoFloatRight_V1822 5.4s ease-in-out 1.58s infinite !important;
}
.reading-story-page.memory-open .polaroid-center{
animation:
memoryDealCenter_V1935 1.42s cubic-bezier(.14,.74,.21,1) .48s both,
memoryPhotoFloatCenter_V1822 5.3s ease-in-out 2.02s infinite !important;
}
@keyframes memoryDealLeft_V1935{
0%{
translate:-10vw 112vh;
rotate:-15deg;
scale:.82;
filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));
}
70%{
translate:1px -8px;
rotate:-6.4deg;
scale:1.006;
filter:drop-shadow(0 19px 30px rgba(20,12,18,.28));
}
86%{
translate:-.5px 2.5px;
rotate:-7.3deg;
scale:.998;
filter:drop-shadow(0 13px 22px rgba(20,12,18,.24));
}
95%{
translate:0 -1.5px;
rotate:-6.8deg;
scale:1.0015;
}
100%{
translate:0 0;
rotate:-7deg;
scale:1;
filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));
}
}
@keyframes memoryDealRight_V1935{
0%{
translate:12vw 120vh;
rotate:16deg;
scale:.82;
filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));
}
71%{
translate:-1px -7px;
rotate:6.3deg;
scale:1.006;
filter:drop-shadow(0 19px 30px rgba(20,12,18,.28));
}
87%{
translate:.5px 2.5px;
rotate:7.3deg;
scale:.998;
filter:drop-shadow(0 13px 22px rgba(20,12,18,.24));
}
95%{
translate:0 -1.5px;
rotate:6.8deg;
scale:1.0015;
}
100%{
translate:0 0;
rotate:7deg;
scale:1;
filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));
}
}
@keyframes memoryDealCenter_V1935{
0%{
translate:2vw 128vh;
rotate:-12deg;
scale:.82;
filter:drop-shadow(0 5px 8px rgba(20,12,18,.10));
}
72%{
translate:.5px -9px;
rotate:-4.3deg;
scale:1.007;
filter:drop-shadow(0 20px 31px rgba(20,12,18,.29));
}
87%{
translate:-.5px 3px;
rotate:-5.3deg;
scale:.998;
filter:drop-shadow(0 13px 22px rgba(20,12,18,.24));
}
95%{
translate:0 -1.6px;
rotate:-4.7deg;
scale:1.0015;
}
100%{
translate:0 0;
rotate:-5deg;
scale:1;
filter:drop-shadow(0 17px 27px rgba(20,12,18,.25));
}
}
/* ===== V19.37：倒计时页严格按确认背景素材对齐 ===== */
.countdown-art-page{
padding:0 !important;
align-items:stretch !important;
justify-content:center !important;
background:#f7ead9 !important;
overflow:hidden !important;
}
.countdown-art-page::after{display:none !important;}
.countdown-art-stage{
position:absolute;
left:50%;
top:50%;
width:max(100vw, calc(100dvh * 941 / 1672));
height:auto;
aspect-ratio:941 / 1672;
transform:translate(-50%,-50%);
overflow:visible;
container-type:inline-size;
}
@supports not (height:100dvh){
.countdown-art-stage{width:max(100vw, calc(100vh * 941 / 1672));}
}
.countdown-art-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:fill;
z-index:1;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}
/* 实时数字：按 941×1672 背景中的空白区域精确定位 */
.countdown-live{
position:absolute;
z-index:4;
color:#c92531;
font-family:Georgia,"Times New Roman",serif;
font-style:italic;
font-weight:700;
line-height:1;
text-align:center;
white-space:nowrap;
text-shadow:0 1px 0 rgba(255,247,226,.72);
pointer-events:none;
}
.countdown-live-days{
left:27.0%;
top:22.55%;
width:39.0%;
font-size:17.6cqw;
letter-spacing:-.045em;
}
.countdown-live-hours,
.countdown-live-minutes,
.countdown-live-seconds{
top:36.05%;
width:12.8%;
font-size:7.35cqw;
letter-spacing:-.02em;
}
.countdown-live-hours{left:26.15%;}
.countdown-live-minutes{left:43.35%;}
.countdown-live-seconds{left:60.35%;}
/* 人物独立层：位置复刻确认效果图，下方不侵入底部祝福文案区域 */
.countdown-person{
position:absolute;
z-index:3;
height:auto;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
filter:drop-shadow(0 .45cqw .75cqw rgba(114,66,44,.12));
}
.countdown-groom{
left:3.5%;
top:55.1%;
width:38.0%;
}
.countdown-bride{
right:3.3%;
top:58.8%;
width:42.0%;
}
.countdown-a11y{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
@media(max-width:390px){
.countdown-groom{left:3.0%;top:55.2%;width:38.4%;}
.countdown-bride{right:2.8%;top:58.9%;width:42.4%;}
}
/* ===== V19.42 第二页双人照片放大适配 ===== */
.encounter-photo-slots{
top:30.2% !important;
width:min(96%,404px) !important;
gap:6px !important;
align-items:flex-start;
z-index:4 !important;
}
.soft-photo-slot{
flex:0 1 48% !important;
width:clamp(150px,44vw,190px) !important;
max-width:190px !important;
aspect-ratio:2 / 3 !important;
overflow:visible;
}
.slot-left{transform:translateY(10px) rotate(-3.2deg) !important}
.slot-right{transform:translateY(0) rotate(3.2deg) !important}
.encounter-photo-img{
position:absolute;
inset:1.8%;
width:96.4%;
height:96.4%;
z-index:1;
object-fit:cover;
object-position:center center;
border-radius:34% 34% 31% 31% / 22% 22% 34% 34%;
box-shadow:0 14px 26px rgba(20,22,55,.19);
user-select:none;
-webkit-user-drag:none;
}
.soft-photo-feather{
z-index:2 !important;
pointer-events:none;
background:
radial-gradient(ellipse at center,
rgba(255,252,247,0) 0 61%,
rgba(255,249,241,.08) 68%,
rgba(255,244,233,.28) 78%,
rgba(255,244,233,.58) 89%,
rgba(255,244,233,0) 100%) !important;
border:1px solid rgba(255,255,255,.64) !important;
box-shadow:0 14px 28px rgba(31,28,76,.11) !important;
}
.soft-photo-slot::before{
inset:5% 7% !important;
z-index:3;
border:1.2px solid rgba(255,255,255,.70) !important;
}
.soft-photo-slot::after{
display:none !important;
}
.slot-label{display:none !important}
@media(max-width:390px){
.encounter-photo-slots{
top:31.2% !important;
width:min(96%,364px) !important;
gap:5px !important;
}
.soft-photo-slot{
width:clamp(145px,43.5vw,174px) !important;
max-width:174px !important;
}
}
@media(max-height:740px){
.encounter-photo-slots{top:32.6% !important}
.soft-photo-slot{
width:clamp(136px,41vw,164px) !important;
max-width:164px !important;
}
}
/* ===== V19.42 第二页照片结束 ===== */
/* ===== V19.41 相册逻辑恢复：大相册 + 相纸前景聚焦 + 左上装饰贴合 ===== */
.album-stack-page,.photo-draft-page{padding:0!important;overflow:hidden;background:#E5D5C7!important}
.album-stack-page::after,.photo-draft-page::after{display:none!important}
.memory-book-stage{position:absolute;inset:0;width:100vw;height:100dvh;height:100svh;overflow:hidden;isolation:isolate}
.album-stack-page .memory-book-bg{
position:absolute;left:-6.5%;top:-6.5%;width:113%;height:113%;object-fit:cover;object-position:center;
z-index:1;filter:blur(8px) saturate(1.03) brightness(.93);transform:scale(1.045);
animation:readingCameraBg 12.8s ease-in-out infinite alternate;will-change:transform
}
.photo-draft-page .memory-book-bg{
position:absolute;left:-5.5%;top:-5.5%;width:111%;height:111%;object-fit:cover;object-position:center;
z-index:1;filter:blur(4px) brightness(.97);animation:readingCameraBg 12.8s ease-in-out infinite alternate
}
.memory-book-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(31,20,35,.20),rgba(31,20,35,.05) 55%,rgba(55,31,26,.10)),radial-gradient(circle at 50% 52%,rgba(255,245,226,.10),rgba(40,24,25,.12))}
.album-page-heading,.draft-page-heading{
position:absolute;left:50%;top:calc(118px + env(safe-area-inset-top));transform:translateX(-50%);
width:min(88vw,372px);z-index:11;text-align:center;color:#FFF8EF;
text-shadow:0 2px 10px rgba(35,22,18,.35),0 1px 2px rgba(35,22,18,.38)
}
.album-page-heading small,.draft-page-heading small{display:block;margin-bottom:5px;font-size:9px;letter-spacing:1.8px;font-weight:900;color:#F1E2CF}
.album-page-heading h2,.draft-page-heading h2{margin:0;font-size:28px;line-height:1.16;font-weight:850;color:#FFF8F0}
.album-page-heading p,.draft-page-heading p{margin:8px auto 0;font-size:12px;line-height:1.55;font-weight:600;color:#F6EBDF;opacity:.92}
.album-photo-counter{display:inline-block;margin-top:7px;padding:4px 9px;border:1px solid rgba(255,244,230,.44);border-radius:999px;background:rgba(72,48,44,.18);font:800 10px/1 Arial,"Microsoft YaHei","PingFang SC",sans-serif;letter-spacing:1.2px;color:#FFF6E9}
.album-sheet-wrap{
position:absolute;left:50%;top:calc(205px + env(safe-area-inset-top));width:min(95vw,418px);aspect-ratio:1086/1448;
transform:translateX(-50%) translateY(14px) scale(.97);z-index:5;opacity:0;
transition:opacity .42s .05s ease,transform .72s .05s cubic-bezier(.16,1,.3,1);
filter:drop-shadow(0 18px 28px rgba(41,25,24,.20));pointer-events:none
}
.album-stack-page.active .album-sheet-wrap{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.album-sheet-base,.album-sheet-decor{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.album-sheet-base{z-index:1}.album-sheet-decor{z-index:2;opacity:.84;transform:scale(.978)}
.album-decor-star,.album-decor-heart{position:absolute;z-index:3;width:11%;height:auto;object-fit:contain;pointer-events:none}
.album-decor-star-a{right:8%;top:14%;transform:rotate(12deg)}.album-decor-star-b{left:8%;bottom:11%;width:8%;transform:rotate(-18deg)}.album-decor-heart{right:9%;bottom:8%;width:9%;transform:rotate(9deg)}
.album-focus-dim{position:absolute;inset:0;z-index:18;background:rgba(27,20,27,.50);opacity:0;pointer-events:none;transition:opacity .46s ease .50s}
.album-stack-page.active .album-focus-dim{opacity:1}
.album-photo-layer{position:absolute;inset:0;z-index:22;pointer-events:none}
.album-photo-stack{
position:absolute;left:50%;top:58%;width:min(54vw,230px);aspect-ratio:1122/1402;
transform:translate(-50%,-50%);overflow:visible
}
.album-photo-card{position:absolute;inset:0;width:100%;aspect-ratio:1122/1402;transform-origin:center;pointer-events:none;transition:transform .76s cubic-bezier(.18,.92,.22,1),opacity .44s ease,filter .56s ease;will-change:transform,opacity}
.album-photo-card[data-stack="0"]{z-index:14;transform:translate3d(0,16px,0) rotate(-.8deg) scale(.91);opacity:1;filter:drop-shadow(0 10px 14px rgba(62,37,32,.18))}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-18%,0) rotate(-.7deg) scale(1.78);filter:drop-shadow(0 24px 30px rgba(34,21,20,.34));transition-delay:.24s}
.album-stack-page.active.album-card-switching .album-photo-card[data-stack="0"]{transition-delay:0s}
.album-photo-card[data-stack="1"]{z-index:13;transform:translate3d(11px,28px,0) rotate(2.2deg) scale(.97);opacity:.98}
.album-photo-card[data-stack="2"]{z-index:12;transform:translate3d(-9px,40px,0) rotate(-2deg) scale(.94);opacity:.95}
.album-photo-card[data-stack="3"]{z-index:11;transform:translate3d(4px,51px,0) rotate(.9deg) scale(.91);opacity:.92}
.album-photo-fill{position:absolute;left:16.5%;right:14.5%;top:16.3%;height:55.2%;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;background:radial-gradient(circle at 50% 36%,rgba(255,250,241,.92),rgba(246,219,210,.94) 58%,rgba(230,193,181,.95));border:1px dashed rgba(174,116,100,.52);color:#9B675D}
.album-photo-fill span{font-size:24px;line-height:1;color:#C98276;margin-bottom:6px}.album-photo-fill b{font-size:11px;letter-spacing:1.2px}.album-photo-fill small{margin-top:4px;font-size:9px;opacity:.72}
.album-polaroid-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}
.album-photo-corner{position:absolute;left:7.1%;top:6.6%;width:23.5%;height:auto;z-index:3;object-fit:contain;transform:none;transform-origin:top left;opacity:.96;pointer-events:none}
/* 后两页只做预留，不改变其讨论性质 */
.draft-sheet-wrap{position:absolute;left:50%;top:calc(222px + env(safe-area-inset-top));width:min(80vw,350px);aspect-ratio:1086/1448;transform:translateX(-50%) translateY(16px) scale(.965);z-index:4;opacity:0;transition:opacity .58s .12s ease,transform .78s .12s cubic-bezier(.16,1,.3,1);filter:drop-shadow(0 18px 28px rgba(41,25,24,.20));pointer-events:none}
.photo-draft-page.active .draft-sheet-wrap{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.draft-sheet-decor{opacity:.62}.draft-three-layout,.draft-two-layout{position:absolute;inset:9.5% 8.5% 8.5%;z-index:5}
.draft-photo-card{position:absolute;width:100%;aspect-ratio:1122/1402;filter:drop-shadow(0 8px 12px rgba(62,37,32,.16))}
.draft-photo-card .album-photo-fill span{font-size:17px}.draft-photo-card .album-photo-fill b{font-size:9px}
.draft-three-main{left:23%;top:2%;width:54%;transform:rotate(-1deg);z-index:8}.draft-three-left{left:1%;bottom:1%;width:43%;transform:rotate(-5deg);z-index:7}.draft-three-right{right:1%;bottom:1%;width:43%;transform:rotate(5deg);z-index:6}
.draft-two-left{left:3%;top:15%;width:50%;transform:rotate(-4deg);z-index:7}.draft-two-right{right:3%;bottom:12%;width:50%;transform:rotate(4deg);z-index:8}
@media(max-width:390px){
.album-sheet-wrap{width:min(95vw,374px)}
.album-photo-stack{width:min(54vw,210px)}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-16%,0) rotate(-.7deg) scale(1.76)}
}
@media(max-height:740px){
.album-page-heading,.draft-page-heading{top:calc(108px + env(safe-area-inset-top))}
.album-sheet-wrap{top:calc(190px + env(safe-area-inset-top));width:min(91vw,374px)}
.album-photo-stack{top:59%;width:min(49vw,205px)}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-14%,0) rotate(-.7deg) scale(1.70)}
}
@media(prefers-reduced-motion:reduce){.album-photo-card,.album-sheet-wrap,.draft-sheet-wrap{transition:none!important}}
/* ===== V19.41 相册恢复结束 ===== */
/* ===== V19.44 第二页照片强透明渐变修正 ===== */
/* 照片必须位于第二页主文案下方，避免遮挡标题/说明文字。 */
.encounter-photo-slots{
z-index:2 !important;
}
/* 去掉照片上方所有“线框/描边”视觉，只保留照片本体的柔和透明渐变。 */
.soft-photo-feather{
display:none !important;
border:none !important;
box-shadow:none !important;
background:none !important;
}
.soft-photo-slot::before,
.soft-photo-slot::after{
display:none !important;
border:none !important;
background:none !important;
}
/* V19.44：透明渐变已经直接烘焙进 WebP alpha 通道，避免不同手机浏览器对 CSS mask 支持不一致。 */
.encounter-photo-img{
inset:0 !important;
width:100% !important;
height:100% !important;
border-radius:0 !important;
box-shadow:none !important;
object-fit:cover !important;
opacity:1 !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* 主文案明确置于照片上层；照片仍保持在背景与文字之间。 */
.encounter-copy{
z-index:4 !important;
}
/* ===== V19.44 修正结束 ===== */
/* ===== V19.47 第二页横向加宽椭圆自然羽化 ===== */
/* 照片本身已具有宽椭圆 alpha 渐变：核心完整，边缘连续过渡至透明。 */
.encounter-photo-img{
-webkit-mask:none !important;
mask:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
border-radius:0 !important;
box-shadow:none !important;
object-fit:cover !important;
object-position:center center !important;
opacity:1 !important;
}
/* 保留 V19.46 已确定的新娘取景位置，照片仍在文字下层。 */
.encounter-photo-slots{z-index:2 !important}
.encounter-copy{z-index:4 !important}
/* ===== V19.47 第二页结束 ===== */
/* ===== V19.49 第二页噪波水墨显影（仅首次进入） ===== */
/* 初次进入前始终隐藏照片，防止浏览器先闪出最终静态照。 */
.encounter-story-page:not(.ink-reveal-playing):not(.ink-reveal-complete) .encounter-photo-img{
opacity:0 !important;
}
.encounter-story-page.ink-reveal-playing .encounter-photo-img{
opacity:1 !important;
filter:blur(4px);
transform:scale(.985);
transition:none;
}
.encounter-story-page.ink-reveal-complete .encounter-photo-img{
opacity:1 !important;
filter:none;
transform:none;
transition:filter .15s ease,transform .15s ease;
}
/* Keep the words above both revealed photos. */
.encounter-story-page .encounter-photo-slots{z-index:2 !important;}
.encounter-story-page .encounter-copy{z-index:4 !important;}
@media(prefers-reduced-motion:reduce){
.encounter-story-page.ink-reveal-playing .encounter-photo-img{filter:none;transform:none;transition:none;}
}
/* ===== V19.49 end ===== */
/* V19.52: paint the 36-frame animated WebP natively; blur/scale softens continuously. */
.encounter-story-page.ink-reveal-playing .encounter-photo-img{
animation:inkRevealFocus1952 850ms ease-in-out both !important;
transition:none !important;
}
.encounter-story-page.ink-reveal-playing .encounter-photo-bride{opacity:0!important;animation-delay:100ms !important;}
.encounter-story-page.ink-reveal-playing.ink-bride-started .encounter-photo-bride{opacity:1!important;}
@keyframes inkRevealFocus1952{
0%{filter:blur(3px); transform:scale(.985)}
100%{filter:blur(0); transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){
.encounter-story-page.ink-reveal-playing .encounter-photo-img{animation:none!important;filter:none!important;transform:none!important}
}
/* ===== V19.53：第三页三张回忆照片替换 ===== */
.reading-story-page .memory-photo-fill{
overflow:hidden !important;
background:#f8f2ec !important;
}
.reading-story-page .memory-photo-img{
display:block;
width:100%;
height:100%;
object-fit:cover;
transform:scale(1);
}
.reading-story-page .memory-photo-img-1{object-position:50% 48%;}
.reading-story-page .memory-photo-img-2{object-position:50% 50%;}
.reading-story-page .memory-photo-img-3{object-position:50% 42%;}
/* ===== V19.55：第四页四张相册照片替换，扩展为更适配 2:3 竖幅 ===== */
.album-stack-page .album-photo-stack{
width:min(58vw,244px) !important;
aspect-ratio:2 / 3 !important;
top:58.2% !important;
}
.album-stack-page .album-photo-card{
aspect-ratio:2 / 3 !important;
}
.album-stack-page .album-polaroid-frame{
object-fit:fill !important;
}
.album-stack-page .album-photo-fill{
left:12.2% !important;
right:12.0% !important;
top:11.9% !important;
height:68.0% !important;
border-radius:3px !important;
background:#f6efe8 !important;
border:none !important;
}
.album-stack-page .album-photo-fill span,
.album-stack-page .album-photo-fill b,
.album-stack-page .album-photo-fill small{
display:none !important;
}
.album-stack-page .album-photo-img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.album-stack-page .album-photo-img-1{object-position:50% 50%;}
.album-stack-page .album-photo-img-2{object-position:50% 50%;}
.album-stack-page .album-photo-img-3{object-position:50% 50%;}
.album-stack-page .album-photo-img-4{object-position:50% 50%;}
.album-stack-page.active .album-photo-card[data-stack="0"]{
transform:translate3d(0,-16%,0) rotate(-.7deg) scale(1.62) !important;
}
@media(max-width:390px){
.album-stack-page .album-photo-stack{width:min(60vw,224px) !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-15%,0) rotate(-.7deg) scale(1.58) !important;}
}
@media(max-height:740px){
.album-stack-page .album-photo-stack{top:58.8% !important;width:min(54vw,214px) !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-14%,0) rotate(-.7deg) scale(1.54) !important;}
}
/* ===== V19.56：第四页相框覆盖、装饰定位、整体再放大修正 ===== */
.album-stack-page .album-photo-stack{
width:min(62vw, 258px) !important;
top:58.6% !important;
}
.album-stack-page .album-photo-fill{
left:13.4% !important;
right:13.2% !important;
top:15.6% !important;
height:64.2% !important;
}
.album-stack-page .album-photo-corner{
left:8.4% !important;
top:8.0% !important;
width:21.5% !important;
}
.album-stack-page.active .album-photo-card[data-stack="0"]{
transform:translate3d(0,-16.8%,0) rotate(-.7deg) scale(1.70) !important;
}
@media(max-width:390px){
.album-stack-page .album-photo-stack{width:min(63vw, 236px) !important;}
.album-stack-page .album-photo-fill{top:15.9% !important;height:63.8% !important;}
.album-stack-page .album-photo-corner{left:8.6% !important;top:8.2% !important;width:22.0% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-16.0%,0) rotate(-.7deg) scale(1.66) !important;}
}
@media(max-height:740px){
.album-stack-page .album-photo-stack{top:59.0% !important;width:min(57vw, 224px) !important;}
.album-stack-page .album-photo-fill{top:16.0% !important;height:63.6% !important;}
.album-stack-page .album-photo-corner{left:8.7% !important;top:8.3% !important;width:22.0% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-15.0%,0) rotate(-.7deg) scale(1.60) !important;}
}
/* ===== V19.57：第四页再放大 + 装饰对齐 + 第三页点按放大 ===== */
.album-stack-page .album-photo-stack{
width:min(66vw, 274px) !important;
top:58.8% !important;
}
.album-stack-page .album-photo-fill{
left:18.4% !important;
right:18.1% !important;
top:19.8% !important;
height:49.4% !important;
}
.album-stack-page .album-photo-corner{
left:6.9% !important;
top:6.0% !important;
width:24.0% !important;
}
.album-stack-page.active .album-photo-card[data-stack="0"]{
transform:translate3d(0,-17.4%,0) rotate(-.7deg) scale(1.78) !important;
}
@media(max-width:390px){
.album-stack-page .album-photo-stack{width:min(68vw, 248px) !important;}
.album-stack-page .album-photo-fill{top:19.9% !important;height:49.1% !important;}
.album-stack-page .album-photo-corner{left:6.8% !important;top:6.0% !important;width:24.4% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-16.8%,0) rotate(-.7deg) scale(1.72) !important;}
}
@media(max-height:740px){
.album-stack-page .album-photo-stack{top:59.0% !important;width:min(61vw, 236px) !important;}
.album-stack-page .album-photo-fill{top:20.0% !important;height:48.9% !important;}
.album-stack-page .album-photo-corner{left:6.9% !important;top:6.1% !important;width:24.2% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-15.8%,0) rotate(-.7deg) scale(1.68) !important;}
}
.reading-story-page.memory-open .reading-memory-overlay{pointer-events:auto !important;}
.reading-story-page .memory-polaroid{pointer-events:auto;cursor:pointer;transition:opacity .28s ease,filter .28s ease,left .34s ease,top .34s ease,width .34s ease;}
.reading-story-page.memory-zoomed .reading-memory-vignette{opacity:.98 !important;background:radial-gradient(circle at 50% 50%, rgba(255,248,240,.18), rgba(18,10,18,.56) 60%, rgba(18,10,18,.72) 100%) !important;}
.reading-story-page.memory-zoomed .memory-polaroid:not(.zoom-active){opacity:.14 !important;filter:blur(1px) saturate(.92);}
/* ===== V19.58：第三页点按命中修复 + 第四页继续放大并按真实相框开窗对齐 ===== */
.album-stack-page .album-photo-stack{
width:min(70vw, 288px) !important;
top:59.1% !important;
}
.album-stack-page .album-photo-card{aspect-ratio:2 / 3 !important;}
.album-stack-page .album-photo-fill{
left:17.9% !important;
right:17.6% !important;
top:19.1% !important;
height:50.1% !important;
}
.album-stack-page .album-photo-corner{
left:7.2% !important;
top:6.4% !important;
width:26.2% !important;
}
.album-stack-page.active .album-photo-card[data-stack="0"]{
transform:translate3d(0,-18.2%,0) rotate(-.7deg) scale(1.86) !important;
}
@media(max-width:390px){
.album-stack-page .album-photo-stack{width:min(72vw, 262px) !important;}
.album-stack-page .album-photo-fill{left:17.9% !important;right:17.6% !important;top:19.1% !important;height:50.1% !important;}
.album-stack-page .album-photo-corner{left:7.1% !important;top:6.4% !important;width:26.4% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-17.4%,0) rotate(-.7deg) scale(1.80) !important;}
}
@media(max-height:740px){
.album-stack-page .album-photo-stack{top:59.2% !important;width:min(64vw, 246px) !important;}
.album-stack-page .album-photo-fill{left:17.9% !important;right:17.6% !important;top:19.1% !important;height:50.1% !important;}
.album-stack-page .album-photo-corner{left:7.2% !important;top:6.5% !important;width:26.2% !important;}
.album-stack-page.active .album-photo-card[data-stack="0"]{transform:translate3d(0,-16.3%,0) rotate(-.7deg) scale(1.74) !important;}
}
.reading-story-page .memory-photo-img{pointer-events:none;}
.reading-story-page .memory-photo-hole{pointer-events:none;}
.reading-story-page .memory-paper{pointer-events:none;}
.reading-story-page .memory-polaroid{pointer-events:auto;touch-action:none;}
/* ===== V19.59: reading card reverse-path zoom; decor visible-edge alignment ===== */
/* V19.59 portrait safety: keep the third S-curve polaroid fully in view
on 390x844 screens (previous bottom edge was clipped by ~9px). */
.reading-story-page .polaroid-center{top:67.4% !important;}
@media(max-height:760px){.reading-story-page .polaroid-center{top:64.0% !important;}}
@media(max-height:680px){.reading-story-page .polaroid-center{top:62.0% !important;}}
/* Keep originals in their floated positions throughout the zoom lifecycle. */
.reading-story-page.memory-zoomed .memory-polaroid{
opacity:.20 !important;
pointer-events:none !important;
}
.reading-story-page.memory-zoomed .memory-polaroid.zoom-source{
opacity:0 !important;
}
.reading-story-page .memory-zoom-proxy{
position:absolute;
z-index:40;
padding:0;
margin:0;
transform-origin:center center;
pointer-events:auto;
cursor:zoom-out;
will-change:left,top,width,transform;
transition:left .42s cubic-bezier(.22,.77,.23,1),
top .42s cubic-bezier(.22,.77,.23,1),
width .42s cubic-bezier(.22,.77,.23,1),
transform .42s cubic-bezier(.22,.77,.23,1);
filter:drop-shadow(0 18px 30px rgba(19,13,19,.32));
}
.reading-story-page .memory-zoom-proxy .memory-paper{
pointer-events:none;
width:100%;
}
@media(prefers-reduced-motion:reduce){
.reading-story-page .memory-zoom-proxy{transition-duration:.08s !important;}
}
/* Visible non-transparent top of corner PNG starts about 20.4% into its image.
Photo-frame non-transparent top begins at 13.2% of its full height.
At the current frame/card aspect ratio, top around 9% aligns these actual edges. */
.album-stack-page .album-photo-corner{top:9.1% !important;}
@media(max-width:390px){.album-stack-page .album-photo-corner{top:9.1% !important;}}
@media(max-height:740px){.album-stack-page .album-photo-corner{top:9.1% !important;}}
/* ===== V19.60：第五页三张图复用第三页进场与交互，布局改版 ===== */
.photo-draft-three .draft-three-layout{overflow:visible;}
.photo-draft-three .draft-photo-card{
opacity:0;
will-change:transform,opacity;
transition:opacity .56s ease,transform .82s cubic-bezier(.16,1,.3,1);
pointer-events:none;
}
.photo-draft-three .draft-three-main{left:23%;top:29%;width:54%;transform:translate3d(0,132px,0) rotate(1.2deg) scale(.82);z-index:8;}
.photo-draft-three .draft-three-left{left:2%;top:4%;width:43%;transform:translate3d(-26px,108px,0) rotate(-6deg) scale(.82);z-index:7;}
.photo-draft-three .draft-three-right{right:2%;top:7%;width:43%;transform:translate3d(26px,108px,0) rotate(6deg) scale(.82);z-index:6;}
.photo-draft-three.draft-three-open .draft-photo-card{opacity:1;pointer-events:auto;}
.photo-draft-three.draft-three-open .draft-three-main{transform:translate3d(0,0,0) rotate(1.2deg) scale(1);transition-delay:.18s;}
.photo-draft-three.draft-three-open .draft-three-left{transform:translate3d(0,0,0) rotate(-6deg) scale(1);transition-delay:.04s;}
.photo-draft-three.draft-three-open .draft-three-right{transform:translate3d(0,0,0) rotate(6deg) scale(1);transition-delay:.28s;}
.photo-draft-three .draft-photo-card .album-photo-fill{overflow:hidden;border-radius:4px;}
.photo-draft-three.draft-three-zoomed .draft-photo-card{opacity:.18 !important;pointer-events:none !important;}
.photo-draft-three.draft-three-zoomed .draft-photo-card.zoom-source{opacity:0 !important;}
.photo-draft-three .draft-three-zoom-proxy{
position:absolute;
z-index:40;
padding:0;
margin:0;
transform-origin:center center;
pointer-events:auto;
cursor:zoom-out;
will-change:left,top,width,transform;
transition:left .42s cubic-bezier(.22,.77,.23,1), top .42s cubic-bezier(.22,.77,.23,1), width .42s cubic-bezier(.22,.77,.23,1), transform .42s cubic-bezier(.22,.77,.23,1);
filter:drop-shadow(0 18px 30px rgba(19,13,19,.32));
}
.photo-draft-three .draft-three-zoom-proxy .draft-photo-card{
position:relative !important;
inset:auto !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:100% !important;
aspect-ratio:1122/1402 !important;
opacity:1 !important;
transform:none !important;
filter:none !important;
pointer-events:none !important;
}
.photo-draft-three .draft-three-zoom-proxy .album-photo-fill span,.photo-draft-three .draft-three-zoom-proxy .album-photo-fill b,.photo-draft-three .draft-three-zoom-proxy .album-photo-fill small{pointer-events:none;}
@media(max-width:390px){
.photo-draft-three .draft-three-main{top:30%;}
.photo-draft-three .draft-three-left{top:5%;}
.photo-draft-three .draft-three-right{top:8%;}
}
@media(max-height:740px){
.photo-draft-three .draft-three-main{top:28%;}
.photo-draft-three .draft-three-left{top:3%;}
.photo-draft-three .draft-three-right{top:6%;}
}
@media(prefers-reduced-motion:reduce){
.photo-draft-three .draft-photo-card,.photo-draft-three .draft-three-zoom-proxy{transition-duration:.08s !important;}
}
/* ===== V19.61：第五页进场即发牌；严格复用第三页尺寸、背景和景深 ===== */
.photo-draft-three{padding:0 !important;overflow:hidden !important;background:transparent !important;}
.photo-draft-three .reading-stage{position:absolute;inset:0;isolation:isolate;overflow:hidden;}
.photo-draft-three .reading-bg{
position:absolute;left:-5.5% !important;top:-5.5% !important;width:111% !important;height:111% !important;
object-fit:cover;object-position:center;z-index:1;
animation:readingCameraBg 12.8s ease-in-out infinite alternate !important;
}
.photo-draft-three .reading-shade{z-index:2;}
.photo-draft-three .reading-couple-wrap{z-index:3;}
.photo-draft-three .draft-three-copy{z-index:4;transition:filter .45s ease,opacity .45s ease;}
.photo-draft-three.draft-three-open .reading-bg,
.photo-draft-three.draft-three-open .reading-shade,
.photo-draft-three.draft-three-open .reading-couple-wrap,
.photo-draft-three.draft-three-open .draft-three-copy{
filter:blur(8px) saturate(.88) brightness(.82) !important;
}
.photo-draft-three.draft-three-open .draft-three-copy{opacity:.42 !important;}
/* 第五页取消旧相册底板的窄容器：照片位置直接按完整手机视口计算。 */
.photo-draft-three .draft-sheet-wrap,
.photo-draft-three.active .draft-sheet-wrap{
position:absolute !important;inset:0 !important;left:0 !important;top:0 !important;
width:100% !important;height:100% !important;aspect-ratio:auto !important;
transform:none !important;filter:none !important;transition:none !important;
opacity:1 !important;z-index:9 !important;overflow:visible !important;
pointer-events:none !important;
}
.photo-draft-three .draft-three-layout{position:absolute !important;inset:0 !important;overflow:visible !important;z-index:1 !important;}
.photo-draft-three .reading-memory-vignette{z-index:0 !important;opacity:0;transition:opacity .45s ease;}
.photo-draft-three.draft-three-open .reading-memory-vignette{opacity:1 !important;}
/* 与第三页相纸相同的纸面、白边及相片窗口几何。 */
.photo-draft-three .memory-polaroid.draft-photo-card{
position:absolute !important;bottom:auto !important;
width:min(58vw,242px) !important;max-width:242px !important;
height:auto !important;aspect-ratio:auto !important;
transform:none !important;transition:none !important;
transform-origin:center;opacity:0 !important;
pointer-events:none !important;cursor:zoom-in;touch-action:none;
will-change:translate,rotate,scale,filter,opacity;
filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));
}
.photo-draft-three .memory-paper{
width:100% !important;padding:6px 6px 11px !important;border-radius:0 !important;
border:1px solid rgba(255,255,255,.72);background:#fffdf9 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 14px rgba(66,46,42,.1);
pointer-events:none !important;
}
.photo-draft-three .memory-photo-hole{aspect-ratio:4/5 !important;border-radius:0 !important;overflow:hidden !important;position:relative;}
.photo-draft-three .memory-photo-fill{
inset:2px !important;border-radius:0 !important;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,#fffaf4,#f3e7dc) !important;border:0 !important;
}
.photo-draft-three .memory-photo-fill::before,.photo-draft-three .memory-photo-fill::after{display:none !important;content:none !important;}
.photo-draft-three .draft-three-placeholder{display:flex;flex-direction:column;align-items:center;font-size:26px;color:#bb9186;line-height:1.3;}
.photo-draft-three .draft-three-placeholder small{font-size:11px;font-weight:800;letter-spacing:1px;}
/* 第五页采用镜像的 Z 字散落，而不是第三页原有的左—右—左位置。 */
.photo-draft-three .draft-three-left{
left:auto !important;right:5% !important;top:17% !important;z-index:2 !important;
translate:10vw 112vh;rotate:7deg;scale:.82;
}
.photo-draft-three .draft-three-right{
left:5% !important;right:auto !important;top:36% !important;z-index:4 !important;
translate:-12vw 120vh;rotate:-7deg;scale:.82;
}
.photo-draft-three .draft-three-main{
left:auto !important;right:8.5% !important;top:59% !important;z-index:3 !important;
translate:2vw 128vh;rotate:5deg;scale:.82;
}
/* 从下方逐张发牌，落桌缓冲后进入原第三页式轻微漂浮。 */
.photo-draft-three.draft-three-open .draft-three-left{
opacity:1 !important;pointer-events:auto !important;
animation:draftDealTop_V1961 1.10s cubic-bezier(.16,.78,.22,1) .02s both,
draftFloatTop_V1961 5.2s ease-in-out 1.22s infinite !important;
}
.photo-draft-three.draft-three-open .draft-three-right{
opacity:1 !important;pointer-events:auto !important;
animation:draftDealMid_V1961 1.26s cubic-bezier(.15,.76,.22,1) .22s both,
draftFloatMid_V1961 5.4s ease-in-out 1.58s infinite !important;
}
.photo-draft-three.draft-three-open .draft-three-main{
opacity:1 !important;pointer-events:auto !important;
animation:draftDealBottom_V1961 1.42s cubic-bezier(.14,.74,.21,1) .48s both,
draftFloatBottom_V1961 5.3s ease-in-out 2.02s infinite !important;
}
@keyframes draftDealTop_V1961{
0%{translate:10vw 112vh;rotate:15deg;scale:.82;}
72%{translate:1px -10px;rotate:7.4deg;scale:1.01;}
88%{translate:-1px 3px;rotate:6.7deg;scale:.998;}
100%{translate:0 0;rotate:7deg;scale:1;}
}
@keyframes draftDealMid_V1961{
0%{translate:-12vw 120vh;rotate:-15deg;scale:.82;}
72%{translate:-1px -10px;rotate:-7.4deg;scale:1.01;}
88%{translate:1px 3px;rotate:-6.7deg;scale:.998;}
100%{translate:0 0;rotate:-7deg;scale:1;}
}
@keyframes draftDealBottom_V1961{
0%{translate:2vw 128vh;rotate:12deg;scale:.82;}
72%{translate:1px -10px;rotate:4.4deg;scale:1.01;}
88%{translate:-1px 3px;rotate:5.2deg;scale:.998;}
100%{translate:0 0;rotate:5deg;scale:1;}
}
@keyframes draftFloatTop_V1961{0%,100%{translate:0 0;rotate:7deg;scale:1;}50%{translate:-2px -7px;rotate:8.2deg;scale:1;}}
@keyframes draftFloatMid_V1961{0%,100%{translate:0 0;rotate:-7deg;scale:1;}50%{translate:2px -7px;rotate:-5.8deg;scale:1;}}
@keyframes draftFloatBottom_V1961{0%,100%{translate:0 0;rotate:5deg;scale:1;}50%{translate:1px -8px;rotate:3.8deg;scale:1;}}
/* 第三页真实的后期尺寸，而不是早期 62vw 草案。 */
@media(max-width:430px){
.photo-draft-three .memory-polaroid.draft-photo-card{width:min(54vw,220px) !important;max-width:220px !important;}
}
@media(max-height:760px){
.photo-draft-three .memory-polaroid.draft-photo-card{width:min(49.5vw,202px) !important;max-width:202px !important;}
.photo-draft-three .draft-three-main{top:55% !important;}
}
@media(max-height:680px){
.photo-draft-three .memory-polaroid.draft-photo-card{width:min(45vw,182px) !important;max-width:182px !important;}
.photo-draft-three .draft-three-main{top:52% !important;}
}
/* 保持 V19.59 第三页式独立放大图层与原路收回逻辑。 */
.photo-draft-three.draft-three-zoomed .draft-three-layout .draft-photo-card{opacity:.20 !important;pointer-events:none !important;}
.photo-draft-three.draft-three-zoomed .draft-three-layout .draft-photo-card.zoom-source{opacity:0 !important;}
.photo-draft-three .draft-three-zoom-proxy{z-index:40 !important;}
.photo-draft-three .draft-three-zoom-proxy .draft-photo-card{
display:block !important;position:relative !important;inset:auto !important;left:auto !important;right:auto !important;
top:auto !important;bottom:auto !important;width:100% !important;max-width:none !important;
opacity:1 !important;transform:none !important;translate:none !important;rotate:none !important;scale:1 !important;
animation:none !important;filter:none !important;pointer-events:none !important;
}
@media(prefers-reduced-motion:reduce){
.photo-draft-three.draft-three-open .draft-photo-card{animation:none !important;opacity:1 !important;translate:0 0 !important;scale:1 !important;}
}
/* ===== V19.62: 第五页始终保持第三页照片展开后的景深，不露出清晰底层 ===== */
/* 景深效果属于页面基础状态，不再以 .draft-three-open 作为切换条件。
因此从第四页/第六页滑入，或者退出第五页时均不会闪出清晰背景。 */
.photo-draft-three .reading-bg,
.photo-draft-three .reading-shade,
.photo-draft-three .reading-couple-wrap,
.photo-draft-three .draft-three-copy{
filter:blur(8px) saturate(.88) brightness(.82) !important;
}
.photo-draft-three .draft-three-copy{
opacity:.42 !important;
transition:none !important;
}
.photo-draft-three .reading-memory-vignette{
opacity:1 !important;
transition:none !important;
}
/* 三张相纸独立局部裁切，不改变第三页同款相纸尺寸/飞入/缩回几何。 */
.photo-draft-three .memory-photo-fill{
overflow:hidden !important;
}
.photo-draft-three .draft-three-photo-img{
display:block;
width:100%;
height:100%;
object-fit:cover;
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}
.photo-draft-three .draft-three-photo-img-1{object-position:50% 47%;}
.photo-draft-three .draft-three-photo-img-2{object-position:50% 55%;}
.photo-draft-three .draft-three-photo-img-3{object-position:50% 57%;}
/* ===== V19.63：酒店页真实地址 + 高德地图导航（不改动原装饰地图） ===== */
.venue-art-page .venue-location-panel{
position:absolute;
z-index:12;
left:16.0%;
top:68.0%;
width:68.0%;
padding:7px 9px 8px;
border-radius:13px;
border:1px solid rgba(202,137,113,.60);
background:rgba(255,249,240,.97);
box-shadow:0 4px 14px rgba(103,61,47,.17), inset 0 1px rgba(255,255,255,.85);
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
pointer-events:auto;
transform:translateZ(0);
}
.venue-art-page .venue-location-address{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
white-space:nowrap;
color:#99584a;
font:600 clamp(11px,2.65vw,13px)/1.25 "PingFang SC","Microsoft YaHei",sans-serif;
letter-spacing:.5px;
}
.venue-art-page .venue-location-address svg{flex:none;}
.venue-art-page .venue-nav-action{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
width:100%;
min-height:38px;
padding:8px 6px;
border-radius:999px;
border:1px solid #ae6858;
color:#fff9f1;
text-decoration:none;
background:linear-gradient(135deg,#c2776a 0%,#aa594f 100%);
box-shadow:0 2px 6px rgba(132,63,54,.18);
font:700 clamp(11px,2.7vw,13px)/1.2 "PingFang SC","Microsoft YaHei",sans-serif;
white-space:nowrap;
cursor:pointer;
touch-action:manipulation;
-webkit-tap-highlight-color:rgba(190,103,90,.20);
}
.venue-art-page .venue-nav-action:focus-visible{outline:3px solid #a85b54;outline-offset:3px;}
.venue-art-page .venue-nav-action:active{transform:scale(.97);filter:brightness(.96);}
@media(max-width:360px){
.venue-art-page .venue-location-panel{padding:6px 8px 7px;gap:3px;}
.venue-art-page .venue-nav-action{min-height:38px;}
}
/* ===== V19.64: 酒店真实静态地图预览 + 全图唤起高德地图 =====
Base map: MapMap static render of OSM road data, WGS84 112.403601,34.6019873.
Nav target: original Amap POI B0K02SW1VJ (GCJ-02).
No fake roads appear when the map is not available.
*/
.venue-art-page .venue-map-window{
border-radius:8.5% !important;
background:#e9e9db !important;
overflow:hidden !important;
}
.venue-art-page .venue-realmap-content{position:absolute;inset:0;overflow:hidden;background:#e4e6df;}
.venue-art-page .venue-realmap-fallback{
position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:7px;text-align:center;color:#a76a59;background:linear-gradient(140deg,#e4e9e0,#faf0e3);
padding:8px;font:700 12px/1.45 "PingFang SC","Microsoft YaHei",sans-serif;
}
.venue-art-page .venue-realmap-fallback-pin{font-size:25px;line-height:1;color:#bc6f5f;}
.venue-art-page .venue-realmap-fallback small{font:500 9px/1.4 "PingFang SC","Microsoft YaHei",sans-serif;color:#8e796c;}
.venue-art-page .venue-realmap-image{
position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
opacity:0;transition:opacity .42s ease;pointer-events:none;
}
.venue-art-page .venue-realmap-loaded .venue-realmap-image{opacity:1;}
.venue-art-page .venue-realmap-loaded .venue-realmap-fallback{opacity:0;}
.venue-art-page .venue-realmap-label{
position:absolute;left:50%;top:61%;transform:translateX(-50%);
font:700 10px/1.25 "PingFang SC","Microsoft YaHei",sans-serif;
background:rgba(255,251,246,.95);color:#8c5047;
border:1px solid rgba(191,108,93,.33);border-radius:10px;
padding:3px 8px;white-space:nowrap;z-index:5;
box-shadow:0 2px 6px rgba(58,35,28,.17);pointer-events:none;
}
.venue-art-page .venue-realmap-tap{
position:absolute;inset:0;z-index:6;display:block;cursor:pointer;
touch-action:manipulation;-webkit-tap-highlight-color:rgba(186,110,91,.16);
}
.venue-art-page .venue-realmap-tap:focus-visible{outline:3px solid #bc7160;outline-offset:-4px;}
.venue-art-page .venue-realmap-credit{
position:absolute;z-index:7;left:4px;bottom:6px;
color:#39444a;text-decoration:none;font:500 7px/1.2 Arial,sans-serif;
background:rgba(255,255,255,.9);padding:2px 3px;border-radius:2px;
}
.venue-art-page .venue-location-panel{top:77% !important;}
/* ===== V19.65: 修复静态地图请求与地图框 DOM 嵌套 ===== */
.venue-art-page .venue-realmap-fallback small{font-size:10px;line-height:1.45;}
.venue-art-page .venue-realmap-failed .venue-realmap-label{display:none;}
/* ===== V19.66: 真实地图接口暂不可用时的可信离线状态；修复剪裁层 =====
地图区域的 overflow 仅裁切地图内容；相框 / 气球 / 信封 / 花饰作为兄弟层完整显示。
已撤下国内加载为空白的 MapMap 图层，待取得真实静态地图后再嵌入。
*/
.venue-art-page .venue-map-frame-wrap{overflow:visible !important;}
.venue-art-page .venue-map-window{overflow:hidden !important;z-index:1;}
.venue-art-page .venue-realmap-offline{
position:absolute;inset:0;overflow:hidden;
background:
radial-gradient(circle at 18% 18%,rgba(221,201,164,.30),transparent 48%),
radial-gradient(circle at 88% 78%,rgba(171,198,170,.30),transparent 55%),
linear-gradient(135deg,#EEE8D8 0%,#F8F2E6 60%,#E8ECE0 100%);
}
.venue-art-page .venue-map-offline-content{
position:absolute;inset:0;display:flex;flex-direction:column;
justify-content:center;align-items:center;gap:8px;
text-align:center;padding:7px 10px 28px;pointer-events:none;
}
.venue-art-page .venue-map-offline-pin{filter:drop-shadow(0 3px 5px rgba(105,66,55,.20));}
.venue-art-page .venue-map-offline-name{
font:700 clamp(12px,3.4vw,16px)/1.25 "PingFang SC","Microsoft YaHei",sans-serif;
color:#9F5E50;white-space:nowrap;
}
.venue-art-page .venue-map-offline-address{
font:600 clamp(10px,2.7vw,12px)/1.35 "PingFang SC","Microsoft YaHei",sans-serif;
color:#947B6A;white-space:nowrap;
}
.venue-art-page .venue-map-offline-note{
margin-top:2px;font:600 clamp(9px,2.5vw,11px)/1.35 "PingFang SC","Microsoft YaHei",sans-serif;
color:#B07362;border-bottom:1px solid rgba(176,115,98,.4);padding-bottom:3px;
}
.venue-art-page .venue-realmap-tap{z-index:5;}
.venue-art-page .venue-map-frame{z-index:3;pointer-events:none;}
.venue-art-page .venue-location-panel{z-index:12;}
.venue-art-page .venue-envelope,.venue-art-page .venue-flower,.venue-art-page .venue-heart-balloon{overflow:visible !important;}
/* ===== V19.67: 第九页改为内置真实地图截图，整张地图可点击导航 ===== */
.venue-art-page .venue-map-window{background:#e4ddd0 !important;}
.venue-art-page .venue-realmap-photo{position:absolute;inset:0;overflow:hidden;background:#e4ddd0;}
.venue-art-page .venue-realmap-photo-img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;user-select:none;-webkit-user-drag:none;}
.venue-art-page .venue-realmap-content.venue-realmap-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 32%,rgba(62,39,32,.06));pointer-events:none;}
.venue-art-page .venue-realmap-label{left:50%;top:auto;bottom:8px;transform:translateX(-50%);font:700 10px/1.2 "PingFang SC","Microsoft YaHei",sans-serif;background:rgba(255,249,240,.92);color:#9e6253;border:1px solid rgba(191,108,93,.35);border-radius:999px;padding:4px 10px;white-space:nowrap;z-index:4;box-shadow:0 2px 6px rgba(58,35,28,.12);pointer-events:none;}
.venue-art-page .venue-realmap-tap{z-index:6;}
@media(max-width:360px){.venue-art-page .venue-realmap-label{font-size:9px;padding:3px 9px;bottom:7px;}}
/* ===== V19.68: 使用新版真实地图截图；红点居中偏下；地址牌移到心心下方 ===== */
.venue-art-page .venue-map-window{background:#e4ddd0 !important;}
.venue-art-page .venue-realmap-photo-img{object-position:center center !important;}
.venue-art-page .venue-location-panel{top:78.6% !important;left:19.3% !important;width:61.4% !important;padding:6px 8px 7px !important;gap:0 !important;background:rgba(255,249,240,.93) !important;}
.venue-art-page .venue-location-address{display:none !important;}
.venue-art-page .venue-nav-action{min-height:37px !important;padding:8px 10px !important;}
.venue-art-page .venue-address-tag{position:absolute;z-index:13;right:3.2%;top:22.4%;display:flex;align-items:center;justify-content:center;min-width:124px;max-width:148px;padding:7px 12px;border-radius:999px;border:1px solid rgba(201,137,113,.62);background:rgba(255,249,240,.97);box-shadow:0 4px 12px rgba(103,61,47,.16), inset 0 1px rgba(255,255,255,.85);color:#99584a;font:600 clamp(10px,2.6vw,12px)/1.2 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:.4px;white-space:nowrap;}
.venue-art-page .venue-address-tag::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:2px;height:10px;background:linear-gradient(180deg,rgba(159,93,80,.75),rgba(159,93,80,0));}
.venue-art-page .venue-address-tag svg{flex:none;margin-right:5px;}
@media(max-width:360px){.venue-art-page .venue-address-tag{right:1.8%;top:22.7%;min-width:116px;padding:6px 11px;font-size:10px;}}
/* ===== V19.69: 地址牌与导航按钮移到底部爱心分隔线下方 ===== */
.venue-art-page .venue-address-tag{position:absolute !important;left:50% !important;right:auto !important;top:auto !important;bottom:11.2% !important;transform:translateX(-50%) !important;z-index:12 !important;min-width:144px !important;max-width:172px !important;padding:7px 14px !important;}
.venue-art-page .venue-address-tag::before{display:none !important;}
.venue-art-page .venue-location-panel{position:absolute !important;left:50% !important;top:auto !important;bottom:3.9% !important;transform:translateX(-50%) !important;z-index:12 !important;width:62.5% !important;max-width:252px !important;padding:6px 8px 7px !important;}
.venue-art-page .venue-nav-action{min-height:40px !important;}
@media(max-width:360px){.venue-art-page .venue-address-tag{bottom:11.8% !important;min-width:132px !important;padding:6px 12px !important;font-size:10px !important;} .venue-art-page .venue-location-panel{bottom:4.3% !important;width:65% !important;}}
/* ===== V19.70: 去掉“点击地图·一键导航”，地址牌移入地图底部；缩小底部导航按钮并避开心形分隔 ===== */
.venue-art-page .venue-realmap-label{display:none !important;}
.venue-art-page .venue-address-tag{position:absolute !important;left:50% !important;right:auto !important;top:69.7% !important;bottom:auto !important;transform:translateX(-50%) !important;z-index:12 !important;min-width:148px !important;max-width:182px !important;padding:7px 14px !important;box-shadow:0 4px 12px rgba(103,61,47,.16), inset 0 1px rgba(255,255,255,.85) !important;}
.venue-art-page .venue-address-tag::before{display:none !important;}
.venue-art-page .venue-location-panel{position:absolute !important;left:50% !important;top:auto !important;bottom:1.8% !important;transform:translateX(-50%) !important;z-index:12 !important;width:54% !important;max-width:214px !important;padding:4px 6px 5px !important;background:rgba(255,249,240,.95) !important;}
.venue-art-page .venue-nav-action{min-height:34px !important;padding:6px 10px !important;font-size:13px !important;border-radius:16px !important;}
.venue-art-page .venue-nav-action svg{width:15px !important;height:15px !important;}
@media(max-width:360px){.venue-art-page .venue-address-tag{top:70.1% !important;min-width:138px !important;font-size:10px !important;padding:6px 12px !important;} .venue-art-page .venue-location-panel{bottom:1.9% !important;width:57% !important;max-width:204px !important;} .venue-art-page .venue-nav-action{min-height:33px !important;font-size:12.5px !important;}}
/* ===== V19.71: 地址牌与地图红点底尖垂直对齐，降到信封下层；底部导航按钮与小心心横向居中并略上移 ===== */
.venue-art-page .venue-address-tag{left:47.7% !important; top:67.9% !important; bottom:auto !important; z-index:9 !important; min-width:146px !important; max-width:176px !important; padding:7px 14px !important;}
.venue-art-page .venue-location-panel{left:50% !important; bottom:2.8% !important; top:auto !important; width:51.5% !important; max-width:206px !important; z-index:12 !important; padding:4px 6px 5px !important;}
.venue-art-page .venue-nav-action{min-height:34px !important; padding:6px 10px !important; font-size:13px !important; border-radius:16px !important;}
@media(max-width:390px){.venue-art-page .venue-address-tag{left:47.8% !important; top:68.2% !important; min-width:142px !important; max-width:170px !important;} .venue-art-page .venue-location-panel{bottom:3.0% !important; width:52.5% !important; max-width:202px !important;}}
@media(max-width:360px){.venue-art-page .venue-address-tag{left:47.9% !important; top:68.5% !important; min-width:136px !important; padding:6px 12px !important; font-size:10px !important;} .venue-art-page .venue-location-panel{bottom:3.1% !important; width:55% !important; max-width:196px !important;} .venue-art-page .venue-nav-action{min-height:33px !important; font-size:12.5px !important;}}
/* ===== V19.72：第六页改为与第五页同底图/景深/发牌交互，仅保留两张同尺寸照片 ===== */
.photo-draft-two{padding:0 !important;overflow:hidden !important;background:transparent !important;}
.photo-draft-two .reading-stage{position:absolute;inset:0;isolation:isolate;overflow:hidden;}
.photo-draft-two .reading-bg{
position:absolute;left:-5.5% !important;top:-5.5% !important;width:111% !important;height:111% !important;
object-fit:cover;object-position:center;z-index:1;
animation:readingCameraBg 12.8s ease-in-out infinite alternate !important;
}
.photo-draft-two .reading-shade{z-index:2;}
.photo-draft-two .reading-couple-wrap{z-index:3;}
.photo-draft-two .reading-bg,
.photo-draft-two .reading-shade,
.photo-draft-two .reading-couple-wrap,
.photo-draft-two .draft-two-copy{filter:blur(8px) saturate(.88) brightness(.82) !important;}
.photo-draft-two .draft-two-copy{z-index:4;opacity:.42 !important;transition:none !important;}
.photo-draft-two .draft-sheet-wrap,
.photo-draft-two.active .draft-sheet-wrap{
position:absolute !important;inset:0 !important;left:0 !important;top:0 !important;
width:100% !important;height:100% !important;aspect-ratio:auto !important;
transform:none !important;filter:none !important;transition:none !important;
opacity:1 !important;z-index:9 !important;overflow:visible !important;
pointer-events:none !important;
}
.photo-draft-two .draft-two-layout{position:absolute !important;inset:0 !important;overflow:visible !important;z-index:1 !important;}
.photo-draft-two .reading-memory-vignette{z-index:0 !important;opacity:1 !important;transition:none !important;}
.photo-draft-two .memory-polaroid.draft-photo-card{
position:absolute !important;bottom:auto !important;
width:min(56vw,232px) !important;max-width:232px !important;
height:auto !important;aspect-ratio:auto !important;
transform:none !important;transition:none !important;
transform-origin:center;opacity:0 !important;
pointer-events:none !important;cursor:zoom-in;touch-action:none;
will-change:translate,rotate,scale,filter,opacity;
filter:drop-shadow(0 16px 26px rgba(20,12,18,.25));
}
.photo-draft-two .memory-paper{
width:100% !important;padding:6px 6px 11px !important;border-radius:0 !important;
border:1px solid rgba(255,255,255,.72);background:#fffdf9 !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 14px rgba(66,46,42,.1);
pointer-events:none !important;
}
.photo-draft-two .memory-photo-hole{aspect-ratio:4/5 !important;border-radius:0 !important;overflow:hidden !important;position:relative;}
.photo-draft-two .memory-photo-fill{
inset:2px !important;border-radius:0 !important;display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,#fffaf4,#f3e7dc) !important;border:0 !important;overflow:hidden !important;
}
.photo-draft-two .memory-photo-fill::before,.photo-draft-two .memory-photo-fill::after{display:none !important;content:none !important;}
.photo-draft-two .draft-two-photo-img{
display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.photo-draft-two .draft-two-photo-img-1{object-position:50% 50%;}
.photo-draft-two .draft-two-photo-img-2{object-position:50% 46%;}
/* 两张照片采用与第五页不同的对角布局，但尺寸完全一致。 */
.photo-draft-two .draft-two-left{
left:6% !important;right:auto !important;top:17% !important;z-index:3 !important;
translate:-10vw 118vh;rotate:-8deg;scale:.82;
}
.photo-draft-two .draft-two-right{
left:auto !important;right:6% !important;top:52.5% !important;z-index:4 !important;
translate:10vw 124vh;rotate:7deg;scale:.82;
}
.photo-draft-two.draft-two-open .draft-two-left{
opacity:1 !important;pointer-events:auto !important;
animation:draftTwoDealLeft_V1972 1.10s cubic-bezier(.16,.78,.22,1) .06s both,
draftTwoFloatLeft_V1972 5.2s ease-in-out 1.22s infinite !important;
}
.photo-draft-two.draft-two-open .draft-two-right{
opacity:1 !important;pointer-events:auto !important;
animation:draftTwoDealRight_V1972 1.24s cubic-bezier(.15,.76,.22,1) .28s both,
draftTwoFloatRight_V1972 5.35s ease-in-out 1.58s infinite !important;
}
@keyframes draftTwoDealLeft_V1972{
0%{translate:-10vw 118vh;rotate:-16deg;scale:.82;}
72%{translate:-1px -10px;rotate:-8.4deg;scale:1.01;}
88%{translate:1px 3px;rotate:-7.7deg;scale:.998;}
100%{translate:0 0;rotate:-8deg;scale:1;}
}
@keyframes draftTwoDealRight_V1972{
0%{translate:10vw 124vh;rotate:15deg;scale:.82;}
72%{translate:1px -10px;rotate:7.4deg;scale:1.01;}
88%{translate:-1px 3px;rotate:6.7deg;scale:.998;}
100%{translate:0 0;rotate:7deg;scale:1;}
}
@keyframes draftTwoFloatLeft_V1972{0%,100%{translate:0 0;rotate:-8deg;scale:1;}50%{translate:-2px -7px;rotate:-6.8deg;scale:1;}}
@keyframes draftTwoFloatRight_V1972{0%,100%{translate:0 0;rotate:7deg;scale:1;}50%{translate:2px -8px;rotate:8.2deg;scale:1;}}
.photo-draft-two.draft-two-zoomed .draft-two-layout .draft-photo-card{opacity:.20 !important;pointer-events:none !important;}
.photo-draft-two.draft-two-zoomed .draft-two-layout .draft-photo-card.zoom-source{opacity:0 !important;}
.draft-two-zoom-proxy{
position:absolute;
z-index:40;
padding:0;
margin:0;
transform-origin:center center;
pointer-events:auto;
cursor:zoom-out;
will-change:left,top,width,transform;
transition:left .42s cubic-bezier(.22,.77,.23,1), top .42s cubic-bezier(.22,.77,.23,1), width .42s cubic-bezier(.22,.77,.23,1), transform .42s cubic-bezier(.22,.77,.23,1);
filter:drop-shadow(0 18px 30px rgba(19,13,19,.32));
}
.photo-draft-two .draft-two-zoom-proxy .draft-photo-card{
display:block !important;position:relative !important;inset:auto !important;left:auto !important;right:auto !important;
top:auto !important;bottom:auto !important;width:100% !important;aspect-ratio:1122/1402 !important;max-width:none !important;
opacity:1 !important;transform:none !important;translate:none !important;rotate:none !important;scale:1 !important;
animation:none !important;filter:none !important;pointer-events:none !important;
}
@media(prefers-reduced-motion:reduce){
.photo-draft-two .draft-photo-card,.photo-draft-two .draft-two-zoom-proxy{transition-duration:.08s !important;}
}
@media(max-width:430px){
.photo-draft-two .memory-polaroid.draft-photo-card{width:min(56vw,228px) !important;max-width:228px !important;}
}
@media(max-height:760px){
.photo-draft-two .memory-polaroid.draft-photo-card{width:min(51.5vw,210px) !important;max-width:210px !important;}
.photo-draft-two .draft-two-right{top:50.5% !important;}
}
@media(max-height:680px){
.photo-draft-two .memory-polaroid.draft-photo-card{width:min(47vw,190px) !important;max-width:190px !important;}
.photo-draft-two .draft-two-right{top:47.5% !important;}
}
@media(prefers-reduced-motion:reduce){
.photo-draft-two.draft-two-open .draft-photo-card{animation:none !important;opacity:1 !important;translate:0 0 !important;scale:1 !important;}
}
/* ===== V19.75 第六页照片放大：修复响应式规则覆盖放大层宽度 ===== */
/* 放大图层内部相纸必须遵循代理容器的动画宽度，而不是原始相纸的 vw 断点。
本规则刻意放在所有 max-width / max-height 断点之后，保证各手机屏幕一致。 */
.photo-draft-two .draft-two-zoom-proxy > .memory-polaroid.draft-photo-card{
position:relative !important;
left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
width:100% !important;max-width:none !important;min-width:0 !important;
height:auto !important;aspect-ratio:1122 / 1402 !important;
translate:none !important;rotate:none !important;scale:1 !important;transform:none !important;
opacity:1 !important;animation:none !important;
pointer-events:none !important;box-sizing:border-box !important;
}
.photo-draft-two .draft-two-zoom-proxy > .memory-polaroid.draft-photo-card > .memory-paper{
box-sizing:border-box !important;width:100% !important;
}
/* ===== V19.76：按用户反馈微调第四/第五页 ===== */
/* 第四页：删除左上角带蝴蝶结的三角装饰。 */
.album-stack-page .album-photo-corner{
display:none !important;
}
/* 第五页：去掉景深背景上原先的预留文案。 */
.photo-draft-three .draft-three-copy{
display:none !important;
}
/* ===== V19.77：第十一页宾客回执（隔离样式，不改变前十页） ===== */
.rsvp-page{padding:0 !important;overflow:hidden !important;background:#fce6e5 !important;}
.rsvp-page .rsvp-stage{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;
padding:calc(32px + env(safe-area-inset-top)) 16px calc(17px + env(safe-area-inset-bottom));
background:radial-gradient(ellipse at 14% 12%,rgba(255,244,218,.91),transparent 53%),
radial-gradient(ellipse at 89% 77%,rgba(255,215,218,.85),transparent 61%),
linear-gradient(160deg,#fdf2ee,#ffe5e5 57%,#fae5e6);color:#875552;text-align:center;}
.rsvp-page .rsvp-stage:before,.rsvp-page .rsvp-stage:after{content:'✧';position:absolute;pointer-events:none;color:rgba(193,109,114,.38);font-size:23px;}
.rsvp-page .rsvp-stage:before{top:18%;left:6%;}.rsvp-page .rsvp-stage:after{top:40%;right:5%;}
.rsvp-page .rsvp-ornament{position:absolute;pointer-events:none;color:#eab7a7;opacity:.45;font-size:45px;z-index:0;}
.rsvp-page .rsvp-ornament-left{left:-9px;top:15%;transform:rotate(20deg);}
.rsvp-page .rsvp-ornament-right{right:6%;bottom:14%;transform:rotate(-15deg);}
.rsvp-page .rsvp-heading{position:relative;z-index:1;margin:auto auto 12px;max-width:440px;}
.rsvp-page .rsvp-kicker{font:700 10px/1.2 Georgia,serif;letter-spacing:3px;color:#bb7777;}
.rsvp-page .rsvp-heading h2{margin:8px 0 8px;font-size:clamp(26px,7.3vw,33px);font-family:'Songti SC','STSong','SimSun',serif;letter-spacing:2px;color:#aa6266;font-weight:750;}
.rsvp-page .rsvp-heading p{margin:0;font-size:12px;letter-spacing:1px;color:#a8776b;}
.rsvp-page .rsvp-heading-divider{height:15px;display:flex;align-items:center;justify-content:center;}
.rsvp-page .rsvp-heading-divider:before,.rsvp-page .rsvp-heading-divider:after{content:'';display:block;width:57px;height:1px;background:#dfb8b0;}
.rsvp-page .rsvp-heading-divider span{padding:0 13px;font-size:11px;color:#d08f92;}
.rsvp-page .rsvp-form-shell{position:relative;z-index:1;max-width:445px;margin:0 auto;background:rgba(255,252,249,.87);border:1px solid #f5d4cf;
border-radius:20px;box-shadow:0 14px 35px rgba(164,95,102,.12),inset 0 1px 0 rgba(255,255,255,.85);padding:17px 20px 15px;text-align:left;}
.rsvp-page .rsvp-intro{font-size:12px;text-align:center;color:#987571;line-height:1.55;margin:0 0 12px;}
.rsvp-page .rsvp-form{display:flex;flex-direction:column;gap:10px;}
.rsvp-page .rsvp-field{display:flex;flex-direction:column;gap:5px;color:#865653;font-size:12px;font-weight:700;}
.rsvp-page .rsvp-field em{font-style:normal;color:#ca737a;}
.rsvp-page .rsvp-field input,.rsvp-page .rsvp-field select,.rsvp-page .rsvp-companion-grid input{
box-sizing:border-box !important;display:block;width:100%;height:41px;border-radius:11px !important;border:1px solid #ead2cd !important;
background:#fffaf8 !important;color:#6d514d !important;outline:none;font:400 14px/1.3 'PingFang SC','Microsoft YaHei',sans-serif !important;
padding:9px 12px !important;box-shadow:none !important;appearance:auto !important;}
.rsvp-page .rsvp-field input:focus,.rsvp-page .rsvp-field select:focus,.rsvp-page .rsvp-companion-grid input:focus{border-color:#d99298 !important;box-shadow:0 0 0 2px rgba(220,149,153,.14) !important;}
.rsvp-page .rsvp-field input::placeholder,.rsvp-page .rsvp-companion-grid input::placeholder{color:#bda9a4 !important;}
.rsvp-page .rsvp-companions{margin-top:0;color:#865653;}
.rsvp-page .rsvp-companions[hidden]{display:none !important;}
.rsvp-page .rsvp-companions-label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;}
.rsvp-page .rsvp-companions-label small{font-weight:400;color:#aa908c;}
.rsvp-page .rsvp-companion-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.rsvp-page .rsvp-companion-grid input{height:37px;font-size:12px !important;padding:7px 10px !important;}
.rsvp-page .rsvp-consent{display:flex;align-items:flex-start;gap:8px;margin:1px 0 0;color:#98817c;line-height:1.5;font-size:10.5px;}
.rsvp-page .rsvp-consent input{appearance:auto !important;flex:none;width:14px;height:14px;margin:1px 0 0;accent-color:#ce8389;}
.rsvp-page .rsvp-submit{display:flex;align-items:center;justify-content:center;gap:9px;height:43px;width:100%;margin-top:1px;color:#fff8f5;font-size:14px;font-weight:700;letter-spacing:2px;
background:linear-gradient(105deg,#c9777e,#dc9a9b);border:0;border-radius:24px;box-shadow:0 6px 13px rgba(188,103,108,.24);cursor:pointer;}
.rsvp-page .rsvp-submit:disabled{opacity:.64;cursor:wait;}
.rsvp-page .rsvp-submit span{font-size:19px;line-height:1;}
.rsvp-page .rsvp-status{margin:0;text-align:center;line-height:1.4;font-size:10.5px;color:#997d76;min-height:28px;}
.rsvp-page .rsvp-status[data-state=success]{color:#3d7c69;font-weight:700;}
.rsvp-page .rsvp-status[data-state=error]{color:#ac525a;font-weight:700;}
.rsvp-page .rsvp-back{background:none;border:0;color:#a16f73;font-size:11px;cursor:pointer;margin:9px auto 1px;padding:7px 20px;display:block;position:relative;z-index:1;}
.rsvp-page .rsvp-footer{font:400 10px/1.5 Georgia,serif;color:#b68183;letter-spacing:1px;margin:0;}
.rsvp-page .rsvp-honey{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;left:-9999px !important;top:auto !important;}
@media(max-height:780px){
.rsvp-page .rsvp-stage{padding-top:calc(18px + env(safe-area-inset-top));}
.rsvp-page .rsvp-heading{margin-bottom:7px;}
.rsvp-page .rsvp-heading h2{margin:5px 0;}
.rsvp-page .rsvp-form-shell{padding:12px 16px 10px;}
.rsvp-page .rsvp-intro{margin-bottom:8px;}
.rsvp-page .rsvp-form{gap:7px;}
.rsvp-page .rsvp-field input,.rsvp-page .rsvp-field select{height:38px;}
.rsvp-page .rsvp-submit{height:40px;}
}
@media(max-width:350px){
.rsvp-page .rsvp-stage{padding-left:11px;padding-right:11px;}
.rsvp-page .rsvp-form-shell{padding-left:13px;padding-right:13px;}
}
/* ===== V19.79: 轻提示/白箭头/回执入口/宴会厅/BGM ===== */
.wedding-interaction-hint{
position:fixed;left:50%;bottom:calc(79px + env(safe-area-inset-bottom));
z-index:2305;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
color:#fffaf6;text-shadow:0 2px 8px rgba(72,37,41,.74),0 1px 2px rgba(44,30,35,.56);
font:700 13px/1.5 'PingFang SC','Microsoft YaHei',sans-serif;
white-space:nowrap;letter-spacing:.5px;pointer-events:none;opacity:0;
transform:translate3d(-50%,12px,0);transition:opacity .55s ease,transform .55s ease;
filter:drop-shadow(0 2px 7px rgba(46,27,36,.18));
}
.wedding-interaction-hint.is-visible{opacity:1;transform:translate3d(-50%,0,0);}
.wedding-hint-chevron{display:block;width:36px;height:36px;flex:0 0 36px;overflow:visible;animation:weddingHintBounceV1979 1.65s ease-in-out infinite;}
.wedding-hint-chevron path{stroke:#fffaf6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;}
.wedding-hint-message{display:block;border-radius:100px;padding:5px 12px;background:rgba(118,75,73,.29);border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 15px rgba(65,32,36,.13);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.wedding-hint-arrow{display:none;width:76px;height:62px;position:absolute;left:109px;top:31px;filter:drop-shadow(0 1px 3px rgba(80,50,54,.7));animation:weddingArrowFloatV1979 1.75s ease-in-out infinite;}
.wedding-interaction-hint[data-kind="photo"]{bottom:auto;left:0;top:0;align-items:flex-start;transform:translate3d(0,8px,0);}
.wedding-interaction-hint[data-kind="photo"].is-visible{transform:translate3d(0,0,0);}
.wedding-interaction-hint[data-kind="photo"] .wedding-hint-chevron{display:none;}
.wedding-interaction-hint[data-kind="photo"] .wedding-hint-message{font-size:12px;padding:5px 9px;color:#fff;background:rgba(113,72,80,.53);border-color:rgba(255,255,255,.44);}
.wedding-interaction-hint[data-kind="photo"] .wedding-hint-arrow{display:block;}
.wedding-interaction-hint[data-kind="photo"].arrow-above .wedding-hint-arrow{top:28px;}
.wedding-interaction-hint[data-kind="photo"].arrow-below .wedding-hint-arrow{top:-66px;transform:scaleY(-1);animation:none;}
@keyframes weddingHintBounceV1979{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes weddingArrowFloatV1979{0%,100%{translate:0 0;}50%{translate:2px 3px;}}
@media(max-width:360px){.wedding-interaction-hint{bottom:calc(75px + env(safe-area-inset-bottom));font-size:12px;}}
/* 第十页独立入口，不遮挡中心爱心和已有结尾文案。 */
.finale .final-rsvp-cta{
position:absolute;left:50%;bottom:calc(25px + env(safe-area-inset-bottom));z-index:2350;
transform:translate(-50%,12px);opacity:0;pointer-events:none;
display:flex;align-items:center;justify-content:center;gap:9px;
min-width:174px;min-height:42px;padding:8px 17px;border-radius:999px;
border:1px solid rgba(255,255,255,.83);
background:linear-gradient(115deg,rgba(182,91,106,.97),rgba(214,130,141,.97));
color:#fff9f6;box-shadow:0 8px 20px rgba(133,58,80,.25),inset 0 1px rgba(255,255,255,.3);
font:700 13px/1.3 'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:1px;
transition:opacity .55s ease,transform .55s ease;cursor:pointer;
}
.finale.active .final-rsvp-cta{opacity:1;pointer-events:auto;transform:translate(-50%,0);transition-delay:1.05s;}
.finale .final-rsvp-cta .cta-heart{font-size:18px;line-height:1;}
.finale .final-rsvp-cta:active{scale:.98;}
@media(max-height:720px){.finale .final-rsvp-cta{bottom:calc(12px + env(safe-area-inset-bottom));min-height:38px;}}
/* 二楼·浮光厅：独立于酒店名，贴在相框上缘但不覆盖地图窗口。 */
.venue-art-page .venue-hall-label{
position:absolute;left:50%;top:33.6%;transform:translateX(-50%);
z-index:8;white-space:nowrap;pointer-events:none;
padding:3px 13px 4px;border-radius:99px;
color:#a45b59;background:rgba(255,249,241,.88);border:1px solid rgba(206,143,129,.55);
box-shadow:0 3px 11px rgba(102,61,58,.12);
font:700 clamp(11px,3.1vw,13px)/1.4 'PingFang SC','Microsoft YaHei',sans-serif;
letter-spacing:1.4px;
}
/* 页面左下角循环音乐开关。 */
.wedding-music-toggle{
position:fixed;left:calc(14px + env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom));
width:42px;height:42px;z-index:3005;display:flex;align-items:center;justify-content:center;
border-radius:50%;border:1.5px solid rgba(255,255,255,.84);
color:#fff9f4;background:rgba(151,88,102,.73);
box-shadow:0 4px 17px rgba(104,54,69,.25),inset 0 1px rgba(255,255,255,.2);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.wedding-music-toggle svg{width:22px;height:22px;position:absolute;}
.wedding-music-toggle .wedding-music-note{display:none;}
.wedding-music-toggle .wedding-music-muted{display:block;}
.wedding-music-toggle[data-playing="true"]{background:rgba(187,96,119,.92);}
.wedding-music-toggle[data-playing="true"] .wedding-music-note{display:block;animation:weddingMusicV1979 2.6s ease-in-out infinite;}
.wedding-music-toggle[data-playing="true"] .wedding-music-muted{display:none;}
@keyframes weddingMusicV1979{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}
.wedding-music-toast{position:fixed;bottom:calc(67px + env(safe-area-inset-bottom));left:14px;z-index:3005;
max-width:250px;padding:7px 11px;font-size:11px;color:#fff;background:rgba(93,57,61,.8);
border-radius:9px;opacity:0;transform:translateY(5px);pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
.wedding-music-toast.visible{opacity:1;transform:translateY(0);}
/* ===== V19.81 地图页：统一相框、宴会厅标识与高德按钮的水平视觉轴，并微抬导航按钮 =====
Map frame after final layout overrides: left 10.7%, width 73.5%; center = 47.45% of stage.
Visually center both pill labels at 47.6%, close to the existing address tag at 47.7-47.9%.
Preserve existing responsive bottom offsets, raise nav panel 8px only.
*/
.venue-art-page .venue-hall-label,
.venue-art-page .venue-location-panel{
left:47.6% !important;
}
.venue-art-page .venue-location-panel{
bottom:calc(2.8% + 8px) !important;
}
@media (max-width:390px){
.venue-art-page .venue-location-panel{bottom:calc(3.0% + 8px) !important;}
}
@media (max-width:360px){
.venue-art-page .venue-location-panel{bottom:calc(3.1% + 8px) !important;}
}
/* ===== V19.83: unified progress-bar top anchor across mobile browsers =====
Both overlays use the top edge of the WEB CONTENT VIEWPORT instead of
mixing CSS top:0 with browser-specific safe-area-inset-top values.
.final-mode intentionally stays vertically centered for the last page.
Only in standalone/fullscreen (where app content may extend beneath the
system cutout) do both receive the SAME safe-area offset.
*/
:root { --wedding-progress-top: 0px; }
.progress {
top:var(--wedding-progress-top) !important;
margin-top:0 !important;
}
.floating-story:not(.final-mode) {
top:calc(var(--wedding-progress-top) + 4px) !important;
margin-top:0 !important;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
:root { --wedding-progress-top: env(safe-area-inset-top, 0px); }
}
/* ===== V19.84 | shared visual viewport + collision-safe responsive layout =====
* Browser address bars change the visual viewport independently of CSS svh/dvh.
* A single measured viewport variable drives all full-screen illustrated canvases.
* No visual asset coordinates or photographic animation settings are altered.
*/
:root { --wedding-view-h: 100svh; --wedding-rail-scale: 1; }
.deck { height:var(--wedding-view-h) !important; max-height:var(--wedding-view-h) !important; }
.encounter-stage { height:var(--wedding-view-h) !important; }
.date-art-stage { height:100% !important; }
/* V19.85: Do not recalculate art-board magnification when browser chrome opens,
* closes, or a scene is entered. 100svh is the stable small-viewport unit.
* All art layers keep the same coordinates; only their clipping viewport changes. */
.countdown-art-stage,
.date-art-board,
.venue-art-stage {
width:max(100vw, calc(var(--wedding-art-h, 100svh) * 941 / 1672)) !important;
}
/* V19.85: One rail size for ALL normal story pages. The scale is computed
* once from the stable small viewport, not per scene or caption position.
* This also keeps the encounter bridge's hidden rail target consistent. */
.floating-story.visible:not(.final-mode) {
transform:translate(-50%,0) scale(var(--wedding-rail-scale, .85)) !important;
transform-origin:50% 0 !important;
}
.floating-story:not(.final-mode){
height:var(--wedding-rail-natural-height, 122px) !important;
}
.floating-story:not(.final-mode) .float-scene{
max-height:var(--wedding-rail-scene-h, 92px) !important;
}
/* Finale: allocate three independent regions — heading, flexible illustration,
* closing copy. Prevent the historical 300px minimum illustration from forcing
* the bottom copy out of its card on a short viewport. */
.finale {
--final-top-gap:clamp(74px, calc(var(--wedding-view-h) * .168), 142px);
--final-bottom-gap:clamp(65px, calc(var(--wedding-view-h) * .108), 91px);
padding:var(--final-top-gap) 16px var(--final-bottom-gap) !important;
align-items:flex-start !important;
}
.finale .final-card {
height:min(620px, max(290px, calc(var(--wedding-view-h) - var(--final-top-gap) - var(--final-bottom-gap)))) !important;
max-height:calc(var(--wedding-view-h) - var(--final-top-gap) - var(--final-bottom-gap)) !important;
min-height:0 !important;
flex-shrink:0 !important;
}
.finale .final-content {
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
min-height:0 !important;
overflow:visible !important;
}
.finale .final-content h2 {
font-size:clamp(21px,6.3vw,29px) !important;
line-height:1.15 !important;
margin-bottom:0 !important;
flex-shrink:0;
}
.finale .final-visual-zone {
flex:1 1 0 !important;
min-height:0 !important;
height:auto !important;
}
.finale .ending {
font-size:clamp(7px,2.1vw,9px) !important;
line-height:1.25 !important;
flex-shrink:0;
text-align:center;
}
/* Full-body wedding illustration is kept within the measured free gap between
* finale heading and thank-you caption rather than anchored to 59% of screen. */
.floating-story.final-mode {
top:var(--final-center-y, 56vh) !important;
height:var(--final-couple-height, 225px) !important;
transform:translate(-50%,-50%) scale(1) !important;
margin-top:0 !important;
}
.floating-story.final-mode .float-together {
width:var(--final-couple-width, 270px) !important;
height:var(--final-couple-height, 225px) !important;
max-width:none !important;
max-height:none !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
object-fit:contain !important;
}
.final-heart {
top:var(--final-center-y, 56vh) !important;
transform:translate(-50%,-50%) scale(calc(.15 * var(--final-size-scale, 1))) !important;
}
.final-heart.show {
transform:translate(-50%,-50%) scale(calc(.84 * var(--final-size-scale, 1))) !important;
}
/* Preserve CTA below the visual panel on smaller phones. */
.finale .final-rsvp-cta {
bottom:max(12px, env(safe-area-inset-bottom)) !important;
}
@media(max-height:600px){
.finale .final-card {border-radius:25px !important;}
.finale .final-content {inset:7% 8% 6% !important;}
.finale .final-rsvp-cta {min-height:36px !important;padding:5px 13px !important;}
}
/* Avoid automatic mobile/WebView font boosting on fixed-coordinate art pages;
* this does not disable the browser's own accessibility zoom controls. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* V19.95 · Single-layer canvas sequence. Do not animate opacity of WebP ![]()
s. */
.encounter-story-page.ink-reveal-playing .encounter-photo-img{
opacity:0 !important;
animation:none !important;
filter:none !important;
transform:none !important;
transition:none !important;
}
.encounter-story-page.ink-reveal-playing .encounter-photo-bride{
opacity:0 !important;
animation:none !important;
}
.encounter-frame-canvas{
position:absolute !important;
inset:0 !important;
display:block;
width:100% !important;
height:100% !important;
z-index:2;
pointer-events:none;
opacity:0;
transform:none !important;
filter:none !important;
animation:none !important;
transition:none !important;
}
.encounter-story-page.ink-reveal-playing .encounter-frame-canvas{opacity:1 !important;}
.encounter-story-page.ink-reveal-complete .encounter-frame-canvas{opacity:0 !important;}
/* ===== V19.97: iOS WeChat compatibility (Android unchanged) ===== */
.ios-heart-ripple{display:none;}
html.ios-wechat-compat .date-art-page .date-heart-ripple{
display:none !important; /* Older SVG+CSS animation is fragile in WKWebView. */
}
html.ios-wechat-compat .date-art-page .ios-heart-ripple{
display:block;
position:absolute;
left:50%;top:50%;width:84%;height:84%;
transform:translate(-50%,-50%) scale(1);
transform-origin:center center;
background:url("assets/date/DateHeartRipple_WebKit.svg") center center/contain no-repeat;
opacity:0;
z-index:4;
pointer-events:none;
backface-visibility:hidden;
}
html.ios-wechat-compat .date-art-page .ios-heart-wave-a{
animation:iosHeartWaterSmall 4.0s cubic-bezier(.14,.66,.24,1) infinite both;
}
html.ios-wechat-compat .date-art-page .ios-heart-wave-b{
animation:iosHeartWaterMid 4.0s cubic-bezier(.14,.66,.24,1) -1.33s infinite both;
}
html.ios-wechat-compat .date-art-page .ios-heart-wave-c{
animation:iosHeartWaterLarge 4.0s cubic-bezier(.14,.66,.24,1) -2.66s infinite both;
}
@keyframes iosHeartWaterSmall{
0%{opacity:.9;transform:translate(-50%,-50%) scale(1.02)}
60%{opacity:.46;transform:translate(-50%,-50%) scale(1.28)}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.42)}
}
@keyframes iosHeartWaterMid{
0%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}
55%{opacity:.56;transform:translate(-50%,-50%) scale(1.78)}
100%{opacity:0;transform:translate(-50%,-50%) scale(2.24)}
}
@keyframes iosHeartWaterLarge{
0%{opacity:.88;transform:translate(-50%,-50%) scale(1.14)}
45%{opacity:.63;transform:translate(-50%,-50%) scale(2.36)}
100%{opacity:0;transform:translate(-50%,-50%) scale(4.18)}
}
/* Gold stars: a single transform animation instead of independent scale +
animated GPU drop-shadow. Fixed angle per element retains the layout. */
html.ios-wechat-compat .date-art-page .date-star{
animation-name:iosGoldStarTwinkle !important;
animation-timing-function:ease-in-out !important;
animation-iteration-count:infinite !important;
filter:none !important;
will-change:transform,opacity;
}
html.ios-wechat-compat .date-art-page .date-star-a{--ios-star-angle:-11deg;}
html.ios-wechat-compat .date-art-page .date-star-b{--ios-star-angle:10deg;}
html.ios-wechat-compat .date-art-page .date-star-c{--ios-star-angle:-8deg;}
html.ios-wechat-compat .date-art-page .date-star-d{--ios-star-angle:7deg;}
@keyframes iosGoldStarTwinkle{
0%,100%{opacity:.62;transform:rotate(var(--ios-star-angle,0deg)) scale(.93)}
40%{opacity:1;transform:rotate(var(--ios-star-angle,0deg)) scale(1.12)}
66%{opacity:.8;transform:rotate(var(--ios-star-angle,0deg)) scale(.98)}
}
html.ios-wechat-compat .date-art-page .date-bow-wind .date-bow{
filter:none !important; /* Wrapper retains the existing light-sway motion. */
}
html.ios-wechat-compat .date-art-page .date-char-v14,
html.ios-wechat-compat .date-art-page .date-footer-motion-v14{
filter:none !important;
will-change:opacity,transform !important;
}
/* Do not render animations across 10 hidden, offscreen pages. */
html.ios-wechat-compat .page:not(.active) *,
html.ios-wechat-compat .page:not(.active)::before,
html.ios-wechat-compat .page:not(.active)::after{
animation-play-state:paused !important;
}
/* The album's ambience is already blurred into an optimized backdrop.
Keep actual photographs and interaction geometry unchanged. */
html.ios-wechat-compat .album-stack-page .memory-book-bg{
filter:none !important;
animation:none !important;
transform:scale(1.045) !important;
will-change:auto !important;
}
html.ios-wechat-compat .album-stack-page .album-photo-card{
filter:none !important;
will-change:auto !important;
}
html.ios-wechat-compat .album-stack-page.active .album-photo-card[data-stack="0"]{
will-change:transform !important;
box-shadow:0 12px 24px rgba(34,21,20,.22);
}
/* Stop panning full-viewport layers while photo stacks and depth blur are visible. */
html.ios-wechat-compat .photo-draft-three.draft-three-open .reading-bg,
html.ios-wechat-compat .photo-draft-three.draft-three-open .reading-couple-wrap,
html.ios-wechat-compat .photo-draft-two .reading-bg,
html.ios-wechat-compat .photo-draft-two .reading-couple-wrap{
animation:none !important;
will-change:auto !important;
}
/* ===== V19.98: iOS WebKit rendering/lifecycle stabilization ===== */
/* Hide remote offscreen scenes AFTER the existing page slide has finished. */
html.ios-optimized .page.page-dormant{
content-visibility:hidden !important;
visibility:hidden !important;
pointer-events:none !important;
}
/* Large GPU surfaces must not retain permanent promotion across all photo cards. */
html.ios-optimized .album-photo-card,
html.ios-optimized .memory-polaroid.draft-photo-card{
will-change:auto !important;
}
/* Avoid animating a potentially huge drop-shadow on each flipped page. */
html.ios-optimized .album-stack-page .album-photo-card,
html.ios-optimized .album-stack-page.active .album-photo-card[data-stack="0"]{
transition-property:transform,opacity !important;
filter:none !important;
}
/* Scene 2 already has its complete background and 36-frame canvas reveal;
its endless feTurbulence/displacement layer is expensive in WebKit. */
html.ios-optimized .encounter-story-page .encounter-building-heat{
display:none !important;
animation:none !important;
filter:none !important;
}
/* Keep the original text reveal and decorative heart/star keyframes,
and do not run offscreen scene animations on iOS. */
html.ios-optimized .page:not(.active) *,
html.ios-optimized .page:not(.active)::before,
html.ios-optimized .page:not(.active)::after{
animation-play-state:paused !important;
}
/* Debug label is opt-in only, never shown to invited guests by default. */
#wedding-build-debug{
display:none;position:fixed;bottom:calc(8px + env(safe-area-inset-bottom));left:8px;
z-index:9999;padding:5px 9px;border-radius:99px;
background:rgba(15,23,42,.82);color:white;font:600 11px/1.3 Arial,sans-serif;
pointer-events:none;letter-spacing:.1px;
}
html.wedding-debug #wedding-build-debug{display:block;}
/* V20.02 diagnostic UI (only visible with ?debug=1 and badge tap). */
#wedding-diagnostic-panel[hidden]{display:none !important;}
#wedding-diagnostic-panel{
position:fixed;left:8px;right:8px;bottom:64px;max-height:48vh;
overflow:auto;z-index:3001;margin:0;padding:11px;white-space:pre-wrap;
overflow-wrap:anywhere;border:1px solid #f9c893;border-radius:10px;
background:rgba(15,18,35,.94);color:#fff;font:11px/1.45 monospace;
-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
html.wedding-debug #wedding-build-debug{cursor:pointer;user-select:none;}
/* ===== V20.06: original photo content + its complete paper/frame are 115% of V20.05 =====
Do not change image files or page transition keyframes. This affects 14 photos on
story pages 2-6 only. iOS WebKit supports independent `scale` property.
Page 5 and 6 deal keyframes animate `scale`, so their physical layout width
grows instead of replacing animation transforms; zoom-proxy sizes stay viewport-fit.
*/
:root{--wedding-photo-enlarge:1.15;}
/* Page 2: outer soft-edged photo includes image/feather/ink canvas. */
.encounter-story-page .encounter-photo-slots > .soft-photo-slot{
scale:var(--wedding-photo-enlarge);
}
/* Page 3: the deal-in animation already drives the independent scale property.
Increase the physical paper width instead, without fighting animation keyframes;
existing reverse-path zoom computes its pose from the actual larger width. */
.reading-story-page .reading-memory-overlay > .memory-polaroid{
width:min(64.4vw,266.8px) !important;max-width:266.8px !important;
}
@media(max-width:430px){
.reading-story-page .reading-memory-overlay > .memory-polaroid{
width:min(62.1vw,253px) !important;max-width:253px !important;
}
}
@media(max-height:760px){
.reading-story-page .reading-memory-overlay > .memory-polaroid{
width:min(56.925vw,232.3px) !important;max-width:232.3px !important;
}
}
@media(max-height:680px){
.reading-story-page .reading-memory-overlay > .memory-polaroid{
width:min(51.75vw,209.3px) !important;max-width:209.3px !important;
}
}
/* Page 4: album card includes photo, frame and corner mounting art.
Independent scale keeps existing data-stack transform + flip animation. */
.album-stack-page .album-photo-stack > .album-photo-card{
scale:var(--wedding-photo-enlarge);
}
/* Page 5: make original white-paper geometry physically larger; don't override
animated scale/rotate/translate on the card (critical for iOS). */
.photo-draft-three .draft-three-layout > .memory-polaroid.draft-photo-card{
width:min(66.7vw,278.3px) !important;
max-width:278.3px !important;
}
/* Page 6 follows the same strategy, preserving original diagonal animation. */
.photo-draft-two .draft-two-layout > .memory-polaroid.draft-photo-card{
width:min(64.4vw,266.8px) !important;
max-width:266.8px !important;
}
@media(max-width:430px){
.photo-draft-three .draft-three-layout > .memory-polaroid.draft-photo-card{
width:min(62.1vw,253px) !important;max-width:253px !important;
}
.photo-draft-two .draft-two-layout > .memory-polaroid.draft-photo-card{
width:min(64.4vw,262.2px) !important;max-width:262.2px !important;
}
}
@media(max-height:760px){
.photo-draft-three .draft-three-layout > .memory-polaroid.draft-photo-card{
width:min(56.925vw,232.3px) !important;max-width:232.3px !important;
}
.photo-draft-two .draft-two-layout > .memory-polaroid.draft-photo-card{
width:min(59.225vw,241.5px) !important;max-width:241.5px !important;
}
}
@media(max-height:680px){
.photo-draft-three .draft-three-layout > .memory-polaroid.draft-photo-card{
width:min(51.75vw,209.3px) !important;max-width:209.3px !important;
}
.photo-draft-two .draft-two-layout > .memory-polaroid.draft-photo-card{
width:min(54.05vw,218.5px) !important;max-width:218.5px !important;
}
}
/* ICP service filing is visible in all full-screen steps, including RSVP.
Small, isolated link; no animation, no expensive filters or layer transforms. */
.wedding-icp-footer{
position:fixed;bottom:calc(4px + env(safe-area-inset-bottom));left:50%;
transform:translateX(-50%);z-index:2450;pointer-events:none;
width:max-content;max-width:calc(100vw - 110px);text-align:center;
font:400 10px/1.45 "PingFang SC","Microsoft YaHei",sans-serif;
}
.wedding-icp-footer a{
display:inline-block;padding:2px 7px;border-radius:7px;
background:rgba(31,29,36,.55);color:#fff9f3;text-decoration:none;
text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:auto;
-webkit-tap-highlight-color:transparent;
}
.wedding-icp-footer a:focus-visible{outline:2px solid white;outline-offset:2px;}
@media(max-width:350px){.wedding-icp-footer{font-size:9px;}}