*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#17130e}#journey{height:100svh;min-height:320px;position:relative;isolation:isolate;overflow:hidden}section{position:absolute;inset:0;overflow:hidden}.plane{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.plane>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}#entrance{z-index:2;opacity:1;transition:opacity 1200ms ease,visibility 1200ms}.facade-frame{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,42.6% 24.4%,42.6% 88%,56.5% 88%,56.5% 24.4%,42.6% 24.4%)}/* The room is stationary; only wood, glass reflections and door thickness rotate. */
.door-hinge{position:absolute;left:42.6%;top:24.4%;width:13.9%;height:63.6%;perspective:1500px;perspective-origin:50% 50%}
.door-leaf{position:absolute;inset:0;transform-origin:100% 50%;transform-style:preserve-3d;transition:transform 1900ms cubic-bezier(.25,.1,.25,1);will-change:transform}
.door-wood{position:absolute;inset:0;transform:translateZ(2px);backface-visibility:hidden}
.door-wood img{position:absolute;left:-9.09%;top:0;width:117.62%;height:100%;display:block;object-fit:fill}
.door-light{position:absolute;left:-9.09%;top:0;width:117.62%;height:100%;background:#080b09;mask:url('assets/door-leaf-r7.png') 0 0/100% 100% no-repeat;-webkit-mask:url('assets/door-leaf-r7.png') 0 0/100% 100% no-repeat;opacity:0;transition:opacity 1900ms ease;transform:translateZ(2.5px);pointer-events:none}
.door-glass{position:absolute;left:14.7%;top:4.5%;width:72%;height:57%;background:linear-gradient(115deg,rgba(192,207,200,.015) 0%,rgba(195,213,204,.035) 22%,rgba(210,222,216,.1) 23%,rgba(198,213,202,.02) 36%,transparent 46%,rgba(10,19,13,.06) 100%);box-shadow:inset 0 0 5px #0e130d33;transition:opacity 1900ms ease,background-position 1900ms ease;background-size:240% 100%;pointer-events:none;backface-visibility:hidden;transform:translateZ(1px)}
.door-edge{position:absolute;top:.3%;left:0;width:7px;height:99.3%;background:linear-gradient(90deg,#3e2b1d,#62503b 35%,#271e15 100%);transform:translateZ(2px) rotateY(-90deg);transform-origin:left center;backface-visibility:visible;box-shadow:inset 0 0 2px #000}
#enter{position:absolute;left:42.6%;top:24.4%;width:13.9%;height:63.6%;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#enter:focus-visible{outline:2px solid #cab48b;outline-offset:-5px}#enter[aria-busy=true]{cursor:progress}#table{z-index:1;visibility:hidden}#tablePlane{transform:translate(-50%,-50%) scale(1.025);transition:transform 1800ms ease}#journey[data-state=opening] .door-leaf,#journey[data-state=open] .door-leaf,#journey[data-state=table] .door-leaf{transform:rotateY(-84deg)}
#journey[data-state=opening] .door-glass,#journey[data-state=open] .door-glass,#journey[data-state=table] .door-glass{opacity:.3;background-position:100% 50%}
#journey[data-state=opening] #enter,#journey[data-state=open] #enter,#journey[data-state=table] #enter{pointer-events:none}#journey[data-state=table] #entrance{opacity:0;visibility:hidden;pointer-events:none}#journey[data-state=table] #table{visibility:visible}#journey[data-state=table] #tablePlane{transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#journey[data-state=opening] .door-light,#journey[data-state=open] .door-light,#journey[data-state=table] .door-light{opacity:.28}

#bookSparkles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}


/* The same wooden sign lifts as one object; no luminous rectangular backing. */
.plaque-interaction{position:absolute;left:20.28%;top:67.45%;width:60.14%;height:10.155%;pointer-events:none;transform:translateZ(3px);transform-origin:50% 50%;transition:transform 220ms ease,filter 220ms ease;backface-visibility:hidden}
.plaque-surface{position:absolute;inset:0;background:url('assets/door-leaf-r7.png') 51.095% 75.074%/195.581% 984.737% no-repeat;clip-path:polygon(2% 8%,7% 3%,93% 3%,98% 8%,98% 92%,93% 97%,7% 97%,2% 92%)}
#plaqueLetters{position:absolute;left:22.79%;top:28.95%;width:53.25%;height:35.26%;pointer-events:none;filter:drop-shadow(0 0 .8px #e8b85b66)}
#plaqueFireflies{position:absolute;left:11.62%;top:-16.84%;width:76.74%;height:110.52%;pointer-events:none}
#journey:not([data-state=closed]) #plaqueLetters,#journey:not([data-state=closed]) #plaqueFireflies{visibility:hidden}
#enter{left:45.419%;top:67.298%;width:8.359%;height:6.459%;min-width:44px;min-height:44px;border-radius:5px}
@media(hover:hover) and (pointer:fine){#journey[data-state=closed]:has(#enter:hover) .plaque-interaction{transform:translate3d(0,-2px,9px) scale(1.055);filter:drop-shadow(0 4px 3px #0009)}}
#journey[data-state=closed]:has(#enter:focus-visible) .plaque-interaction{transform:translate3d(0,-2px,9px) scale(1.055);filter:drop-shadow(0 4px 3px #0009)}
#journey[data-state=closed]:has(#enter:active) .plaque-interaction{transform:translate3d(0,1px,4px) scale(.99);filter:drop-shadow(0 1px 1px #0007)}
@media(prefers-reduced-motion:reduce){.plaque-interaction{transition:none}}

/* Unpublished portrait artwork: all moving layers share this scene plane. */
#journey[data-mobile=true] .facade-frame{
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,32.12% 31.94%,32.12% 75.59%,68.76% 75.59%,68.76% 31.94%,32.12% 31.94%);
}
#journey[data-mobile=true] .door-hinge{left:32.12%;top:31.94%;width:36.64%;height:43.65%}
/* Map the original room's doorway to the new opening without moving the room. */
#journey[data-mobile=true] .open-room{left:-80.17%;top:15.19%;width:263.60%;height:68.63%}
#journey[data-mobile=true] #enter{left:50.568%;top:63.598%;width:22.035%;height:4.433%;transform:translate(-50%,-50%)}

/* Only the blouse uses the edited picture; the face, frame and room stay original. */
.portrait-linen{pointer-events:none;clip-path:polygon(47.45% 51.9%,48.75% 51.1%,49.6% 52.9%,50.25% 53.5%,51% 52.9%,51.65% 51.15%,53.1% 52%,52.65% 54.65%,51.9% 55.8%,50.6% 56.3%,49.05% 55.8%,48% 54.4%)}
#journey[data-mobile=true] .portrait-linen{clip-path:polygon(29.8% 50.4%,32.5% 50%,34.4% 51.4%,36.3% 51.9%,37.8% 50.65%,39.2% 50.1%,41.9% 50.7%,41.5% 52.1%,39.7% 53.15%,37.8% 53.75%,35% 53.65%,32.4% 52.9%,30.9% 51.9%)}
#plaqueLetters{filter:drop-shadow(0 0 1px #f5c26799)}
#plaqueFireflies{height:173.68%}
.doorbell{position:absolute;left:55.65%;top:23.2%;width:2.7%;pointer-events:none;z-index:3}
.doorbell::before{content:'';position:absolute;top:-5%;left:45%;width:12%;height:14%;background:linear-gradient(90deg,#38291b,#947349,#33251a);border-radius:50%;box-shadow:1px 1px 2px #0009}
.doorbell img{display:block;width:100%;transform-origin:50% 6%;filter:brightness(.78) saturate(.75) drop-shadow(1px 2px 1px #0007)}
#journey[data-mobile=true] .doorbell{left:67.5%;top:30.9%;width:8%}
#journey[data-state=opening] .doorbell img,#journey[data-state=open] .doorbell img,#journey[data-state=table] .doorbell img{animation:bell-sway 2600ms ease-out both}
@keyframes bell-sway{0%{transform:rotate(0)}8%{transform:rotate(13deg)}22%{transform:rotate(-10deg)}38%{transform:rotate(7deg)}55%{transform:rotate(-4deg)}73%{transform:rotate(2deg)}90%,100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.doorbell img{animation:none!important}.plaque-interaction{transform:translateZ(3px)!important}}

.invitation-arrow{position:absolute;left:0;top:106%;width:100%;height:auto;pointer-events:none;overflow:visible}
#journey:not([data-state=closed]) .invitation-arrow{visibility:hidden}
.arrow-path,.arrow-tip{fill:none;stroke:#f3bf6d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.78;filter:drop-shadow(0 0 2px #d8892d88)}
.arrow-tip{stroke:#ffd68b;stroke-width:2.6;opacity:.95}
.arrow-trail path{fill:none;stroke:#ffcd78;stroke-width:2.2;stroke-linecap:round}
.arrow-spark{fill:#ffe5ad;stroke:#ffdc95;stroke-width:1.4}
.arrow-spark-halo{fill:#ffc062;stroke:none;opacity:.6;filter:url(#arrowGlow)}
.arrow-spark-core{fill:#fff0c5;stroke:none}
@media(prefers-reduced-motion:reduce){.arrow-spark,.arrow-trail{display:none}.arrow-path,.arrow-tip{opacity:.85}}