@font-face{font-family:Marck;src:url('assets/marck-script.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#150103}body{margin:0;background:#380306;color:#f0d6c3;font-family:Marck,'Brush Script MT',cursive;overscroll-behavior-y:none}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #edcc91;outline-offset:7px}button:disabled{cursor:default}#experience{position:relative;max-width:480px;margin:auto;min-height:100svh;background:radial-gradient(ellipse at 40% 20%,#49060b 0%,#350205 65%,#300205);overflow:hidden;box-shadow:0 0 100px #0008}.grain{position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.17;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='.64' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.32' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}#experience:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background-image:radial-gradient(circle,#e7ba7f55 .65px,transparent 1.4px),radial-gradient(circle,#d3926544 .5px,transparent 1.5px);background-size:83px 127px,139px 193px;background-position:17px 23px,62px 41px}section{position:relative}[hidden]{display:none!important}.cover{min-height:100svh;display:flex;align-items:flex-start;justify-content:center}.invitation{width:100%;padding-top:clamp(140px,25svh,270px);text-align:center}h1{font-size:clamp(24px,6.2vw,30px);font-weight:400;line-height:1.1;margin:0 0 55px}.envelope{position:relative;display:block;width:62%;height:auto;aspect-ratio:1.57;margin:0 auto;border:0;padding:0;background:#8e0f20;transform:rotate(-9deg);filter:drop-shadow(0 12px 13px #1d000550);isolation:isolate}.env-front,.env-flap,.env-paper{position:absolute;inset:0;display:block}.env-paper{inset:9px;background:#f2e9d6;z-index:-1;transition:transform .35s}.env-front{background:linear-gradient(30deg,#7a0917,#a51225);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:2}.env-flap{background:linear-gradient(150deg,#b01929,#790d1c);clip-path:polygon(0 0,100% 0,50% 61%);transform-origin:top;transition:transform .32s;z-index:3;backface-visibility:hidden}.seal{position:absolute;display:grid;place-items:center;top:49%;left:44%;width:38px;height:38px;max-width:19%;aspect-ratio:1;border-radius:44% 49% 40% 48%;background:radial-gradient(circle at 30% 20%,#e0c37c,#b59a52 48%,#7b5a2d 90%);border:3px double #ceb273;box-shadow:1px 3px 3px #30020e77,inset 0 0 0 2px #80632d;color:#6d4d25;font:26px Georgia;transform:rotate(14deg);z-index:4}.click{position:absolute;left:65%;top:57%;font-size:11px;line-height:.9;transform:rotate(-9deg);color:#ebc4a8;z-index:5}.click span{font:24px Georgia}.opening .env-flap{transform:rotateX(180deg)}.opening .seal{opacity:0;transition:opacity .2s}.opening .env-paper{transform:translateY(-70px)}.cover.leaving{animation:cover-out .35s ease both}.letter-scene{height:100svh;min-height:740px;padding-top:clamp(145px,19svh,210px);isolation:isolate}.letter{position:relative;margin:0 7%;width:86%;padding:47px 14px 64px;text-align:center;color:#814445;background:#f4f0e5;box-shadow:0 8px 18px #12010355;transform:rotate(.6deg);clip-path:polygon(1% 1%,7% .3%,14% 1%,23% 0,31% .6%,41% 0,52% .8%,61% .1%,73% .8%,84% 0,95% .6%,99% 2%,100% 12%,99% 23%,100% 35%,99% 48%,100% 61%,99% 72%,100% 87%,98% 98%,91% 99%,80% 98%,69% 100%,58% 98.5%,46% 100%,34% 99%,22% 100%,11% 98.5%,3% 99%,0 96%,1% 84%,0 71%,1% 60%,0 48%,1% 37%,0 25%)}.letter:before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");opacity:.45;pointer-events:none}.letter h2{font-size:20px;font-weight:400;margin:0 0 24px}.letter p{font-size:21px;line-height:1.2;margin:0 0 22px}.letter p:last-of-type{margin-bottom:15px}.kiss{position:absolute;bottom:22px;left:22px;width:66px;mix-blend-mode:multiply;transform:rotate(-12deg)}.top-rose{position:absolute;top:40px;left:-30px;width:210px;height:300px;overflow:hidden;z-index:3;pointer-events:none;transform:rotate(24deg)}.top-rose img{width:210px;position:absolute;top:0;left:0}.letter-envelope{position:absolute;right:-13px;bottom:110px;width:58%;margin:0;transform:rotate(-15deg);z-index:5}.letter-tail{position:absolute;bottom:-150px;left:25%;width:65%;height:400px;overflow:hidden;z-index:-1}.letter-tail img{width:100%;transform:translateY(-380px)}.garden{height:2400px;margin-top:-40px;isolation:isolate}.vine{position:absolute;pointer-events:none;object-fit:contain;width:90%;left:5%;height:auto}.vine-a{top:0;transform:scaleX(-1)}.vine-b{top:1080px}.memory{position:absolute;width:90px;height:90px;border-radius:50%;border:1px solid #ccbba66b;box-shadow:0 6px 25px #13010566;background:radial-gradient(circle at 30% 20%,#b7aa90,#40513a);overflow:hidden;text-align:center;font-size:18px;line-height:1.05}.memory img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.memory:hover{transform:scale(1.06)}.m1{top:600px;left:13%}.m2{top:1080px;right:14%}.m3{top:1670px;left:18%}.return-note{height:120px;text-align:center}.return-note button{background:none;border:0;color:#c49a86;font-size:30px;padding:20px}.ending{min-height:100svh;background:radial-gradient(ellipse at 50% 60%,#590b13,#380409);padding:26svh 15% 160px}.end-envelope{position:absolute;top:-20px;left:-42px;width:66%;transform:rotate(-22deg)}.wish{position:relative;text-align:center;padding:30px 10px 70px;border:1px solid #76212a;box-shadow:0 0 0 15px #40070c,0 0 0 17px #521019,0 10px 35px #230005}.wish p{font-size:26px;line-height:1.21;margin:0 0 28px}.wish h2{font-size:29px;font-weight:400;margin:0}.bow{position:relative;width:70%;display:block;margin:-40px auto -80px;mix-blend-mode:lighten}#transition{position:fixed;inset:0;pointer-events:none;z-index:30;background:#390307;opacity:0;transition:opacity .25s}.transitioning #transition{opacity:1}.appearing{animation:paper-in .65s ease both}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes cover-out{to{opacity:0;transform:scale(1.06)}}@keyframes paper-in{from{opacity:0;transform:translateY(70px) scale(.96)}to{opacity:1;transform:none}}@media(min-width:600px){#experience{max-width:430px}.cover,.ending{min-height:900px}.letter-scene{height:900px}.invitation{padding-top:240px}.ending{padding-top:235px}}@media(max-width:360px){.letter p{font-size:18px}.letter h2{font-size:18px}.letter{padding:38px 9px 60px}.letter-scene{min-height:680px}.seal{width:33px;height:33px;font-size:21px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.top-rose{height:190px}.letter-envelope{top:calc(clamp(145px,19svh,210px) + 330px);bottom:auto}.kiss{mix-blend-mode:darken}
/* Continuous vine and shared-envelope transitions. */
#journey{--story-width:min(100vw,430px)}
.garden{height:calc(var(--story-width)*5.7);margin-top:-40px}
.vine-a{width:90%;top:0;left:5%}
.vine-b{width:90%;left:5%;top:calc(var(--story-width)*2.65);transform:scaleX(-1)}
.m1{top:calc(var(--story-width)*1.35)}.m2{top:calc(var(--story-width)*2.65)}.m3{top:calc(var(--story-width)*4.1)}
.letter-tail{bottom:-45px;height:300px;mask-image:linear-gradient(transparent,#000 18%,#000 75%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 75%,transparent)}
.letter-envelope{top:calc(clamp(145px,19svh,210px) + 330px)}
.letter p{font-size:20px;line-height:1.25}.letter h2{font-size:22px}
.envelope{perspective:900px}.flying-envelope{will-change:transform,top,left,width,height;contain:layout style;max-width:none}
.flying-envelope .env-paper{display:none}.click{font-size:10px;left:64%;top:57%;white-space:nowrap}
.cover,.ending{overflow:clip}.cover.leaving,.appearing{animation:none}
@media(max-width:360px){.letter p{font-size:18px}.letter h2{font-size:20px}}