@font-face{font-family:Pirata;src:url('assets/PirataOne-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Caveat;src:url('assets/Caveat.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--ink:#f1e7e2;--muted:#c997a5;--wine:#77132e;--line:#784052;--hand:Caveat,'Segoe Print','Bradley Hand',cursive;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{background:#080205}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(ellipse at top,#25050f 0,#080205 65%);min-height:100svh}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #f3c2cf;outline-offset:5px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}button{touch-action:manipulation}img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}.experience{width:min(100%,1440px);margin:auto;padding:clamp(12px,2.3vw,32px) 16px 16px}.stage{isolation:isolate;position:relative;aspect-ratio:16/9;overflow:hidden;background:#150307;border:1px solid #43202a;border-radius:12px;box-shadow:0 25px 90px #0008}.scene-plane{position:absolute;inset:0;overflow:hidden;filter:grayscale(0) contrast(1)}.scene-backdrop{position:absolute;inset:0;background:linear-gradient(180deg,#0801051f,#06010599 90%),url('assets/forest-destiny.webp') center center/cover no-repeat}.scene-plane:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px 20px #03000360}.masthead{position:absolute;inset:3.2% 3.2% auto;display:flex;align-items:center;justify-content:space-between;z-index:8;pointer-events:none}.wordmark{font:clamp(25px,3vw,40px)/1 Pirata,serif;letter-spacing:.01em}.wordmark span{vertical-align:middle;margin-left:12px;font:7px/1.4 Arial,sans-serif;letter-spacing:2.7px;text-transform:uppercase;color:#c18b99}.initials{font-size:10px;letter-spacing:3px;color:#d1a2ae}.scene-content{position:absolute;inset:0;overflow:hidden}.scene{position:absolute;inset:0;animation:scene-enter .45s ease both}.scene>*{position:relative;z-index:2}.scene-title{margin:0;font:clamp(24px,4.2vw,56px)/1.15 Pirata,Georgia,serif;font-weight:400;text-wrap:balance}.eyebrow{font-size:clamp(8px,.8vw,11px);letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:400;line-height:1.6}.hand{font-family:var(--hand);font-weight:400}.center{text-align:center}.ornament{display:block;width:130px;height:1px;margin:25px auto;background:linear-gradient(90deg,transparent,#bd5f78,transparent)}.ornament:after{content:'✦';position:relative;display:block;top:-9px;line-height:18px;text-align:center;font-size:14px;color:#bf6078}.scene-label{position:absolute;top:14%;left:50%;transform:translateX(-50%);width:68%;text-align:center;margin:0}.portrait{position:absolute;z-index:2;pointer-events:none;transform-origin:50% 80%}.portrait img{width:100%;height:100%;object-fit:contain}.portrait--lukas{height:91%;width:auto;aspect-ratio:1247/1261;left:-1.5%;bottom:-19%;animation:paper-left 5s ease-in-out infinite}.portrait--yasmim{height:88%;width:auto;aspect-ratio:999/1574;right:3%;bottom:0;animation:paper-right 5.3s ease-in-out infinite}.name-strip{position:absolute;bottom:0;left:0;right:0;height:7.8%;background:#10050bdd;border-top:1px solid #58232f;display:flex;align-items:center;justify-content:space-around;z-index:5;font:clamp(16px,2vw,25px)/1 var(--hand);color:#d8b5c0}.name-strip .heart{font:20px/1 Arial,sans-serif;color:#ba284e}.bubble{position:absolute;margin:0;background:#17080ff5;border:1px solid #a55c71;border-radius:18px;padding:1.8% 2.1%;font:clamp(19px,2.7vw,34px)/1.2 var(--hand);text-align:center;box-shadow:0 7px 28px #0003;text-wrap:balance;z-index:4}.bubble:after{content:"";position:absolute;width:17px;height:17px;bottom:-10px;background:#17080f;border-right:1px solid #a55c71;border-bottom:1px solid #a55c71;transform:skewY(33deg);left:25px}.bubble--right:after{left:auto;right:25px;transform:skewY(-33deg)}.reveal-later{animation:reveal .7s .35s both}.reveal-last{animation:reveal .7s .7s both}.invitation .bubble--first{top:22%;left:30%;width:32%}.invitation .bubble--second{top:40%;left:53%;width:15%}.conversation-wave{position:absolute;top:61%;left:39%;width:24%;height:17%;border:1px solid #713344;border-radius:16px;background:#090207ce;text-align:center;padding-top:13px;z-index:4}.conversation-wave .eyebrow{font-size:8px;letter-spacing:2px}.wave-bars{display:flex;height:42px;align-items:center;justify-content:center;gap:5px}.wave-bars i{display:block;width:2px;height:var(--h);background:#d88fa4;border-radius:2px;animation:wave 1s var(--delay) ease-in-out infinite}.birds .bubble--first{top:29%;left:35%;width:31%}.birds .bubble--second{top:57%;left:26%;width:38%;line-height:1.15}.bird-sparkle{position:absolute;top:19%;right:19%;z-index:4;color:#d19aaa;font-size:28px;animation:twinkle 2s infinite}.bird-sparkle.two{top:25%;right:9%;font-size:16px;animation-delay:.7s}.company .scene-title{position:absolute;top:16%;left:15%;right:15%;text-align:center}.company .portrait--lukas{left:15%;height:86%;bottom:-17%;transform:rotate(4deg)}.company .portrait--yasmim{right:19%;height:73%;bottom:0;transform:rotate(-4deg)}.paper-heart{position:absolute;left:33%;top:38%;width:34%;aspect-ratio:1/1;background:#850d31aa;transform:rotate(-45deg);border:1px solid #a93f5c;animation:heart-beat 2.4s ease-in-out infinite}.paper-heart:before,.paper-heart:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:#850d31aa}.paper-heart:before{top:-50%;left:0}.paper-heart:after{left:50%;top:0}.company .name-strip{justify-content:center;gap:12px}.single .portrait--lukas{left:2%;bottom:-19%}.single .story-copy{position:absolute;left:48%;width:43%;top:32%;font:clamp(25px,3vw,40px)/1.5 var(--hand);text-wrap:balance}.single .story-copy p{margin:0}.single .story-copy .ornament{margin:30px 0}.single .name-strip{padding-left:18%;justify-content:flex-start}.thoughts .scene-title{position:absolute;top:14%;left:46%;right:6%;font-size:clamp(28px,3.5vw,46px);text-align:center}.thought{position:absolute;border:1px solid #956e82;border-radius:26px;background:#120812ed;padding:2% 2.2%;font:clamp(19px,2.5vw,30px)/1.25 var(--hand);text-align:center;z-index:4}.thought:after{content:"";position:absolute;width:10px;height:10px;border:1px solid #956e82;border-radius:50%;background:#120812;left:18px;bottom:-18px}.thought:before{content:"";position:absolute;width:5px;height:5px;border:1px solid #956e82;border-radius:50%;background:#120812;left:3px;bottom:-31px}.thought.one{left:4%;top:25%;width:31%}.thought.two{left:48%;top:35%;width:43%}.thought.three{left:53%;top:61%;width:35%}.choices .choice-content{position:absolute;top:20%;left:48.5%;width:41%;z-index:4}.choices .scene-title{font-size:clamp(30px,3.5vw,47px);margin-bottom:5%}.choice-list{list-style:none;display:grid;gap:12px;padding:0;margin:0}.choice-card{display:flex;align-items:center;gap:17px;min-height:59px;padding:14px 18px;background:#10070ff2;border:1px solid #553344;border-radius:11px;font-size:clamp(13px,1.45vw,19px);transition:background .15s,border-color .15s}.choice-marker{width:23px;height:23px;display:grid;place-items:center;border:1px solid #806376;border-radius:50%;color:#c6a8b7;font-size:11px;flex:none}.choice-card.is-selected{background:#6a112d;border-color:#e16b8b}.choice-card.is-selected .choice-marker{color:#ffd9e4;border-color:#bd8ca0}.choice-caption{margin-top:6%;visibility:hidden;opacity:0;transition:opacity .2s}.choice-caption p{font-size:clamp(12px,1.35vw,17px);color:#d6bac8;margin:0 0 8px}.choice-caption strong{font:clamp(24px,2.6vw,35px)/1.3 var(--hand);font-weight:400;color:#f1c3d0}.choices.has-chosen .choice-caption{visibility:visible;opacity:1}.freeze-locked .portrait,.freeze-locked .scene{animation-play-state:paused!important}.scene-plane.is-frozen{filter:grayscale(1) contrast(1.12);transition:filter 1.366667s cubic-bezier(.333333,0,.666667,1)}.friends .bubble--first{left:38%;top:25%;width:29%}.friends .bubble--second{left:41%;top:44%;width:30%}.friends .scene-label{top:13%}.friends .portrait--lukas{animation:small-shiver .65s 1.4s infinite}.tear{position:absolute;top:23.4%;left:var(--x);width:9px;height:15px;border-radius:70% 30% 65% 45%;background:#89d9ef;border:1px solid #cef6ff;transform:rotate(-12deg);opacity:0;animation:tear-fall 1.6s var(--delay) linear infinite;box-shadow:inset 2px 0 0 #d9f8ff99}.tear:after{content:"";position:absolute;width:2px;height:5px;left:2px;top:5px;background:#edfcff;border-radius:50%}.envelope-scene .scene-title{position:absolute;left:63%;top:23%;width:28%;text-align:center}.photo-card{position:absolute;width:42%;height:70%;left:8%;top:22%;transform:rotate(-5deg);padding:10px 10px 45px;border:1px solid #b48293;background:#17070f;box-shadow:0 20px 40px #0004;overflow:hidden}.photo-card-inner{position:absolute;inset:10px 10px 45px;background:#390b19;overflow:hidden}.photo-card-inner .paper-heart{left:26%;top:44%;width:45%}.photo-card-inner .portrait--lukas{height:126%;left:-15%;bottom:-37%;animation:none;transform:rotate(4deg)}.photo-card-inner .portrait--yasmim{height:111%;right:0;bottom:-8%;animation:none;transform:rotate(-4deg)}.photo-caption{position:absolute;left:4%;right:4%;bottom:10px;text-align:center;font:clamp(13px,1.9vw,24px)/1.2 var(--hand);color:#eccdd4}.envelope-button{position:absolute;left:63%;top:43%;width:28%;border:0;background:none;padding:0;text-align:center}.envelope{position:relative;display:block;width:100%;aspect-ratio:1.49;background:#380914;border:1px solid #bd637b;border-radius:5px;box-shadow:0 16px 30px #0003;transition:transform .3s}.envelope:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 62%,100% 0);background:#8b2b47}.envelope:after{content:"";position:absolute;inset:0;clip-path:polygon(0 100%,50% 47%,100% 100%);background:#4b0b20}.envelope .seal{position:absolute;left:44%;top:48%;z-index:2;color:#e27694;font-size:32px;line-height:1}.envelope-button .button-label{display:inline-block;margin-top:28px;border:1px solid #b45671;padding:13px 21px;background:#77132e;border-radius:6px;font-size:14px}.envelope-button:hover .envelope{transform:translateY(-6px)}.gate{display:grid;place-content:center;text-align:center}.gate .scene-title{font-size:clamp(45px,7.4vw,95px);max-width:90%;margin:auto}.gate-copy{margin:0 auto;max-width:92%;padding:60px 24px}.gate .eyebrow{margin:0 0 24px;letter-spacing:4px}.gate .ornament{margin:30px auto 35px;width:180px}.open-button{border:1px solid #bb647c;padding:16px 27px;background:#77132ee8;border-radius:8px;box-shadow:0 8px 35px #0004;font-size:15px;transition:background .2s,transform .2s}.open-button:hover{transform:translateY(-2px);background:#902040}.open-button span{padding-left:17px}.gate-hint{font-size:11px;letter-spacing:.1em;color:#bd9ba7;margin-top:20px}.sound-button{position:absolute;right:2.6%;bottom:10%;z-index:12;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:10px;border:1px solid #744154;border-radius:50px;background:#11070dda;color:#e7c9d3;backdrop-filter:blur(10px);font-size:11px}.sound-button svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sound-button .sound-waves{display:none}.sound-button[aria-pressed=true] .sound-cross{display:none}.sound-button[aria-pressed=true] .sound-waves{display:block}.story-controls{position:relative;z-index:15;display:flex;align-items:center;gap:24px;padding:20px 1px 0}.back-button,.next-button{border:1px solid #623344;min-height:46px;border-radius:8px;padding:0 18px;background:#13070d;font-size:13px}.back-button{color:#c5a3b0}.back-button span{padding-right:7px}.next-button{margin-left:auto;background:#68142b;border-color:#91415a;min-width:138px}.next-button span{padding-left:18px}.next-button:disabled{opacity:.55}.back-button:disabled{opacity:.3}.progress{width:135px;position:absolute;left:50%;transform:translateX(-50%);text-align:center;font-size:9px;letter-spacing:2px;color:#ba8b9a;pointer-events:none}.progress-rail{height:1px;background:#43202d;margin:0 0 8px}.progress-rail i{height:1px;display:block;background:#ce7a92;width:0;transition:width .4s}.letter-stage{aspect-ratio:auto;min-height:720px}.letter-stage .scene-plane{position:relative;min-height:720px}.letter-stage .scene-content{position:relative;padding:90px 8% 65px;overflow:visible}.letter-stage .scene{position:relative}.letter-stage .masthead{top:25px}.letter-stage .sound-button{top:17px;right:22px;bottom:auto}.letter-stage .initials{visibility:hidden}.letter-paper{position:relative;max-width:880px;margin:auto;background:#060104ed;border:1px solid #73303d;padding:40px 52px 46px;box-shadow:9px 9px 0 #27081185,0 30px 80px #0005}.letter-paper:before,.letter-paper:after{content:"";position:absolute;width:24px;height:24px;border-color:#6f3045;border-style:solid}.letter-paper:before{left:10px;top:10px;border-width:1px 0 0 1px}.letter-paper:after{right:10px;bottom:10px;border-width:0 1px 1px 0}.letter-paper .eyebrow{font-size:9px;margin:0 0 19px}.letter-paper .scene-title{font-size:48px;margin:0 0 30px}.letter-paper p{font-size:18px;line-height:1.75;color:#e8dde0;margin:0 0 24px}.letter-paper p:last-child{margin-bottom:0}.letter-stage .scene-plane:after{box-shadow:inset 0 0 80px #0004}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.noscript-note{position:fixed;inset:0;display:grid;place-content:center;background:#100207;padding:30px;z-index:100}.photo-error .portrait{visibility:hidden}
@keyframes scene-enter{from{opacity:0}to{opacity:1}}@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes paper-left{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-.9deg) translateY(-3px)}}@keyframes paper-right{0%,100%{transform:rotate(1.5deg)}50%{transform:rotate(.4deg) translateY(-3px)}}@keyframes wave{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}@keyframes heart-beat{0%,100%{transform:rotate(-45deg) scale(.97)}50%{transform:rotate(-45deg) scale(1.03)}}@keyframes tear-fall{0%{opacity:0;translate:0 0;scale:.72}8%{opacity:.95}75%{opacity:.8}100%{opacity:0;translate:var(--drift) 165px;scale:1.1}}@keyframes small-shiver{0%,100%{transform:translateX(-.4px)}50%{transform:translateX(.4px)}}
@media (min-width:1600px){.experience{padding-top:40px}}@media (max-width:900px) and (orientation:landscape){.experience{width:100%;padding:0 10px 8px}.stage{max-width:calc((100svh - 70px)*16/9);margin:auto}.story-controls{max-width:calc((100svh - 70px)*16/9);margin:auto;padding-top:10px}.back-button,.next-button{min-height:42px}.scene-title{font-size:32px}.bubble{font-size:22px;border-radius:12px}.choice-list{gap:6px}.choice-card{min-height:36px;padding:7px 10px;font-size:12px}.choice-caption{margin-top:3%}.choices .scene-title{font-size:28px;margin-bottom:3%}.choice-caption strong{font-size:23px}.sound-button{min-height:32px;padding:7px}.wordmark span{display:none}.letter-stage,.letter-stage .scene-plane{max-width:none;min-height:0}.letter-stage .scene-content{padding:65px 7% 30px}}
@media (max-width:650px) and (orientation:portrait){
  .experience{padding:0 0 calc(72px + var(--safe-bottom));width:100%}.stage{aspect-ratio:auto;height:calc(100svh - 72px - var(--safe-bottom));min-height:510px;border:0;border-radius:0}.scene-backdrop{background-position:50% 40%}.masthead{inset:24px 22px auto}.wordmark{font-size:30px}.wordmark span{font-size:6px;letter-spacing:2px;margin-left:8px}.initials{font-size:8px;letter-spacing:2px}.scene-plane:after{box-shadow:inset 0 0 60px #03000365}.scene-label{top:15%;width:90%;font-size:8px;letter-spacing:2px}.portrait--lukas{height:62%;left:-29%;bottom:-11%;animation-duration:6s}.portrait--yasmim{height:58%;right:-8%;bottom:0}.name-strip{height:7%;font-size:20px;justify-content:space-between;padding:0 17%;}.name-strip .heart{font-size:14px}.bubble{font-size:clamp(22px,6.2vw,29px);padding:13px 14px;border-radius:14px;line-height:1.14}.bubble:after{width:12px;height:12px;bottom:-8px}.invitation .bubble--first{left:9%;top:23%;width:72%}.invitation .bubble--second{left:55%;top:37%;width:30%}.conversation-wave{top:auto;bottom:11%;left:35%;width:33%;height:12%;padding-top:11px;border-radius:11px}.conversation-wave .eyebrow{font-size:6px;letter-spacing:1px}.wave-bars{height:30px;gap:3px}.birds .scene-label{top:14%;font-size:7px;letter-spacing:1.8px}.birds .bubble--first{top:22%;left:15%;width:72%}.birds .bubble--second{top:37%;left:8%;width:83%;font-size:25px;line-height:1.15}.birds .portrait--lukas{height:55%;left:-25%;bottom:-10%}.birds .portrait--yasmim{height:50%;right:-8%;bottom:0}.birds .bird-sparkle{top:54%;right:23%;font-size:20px}.birds .bird-sparkle.two{top:60%;right:5%;font-size:12px}.company .scene-title{top:20%;left:8%;right:8%;font-size:42px}.company .portrait--lukas{height:67%;left:-12%;bottom:-12%}.company .portrait--yasmim{height:57%;right:-2%;bottom:0}.company .paper-heart{width:43%;left:29%;top:58%}.single .portrait--lukas{height:70%;left:-6%;bottom:-16%}.single .story-copy{top:22%;left:10%;width:80%;text-align:center;font-size:29px;line-height:1.4}.single .story-copy .ornament{margin:24px auto}.single .name-strip{padding-left:26%;justify-content:flex-start}.thoughts .portrait--lukas{height:60%;bottom:-13%;left:-10%}.thoughts .scene-title{top:17%;left:5%;right:5%;font-size:34px}.thought{font-size:25px;padding:13px 17px;border-radius:19px}.thought.one{left:6%;top:29%;width:72%}.thought.two{left:16%;top:43%;width:79%;font-size:23px}.thought.three{left:28%;top:61%;width:66%;font-size:24px}.thought:after,.thought:before{display:none}.choices .portrait--lukas{height:50%;bottom:-13%;left:-15%;z-index:2}.choices .choice-content{top:16%;left:7%;width:86%}.choices .scene-title{font-size:35px;margin:0 0 24px;text-align:center}.choice-list{gap:10px}.choice-card{padding:13px 14px;min-height:51px;border-radius:10px;font-size:14px;gap:12px}.choice-marker{width:22px;height:22px}.choice-caption{margin-top:21px;margin-left:30%;text-align:right}.choice-caption p{font-size:12px;line-height:1.5}.choice-caption strong{font-size:28px}.choices .name-strip{padding-left:24%;}.friends .scene-label{top:15%}.friends .bubble--first{top:23%;left:15%;width:70%}.friends .bubble--second{top:38%;left:19%;width:73%}.friends .portrait--lukas{height:54%;left:-24%;bottom:-9%}.friends .portrait--yasmim{height:51%;right:-8%;bottom:0}.tear{width:6px;height:10px;animation-name:tear-fall-mobile}.envelope-scene .scene-title{left:10%;top:16%;width:80%;font-size:43px}.photo-card{width:53%;height:38%;left:10%;top:30%;padding:6px 6px 35px}.photo-card-inner{inset:6px 6px 35px}.photo-caption{bottom:8px;font-size:17px;line-height:1.1}.envelope-button{left:49%;top:61%;width:39%;z-index:6}.envelope-button .seal{font-size:26px}.envelope-button .button-label{margin-top:15px;font-size:12px;padding:11px 13px}.gate-copy{padding:70px 18px}.gate .scene-title{font-size:65px;line-height:1.05}.gate .eyebrow{font-size:9px;letter-spacing:3px}.gate .ornament{margin:30px auto 34px}.open-button{padding:17px 23px;font-size:14px;min-height:52px}.gate-hint{font-size:10px;max-width:210px;line-height:1.6;margin:20px auto 0}.sound-button{bottom:auto;top:68px;right:17px;min-height:34px;padding:7px 9px;font-size:10px}.sound-button svg{width:14px;height:14px}.story-controls{position:fixed;bottom:0;left:0;right:0;width:100%;padding:12px 14px calc(12px + var(--safe-bottom));background:#0b0308f5;border-top:1px solid #3f1d2c;gap:12px;backdrop-filter:blur(15px)}.back-button,.next-button{min-height:45px;padding:0 14px;font-size:12px}.next-button{min-width:120px}.next-button span{padding-left:12px}.back-button span{padding-right:4px}.progress{width:57px;font-size:8px;letter-spacing:1px}.progress-rail{margin-bottom:6px}.letter-stage{height:auto;min-height:calc(100svh - 74px)}.letter-stage .scene-plane{min-height:calc(100svh - 74px)}.letter-stage .masthead{top:24px}.letter-stage .sound-button{top:65px;right:17px}.letter-stage .scene-content{padding:122px 17px 35px}.letter-paper{padding:30px 25px 34px;box-shadow:5px 5px 0 #27081185}.letter-paper .scene-title{font-size:43px;margin-bottom:23px}.letter-paper .eyebrow{font-size:8px}.letter-paper p{font-size:16px;line-height:1.7;margin-bottom:22px}
}
@keyframes tear-fall-mobile{0%{opacity:0;translate:0 0;scale:.7}8%{opacity:.95}75%{opacity:.8}100%{opacity:0;translate:var(--drift) 90px;scale:1.1}}
@media (max-width:360px) and (orientation:portrait){.wordmark span{display:none}.bubble{font-size:23px}.birds .bubble--second{font-size:23px}.choices .choice-card{font-size:13px}.choice-caption{margin-top:15px}.choice-caption strong{font-size:25px}.progress{width:34px}.next-button{min-width:116px}.letter-paper{padding-left:20px;padding-right:20px}.letter-paper p{font-size:15px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.scene,.portrait,.wave-bars i,.paper-heart,.bird-sparkle,.reveal-later,.reveal-last{animation:none!important}.tear{animation-duration:3s}.scene-plane.is-frozen{transition-duration:1.366667s}.envelope-button:hover .envelope{transform:none}}

/* Touch feedback and story transitions. Audio/freeze timing stays independent. */
.open-button,.next-button,.back-button,.sound-button{position:relative;overflow:hidden;isolation:isolate;transition:background .2s,border-color .2s,box-shadow .25s,scale .18s}
.sound-button{position:absolute}
.open-button:active,.next-button:active,.back-button:active,.sound-button:active{scale:.96}
.open-button>span:not(.tap-ring),.next-button>span:not(.tap-ring),.back-button>span:not(.tap-ring){display:inline-block;transition:translate .25s}
button.is-tapped{animation:button-tap .5s cubic-bezier(.22,1,.36,1)}
.tap-ring{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;padding:0!important;border:1px solid #ffbfce99;border-radius:50%;background:#ffb0c341;pointer-events:none;z-index:4;animation:tap-ripple .6s ease-out both}
.stage.is-transitioning~.story-controls button:disabled{opacity:1}
.stage{--motion-distance:22px}
.stage[data-direction=back]{--motion-distance:-22px}
.scene{animation:story-arrive .48s cubic-bezier(.16,1,.3,1) both}
.scene-content.is-leaving{animation:story-depart .2s ease-in both;pointer-events:none}
.scene .bubble:not(.reveal-later),.scene .story-copy{animation:reveal .65s .14s both}
.scene .scene-title{animation:title-arrive .75s .1s cubic-bezier(.16,1,.3,1) both}
.scene .letter-paper{animation:letter-arrive .8s cubic-bezier(.16,1,.3,1) both}
.scene .letter-paper p{animation:reveal .65s .18s both}
.scene .letter-paper p:nth-of-type(2){animation-delay:.28s}
.scene .letter-paper p:nth-of-type(3){animation-delay:.38s}
.sound-button svg{transition:rotate .3s,scale .3s}
.sound-button.is-tapped svg{rotate:12deg;scale:1.15}
.envelope{perspective:900px}
.envelope:before{z-index:3;transform-origin:top;transition:transform .5s cubic-bezier(.22,1,.36,1);backface-visibility:hidden}
.envelope:after{z-index:2}
.envelope .seal{z-index:4;transition:opacity .2s,scale .3s}
.envelope-paper{position:absolute;inset:12% 8% 6%;display:block;background:linear-gradient(135deg,#dec3c9,#b88d9c);border:1px solid #e8cad3;border-radius:3px;transition:translate .5s .1s cubic-bezier(.22,1,.36,1)}
.envelope-paper:after{content:'♥';position:absolute;inset:15% 0 auto;text-align:center;color:#7c2340;font:24px/1 Georgia,serif}
.is-opening-letter .envelope:before{transform:rotateX(165deg)}
.is-opening-letter .envelope-paper{translate:0 -38%}
.is-opening-letter .envelope .seal{opacity:0;scale:.6}
.is-opening-letter .envelope{transform:translateY(-8px)}
.is-opening-letter .photo-card{transition:rotate .55s;rotate:3deg}

/* Keep the thoughts in their own column, clear of the portrait. */
.thoughts .thought-list{position:absolute;top:29%;left:50%;width:41%;display:grid;gap:clamp(16px,2vw,28px);z-index:4}
.thought-list .thought{position:relative;inset:auto;width:100%;margin:0;padding:clamp(12px,1.4vw,20px) 18px;font-size:clamp(19px,2.1vw,28px);border-radius:20px;animation:thought-arrive .65s .18s cubic-bezier(.16,1,.3,1) both}
.thought-list .thought.two{animation-delay:.38s}
.thought-list .thought.three{animation-delay:.58s}
.thought-list .thought:after{left:-14px;bottom:12px;width:8px;height:8px}
.thought-list .thought:before{left:-25px;bottom:4px;width:4px;height:4px}
.thoughts .scene-title{left:48%;right:7%}
@media (hover:hover){
  .next-button:hover,.open-button:hover{background:#8b2140;border-color:#df819b;box-shadow:0 5px 26px #b42c5130}
  .back-button:hover,.sound-button:hover{background:#30101e;border-color:#ad6680;box-shadow:0 3px 20px #8c244b20}
  .open-button:hover>span:not(.tap-ring),.next-button:hover>span:not(.tap-ring){translate:4px 0}
  .back-button:hover>span:not(.tap-ring){translate:-3px 0}
}
@keyframes button-tap{0%{scale:1}24%{scale:.95}65%{scale:1.025}100%{scale:1}}
@keyframes tap-ripple{from{opacity:.85;transform:scale(.3)}to{opacity:0;transform:scale(18)}}
@keyframes story-arrive{from{opacity:0;translate:var(--motion-distance) 8px}to{opacity:1;translate:0 0}}
@keyframes story-depart{from{opacity:1;translate:0 0}to{opacity:0;translate:calc(var(--motion-distance)*-1) -5px}}
@keyframes title-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes thought-arrive{from{opacity:0;translate:12px 7px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes letter-arrive{from{opacity:0;translate:0 30px;rotate:-1deg}to{opacity:1;translate:0 0;rotate:0deg}}
@media (max-width:900px) and (orientation:landscape){
  .thoughts .thought-list{top:29%;gap:10px}
  .thought-list .thought{padding:8px 10px;font-size:clamp(14px,2vw,19px);border-radius:13px}
  .thoughts .scene-title{font-size:clamp(22px,3.5vw,32px)}
}
@media (max-width:650px) and (orientation:portrait){
  .stage{--motion-distance:14px}
  .stage[data-direction=back]{--motion-distance:-14px}
  .thoughts .scene-title{top:17%;left:5%;right:5%;font-size:32px}
  .thoughts .thought-list{top:26%;left:9%;width:82%;gap:12px}
  .thought-list .thought{padding:11px 14px;font-size:clamp(21px,5.5vw,26px);border-radius:17px}
  .thoughts .portrait--lukas{height:46%;bottom:-8%;left:50%;translate:-50% 0}
  .thoughts .name-strip{justify-content:center;padding-left:0;padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .scene{animation:soft-arrive .3s ease-out both!important}
  .scene-content.is-leaving{animation:soft-depart .14s ease-in both!important}
  .scene .scene-title,.scene .story-copy,.scene .bubble,.scene .letter-paper,.scene .letter-paper p,.thought-list .thought{animation:soft-arrive .4s ease-out both!important}
  button.is-tapped{animation:button-glow .5s ease-out!important}
  .tap-ring{display:none}
  .open-button,.next-button,.back-button,.sound-button,.envelope,.envelope:before,.envelope-paper,.envelope .seal,.sound-button svg{transition:none}
  .open-button:active,.next-button:active,.back-button:active,.sound-button:active{scale:1}
  .sound-button.is-tapped svg{rotate:none;scale:1}
}
@keyframes soft-arrive{from{opacity:0}to{opacity:1}}
@keyframes soft-depart{from{opacity:1}to{opacity:0}}
@keyframes button-glow{0%,100%{box-shadow:0 0 0 transparent}30%{box-shadow:inset 0 0 22px #ef829348,0 0 22px #b83d4c44}}
@media (max-width:650px) and (max-height:700px) and (orientation:portrait){
  .thoughts .scene-title{top:19%}
  .thoughts .thought-list{top:29%}
}