.welcome{position:relative;z-index:10;background:var(--paper);overflow:hidden;transition:opacity .65s ease,visibility .65s;}
.welcome.departing{opacity:0;visibility:hidden;pointer-events:none}
.envelope-button{transition:transform 1s cubic-bezier(.22,1,.36,1),box-shadow 1s ease}
.envelope-flap{transition:transform .85s cubic-bezier(.45,0,.2,1) .15s}
.envelope-seal{transition:opacity .3s ease,transform .4s ease}
.envelope-paper{transition:transform 1s cubic-bezier(.22,1,.36,1) .55s}
.welcome.opening .envelope-seal{transform:scale(1.15)}
.welcome.opening .envelope-button{transform:translateY(15px);box-shadow:0 30px 55px #65534215}
.welcome.opening .envelope-paper{transform:translateY(-70%)}
#site-content.revealing{animation:page-arrive 1s cubic-bezier(.22,1,.36,1) both}
dialog[open]{animation:letter-arrive .65s cubic-bezier(.22,1,.36,1) both}
dialog[open]::backdrop{animation:backdrop-arrive .65s ease both}
dialog[open].closing-letter{animation:letter-leave .35s ease both}
dialog[open].closing-letter::backdrop{animation:backdrop-leave .35s ease both}
@keyframes page-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes letter-arrive{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes letter-leave{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes backdrop-leave{from{opacity:1}to{opacity:0}}
.photo-letter{width:min(460px,calc(100% - 24px));padding:34px 24px 20px;max-height:94svh;overflow:auto;text-align:center}
.photo-letter h2{font-size:27px;margin:8px 0 22px;letter-spacing:-.5px}
.photo-card{display:block;width:100%;max-width:360px;margin:0 auto;aspect-ratio:2/3;border:0;padding:0;background:transparent;perspective:1400px;text-align:left;color:var(--ink);border-radius:3px}
.photo-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.22,.7,.15,1)}
.photo-card.flipped .photo-inner{transform:rotateY(180deg)}
.photo-front,.photo-back{position:absolute;inset:0;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 8px 22px #423c3324;border-radius:3px;overflow:hidden}
.photo-front{background:#393633;transform:rotateY(0deg)}
.photo-front img{display:block;width:100%;height:100%;object-fit:contain}
.photo-back{transform:rotateY(180deg);background:#fff9eb;border:1px solid #e2d4bc;padding:clamp(23px,6vw,38px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.photo-back .tiny{color:var(--red);font-size:9px}.photo-greeting{font-size:29px;font-style:italic;color:var(--red)}
.photo-message{font-size:clamp(16px,4vw,20px);line-height:1.6}.photo-signature{font-size:21px;font-style:italic;color:var(--red)}
.photo-letter .flip-hint{font-size:12px;line-height:1.5;color:var(--muted);font-style:italic;margin:20px 0 0}
@media(max-width:360px){.photo-back{gap:13px;padding:22px}.photo-greeting{font-size:25px}.photo-signature{font-size:18px}}
@media(prefers-reduced-motion:reduce){.welcome,.envelope-button,.envelope-flap,.envelope-seal,.envelope-paper{transition:none!important}dialog::backdrop{animation:none!important}}

/* The photo rises from the envelope pocket, without a separate dialog. */
.envelope-scene{--envelope-width:min(360px,80vw);position:relative;width:var(--envelope-width);height:calc(var(--envelope-width) * .625);margin:55px auto 20px;isolation:isolate;transition:height 1.3s cubic-bezier(.22,1,.36,1)}
.envelope-shell{position:absolute;bottom:0;left:0;width:100%;aspect-ratio:1.6;background:#e1ceb0;border:1px solid #ccb997;border-radius:4px;box-shadow:0 22px 40px #65534220;perspective:900px;z-index:2;pointer-events:none}
.envelope-shell .envelope-flap{transition:transform .85s cubic-bezier(.45,0,.2,1)}
.unseal-hit{position:absolute;inset:0;z-index:5;border:0;background:transparent;border-radius:4px}
.envelope-scene .photo-card{position:absolute;bottom:15px;left:8%;width:84%;max-width:none;margin:0;z-index:1;transform-origin:bottom center;transform:scale(.4);opacity:0;transition:transform 1.3s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.welcome.drawing-photo .envelope-scene{height:calc(var(--envelope-width) * 1.26 + 145px)}
.welcome.drawing-photo .photo-card{opacity:1;transform:translateY(-120px) scale(1)}
.welcome.photo-ready .photo-card{z-index:3}
.welcome .flip-hint{font-size:13px;line-height:1.6;margin:4px 0 20px}
.photo-back{background:#fff9eb;padding:clamp(20px,5vw,30px);gap:17px}
.photo-back:before{content:'';position:absolute;inset:10px;border:1px solid #d9aaa780;border-radius:2px;pointer-events:none}
.photo-back>span{position:relative;z-index:1}
.photo-back .photo-message{font-size:clamp(15px,3.7vw,18px);line-height:1.6;color:#352c28}
.photo-back .photo-signature{font-size:20px}
@media(max-width:360px){.photo-back{padding:18px;gap:12px}.photo-back .photo-greeting{font-size:24px}.photo-back .photo-signature{font-size:17px}}
@media(prefers-reduced-motion:reduce){.envelope-scene,.envelope-scene .photo-card,.photo-inner{transition:none!important}}

/* White surroundings, with warm stationery reserved for the letter. */
:root{--paper:#fff}
body,.welcome{background:#fff}
body:before{display:none}
#continue{font-size:17px;line-height:1.5;padding:14px 22px;min-height:52px;border:1px solid #c98f8b;border-radius:4px;background:#fff9f8;transition:background .25s,transform .25s}
#continue:hover{background:#f9eae8;transform:translateY(-2px)}
.romantic-letter{position:fixed;width:min(620px,calc(100% - 30px));max-width:620px;max-height:90svh;overflow:auto;padding:45px 55px 40px;border:1px solid #d8c4a8;border-radius:3px;color:#514033;background-color:#fff9ed;background-image:linear-gradient(100deg,#eddec426,transparent 30%,#fffef980 70%,#e9d5b433);box-shadow:0 30px 90px #38221d35, inset 0 0 40px #dfc9a826}
.romantic-letter:before{content:'';position:absolute;inset:12px;border:1px solid #dfc5aa;pointer-events:none}
.romantic-letter::backdrop{background:#49342b66;backdrop-filter:blur(6px)}
.paper-ornament{text-align:center;color:#a65b53;font-size:25px;margin:0 0 16px}
.paper-kicker{text-align:center;color:#9e6556;font-size:9px;letter-spacing:2px}
.romantic-letter h2{font-family:'Segoe Print','Bradley Hand',cursive;font-size:32px;line-height:1.5;letter-spacing:-.5px;margin:25px 0 15px;color:#8d3d3b}
.paper-writing{background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#cbb59638 31px,#cbb59638 32px)}
.romantic-letter .paper-writing p{font-size:17px;line-height:32px;margin:0 0 32px}
.romantic-letter .paper-signature{font-family:'Segoe Print','Bradley Hand',cursive;font-size:21px;line-height:1.8;color:#8d3d3b;margin:10px 0 20px}
.paper-signature span{font-size:26px}
.paper-seal{width:48px;height:48px;border-radius:50%;border:4px double #ca8a78;background:#a24c46;color:#fce2c4;display:grid;place-items:center;font-size:25px;margin:auto;box-shadow:0 3px 8px #8f463825}
.romantic-letter .close{z-index:1;width:40px;height:40px;top:15px;right:15px;color:#8d3d3b}
@media(max-width:600px){.romantic-letter{padding:46px 28px 30px}.romantic-letter h2{font-size:27px}.romantic-letter .paper-writing p{font-size:16px}.paper-signature span{font-size:23px}#continue{font-size:16px}}

/* Blush opening scene and uncluttered love-note stationery. */
.welcome{background-color:#fff5f1;background-image:radial-gradient(ellipse at 12% 18%,#e9b4bd55,transparent 45%),radial-gradient(ellipse at 88% 80%,#ebbac455,transparent 45%),linear-gradient(145deg,#fff9f3,#fbe8e9);isolation:isolate}
.welcome:before,.welcome:after{content:'♡';position:absolute;z-index:-1;pointer-events:none;color:#c7858b26;font-family:Georgia,serif;line-height:1;font-size:clamp(180px,28vw,390px);transform:rotate(-20deg)}
.welcome:before{left:-65px;top:5%}
.welcome:after{right:-55px;bottom:3%;transform:rotate(18deg);font-size:clamp(160px,24vw,320px)}
.welcome h1{color:#80413f;text-shadow:0 2px 15px #ffffff80}
.welcome #welcome-subtitle,.welcome .flip-hint{color:#855d5d}
.photo-back{background:#fffaf7;background-image:linear-gradient(145deg,#fffdf9,#fff1f0);border-color:#d7aaa1;box-shadow:0 8px 25px #75464b26,inset 0 0 24px #f0d9ce30}
.photo-back:after{content:'♡';position:absolute;bottom:13px;right:18px;font-size:23px;line-height:1;color:#bc8581;pointer-events:none}
.photo-back .photo-greeting,.photo-back .photo-signature{color:#8b444b}
@media(max-width:600px){.welcome:before{left:-90px}.welcome:after{right:-65px}}

/* Keep the longer personal letter readable on small screens. */
.photo-back{overflow-y:auto;justify-content:safe center;gap:16px}
.photo-back .photo-message{font-size:clamp(14px,3.5vw,16px);line-height:1.55}
.photo-back .photo-greeting{font-size:clamp(24px,5vw,29px)}
.photo-back>span{flex-shrink:0}