:root{--rose:#c79fa4;--cream:#f3e9dd;--sage:#707347;--gold:#c5a46d;--scroll:0;--travel:0px;color-scheme:light}*{box-sizing:border-box}html{background:#38473b;scroll-behavior:smooth}body{margin:0;font-family:Georgia,serif;color:var(--cream)}button{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%}.world{position:relative;isolation:isolate;max-width:520px;margin:auto;overflow:hidden;background:#a2aa8e;box-shadow:0 0 100px #182b2780}.landscape{position:absolute;inset:-30px 0;background:url('../assets/images/garden.webp') center top/100% auto repeat-y;z-index:-3;transform:translate3d(0,var(--travel),0);will-change:transform}.world:before{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23806d51' opacity='.4' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.waterlight{position:absolute;inset:25% 0 0;z-index:-2;background:linear-gradient(180deg,transparent,#aeb6a86b 20%,#bfc2ae6b 58%,transparent);pointer-events:none}.opening{position:relative;padding-top:clamp(220px,31svh,320px);height:clamp(850px,210vw,1100px)}.envelope-scene{position:relative;width:86%;aspect-ratio:1.4;margin:auto;perspective:1200px;isolation:isolate}.envelope-back{position:absolute;inset:10% 5% 12%;background:linear-gradient(140deg,#9d777c,#d9b5b8 60%);box-shadow:0 15px 25px #26332d40}.envelope-front{position:absolute;inset:0;z-index:5;clip-path:polygon(0 10%,50% 70%,100% 10%,100% 100%,0 100%);filter:drop-shadow(0 8px 4px #3a2c3026)}.envelope-front img,.flap>img{width:100%;height:100%;filter:sepia(.4) saturate(.55);mix-blend-mode:multiply}.envelope-front:after,.flap:after{position:absolute;inset:0;content:"";background:#c5909d;mix-blend-mode:color;pointer-events:none;opacity:.86}.flap-control{padding:0;border:0;position:absolute;inset:0;background:transparent;z-index:8;cursor:pointer;perspective:1200px;color:inherit}.flap-control:focus-visible{outline:2px solid var(--cream);outline-offset:12px}.flap{position:absolute;inset:0;display:block;transform-origin:50% 9%;transition:transform 1.65s cubic-bezier(.3,.02,.2,1);transform-style:preserve-3d;clip-path:polygon(0 0,100% 0,100% 10%,97% 22%,92% 30%,86% 39%,78% 48%,68% 58%,59% 68%,57% 76%,43% 76%,40% 68%,31% 58%,23% 48%,15% 39%,8% 29%,3% 20%)}.seal{position:absolute;left:43%;top:55%;width:14%;aspect-ratio:1;border-radius:48% 52% 46% 54%;background:linear-gradient(135deg,#e0cb94,#ac8959 60%,#d4bc82);box-shadow:inset 0 0 0 3px #b89965,inset 0 0 0 5px #dbc592,0 3px 5px #654f5040;display:grid;place-items:center;color:#876e45;font-size:clamp(22px,7vw,35px);z-index:4;transition:transform .25s}.flap-control:active .seal{transform:scale(.9)}.insert{position:absolute;inset:12% 12% 5%;background:var(--cream);border-radius:48% 48% 0 0/15% 15% 0 0;z-index:2;overflow:hidden;transition:transform 1.6s .35s cubic-bezier(.2,.7,.2,1)}.insert>img{position:absolute;width:100%;opacity:.3;filter:sepia(1) hue-rotate(300deg);top:3%}.insert-border{position:absolute;inset:6%;border:1px solid #c79fa499;border-radius:50% 50% 0 0/20% 20% 0 0}.record-rise{position:absolute;width:76%;left:12%;top:10%;z-index:3;transition:transform 1.7s .5s cubic-bezier(.2,.7,.2,1)}.record{position:relative;aspect-ratio:1;border-radius:50%}.record img{width:100%;filter:saturate(.25)}.record-label{position:absolute;width:31%;aspect-ratio:1;top:34.5%;left:34.5%;border-radius:50%;background:#c79fa4;border:1px solid #a78082;display:grid;place-items:center;color:#725f55;font-size:32px;box-shadow:inset 0 0 0 4px #d9b5b8}.record-label:after{content:"";position:absolute;width:5px;height:5px;background:#1b211c;border-radius:50%;top:49%;left:49%}.is-open .flap-control{z-index:1}.is-open .flap{transform:rotateX(170deg);filter:brightness(.91)}.is-open .insert{transform:translateY(-57%)}.is-open .record-rise{transform:translateY(-39%)}.is-open .record{animation:spin 26s 2s linear infinite}.flowers{position:absolute;pointer-events:none;z-index:10;filter:drop-shadow(1px 6px 4px #26332d3a)}.flowers-left{width:65%;left:-15%;top:-22%;transform:rotate(-28deg)}.flowers-right{width:48%;right:-12%;bottom:-4%;transform:rotate(145deg)}.scroll-hint{text-align:center;opacity:.8;height:64px;padding-top:10px;font-size:24px;transition:opacity .4s}.scroll-hint span{display:block;width:1px;height:22px;background:var(--cream);margin:auto}.collage{position:relative;width:86%;margin:7% auto 0;height:260px}.photo{position:absolute;margin:0;width:45%;aspect-ratio:.79;background:#f7f1e8;padding:8px 8px 27px;box-shadow:3px 10px 19px #273a3445;transition:transform 1.4s,opacity 1.4s}.photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}.photo-one{left:4%;top:0;transform:rotate(-11deg)}.photo-two{left:32%;top:36px;transform:rotate(10deg)}.photo-two img{object-position:15% 30%;transform:scale(1);filter:saturate(.5)}.crest{position:absolute;width:28%;aspect-ratio:1;right:-2%;top:5%;background:var(--sage);border:1px solid #e7dbb6;border-radius:35% 15% 35% 15%;transform:rotate(45deg);box-shadow:3px 6px 8px #29372c33}.crest:before{content:"";position:absolute;inset:6px;border:1px solid #e7dbb699;border-radius:inherit}.crest span{display:grid;place-items:center;height:100%;transform:rotate(-45deg);font-size:39px}.interlude{height:250px;position:relative;text-align:center;padding-top:32px}.ornament{font-size:52px;color:#f3e9dd;text-shadow:0 2px 10px #38473b66}.date-space{display:flex;gap:18px;align-items:center;justify-content:center;margin:28px auto;color:#f7f1e8;text-shadow:0 1px 6px #38473b;font-size:27px}.date-space i{width:2px;height:20px;background:#f3e9dd66}.hairline{width:95px;height:1px;background:#f3e9dd9c;margin:40px auto}.invitation-stage{position:relative;padding:35px 8% 160px}.invitation{position:relative;min-height:630px;aspect-ratio:.55;background:linear-gradient(120deg,#7d7e53,#6a6e45);padding:13px;box-shadow:6px 17px 32px #273a3459;transform:rotate(-1deg)}.inner-frame{height:100%;min-height:604px;border:1px solid #e7ddbb;position:relative;padding:45px 20px;text-align:center}.inner-frame:before{content:"";position:absolute;inset:5px;border:1px solid #e7ddbb66}.corner{position:absolute;font-size:42px;line-height:1;color:#d9d2a8}.tl{top:7px;left:8px;transform:rotate(-40deg)}.tr{top:7px;right:8px;transform:scaleX(-1) rotate(-40deg)}.bl{bottom:7px;left:8px;transform:rotate(-140deg)}.br{bottom:7px;right:8px;transform:rotate(140deg)}.panel-flourish{font-size:42px;color:#e3d8b1}.blank-space{height:170px}.blank-space.shorter{height:120px}.separator{display:flex;align-items:center;gap:13px;justify-content:center;font-size:23px;color:#e3d8b1}.separator:before,.separator:after{content:"";width:45px;height:1px;background:#e3d8b17a}.lower{font-size:35px}.panel-flowers{position:absolute;width:64%;top:-28px;left:-9%;z-index:3;transform:rotate(-30deg);filter:drop-shadow(2px 6px 5px #273a3440)}.medallion-wrap{position:absolute;right:1%;bottom:100px;width:40%;z-index:5}.medallion{padding:8%;aspect-ratio:1;background:#c79fa4;border:2px solid #c5a46d;border-radius:33% 39% 29% 36%;box-shadow:3px 7px 10px #26332d44;transform:rotate(9deg)}.medallion-inner{height:100%;border:1px solid #ead5a3;border-radius:30%;display:grid;place-items:center;overflow:hidden}.medallion-inner img{width:85%;filter:sepia(1) saturate(.3);mix-blend-mode:multiply;opacity:.85}.tassel{position:absolute;top:94%;left:40%;width:28%;height:155px;transform-origin:50% 0;transform:rotate(calc(-8deg + var(--scroll)*14deg))}.cord{width:30%;height:60px;border:2px solid #bd995d;border-top:0;border-radius:0 0 50% 50%;margin:auto;box-shadow:1px 1px 1px #eee0ac}.knot{height:16px;width:43%;margin:-3px auto 0;border-radius:5px;background:repeating-linear-gradient(0deg,#ac884b 0 2px,#d3b87e 2px 4px)}.threads{height:75px;width:90%;margin:-1px auto;background:repeating-linear-gradient(90deg,#a5844e 0 1px,#e0c48b 1px 2px,#b69a60 2px 3px);clip-path:polygon(33% 0,67% 0,100% 98%,82% 96%,68% 100%,50% 97%,33% 100%,18% 96%,0 98%);filter:drop-shadow(2px 3px 2px #3b3e3540)}footer{position:relative;min-height:240px;display:grid;place-items:center;padding-bottom:70px;font-size:35px;color:#eee5cc}.footer-flowers{position:absolute;width:70%;right:-30%;bottom:-5%;transform:rotate(160deg);opacity:.9}.reveal{transition:opacity 1.2s,translate 1.2s}.js .reveal:not(.seen){opacity:0;translate:0 18px}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:521px){body{padding:25px 0}.world{border:1px solid #c5a46d55}.opening{height:1110px}.collage{height:325px}.invitation{min-height:790px}.inner-frame{min-height:764px}.blank-space{height:220px}.blank-space.shorter{height:180px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.landscape{transform:none}.tassel{transform:rotate(-5deg)}}