/* Paper, lace and little things: four related but distinct scrapbook scenes. */
.story-mode body::after{background-image:radial-gradient(#c997ad22 .8px,transparent .8px),repeating-linear-gradient(90deg,transparent 0 55px,#fff3 55px 57px);background-size:10px 10px,auto}
.panel-scroll{position:relative;z-index:1}
.panel-content{padding-top:90px;padding-bottom:110px}
.scene-dressing{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.scene-frame{position:absolute;inset:65px 24px 75px;border:4px double #d5a5ba6b;border-radius:110px 110px 12px 12px}
.lace-rail{position:absolute;top:0;bottom:0;width:19px;opacity:.7;background:radial-gradient(circle at 0 9px,transparent 5px,#fff9f4 5px 8px,transparent 8px) 0 0/18px 18px,linear-gradient(90deg,transparent 5px,#fff9f4 5px 8px,transparent 8px)}
.rail-left{left:15px}.rail-right{right:15px;scale:-1 1}
.pearl-swag{position:absolute;top:42px;right:10%;width:220px;rotate:5deg;opacity:.82}
.corner-flower{position:absolute;left:28px;bottom:85px;width:78px;rotate:-18deg}
.flower-two{left:auto;right:28px;top:87px;bottom:auto;rotate:16deg;width:64px}
.scrap-stamp{position:absolute;left:48px;top:47%;writing-mode:vertical-rl;font:italic 17px Georgia,serif;letter-spacing:3px;color:#b17b945e;rotate:180deg}
.scene-mote{position:absolute;left:var(--mx);top:var(--my);font-size:var(--size);color:#c38aab65;opacity:0}
.is-active .scene-mote{animation:mote-drift var(--speed) ease-in-out var(--phase) infinite both}
@keyframes mote-drift{0%,100%{opacity:.2;translate:0 0;rotate:-8deg}50%{opacity:.65;translate:4px -10px;rotate:8deg}}
.trinket-motion{display:block;transform-origin:50% 20%;animation:trinket-sway var(--sway-duration,5s) ease-in-out infinite;animation-play-state:paused}
.is-active .trinket-motion{animation-play-state:running}
@keyframes trinket-sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-5px)}}
.is-active .bow-ornate img{animation:bow-breathe 5s ease-in-out 1.4s infinite;transform-origin:50% 35%}
@keyframes bow-breathe{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.roman{font-size:23px;position:relative;gap:18px}
.roman:before,.roman:after{height:5px;background:radial-gradient(circle,#c894ad 1.5px,transparent 2px) center/9px 5px;width:58px}
.panel-content>h1{text-shadow:0 2px #fff8}
.scene-birthday .scene-frame{background:radial-gradient(ellipse at 50% 35%,#fff8 0,transparent 58%)}
.scene-birthday .panel-content>.date{font-family:'SimSun',serif;font-size:16px;letter-spacing:5px;padding:10px 35px;border-block:1px solid #d6a8bc7a}
.scene-birthday .corner-flower{width:98px;left:10%;bottom:11%}
.scene-birthday .flower-two{width:72px;right:12%;top:22%}
.scene-memories .scene-frame{border-radius:10px;background:repeating-linear-gradient(0deg,transparent 0 29px,#c5adcf12 29px 30px)}
.scene-memories .pearl-swag{right:auto;left:9%;rotate:-8deg;width:170px}
.scene-memories .flower-two{top:auto;bottom:14%;right:13%;width:85px}
.scene-memories .corner-flower{bottom:auto;top:16%;left:12%;width:60px}
.photo{border-radius:2px;transition:box-shadow .3s;outline:1px dashed #d8b0be;outline-offset:-6px}
.photo::after{content:'✿';position:absolute;right:-10px;bottom:14px;color:#d498b3;font-size:26px;text-shadow:1px 2px #fff9}
.photo:nth-child(2)::after{content:'♡';right:auto;left:-12px;top:12px;bottom:auto;rotate:-15deg}
.photo:nth-child(3)::after{content:'✧';right:-9px;top:28px;bottom:auto;color:#bca1cd}
.photo-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in;overflow:hidden}
.photo-open img{display:block;aspect-ratio:4/5;object-fit:cover}
.photo:hover{box-shadow:0 12px 30px #a76b8a28}
.photo-open:focus-visible,.smile-button:focus-visible,.motion-toggle:focus-visible{outline:2px solid #ad5d7c;outline-offset:5px}
.tea-steam{animation:tea-warmth 3s ease-in-out infinite;animation-play-state:paused}
.is-active .tea-steam{animation-play-state:running}
@keyframes tea-warmth{0%,100%{opacity:.15;translate:0 3px}50%{opacity:.8;translate:0 -5px}}
.scene-theatre .scene-frame{border-radius:125px 125px 15px 15px;border-color:#bfa5ca70;background:radial-gradient(ellipse at 50% 85%,#fff3e640,transparent 65%)}
.scene-theatre .pearl-swag{right:12%;top:55px;rotate:0deg;width:205px}
.scene-theatre .corner-flower{left:12%;bottom:18%;width:70px}
.scene-theatre .flower-two{top:19%;right:9%;width:90px}
.scene-theatre .film{position:relative;border:5px double #c79bb6;outline:1px dashed #dcb6ca;outline-offset:7px;background:#fff9f2;padding:24px 24px 14px;box-shadow:0 14px 40px #a778961c}
.scene-theatre .film:before,.scene-theatre .film:after{content:'';position:absolute;top:15px;width:14%;height:60%;background:repeating-linear-gradient(90deg,#e7b0c696 0 8px,#f8d9e8ab 8px 16px);border-bottom:4px double #c797b0;border-radius:65% 0 80% 0;pointer-events:none;z-index:1;box-shadow:3px 0 9px #8a4b6810}
.scene-theatre .film:before{left:8px}.scene-theatre .film:after{right:8px;scale:-1 1}
.smile-button{display:block;position:relative;border:0;padding:0;background:none;cursor:pointer;isolation:isolate;margin:7px auto}
.smile-button .smile-sticker{margin:0;transition:scale .25s}
.smile-button:hover .smile-sticker{scale:1.07}
.heart-burst{position:absolute;left:50%;top:45%;font-size:22px;color:#cd7fa5;pointer-events:none;animation:heart-pop 1.1s ease-out both}
@keyframes heart-pop{0%{opacity:0;translate:0 0;scale:.4}15%{opacity:1}100%{opacity:0;translate:var(--hx) var(--hy);rotate:var(--hr);scale:1.2}}
.smile-glow{filter:drop-shadow(0 0 9px #eaa1c4)}
.scene-letter .scene-frame{border-radius:12px 110px 12px 110px;background:linear-gradient(130deg,#fff3e330,transparent 60%)}
.scene-letter .pearl-swag{right:auto;left:8%;top:70px;width:180px;rotate:-9deg}
.scene-letter .flower-two{top:auto;bottom:15%;right:10%;width:90px}
.scene-letter .corner-flower{top:21%;bottom:auto;left:9%;width:75px}
.scene-letter .letter{border:4px double #dfb3c4;background:repeating-linear-gradient(0deg,transparent 0 32px,#d9b0bd15 32px 33px),#fffaf4;border-radius:3px;box-shadow:0 5px 0 -2px #f3ddd9,0 6px 0 -2px #dfb3c4,0 14px 30px #9d668222;transform-origin:50% 100%}
.scene-letter .is-active .letter{animation-name:letter-open}
.story-mode .scene-letter.is-active .letter.reveal{animation-name:letter-open;animation-duration:1.1s}
@keyframes letter-open{from{opacity:0;translate:0 24px;transform:perspective(900px) rotateX(9deg)}to{opacity:1;translate:0 0;transform:perspective(900px) rotateX(0)}}
.scene-letter .letter:before{content:'♥';top:-18px;right:22px;display:grid;place-items:center;width:43px;height:43px;border:4px double #b77797;background:radial-gradient(circle at 30% 25%,#e3a4ba,#b96e91);color:#f9dee4;font-size:20px;border-radius:45% 50% 47% 44%;rotate:12deg;box-shadow:0 3px 5px #86536926}
.story-mode .scene-letter.is-active .letter p{animation:story-reveal .7s ease var(--line-delay) both}
.sunset-title{line-height:1.65;letter-spacing:3px}
.photo-dialog{width:min(88vw,620px);max-height:88dvh;overflow:auto;border:5px double #d4a2b9;background:#fff8f1;padding:42px 28px 20px;border-radius:8px;color:#805766;box-shadow:0 25px 90px #5a304b55}
.photo-dialog::backdrop{background:#614355a8;backdrop-filter:blur(5px)}
.photo-close{position:absolute;right:10px;top:4px;width:40px;height:36px;border:0;background:none;font-size:30px;color:#985d7a;cursor:pointer}
.photo-detail img{display:block;width:100%;max-height:65dvh;object-fit:contain}
.photo-detail .image-space{max-height:60dvh;min-height:220px}
.photo-detail-caption{text-align:center;font-size:12px;letter-spacing:2px}
.motion-toggle{position:fixed;z-index:7;right:24px;bottom:26px;font:10px 'Microsoft YaHei',sans-serif;color:#9a7183;border:1px solid #dcb5c8;background:#fff8f3c9;padding:8px 11px;border-radius:20px;cursor:pointer}
.decor-paused .trinket-motion,.decor-paused .scene-mote,.decor-paused .tea-steam,.decor-paused .bow-ornate img{animation-play-state:paused!important}
@media(max-width:900px){.scene-frame{inset:60px 19px 75px}.pearl-swag{width:120px!important;right:9%!important;left:auto!important;top:46px!important}.corner-flower{width:42px!important;left:20px!important;bottom:85px!important;top:auto!important}.flower-two{left:auto!important;right:20px!important;top:75px!important;bottom:auto!important;width:38px!important}.scrap-stamp{display:none}.scene-mote:nth-of-type(n+6){display:none}.scene-mote{font-size:12px}.panel-content{padding-top:82px}.scene-theatre .film{padding:17px 13px 10px}.scene-theatre .film:before,.scene-theatre .film:after{width:12%}.scene-letter .letter{margin-top:32px}.motion-toggle{right:21px;bottom:22px;max-width:74px;font-size:9px;line-height:1.5;padding:5px 8px}.story-next{max-width:calc(100% - 190px);white-space:nowrap}.scene-letter .sunset-title{font-size:clamp(22px,5.2vw,28px);letter-spacing:2px}}
@media(max-width:370px){.story-next{letter-spacing:0;padding:9px 12px}.motion-toggle{right:16px;max-width:65px}}
@media(prefers-reduced-motion:reduce){.is-active .scene-mote{animation:none;opacity:.35}.trinket-motion,.is-active .tea-steam,.is-active .bow-ornate img,.story-mode .scene-letter.is-active .letter.reveal,.story-mode .scene-letter.is-active .letter p{animation:none!important;opacity:1;translate:none;transform:none}.smile-button .smile-sticker{transition:none}.photo-dialog::backdrop{backdrop-filter:none}}