*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--ink);font-family:Georgia,'Times New Roman',serif}
.invitation{max-width:1200px;margin:auto;overflow:hidden;box-shadow:0 24px 70px #1d263144;color:var(--ink)}
.invitation [data-field]{color:var(--ink)!important}
.scene{position:relative;min-height:690px;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) 34%,transparent 66%);pointer-events:none}
.content{position:relative;z-index:4;width:min(54%,630px);padding:70px clamp(28px,6vw,88px);opacity:0;transform:translateY(20px);animation:reveal .85s 1.05s ease-out forwards}
.eyebrow,.facts span,.footer-label{font:700 11px/1.4 Arial,sans-serif;letter-spacing:.22em;color:var(--accent)}.eyebrow{margin:0 0:22px}
h1{font-size:clamp(42px,5.6vw,77px);font-weight:400;line-height:1.04;letter-spacing:-.035em;margin:0 0:22px;overflow-wrap:anywhere}
.message{font-size:clamp(16px,1.65vw,21px);line-height:1.54;max-width:33ch;margin:0 0 27px}
.rule{display:block;width:70px;height:2px;background:var(--accent);margin:0 0 27px;transform:scaleX(0);transform-origin:left;animation:draw .75s 1.5s ease-out forwards}
.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:34px;padding:14px 23px;background:var(--button);color:var(--button-text);font:700 13px Arial,sans-serif;text-decoration:none;letter-spacing:.04em}.reply:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.footer{text-align:center;padding:52px 28px 64px;background:var(--footer)}.footer h2{font-size:clamp(28px,3vw,41px);font-weight:400;margin:12px 0}.footer p:last-child{max-width:54ch;line-height:1.55;margin:0 auto}
.candy.ocean{--page:#e8f8f7;--ink:#1a5366;--paper:#f7f7ed;--paper-soft:#f7f7edee;--accent:#1996a8;--button:#167a98;--button-text:white;--footer:#f1fbf8}
.candy.rose{--page:#fbe5e1;--ink:#774a59;--paper:#fff4ed;--paper-soft:#fff4edee;--accent:#df7c84;--button:#c45f79;--button-text:white;--footer:#fff4ed}
.stage.rose{--page:#32182f;--ink:#fff0e1;--paper:#4a1c3c;--paper-soft:#4a1c3cf2;--accent:#ffd6a6;--button:#f4cb99;--button-text:#45233b;--footer:#4a1c3c;--curtain:#882f50}
.stage.midnight{--page:#0a1834;--ink:#f8edd8;--paper:#0d204a;--paper-soft:#0d204af2;--accent:#e6bd6d;--button:#dfb76e;--button-text:#0d204a;--footer:#122950;--curtain:#163b80}
.candy .art{clip-path:circle(0% at 88% 82%);animation:sweetWorld 1.9s cubic-bezier(.2,.8,.2,1) .08s forwards}
.candy-motion,.stage-motion{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.candy-motion i{position:absolute;top:-12%;left:66%;width:19px;height:19px;border:2px solid #fff9;border-radius:50%;background:repeating-conic-gradient(from 12deg,var(--accent) 0 28deg,#fff8ed 28deg 55deg,#f7c164 55deg 79deg);box-shadow:0 3px 8px #38444c44;opacity:0;animation:candyFall 3.2s linear .2s infinite}
.candy-motion i:nth-child(2){left:78%;width:13px;height:13px;animation-delay:.7s;animation-duration:2.8s}.candy-motion i:nth-child(3){left:89%;width:23px;height:23px;animation-delay:1.25s;animation-duration:3.8s}.candy-motion i:nth-child(4){left:57%;width:15px;height:15px;animation-delay:1.8s;animation-duration:3.1s}.candy-motion i:nth-child(5){left:72%;width:11px;height:11px;animation-delay:2.2s;animation-duration:3.5s}.candy-motion i:nth-child(6){left:96%;width:17px;height:17px;animation-delay:2.6s;animation-duration:2.9s}.candy-motion i:nth-child(7){left:51%;width:20px;height:20px;animation-delay:3.1s;animation-duration:3.6s}.candy-motion i:nth-child(8){left:83%;width:10px;height:10px;animation-delay:3.5s;animation-duration:3.3s}.candy-motion i:nth-child(9){left:62%;width:14px;height:14px;animation-delay:4s;animation-duration:2.7s}.candy-motion i:nth-child(10){left:93%;width:12px;height:12px;animation-delay:4.4s;animation-duration:3.2s}
.stage .art{transform:scale(1.05);animation:artSettle 2.4s ease-out both}
.stage .dancer{position:absolute;z-index:2;left:63%;bottom:14.5%;height:59%;width:auto;object-fit:contain;transform-origin:50% 83%;filter:drop-shadow(0 12px 12px #140d1733);opacity:0;animation:danceTurn 2.5s .3s ease-in-out forwards}
.stage.midnight .dancer{left:65%}
.stage-motion{left:54%;display:flex}.stage-motion i{width:50%;height:100%;background:repeating-linear-gradient(90deg,var(--curtain) 0,var(--curtain) 26px,#ffffff18 31px,#00000025 44px,var(--curtain) 59px);box-shadow:inset -8px 0 22px #0005;animation:curtainLeft 1.8s .14s cubic-bezier(.2,.8,.25,1) forwards}.stage-motion i:nth-child(2){animation-name:curtainRight;box-shadow:inset 8px 0 22px #0005}
.stage-motion b{position:absolute;top:22%;left:48%;color:#ffe6b3;text-shadow:0 0 20px #fff0b5;font:38px Georgia,serif;opacity:0;animation:spark 1.2s 1.2s ease-out forwards}
@keyframes sweetWorld{to{clip-path:circle(150% at 88% 82%)}}@keyframes candyFall{0%{top:-12%;opacity:0;transform:translateX(0) rotate(0)}12%{opacity:1}82%{opacity:1}100%{top:105%;opacity:0;transform:translateX(-38px) rotate(450deg)}}
@keyframes danceTurn{0%{opacity:0;transform:translateY(18px) rotateY(-55deg) rotate(-9deg) scale(.91)}18%{opacity:1;transform:translateY(0) rotateY(0) rotate(4deg) scale(1)}47%{opacity:1;transform:translateY(-7px) rotateY(90deg) rotate(8deg) scale(1)}72%{opacity:1;transform:translateY(-4px) rotateY(250deg) rotate(-4deg) scale(1)}100%{opacity:1;transform:translateY(0) rotateY(360deg) rotate(0) scale(1)}}
@keyframes curtainLeft{to{transform:translateX(-104%);opacity:0}}@keyframes curtainRight{to{transform:translateX(104%);opacity:0}}@keyframes spark{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:0;transform:scale(1.7)}}@keyframes artSettle{to{transform:scale(1)}}@keyframes reveal{to{opacity:1;transform:none}}@keyframes draw{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) 45%,transparent 65%)}.content{width:100%;min-height:850px;padding:368px 27px 38px;display:flex;flex-direction:column;justify-content:flex-end}.candy-motion,.stage-motion{height:54%}.stage-motion{left:0}.stage .dancer{top:14%;bottom:auto;left:39%;height:32%}.stage.midnight .dancer{left:44%}h1{font-size:clamp(39px,10vw,61px)}.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}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.art,.content,.rule,.stage .dancer,.candy-motion i,.stage-motion i,.stage-motion b{animation:none;transform:none}.content,.stage .dancer{opacity:1}.rule{transform:scaleX(1)}.candy .art{clip-path:none}.candy-motion,.stage-motion{display:none}}