*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--outer);color:var(--ink);font-family:Georgia,'Times New Roman',serif}
.invitation{max-width:1200px;margin:auto;overflow:hidden;box-shadow:0 24px 64px #1c23313b;color:var(--ink)}.invitation [data-field]{color:var(--ink)!important}
.scene{position:relative;min-height:700px;display:flex;align-items:center;overflow:hidden;background:var(--paper)}.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,var(--paper) 0%,var(--paper-soft) 32%,transparent 62%);pointer-events:none}
.content{position:relative;z-index:4;width:min(53%,620px);padding:70px clamp(28px,6vw,86px);opacity:1;animation:reveal .85s 1s ease-out both}
.eyebrow,.facts span,.footer-label{font:700 11px/1.45 Arial,sans-serif;letter-spacing:.19em;color:var(--accent)}.eyebrow{margin:0 0:20px}h1{font-size:clamp(42px,5.3vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.035em;margin:0 0:22px;overflow-wrap:anywhere}
.message{font-size:clamp(16px,1.55vw,20px);line-height:1.55;max-width:33ch;margin:0 0 28px}.rule{display:block;width:72px;height:2px;background:var(--accent);margin:0 0 28px;transform-origin:left;animation:draw .8s 1.4s ease-out both}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:470px}.facts>div{border-left:1px solid var(--accent);padding-left:14px;min-width:0}.facts span,.facts strong,.facts small{display:block}.facts span{margin-bottom:8px}.facts strong,.facts small{font-weight:400;line-height:1.35;overflow-wrap:anywhere}.facts strong{font-size:17px}.facts small{font-size:14px;margin-top:4px}
.reply{display:inline-block;margin-top:32px;padding:14px 23px;background:var(--button);color:var(--button-text);font:700 13px Arial,sans-serif;text-decoration:none;letter-spacing:.03em}.reply:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.footer{text-align:center;padding:50px 28px 62px;background:var(--footer)}.footer h2{font-size:clamp(29px,3vw,41px);font-weight:400;margin:12px 0}.footer p:last-child{max-width:54ch;line-height:1.55;margin:0 auto}
.vows{--outer:#21111d;--ink:#fae9d9;--paper:#371928;--paper-soft:#371928ed;--accent:#f1c98d;--button:#e4bc80;--button-text:#301a26;--footer:#3a1d2e}
.storybook.sage{--outer:#e4e8d8;--ink:#3f5443;--paper:#fbf7e9;--paper-soft:#fbf7e9eb;--accent:#76966a;--button:#587757;--button-text:white;--footer:#f1f1df}
.storybook.rose{--outer:#f4e3df;--ink:#714b55;--paper:#fff7ed;--paper-soft:#fff7edec;--accent:#c37c8b;--button:#ac667d;--button-text:white;--footer:#fceee7}
.dove.blue{--outer:#dce7ec;--ink:#304c60;--paper:#fbf9f1;--paper-soft:#fbf9f1eb;--accent:#7797ac;--button:#5f839b;--button-text:white;--footer:#f2f6f5}
.dove.rose{--outer:#f2e6e5;--ink:#75535a;--paper:#fdf9f2;--paper-soft:#fdf9f2ec;--accent:#c58a92;--button:#ab707e;--button-text:white;--footer:#fbf2ef}
.motion{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.vows .art{animation:glassReveal 2.4s .1s ease-out both}.vows .motion i{position:absolute;right:24%;top:24%;width:1px;height:1px;border-radius:50%;box-shadow:0 0 18px 5px #ffe7b1;opacity:0;animation:glow 2s 1.1s ease-in-out forwards}.vows .motion i:nth-child(2){right:9%;top:49%;animation-delay:1.4s}.vows .motion i:nth-child(3){right:31%;top:68%;animation-delay:1.7s}.vows .motion i:nth-child(4){right:17%;top:78%;animation-delay:2s}
.storybook .art{animation:pageOpen 1.75s .12s cubic-bezier(.2,.8,.2,1) both}.storybook .motion:before{content:'';position:absolute;z-index:2;right:0;top:0;width:51%;height:100%;background:linear-gradient(102deg,#fff9eaee,#fff9ea 43%,#e1d4b5);box-shadow:-18px 0 28px #63543d39;transform-origin:left center;animation:turnPage 1.55s .12s ease-in forwards}.storybook .motion i,.dove .motion i{position:absolute;top:16%;left:69%;width:8px;height:8px;background:var(--accent);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0;animation:float 1.5s 1.25s ease-out forwards}.storybook .motion i:nth-child(2),.dove .motion i:nth-child(2){left:84%;top:32%;animation-delay:1.6s}.storybook .motion i:nth-child(3),.dove .motion i:nth-child(3){left:59%;top:66%;animation-delay:1.9s}.storybook .motion i:nth-child(4),.dove .motion i:nth-child(4){left:93%;top:72%;animation-delay:2.2s}
.dove .art{animation:doveReveal 2.2s .08s ease-out both}.dove .motion:before{content:'';position:absolute;inset:0 0 0 49%;background:linear-gradient(125deg,transparent 40%,#fff7dc6e 50%,transparent 60%);animation:lightSweep 2.4s .2s ease-out both}.dove .motion i{background:#c8ab68}
@keyframes glassReveal{from{filter:brightness(.5);transform:scale(1.035)}to{filter:brightness(1);transform:scale(1)}}@keyframes glow{0%{opacity:.15;transform:scale(.5)}100%{opacity:.9;transform:scale(2)}}@keyframes pageOpen{from{clip-path:inset(0 48% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes turnPage{to{transform:perspective(700px) rotateY(-105deg);opacity:0}}@keyframes float{0%{opacity:0;transform:translateY(16px) scale(.5)}35%{opacity:.8}100%{opacity:0;transform:translateY(-32px) scale(1.2)}}@keyframes doveReveal{from{filter:brightness(1.16);transform:scale(1.055)}to{filter:brightness(1);transform:scale(1)}}@keyframes lightSweep{from{transform:translateX(-125%)}to{transform:translateX(125%)}}@keyframes reveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:720px){.scene{min-height:850px;align-items:flex-end}.art{height:54%;bottom:auto;object-position:76% center}.scene:after{background:linear-gradient(0deg,var(--paper) 0%,var(--paper) 43%,transparent 62%)}.content{width:100%;min-height:850px;padding:365px 27px 38px;display:flex;flex-direction:column;justify-content:flex-end}.motion{height:54%}.storybook .motion:before{width:100%}.vows .motion i{right:30%}h1{font-size:clamp(39px,10vw,60px)}.facts strong{font-size:15px}.footer{padding:42px 26px 50px}}
@media(max-width:380px){.scene,.content{min-height:830px}.content{padding:340px 21px 30px}.facts{gap:10px}.facts>div{padding-left:9px}.facts span{font-size:9px;letter-spacing:.1em}}
.motion-controls{position:relative;z-index:5;display:flex;justify-content:center;gap:18px;padding:11px 20px;background:var(--footer);font:13px Arial,sans-serif}.motion-controls input{position:absolute;width:1px;height:1px;opacity:0}.motion-controls label{padding:7px 3px;color:var(--ink);text-decoration:underline;cursor:pointer}.motion-controls input:focus-visible+label{outline:3px solid var(--accent);outline-offset:3px}.invitation:has(#skip-motion:checked) .art,.invitation:has(#skip-motion:checked) .content,.invitation:has(#skip-motion:checked) .rule,.invitation:has(#skip-motion:checked) .motion:before,.invitation:has(#skip-motion:checked) .motion i{animation:none!important;transform:none!important}.invitation:has(#skip-motion:checked) .content{opacity:1}.invitation:has(#skip-motion:checked) .rule{transform:scaleX(1)!important}.invitation.storybook:has(#skip-motion:checked) .art{clip-path:none}.invitation:has(#skip-motion:checked) .motion{display:none}.invitation.vows:has(#skip-motion:checked) .art,.invitation.dove:has(#skip-motion:checked) .art{filter:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art,.content,.rule,.motion:before,.motion i{animation:none!important;transform:none!important}.content{opacity:1}.rule{transform:scaleX(1)}.vows .art,.dove .art{filter:none}.storybook .art{clip-path:none}.motion,.motion-controls{display:none}}
