*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#ede9df;color:#203342;font-family:Georgia,'Times New Roman',serif}.invitation{max-width:1200px;margin:auto;overflow:hidden;box-shadow:0 20px 70px #17243625}.scene{position:relative;min-height:650px;display:flex;align-items:center;overflow:hidden;background:#f3ecdc}.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f7f2e8 0%,#f7f2e8ef 38%,#f7f2e800 67%);pointer-events:none}.content{position:relative;z-index:1;width:min(54%,620px);padding:72px clamp(28px,6vw,88px);opacity:0;transform:translateY(18px);animation:reveal .9s .25s ease-out forwards}.eyebrow,.fact-label,.footer-label{font:700 11px/1.4 Arial,sans-serif;letter-spacing:.23em;color:#ad8454}.eyebrow{margin:0 0:24px;animation:glimmer 1.4s 1s ease-out both}h1{font-size:clamp(44px,5.4vw,82px);font-weight:400;line-height:1.02;letter-spacing:-.04em;margin:0 0:24px;overflow-wrap:anywhere}.message{font-size:clamp(16px,1.7vw,21px);line-height:1.55;max-width:32ch;margin:0 0:26px}.rule{display:block;width:68px;height:1px;background:#bd955d;margin:0 0 30px;transform-origin:left;transform:scaleX(0);animation:draw .8s .8s ease-out forwards}.facts{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:480px}.fact{border-left:1px solid #bc9568;padding-left:15px;min-width:0}.fact-label{display:block;margin-bottom:9px}.fact strong,.fact small{display:block;font-weight:400;line-height:1.35;overflow-wrap:anywhere}.fact strong{font-size:17px}.fact small{font-size:14px;margin-top:4px}.reply{display:inline-block;margin-top:35px;padding:14px 23px;background:#22394a;color:#fff;font:600 13px Arial,sans-serif;text-decoration:none;letter-spacing:.04em}.reply:focus-visible{outline:3px solid #ad8454;outline-offset:3px}.footer{text-align:center;padding:54px 28px 65px;background:#faf7ef}.footer h2{font-weight:400;font-size:clamp(28px,3vw,42px);margin:12px 0}.footer p:last-child{max-width:55ch;margin:0 auto;line-height:1.55}.housewarming{color:#405142}.housewarming .scene:after{background:linear-gradient(90deg,#f8f2e5 0%,#f8f2e5ed 38%,#f8f2e500 65%)}.housewarming .reply{background:#51694c}.housewarming .eyebrow,.housewarming .fact-label,.housewarming .footer-label{color:#a97843}.housewarming .footer{background:#f8f4e9}@keyframes reveal{to{opacity:1;transform:none}}@keyframes draw{to{transform:scaleX(1)}}@keyframes glimmer{from{opacity:.3;letter-spacing:.34em}to{opacity:1;letter-spacing:.23em}}@media(max-width:720px){.scene{min-height:840px;align-items:flex-end}.art{height:54%;object-position:72% center;top:0;bottom:auto}.scene:after,.housewarming .scene:after{background:linear-gradient(0deg,#f8f3e8 0%,#f8f3e8 49%,#f8f3e800 63%)}.content{width:100%;padding:370px 28px 40px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}h1{font-size:clamp(42px,10vw,66px)}.facts{gap:12px}.fact strong{font-size:15px}.footer{padding:42px 26px 50px}}@media(max-width:380px){.content{padding:330px 20px 32px}.scene{min-height:800px}.facts{grid-template-columns:1fr 1fr}.fact{padding-left:9px}.fact-label{font-size:9px;letter-spacing:.1em}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.content,.eyebrow,.rule{animation:none;opacity:1;transform:none}}
.graduation .art{clip-path:inset(0 0 100% 0);animation:diplomaUnroll 1.9s cubic-bezier(.22,1,.36,1) .1s forwards}
.housewarming .art{clip-path:circle(0% at 82% 46%);animation:doorwayOpen 2.1s cubic-bezier(.22,1,.36,1) .1s forwards}
.graduation .content,.housewarming .content{animation:reveal .85s ease-out 1.05s forwards}
.graduation .rule,.housewarming .rule{animation:draw .75s ease-out 1.5s forwards}
@keyframes diplomaUnroll{0%{clip-path:inset(0 0 100% 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes doorwayOpen{0%{clip-path:circle(0% at 82% 46%)}100%{clip-path:circle(150% at 82% 46%)}}
@media(prefers-reduced-motion:reduce){.graduation .art,.housewarming .art{animation:none;clip-path:none}.graduation .content,.housewarming .content,.graduation .rule,.housewarming .rule{animation:none;opacity:1;transform:none}}

/* The motion layer stays over the artwork and never accepts taps. */
.scene-motion{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.housewarming .art{clip-path:none;animation:housePan 2.1s ease-out .1s both}
.graduation .door-motion,.housewarming .cap-motion,.housewarming .confetti{display:none}
.graduation .cap-motion{position:absolute;top:16%;left:72%;width:76px;height:20px;background:#17283a;transform:translate(-80px,85px) rotate(-35deg) skew(-16deg);opacity:0;box-shadow:0 4px 0 #caa457;animation:capToss 1.45s cubic-bezier(.2,.8,.25,1) 1.1s both}
.graduation .cap-motion:before{content:'';position:absolute;left:20px;top:12px;width:37px;height:19px;background:#17283a;border-radius:0 0 50% 50%}
.graduation .cap-motion:after{content:'';position:absolute;right:4px;top:7px;width:2px;height:38px;background:#d5b069;transform:rotate(-13deg);transform-origin:top}
.graduation .confetti{position:absolute;width:5px;height:11px;background:#c69d57;opacity:0;transform:rotate(35deg);animation:confettiFall 1.7s ease-out 1.45s both}
.graduation .confetti:nth-of-type(3){left:60%;top:10%;animation-delay:1.4s}
.graduation .confetti:nth-of-type(4){left:69%;top:22%;width:4px;height:8px;animation-delay:1.6s}
.graduation .confetti:nth-of-type(5){left:78%;top:8%;animation-delay:1.75s}
.graduation .confetti:nth-of-type(6){left:86%;top:28%;width:4px;height:7px;animation-delay:1.55s}
.graduation .confetti:nth-of-type(7){left:93%;top:14%;animation-delay:1.9s}
.housewarming .door-motion{position:absolute;right:0;top:0;width:43%;height:100%;transform-origin:right center;background:repeating-linear-gradient(90deg,#6d3d22 0,#865331 9px,#724126 18px,#9b6137 31px);box-shadow:-15px 0 24px #26180b55,inset 10px 0 0 #b7834c;animation:doorSwing 1.75s cubic-bezier(.22,.75,.25,1) .15s forwards}
.housewarming .door-motion:after{content:'';position:absolute;left:23%;top:47%;width:20px;height:20px;border:4px solid #c69b52;border-radius:50%;box-shadow:1px 2px 4px #2c1d11}
.housewarming .key-glint{position:absolute;right:5%;top:45%;font:42px/1 Georgia,serif;color:#ffe1a0;text-shadow:0 0 12px #fff1be;opacity:0;animation:keyGlint 2.8s ease-in-out 1.7s infinite}
.housewarming .leaf{position:absolute;top:5%;right:18%;width:12px;height:24px;border-radius:80% 0 80% 0;background:#5c7551;opacity:0;transform-origin:top;animation:leafDrift 3.8s ease-in-out 1.65s infinite alternate}
.housewarming .leaf.second{top:10%;right:30%;width:9px;height:18px;animation-delay:2.1s}
.graduation h1,.housewarming h1{animation:headlineRise .75s ease-out 1.15s both}
.graduation .facts,.housewarming .facts{animation:detailRise .7s ease-out 1.55s both}
.graduation .reply,.housewarming .reply{animation:detailRise .7s ease-out 1.8s both}
@keyframes capToss{0%{opacity:0;transform:translate(-80px,85px) rotate(-35deg) skew(-16deg)}20%{opacity:1}65%{opacity:1;transform:translate(0,-25px) rotate(8deg) skew(-16deg)}100%{opacity:0;transform:translate(45px,-55px) rotate(18deg) skew(-16deg)}}
@keyframes housePan{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes confettiFall{0%{opacity:0;transform:translateY(-20px) rotate(0)}20%{opacity:.9}100%{opacity:0;transform:translate(-14px,80px) rotate(130deg)}}
@keyframes doorSwing{0%{opacity:1;transform:perspective(900px) rotateY(0)}75%{opacity:1}100%{opacity:0;transform:perspective(900px) rotateY(-95deg)}}
@keyframes keyGlint{0%,15%,100%{opacity:0;transform:scale(.45) rotate(-25deg)}23%,31%{opacity:.85;transform:scale(1) rotate(0)}39%{opacity:0;transform:scale(1.25) rotate(20deg)}}
@keyframes leafDrift{0%{opacity:0;transform:translate(0,0) rotate(-20deg)}25%{opacity:.7}100%{opacity:0;transform:translate(-35px,80px) rotate(65deg)}}
@keyframes headlineRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes detailRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:720px){.scene-motion{height:54%}.graduation .cap-motion{left:66%;top:20%;width:54px;height:15px}.housewarming .door-motion{width:43%}.housewarming .key-glint{right:5%;top:48%}}
@media(prefers-reduced-motion:reduce){.scene-motion{display:none}.housewarming .art{animation:none;transform:none}.graduation h1,.housewarming h1,.graduation .facts,.housewarming .facts,.graduation .reply,.housewarming .reply{animation:none;opacity:1;transform:none}}