*{box-sizing:border-box}html{background:#061320;color:#eee0bd;font-family:Arial,Helvetica,sans-serif}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 42%,#1b3349 0%,#0a1b2c 42%,#050f1b 88%)}header{text-align:center;padding:30px 15px 20px;position:relative;z-index:12;transition:opacity .8s}header span{display:block;font-family:Georgia,serif;font-size:24px;letter-spacing:.25em;padding-left:.25em;color:#e2c17d}header small{display:block;font-size:10px;letter-spacing:.4em;margin-top:8px;padding-left:.4em;color:#a99b7c}main{min-height:calc(100svh - 100px)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #f2d89b;outline-offset:7px}.intro{position:absolute;inset:110px 0 0;min-height:480px;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:10;transition:opacity 1s,visibility 1s}.eyebrow{font-size:12px;letter-spacing:.3em;margin:0 0 26px;color:#c6b998;text-align:center}.envelope{display:block;position:relative;width:min(88vw,660px);aspect-ratio:1561/1007;border:0;background:none;padding:0;perspective:1000px;filter:drop-shadow(0 30px 24px #0008);transition:transform 1.5s,opacity 1.3s}.envelope img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.closed{z-index:8;transition:opacity .16s}.layers{position:absolute;inset:0;opacity:0;transition:opacity .12s}.inside{position:absolute;inset:7% 3% 8%;background:#071522;border:1px solid #a5864b22}.flap{z-index:3;clip-path:polygon(2% 6%,98% 6%,50% 61%);transform-origin:50% 6%;transition:transform 1.3s cubic-bezier(.4,0,.2,1),filter 1.3s;mask-image:radial-gradient(ellipse 9% 13% at 50% 59%,transparent 96%,black 100%)}.pocket{z-index:4;transition:transform 1.2s,opacity 1s}.pocket.left{clip-path:polygon(2% 6%,50% 60%,50% 94%,2% 94%);mask-image:radial-gradient(ellipse 9% 13% at 50% 59%,transparent 98%,black 100%)}.pocket.right{clip-path:polygon(98% 6%,50% 60%,50% 94%,98% 94%);mask-image:radial-gradient(ellipse 9% 13% at 50% 59%,transparent 98%,black 100%)}.seal{z-index:6;transition:transform .75s cubic-bezier(.4,0,.7,.4),opacity .7s}.seal-left{clip-path:polygon(40% 45%,50% 45%,49% 51%,51% 57%,49% 63%,50% 72%,40% 72%)}.seal-right{clip-path:polygon(50% 45%,60% 45%,60% 72%,50% 72%,49% 63%,51% 57%,49% 51%)}.scissors{position:absolute;width:68px;height:68px;left:59%;top:40%;z-index:11;color:#e8d29e;filter:drop-shadow(0 3px 2px #0008);opacity:0;transform:translate(60px,-60px) rotate(70deg);transition:opacity .4s,transform .7s}.blade-one,.blade-two{transform-origin:12px 12px}.cut .scissors{opacity:1;transform:translate(0,0) rotate(70deg)}.snip .blade-one{animation:snip1 .5s ease}.snip .blade-two{animation:snip2 .5s ease}.broken .closed{opacity:0}.broken .layers{opacity:1}.broken .seal-left{transform:translate(-7%,12%) rotate(-14deg);opacity:0}.broken .seal-right{transform:translate(8%,15%) rotate(17deg);opacity:0}.broken .scissors{opacity:0;transform:translate(40px,70px) rotate(90deg)}.unfold .flap{transform:rotateX(176deg);filter:brightness(.7)}.rising .envelope{transform:translateY(160px) scale(.93);opacity:0}.rising .pocket.left{transform:translate(-9%,8%) rotate(-6deg)}.rising .pocket.right{transform:translate(9%,8%) rotate(6deg)}.hint{font-size:14px;color:#e6d7b4;letter-spacing:.04em;margin:18px 0 15px;transition:opacity .4s}.skip,.replay{border:0;background:none;font-size:13px;color:#b5b3b1;padding:12px;text-decoration:underline;text-underline-offset:5px}.skip:hover,.replay:hover{color:#efd39b}.playing .hint,.playing .eyebrow{opacity:0}.playing .skip{visibility:hidden}.invitation{position:relative;margin:12px auto 0;width:min(88vw,460px);opacity:0;visibility:hidden;transform:translateY(210px) scale(.56);transition:transform 2.2s cubic-bezier(.16,.8,.2,1),opacity 1.3s,visibility 0s;transform-origin:50% 40%;padding-bottom:30px;z-index:5}.card{display:block;width:100%;height:auto;box-shadow:0 20px 70px #0008;border:1px solid #c7a35333}.rising .invitation{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.finished .intro{opacity:0;visibility:hidden;pointer-events:none}.finished .invitation{opacity:1;visibility:visible;transform:none}.actions{opacity:0;transition:opacity .8s;display:flex;align-items:center;flex-direction:column;gap:7px;padding-top:23px}.finished .actions{opacity:1}.confirm{display:block;text-decoration:none;color:#101a26;background:linear-gradient(110deg,#be974e,#f4dfad,#c49d56);font-size:15px;letter-spacing:.02em;font-weight:600;text-align:center;padding:17px 22px;border:1px solid #e8ce90;width:100%;box-shadow:0 8px 25px #0005}.confirm:hover{filter:brightness(1.1)}#sparkles{position:fixed;inset:0;pointer-events:none;z-index:14;overflow:hidden}.spark{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#f4d595;box-shadow:0 0 7px #e5c478;animation:spark 2.2s ease-out forwards}.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}.fallback{text-align:center;padding:20px}.playing{overflow-x:hidden}.finished{overflow:auto}@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}@keyframes snip1{50%{transform:rotate(25deg)}}@keyframes snip2{50%{transform:rotate(-25deg)}}@media(max-width:600px){header{padding-top:26px}.intro{inset:95px 0 0;min-height:400px;padding-bottom:70px}.eyebrow{font-size:11px;margin-bottom:36px}.scissors{width:48px;height:48px}.invitation{width:90vw;margin-top:5px}.hint{margin-top:30px}.confirm{font-size:14px}.rising .envelope{transform:translateY(120px) scale(.9)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.spark{display:none}}

body:not(.finished){overflow:hidden;height:100svh}

/* Visible gold glints framing the revealed invitation. */
.spark{border-radius:0;background:#ffdf8a;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);filter:drop-shadow(0 0 4px #ffe4a0);animation:spark 3.7s ease-out forwards}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.25) rotate(0deg)}12%{opacity:1;transform:translate(0,-10px) scale(1.25) rotate(20deg)}35%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35) rotate(130deg)}}