/* An ink signature on warm paper, with the daylight room waiting behind it. */
.room-opening{display:none}
html[data-opening] body>header,html[data-opening] body>footer,
html[data-opening] :is(.desk-invitation,.nearby-label,.discovery-label,#tooltip){opacity:0!important;pointer-events:none!important}
html[data-opening] #fusion-viewport{filter:blur(7px) brightness(.64) saturate(.85);pointer-events:none;transition:filter .85s ease}
html[data-opening] :is(.fusion-object>img,.cube-shadow){animation-play-state:paused!important}
html[data-opening] .room-opening{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px 18px;box-sizing:border-box;overflow:auto;background:#211a1326;color:#493b2c;isolation:isolate}
.opening-card{position:relative;box-sizing:border-box;width:min(540px,100%);padding:34px 36px 32px;text-align:center;background:#f6efdf;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23877655' opacity='.045' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");border:1px solid #fff9;border-radius:3px;box-shadow:0 22px 70px #1d170d38,0 2px 8px #1d170d16;animation:invitation-appear .55s ease-out both}
.opening-kicker{font:10px/1.5 'PingFang SC',sans-serif;letter-spacing:3px;color:#95816a;margin:0 0 17px}
.opening-card h1{font:500 clamp(40px,5.5vw,64px)/1.35 StudioHand,'Bradley Hand',cursive;letter-spacing:0;margin:0;white-space:nowrap;font-synthesis:none}
/* Reveal one continuous shaped line, retaining the font's connecting strokes and overhangs. */
.opening-signature{display:inline-block;padding:0 .18em;opacity:0}
html[data-opening=ready] .opening-signature{opacity:1;mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-size:240% 100%;mask-repeat:no-repeat;animation:invitation-signature 1.15s ease-in-out both}
.opening-chinese{font:400 26px/1.5 StudioChinese,'Kaiti SC',serif;letter-spacing:5px;margin:0 0 0 5px}
.opening-rule{display:block;width:30px;height:1px;background:#baa48280;margin:24px auto}
.opening-message{font:14px/1.95 'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.5px;color:#665743}
.opening-message p{margin:0}.opening-message p+p{margin-top:8px}
.opening-hint{font:11px/1.8 'PingFang SC',sans-serif;letter-spacing:.7px;color:#9b876d;margin:24px 0 22px}
.opening-enter{min-height:46px;padding:12px 33px;background:#57614b;color:#fff8e8;border:1px solid #4f5943;border-radius:3px;font:13px/1.5 'PingFang SC',sans-serif;letter-spacing:1.3px;cursor:pointer;transition:background .2s,transform .2s}
.opening-enter span{margin-left:14px}.opening-enter:hover{background:#48543d;transform:translateY(-1px)}.opening-enter:focus-visible{outline:2px solid #718264;outline-offset:5px}.opening-enter:disabled{cursor:default}
html[data-opening=entering] #fusion-viewport{filter:blur(0) brightness(1) saturate(1)}
html[data-opening=entering] .room-opening{background:transparent;transition:background .65s;pointer-events:none}
html[data-opening=entering] .opening-card{animation:invitation-leave .6s ease-in both}
@keyframes invitation-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes invitation-signature{from{mask-position:100% 0}to{mask-position:0 0}}
@keyframes invitation-leave{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-9px)}}
@media(max-width:700px){.opening-card{padding:30px 19px 28px}.opening-card h1{font-size:clamp(32px,10.3vw,52px)}.opening-kicker{font-size:9px;margin-bottom:18px}.opening-chinese{font-size:24px}.opening-message{font-size:12px;letter-spacing:.2px}.opening-hint{font-size:10px}.opening-rule{margin:20px auto}.opening-enter{font-size:12px}}
@media(max-height:560px){.opening-card{padding-top:20px;padding-bottom:20px}.opening-kicker{margin-bottom:8px}.opening-rule{margin:12px auto}.opening-hint{margin:14px 0}}
@media(prefers-reduced-motion:reduce){html[data-opening] #fusion-viewport{transition:none}.opening-card,html[data-opening] .opening-signature{animation:none!important}.opening-signature{opacity:1;mask-image:none!important}}

.room-opening:focus{outline:none}
html[data-opening=entering] .opening-signature{opacity:1;mask-image:none}
html[data-opening=invitation] :is(.opening-chinese,.opening-rule,.opening-message,.opening-hint){opacity:0}
html[data-opening=ready] :is(.opening-chinese,.opening-rule){animation:invitation-copy .5s .65s both}
html[data-opening=ready] :is(.opening-message,.opening-hint){animation:invitation-copy .55s .9s both}
@keyframes invitation-copy{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html[data-opening] :is(.opening-chinese,.opening-rule,.opening-message,.opening-hint){opacity:1;animation:none!important}}

/* A scrapbook invitation: linen paper, a sage tape strip and a small flower seal. */
.opening-card{background-color:#f0e5cd;background-image:radial-gradient(ellipse at 20% 0,#fff9e6aa,transparent 65%),repeating-linear-gradient(0deg,#957d4f05 0 1px,transparent 1px 4px);border:1px solid #c7b38c;border-radius:5px;box-shadow:0 24px 65px #20180c40,0 4px 10px #20180c1c,inset 0 0 38px #ab895012;padding-top:43px;padding-bottom:37px}
.opening-card::before{content:'';position:absolute;inset:11px;border:1px dashed #b7a27b88;border-radius:2px;pointer-events:none}
.invitation-tape{position:absolute;width:105px;height:28px;left:25px;top:-11px;transform:rotate(-7deg);background:repeating-linear-gradient(90deg,#87927366 0 2px,#9ba38766 2px 5px);border-inline:1px dashed #d4dbc4aa;box-shadow:0 2px 3px #564d2812;opacity:.85;pointer-events:none}
.invitation-stamp{position:absolute;right:24px;top:20px;width:53px;height:53px;color:#ac6d53;opacity:.65;transform:rotate(13deg);pointer-events:none}.invitation-stamp svg{display:block;width:100%;height:100%}
.opening-kicker{color:#998267;font-size:10px;letter-spacing:2.5px}
.opening-rule{position:relative;width:70px;background:linear-gradient(90deg,transparent,#b4a17f,transparent)}
.opening-rule::after{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 8px;background:#f1e7d1;color:#a78b61;font:11px/1 Georgia,serif}
.opening-enter{background:#647157;border-color:#59664c;box-shadow:0 2px 0 #48543e,0 3px 7px #3d48271a;border-radius:4px}
.opening-enter:hover{background:#536247;box-shadow:0 3px 0 #435039,0 4px 9px #3d482724}
@media(max-width:700px){.opening-card{padding-top:41px;padding-bottom:33px}.invitation-tape{width:85px;height:25px;left:22px;top:-10px}.invitation-stamp{width:41px;height:41px;right:20px;top:19px}.opening-kicker{font-size:9px;letter-spacing:2px}}
@media(max-height:560px){.opening-card{padding-top:26px;padding-bottom:25px}.invitation-stamp{top:12px}}