@font-face{font-family:Kalam;src:url(assets/kalam.ttf) format('truetype');font-display:swap;font-weight:300 700}
*{box-sizing:border-box}html{background:#efcbe2}body{margin:0;color:#143587;background:radial-gradient(ellipse at 20% 15%,#fff0c0,transparent 52%),radial-gradient(ellipse at 85% 90%,#adcfd7,transparent 58%),#efd7e8;min-height:100svh}.stage{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:26px 16px 32px;overflow:hidden;position:relative}.card-wrap{width:min(100%,580px);aspect-ratio:1000/1500;position:relative;container-type:inline-size;perspective:1200px}.card{position:absolute;inset:0;background:#fff7e6;box-shadow:0 15px 40px #17316b22,0 2px 4px #64583f25;overflow:hidden;isolation:isolate;clip-path:polygon(.2% .3%,99.8% 0,100% 99.6%,99.5% 100%,0 99.8%);opacity:0}.card.ready{opacity:1}.paper-grain{position:absolute;inset:0;opacity:.21;mix-blend-mode:multiply;background-image:url(assets/paper-texture.svg);pointer-events:none;z-index:30}.layer{position:absolute;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--angle,0deg));will-change:transform;opacity:0;transition:none}.ready .layer{opacity:1}.layer img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.paper{position:relative;filter:drop-shadow(1px 3px 2px #75594324);background-image:url(assets/paper-texture.svg);clip-path:polygon(1% 5%,4% 0,8% 4%,13% 1%,20% 3%,26% 0,31% 3%,38% 1%,45% 4%,54% 0,61% 2%,68% 0,75% 3%,81% 1%,88% 3%,95% 0,99% 5%,98% 17%,100% 29%,98% 41%,100% 52%,98% 67%,100% 80%,98% 96%,92% 99%,87% 96%,81% 100%,74% 97%,67% 100%,61% 97%,52% 100%,46% 97%,38% 99%,31% 97%,24% 100%,17% 97%,11% 100%,4% 97%,0 94%,2% 80%,0 70%,2% 57%,0 45%,2% 32%,0 20%)}.lavender{background-color:#d6b8ed}.yellow{background-color:#f8d64f}.mint{background-color:#a7d6c3}.blue{background-color:#17489f}.name-layer{left:10%;top:10.3%;width:79%;height:17%;z-index:8;--base-angle:-3deg}.name-paper{height:100%;background-color:#fffaf1;display:flex;align-items:center;justify-content:center}h1{margin:0;letter-spacing:-.055em;font-family:Georgia,'Times New Roman',serif;font-weight:900;font-size:18.8cqw;line-height:1}.cumple-layer{left:14%;top:27.5%;width:35%;height:8%;z-index:9;--base-angle:-7deg}.cumple-layer .paper{height:100%;display:flex;align-items:center;justify-content:center;font-family:Kalam,cursive;font-size:7.8cqw;line-height:1;font-weight:bold}.number-paper{left:9%;top:34%;width:58%;height:34%;z-index:2;--base-angle:-4deg}.number-paper .paper{height:100%}.number-layer{left:12%;top:36%;width:51%;height:28%;z-index:4;--base-angle:-7deg}.number-layer span{font-family:Georgia,serif;font-weight:900;font-size:36cqw;line-height:1;color:#ec418a;text-shadow:1px 2px 0 #ad326530;letter-spacing:-.095em;display:block}.portrait-layer{left:52%;top:29%;width:47%;height:41%;z-index:7;--base-angle:5deg}.hat-layer{left:59%;top:27.4%;width:18%;height:12%;z-index:12;--base-angle:8deg;transform-origin:50% 85%}.cake-layer{left:1%;top:53.4%;width:31%;height:22%;z-index:10;--base-angle:-8deg}.date-layer{left:29%;top:69.8%;width:46%;height:7.1%;z-index:14;--base-angle:-3deg}.date-layer .paper,.location-layer .paper{height:100%;display:flex;align-items:center;justify-content:center}p{margin:0}.date-layer p{font-family:Kalam,cursive;font-size:5.5cqw;font-weight:bold;letter-spacing:.02em;white-space:nowrap}.location-layer{left:25%;top:78%;width:51%;height:7.7%;z-index:14;--base-angle:1deg}.location-layer p{font-family:Kalam,cursive;font-size:4.35cqw;font-weight:bold;white-space:nowrap;padding-bottom:1.5cqw}.squiggle{position:absolute;bottom:.2cqw;font-size:4cqw;letter-spacing:-.08em;color:#e9458a;line-height:1}.free-layer{left:76%;top:74%;width:22%;height:12%;z-index:15;--base-angle:-8deg}.starburst{clip-path:polygon(50% 0,58% 11%,70% 3%,74% 17%,89% 13%,87% 29%,100% 35%,89% 46%,100% 58%,85% 64%,89% 79%,73% 79%,69% 96%,56% 88%,48% 100%,39% 88%,24% 96%,23% 80%,8% 80%,13% 66%,0 59%,11% 48%,0 36%,14% 29%,10% 14%,26% 18%,30% 3%,42% 12%);height:100%;display:flex;justify-content:center;align-items:center}.free-layer p{font-family:Kalam,cursive;font-weight:bold;font-size:3.45cqw;line-height:1.1;text-align:center}.rsvp-layer{left:24%;top:86.8%;width:54%;height:7.1%;z-index:18;--base-angle:-1deg}.rsvp{height:100%;display:flex;align-items:center;justify-content:center;color:#fff9eb;text-decoration:none;font-family:Georgia,serif;font-weight:bold;font-size:4cqw;min-height:44px}.rsvp:hover{background-color:#ec418a}.rsvp:focus-visible,#map:focus-visible{outline:3px solid #ec418a;outline-offset:4px}.map-layer{left:30%;top:94.6%;width:42%;height:4%;z-index:18;--base-angle:2deg}.map-layer a{font-family:Kalam,cursive;font-size:3.85cqw;display:block;text-align:center;text-decoration-thickness:2px;text-underline-offset:5px;color:#163e92;min-height:30px}.decoration{z-index:3;pointer-events:none}.doodle{font-family:Kalam,cursive;color:#17429a;font-size:5cqw;font-weight:bold}.ink-heart{color:#ec448b}.ink-rays{font-size:6cqw}.tape{background:#e9c35480;clip-path:polygon(1% 4%,100% 0,95% 98%,0 92%);height:3%;width:11%;z-index:13}.tape.mint{background:#67bb9690}.particles{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}.particle{position:absolute;width:8px;height:13px;background:var(--color);clip-path:polygon(0 8%,85% 0,100% 85%,10% 100%)}#foldCanvas{position:absolute;inset:-10%;width:120%;height:120%;pointer-events:none;z-index:40}.status{position:fixed;left:10%;right:10%;bottom:20px;text-align:center;font-family:Kalam,cursive;font-size:18px;color:#143587;pointer-events:none}.closing .card{opacity:0}.closing .card-wrap{pointer-events:none}@media(max-width:600px){.stage{padding:15px 8px 24px;align-items:flex-start}.card-wrap{width:100%;max-width:490px;margin:auto}.rsvp{min-height:40px}}@media(prefers-reduced-motion:reduce){.layer{will-change:auto}.particle{display:none}}
.farewell{height:100%;display:flex;align-items:center;justify-content:center;color:#fff9eb;font-family:Georgia,serif;font-weight:bold;font-size:5cqw}.map-layer{top:94.1%;height:5.5%;left:25%;width:51%}.map-layer a{min-height:44px;display:flex;align-items:center;justify-content:center}.name-layer,.date-layer,.location-layer,.free-layer,.cumple-layer{filter:drop-shadow(1px 3px 2px #75594324)}.number-layer span{clip-path:polygon(0 2%,8% 0,14% 2%,23% 0,35% 1%,45% 0,55% 2%,66% 0,76% 1%,89% 0,100% 2%,99% 100%,0 100%)}
.free-layer p{font-size:3.85cqw}.date-layer p{font-weight:700}.location-layer p{font-weight:700}.card-wrap{filter:drop-shadow(0 6px 12px #66564016)}
.digit-two{left:12%;top:37%;width:26%;height:26.5%;z-index:8;--base-angle:-8deg}.digit-zero{left:36.3%;top:37.4%;width:26%;height:26.5%;z-index:8;--base-angle:3deg}
.location-layer p{font-size:max(14px,4.35cqw)}.free-layer p{font-size:max(14px,3.85cqw)}.map-layer a{font-size:max(14px,3.85cqw)}
/* The invitation sits on the torn sheet; its objects can cross its silhouette. */
.card{background:transparent;box-shadow:none;clip-path:none;overflow:visible}.card::before{content:'';position:absolute;inset:0;background:url(assets/paper-clean-frame-7.png) center/100% 100% no-repeat;filter:drop-shadow(2px 6px 5px #64593b24);z-index:-1}.paper-grain{mask:url(assets/paper-clean-frame-7.png) center/100% 100% no-repeat;opacity:.13}.ready .layer{opacity:0}.card-wrap{filter:none}.stage{padding:32px 28px 36px;overflow:hidden}#foldCanvas{inset:0;width:100%;height:100%;filter:drop-shadow(2px 5px 5px #64593b22)}.decoration[data-motion^="streamer"],.decoration[data-motion^="chain"]{transform-origin:50% 5%}.digit-two::after,.digit-zero::after{content:'';position:absolute;inset:0;pointer-events:none;mask:var(--number-mask) center/contain no-repeat;background:linear-gradient(110deg,transparent 33%,#ffe0c2b0 38%,#ffc8ccce 46%,#ffe0c2b0 53%,transparent 60%);background-size:240% 100%;background-position:var(--sweep-x,-130%) 0;opacity:var(--sweep-opacity,0);mix-blend-mode:screen}.digit-two{--number-mask:url(assets/number-2.png)}.digit-zero{--number-mask:url(assets/number-0.png)}@media(max-width:600px){.stage{padding:24px 20px 30px}.map-layer{top:93%;height:6%;left:25%;width:51%}}@media(prefers-reduced-motion:reduce){.digit-two::after,.digit-zero::after{display:none}}
.card:not(.ready){pointer-events:none}
/* Clean cream paper again: only its outside edge is rough. */
.card::before{inset:-2% -4%;background-image:url(assets/paper-clean-frame-7.png);filter:drop-shadow(1px 4px 4px #64593b1c)}.paper-grain{inset:-2% -4%;mask-image:url(assets/paper-clean-frame-7.png);opacity:.09}.stage{padding:26px 16px 32px}#foldCanvas{inset:-2% -4%;width:108%;height:104%}@media(max-width:600px){.stage{padding:20px 12px 26px}.card-wrap{max-width:510px}}

/* The animation and resting sheet use exactly the same final cutout and shadow. */
#foldCanvas{filter:drop-shadow(1px 4px 4px #64593b1c)}
.paper-grain{display:none}