/* Supplied olive artwork forms a matching pair of centre-opening panels. */
.sealed .green-envelope{inset:auto!important;left:50%!important;top:50%!important;width:var(--stage-width);height:var(--stage-height);transform:translate(-50%,-50%)!important;background:none;isolation:isolate;touch-action:none;perspective:1400px;--joined-height:min(29dvh,51.6vw,320px);--letter-height:calc(var(--joined-height)*.85)}
.green-envelope::before{display:none}
.green-door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;backface-visibility:hidden;will-change:transform;transition:transform 2.15s cubic-bezier(.52,0,.16,1),filter 2.15s ease;transform-style:preserve-3d}
.green-door::before{content:'';position:absolute;top:0;width:200%;height:100%;background:url('../assets/img/opening-olive.webp?v=f99e653') center/cover no-repeat}
.green-door--left{left:0;transform-origin:left center}.green-door--right{right:0;transform-origin:right center}
.green-door--left::before{left:0}.green-door--right::before{right:0}
.green-door::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 40px #26321920;pointer-events:none}
.monogram-lock{position:absolute;inset:0;z-index:2}
.gold-letter{position:absolute;top:50%;height:var(--letter-height);padding:0;border:0;background:none;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;transition:translate .4s ease,opacity .35s ease,filter .3s ease;transform:translate(-50%,-50%);translate:var(--drag-x,0px) var(--drag-y,0px);filter:drop-shadow(0 2px 2px #24301630)}
.gold-letter--z{left:calc(50% - var(--joined-height)*.48);width:calc(var(--letter-height)*.803);z-index:3;cursor:grab}
.gold-letter--s{left:50%;width:calc(var(--letter-height)*.683);z-index:2}
.gold-letter svg,.joined-monogram svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.gold-letter:focus-visible{outline:1px solid #e1c17d;outline-offset:12px;border-radius:5px}
.is-dragging .gold-letter--z{transition:none;cursor:grabbing}
.is-near .gold-letter--s,.is-selected .gold-letter--s{filter:drop-shadow(0 0 10px #f7db9790)}
.is-selected .gold-letter--z{filter:drop-shadow(0 0 5px #f7db9760)}
/* Reference: initials cross the central seam, with the swash extending right. */
.joined-monogram{position:absolute;left:calc(50% + var(--joined-height)*.136);top:50%;height:var(--joined-height);width:calc(var(--joined-height)*.907);transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;transition:opacity .5s ease,transform 1.15s cubic-bezier(.16,1,.3,1)}
.is-joined .gold-letter{opacity:0;pointer-events:none}
.is-joined .joined-monogram{opacity:1;transform:translate(-50%,-50%) scale(1)}
.is-joined .joined-monogram svg{animation:monogram-lustre 1.5s ease both}
@keyframes monogram-lustre{0%{filter:brightness(1) drop-shadow(0 0 0 #f6da9400)}45%{filter:brightness(1.45) drop-shadow(0 0 16px #f6da9480)}100%{filter:brightness(1) drop-shadow(0 2px 2px #26301830)}}
.green-envelope::after{content:'';position:absolute;z-index:1;left:50%;top:0;bottom:0;width:2px;opacity:0;background:linear-gradient(transparent,#fff1c3,transparent);box-shadow:0 0 24px 8px #ffe6a45c;pointer-events:none}
.is-joined.green-envelope::after{animation:seam-light 1.65s ease both}
@keyframes seam-light{0%{opacity:0;scale:1 .3}45%{opacity:.9;scale:1 1}100%{opacity:0;scale:1 1}}
.unlock-hint,.unlock-alternative{position:absolute;z-index:4;left:7%;right:7%;text-align:center;color:#f1ecdf;text-shadow:0 1px 3px #26301870;pointer-events:none;transition:opacity .4s ease}
.unlock-hint{top:72%;font:400 15px/1.5 var(--font-body);letter-spacing:.04em}
.unlock-alternative{top:77%;font:italic 12px/1.4 var(--font-body);color:#e4dec9}
.is-joined .unlock-alternative{opacity:0}
.is-unlocking .green-door--left{transform:translateX(-36%) rotateY(-102deg);filter:brightness(.7)}
.is-unlocking .green-door--right{transform:translateX(36%) rotateY(102deg);filter:brightness(.7)}
.is-unlocking .joined-monogram{opacity:0;transform:translate(-50%,-50%) scale(1.12);transition:opacity .6s ease,transform .8s ease}
.is-unlocking .unlock-hint{opacity:0}.is-unlocking{pointer-events:none}
.sealed .garden-stage{opacity:0;scale:1.045;filter:blur(5px)}
.garden-stage{transition:opacity 1.7s ease,scale 2.2s cubic-bezier(.16,1,.3,1),filter 1.9s ease}
.sealed .page{opacity:0}.page{transition:opacity 1.6s ease .4s}
.sealed.reveal-in-progress .garden-stage{opacity:1;scale:1;filter:none}
.sealed.reveal-in-progress .page{opacity:1}

/* Full-page cover and clear, generously sized opening instructions. */
.sealed .green-envelope{inset:0!important;left:0!important;top:0!important;width:100%;height:100%;max-width:none;max-height:none;margin:0;transform:none!important}
.unlock-instructions{position:absolute;z-index:4;left:50%;bottom:max(10%,calc(env(safe-area-inset-bottom) + 16px));width:min(90%,440px);transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;padding:14px 18px;border:0;border-radius:0;background:none;box-shadow:none;pointer-events:none;transition:opacity .4s ease}
.unlock-hint,.unlock-alternative{position:static;inset:auto;margin:0;color:#fff7e5;text-shadow:0 1px 2px #0005;letter-spacing:.01em}
.unlock-hint{font:500 clamp(22px,4.8vw,27px)/1.4 var(--font-body)}
.unlock-alternative{font:400 clamp(18px,4vw,22px)/1.4 var(--font-body)}
.is-unlocking .unlock-instructions{opacity:0}
@media(max-height:420px){.unlock-instructions{bottom:max(4%,env(safe-area-inset-bottom));padding:8px 14px;gap:3px}.unlock-hint{font-size:20px}.unlock-alternative{font-size:18px}}

/* Paint the doors green on first frame: solid olive + a 1 KB blurred copy under the full cover, so the page never shows through while it loads. */
.green-door{background-color:#656b4a}
.green-door::before{background:url('../assets/img/opening-olive.webp?v=f99e653') center/cover no-repeat,#656b4a url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAA5ACADASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgEAAwX/xAAnEAABAwMDAwUBAQAAAAAAAAABAAIREiExAxNBM0JRIjJhgbFxof/EABYBAQEBAAAAAAAAAAAAAAAAAAABBP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APLgh1cZ4Wc4PFLTM5+FK5NHctA0mk8LGihw0wGuMRgrEEurjHChG6AcAYWrg0d2EFovVN/KgdujkAZ+UZJfQfb+pPAY0logoMXDSAAEg4CtE3m/lRnraHOEn8RLiHUduJRTNIYTxEoackmvPC0euuLEpahDm0i5P+Ig6kgijPMJimj4icqMNLYNiETd1YFgiruA+nu8IgbTSXYPKLev9p63SKDOG9BabDmEtwCx93hTR6Q/q5v6/wBoP//Z') center/cover no-repeat}
