:root{--pink:#edb8b8;--wine:#762838;--yellow:#f4ba37;--orange:#eb6e2e;--lime:#bccb66;--purple:#57355f;--paper:#fff4e2;--ink:#592835;--serif:'Playfair Display',serif;--sans:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:#312129;color:var(--ink);font-family:var(--sans);overflow:hidden}.grain{position:fixed;z-index:20;inset:0;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='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}.film,.scene{height:100svh;width:100vw}.scene{position:absolute;inset:0;display:none;overflow:hidden}.scene.active{display:flex;animation:sceneIn .8s cubic-bezier(.2,.8,.3,1) both}@keyframes sceneIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}.opening{background:radial-gradient(circle at 50% 40%,#71444a,#322128 66%);align-items:center;justify-content:center;flex-direction:column;color:#fff;position:relative}.opening:before,.opening:after{content:'❀';position:absolute;color:#d6a69c33;font:300px var(--serif)}.opening:before{left:-80px;top:-100px}.opening:after{right:-70px;bottom:-130px}.opening-note,.topline{position:absolute;top:8%;font:600 9px var(--sans);letter-spacing:.19em;text-transform:uppercase}.opening-note{color:#e7c6b2;text-align:center}.envelope{border:0;background:#f3d9c9;width:min(420px,85vw);height:260px;position:relative;box-shadow:0 30px 80px #0008;cursor:pointer}.envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.5%,#e3bfb0 50%)}.envelope-flap{position:absolute;z-index:2;width:100%;height:100%;clip-path:polygon(0 0,100% 0,50% 57%);background:#e7c4b4;transform-origin:top;transition:transform .8s}.seal{position:absolute;z-index:3;left:calc(50% - 33px);top:40%;display:grid;place-items:center;width:66px;height:66px;border-radius:50%;color:#f5dac2;background:var(--wine);border:3px solid #d5a770;font:600 23px var(--serif);transition:.4s}.envelope-copy{position:absolute;inset:78px 10px auto;text-align:center;color:#69242e}.envelope-copy span{display:block;font:italic 15px var(--serif)}.envelope-copy strong{display:block;font:500 35px/.9 var(--serif);margin:9px}.envelope-copy small{font-size:9px;letter-spacing:.16em}.tap-note{margin:35px 0 0;text-transform:uppercase;letter-spacing:.18em;font-size:9px;z-index:1}.tap-note span{font-size:17px;color:#e8b274}.opened .envelope-flap{transform:rotateX(180deg)}.opened .seal{opacity:0}.topline{left:8%;right:8%;display:flex;justify-content:space-between;z-index:3}.topline span{margin-left:auto}.topline b{font-weight:500;color:inherit}.light{color:#fff}.color-pink{background:var(--pink);color:var(--wine)}.color-yellow{background:var(--yellow);color:#7a2532}.color-orange{background:var(--orange);color:#5a242d}.color-wine{background:var(--wine)}.color-lime{background:var(--lime);color:#355247}.color-purple{background:var(--purple)}.welcome-scene,.dates-scene,.rsvp-scene{align-items:center;justify-content:center;text-align:center}.sun{height:min(90vw,500px);width:min(90vw,500px);border-radius:50%;background:#f5d75c;position:absolute;bottom:-20%;right:-14%;box-shadow:0 0 0 22px #ee947d,0 0 0 50px #e98d8b}.scene-copy{position:relative;z-index:1}.scene-copy h1{font:500 clamp(58px,13vw,100px)/.9 var(--serif);margin:0}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:9px;font-weight:600;margin:0 0 17px}.script{font:italic 23px/1.35 var(--serif);margin-top:31px}.next{position:absolute;z-index:4;bottom:7%;left:50%;transform:translateX(-50%);border:0;background:transparent;color:inherit;border-bottom:1px solid currentColor;padding:0 0 9px;text-transform:uppercase;letter-spacing:.17em;font:600 9px var(--sans);white-space:nowrap;cursor:pointer}.next span{font-size:18px;padding-left:12px}.light-next{color:#fff}.couple-scene{align-items:center;justify-content:center;background:#3d2939;color:white}.couple-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#1d1722cc,transparent 58%)}.couple-scene img{width:100%;height:100%;object-fit:cover}.couple-copy{position:absolute;z-index:2;bottom:15%;left:9%;right:9%;text-align:center}.couple-copy h2{font:500 clamp(52px,12vw,90px)/.9 var(--serif);margin:0}.couple-copy h2 em{color:#f7c56b}.couple-copy>p:last-child{font:italic 20px var(--serif);margin:16px}.arch{position:absolute;width:min(100vw,620px);height:60%;bottom:-4%;border:30px solid #e9493c;border-bottom:0;border-radius:300px 300px 0 0}.dates-scene h2{font:500 clamp(95px,22vw,165px)/.7 var(--serif);margin:26px 0}.dates-scene h2 em{font-size:.45em;color:#d55242}.dates-scene h3{font:500 25px var(--serif);margin:0}.function-scene{align-items:center;padding:11%;background-image:radial-gradient(#ffffff3d 1px,transparent 1px);background-size:10px 10px}.rangoli{position:absolute;right:-7%;top:12%;font:clamp(180px,50vw,370px)/1 var(--serif);opacity:.17;transform:rotate(16deg)}.rangoli.gold{color:#f8d46d;opacity:.3}.function-copy{z-index:2}.function-copy h2,.rsvp-scene h2{font:500 clamp(70px,16vw,120px)/.85 var(--serif);margin:0}.function-copy h2 em,.rsvp-scene h2 em{color:#ffe072}.function-copy .time{font:italic 22px var(--serif);margin:29px 0 7px}.function-copy .venue{text-transform:uppercase;letter-spacing:.16em;font-size:9px;margin:0}.rsvp-scene{background:linear-gradient(140deg,#efaeb0,#f6d297);text-align:left}.rsvp-scene .scene-copy{width:min(80%,460px)}.rsvp-scene h2 em{color:var(--wine)}.rsvp-note{font:italic 19px/1.45 var(--serif);margin:22px 0 25px}form{display:grid;gap:19px}input,select{font:18px var(--serif);border:0;border-bottom:1px solid #7c4550;background:transparent;padding:10px 0;color:var(--ink);outline:0}form button,.modal-inner>button:last-child{background:var(--wine);color:white;border:0;padding:15px 20px;justify-self:start;text-transform:uppercase;font:600 9px var(--sans);letter-spacing:.16em}form button span{font-size:18px;padding-left:18px}.form-message{font:italic 15px var(--serif);margin:0}.progress{position:fixed;z-index:30;left:0;right:0;bottom:0;height:3px;background:#ffffff40}.progress span{display:block;background:#f7d067;height:100%;width:0;transition:width .5s}.sound,.name-edit{position:fixed;z-index:31;right:18px;border:1px solid #ffffff88;background:#ffffff20;border-radius:50%;height:36px;width:36px;color:#fff;cursor:pointer}.sound{top:18px}.name-edit{bottom:22px}.petals i{position:fixed;z-index:12;font-style:normal;color:#ffcf88;opacity:.8;animation:fall 12s linear infinite}.petals i:nth-child(1){left:12%;animation-delay:-5s}.petals i:nth-child(2){left:37%;animation-delay:-9s}.petals i:nth-child(3){left:67%;animation-delay:-3s}.petals i:nth-child(4){left:87%;animation-delay:-7s}.petals i:nth-child(5){left:51%;animation-delay:-11s}@keyframes fall{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(108vh) rotate(380deg)}}.name-modal{position:fixed;z-index:40;inset:0;background:#38212cdd;display:none;align-items:center;justify-content:center;padding:20px}.name-modal.show{display:flex}.modal-inner{background:var(--paper);padding:55px 42px;width:min(410px,100%);position:relative;text-align:center}.modal-inner>button:first-child{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px;color:var(--ink)}.modal-inner h3{font:500 35px/1.1 var(--serif);margin:0 0 27px}.modal-inner input{width:100%;border:0;border-bottom:1px solid #c2af9b;background:transparent;padding:12px 0;font:18px var(--serif);outline:none}.modal-inner>button:last-child{margin:26px auto 0}@media(max-width:430px){.envelope{height:230px}.envelope-copy{inset:68px 10px auto}.opening-note{top:9%;padding:0 20px}.function-scene{padding-left:12%}}