/* Three independently animated invitation experiences. Shared by live demos and published invitations. */
.ok-invite{position:relative;width:100%;min-height:710px;isolation:isolate;overflow:hidden;font-family:'Manrope',sans-serif;text-align:center;display:flex;align-items:center;justify-content:center;color:#493d3c}.ok-invite:before{content:'';pointer-events:none;position:absolute;inset:12px;border:1px solid currentColor;opacity:.22}.ok-invite:after{content:'';position:absolute;inset:21px;pointer-events:none;border:1px solid currentColor;opacity:.15}.ok-invite .ok-deco{position:absolute;pointer-events:none;z-index:1}.ok-invite .ok-deco-a{left:-36px;top:2%;font:120px 'Cormorant Garamond',serif;transform:rotate(-27deg);opacity:.24}.ok-invite .ok-deco-b{right:-16px;bottom:4%;font:135px 'Cormorant Garamond',serif;transform:rotate(19deg);opacity:.18}.ok-invite .ok-deco-c{left:50%;top:35px;font:34px 'Cormorant Garamond',serif;opacity:.65;animation:okGlow 4s ease-in-out infinite}.ok-invite--wedding{background:radial-gradient(ellipse at 50% 42%,#fffefa 0%,#ece1cb 61%,#d4c1a8 100%);color:#5a4537}.ok-invite--birthday{background:radial-gradient(ellipse at 50% 43%,#665472 0%,#2a2437 57%,#141421 100%);color:#ffebbe}.ok-invite--family{background:radial-gradient(ellipse at 50% 35%,#fbebd3 0%,#dbc0a4 60%,#bb9684 100%);color:#62443e}.ok-invite--wedding .ok-flower{position:absolute;top:-8px;left:-34px;color:#ad8766;opacity:.2;font:170px serif}.ok-invite--birthday .ok-confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 8% 23%,#ecca77 0 2px,transparent 3px),radial-gradient(circle at 81% 12%,#d7b78c 0 2px,transparent 3px),radial-gradient(circle at 54% 80%,#ffdda1 0 1px,transparent 2px),radial-gradient(circle at 87% 55%,#fdf4df 0 1px,transparent 2px),radial-gradient(circle at 35% 13%,#f4d496 0 1px,transparent 2px);background-size:110px 160px;opacity:.4;animation:okConfetti 9s linear infinite}.ok-invite--family .ok-warm-glow{position:absolute;width:450px;height:450px;border-radius:50%;background:#ffe5b582;filter:blur(55px);top:15%;left:50%;transform:translateX(-50%)}
.ok-content{position:relative;z-index:2;width:100%;max-width:415px;padding:72px 35px 50px;opacity:0;transform:translateY(22px) scale(.97);transition:opacity 1.2s .45s,transform 1.2s .45s}.ok-invite.is-open .ok-content{opacity:1;transform:none}.ok-content .ok-monogram{font:47px 'Cormorant Garamond',serif;line-height:1;margin-bottom:21px;color:inherit}.ok-invite .ok-small{letter-spacing:3px;font-size:8px;font-weight:700;text-transform:uppercase;line-height:2.3}.ok-content h1{font:500 clamp(46px,8vw,67px)/.9 'Cormorant Garamond',serif;letter-spacing:-1px;margin:28px 0 17px;overflow-wrap:anywhere}.ok-content h1 em{font-weight:400}.ok-content .ok-statement{font:italic 22px/1.35 'Cormorant Garamond',serif;opacity:.85;max-width:320px;margin:0 auto 30px}.ok-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto 24px;font:21px 'Cormorant Garamond',serif}.ok-divider:before,.ok-divider:after{content:'';width:54px;height:1px;background:currentColor;opacity:.4}.ok-content .ok-day{font:500 31px 'Cormorant Garamond',serif;margin:0 0 5px}.ok-content .ok-time-place{font-size:11px;line-height:2;max-width:275px;margin:0 auto}.ok-content .ok-countdown{display:flex;align-items:center;justify-content:center;gap:11px;margin:27px auto 24px}.ok-countdown>span{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:8px;letter-spacing:.5px;min-width:51px;gap:2px}.ok-countdown b{font:500 26px 'Cormorant Garamond',serif;line-height:1}.ok-map{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding:5px 0;font-size:10px;font-weight:700}.ok-share-caption{margin:25px 0 0;font-size:8px;letter-spacing:2px;opacity:.75}.ok-invite--birthday .ok-content h1{color:#f5d7a1;text-shadow:0 1px 20px #e5be784b}.ok-invite--family .ok-content h1{color:#6b4444}.ok-invite--wedding .ok-content h1{color:#886d56}.ok-invite--birthday .ok-day{color:#f1d19c}
.ok-cover{position:absolute;inset:0;z-index:6;cursor:pointer;display:grid;place-items:center;transition:opacity .8s 1s,visibility .8s 1s;outline-offset:-11px}.ok-invite.is-open .ok-cover{opacity:0;visibility:hidden;pointer-events:none}.ok-cover .ok-cover-kicker{font-size:10px;letter-spacing:3px;font-weight:700}.ok-cover .ok-cover-instruction{font-size:9px;letter-spacing:1.8px;animation:okGlow 3s ease-in-out infinite}.ok-cover .ok-cover-title{font:500 45px/1 'Cormorant Garamond',serif}.ok-invite--wedding .ok-cover{perspective:1300px}.ok-wedding-doors{position:absolute;inset:0;display:flex;transform-style:preserve-3d}.ok-wedding-panel{width:50%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.2,.73,.2,1);backface-visibility:visible;background:linear-gradient(90deg,#bba58e,#e5d7c1 25%,#cfb99e 66%,#a58b75);border:7px solid #c5ae91;box-shadow:inset 0 0 0 2px #f7eddc,inset 0 0 0 18px #d8c4ab,inset 0 0 0 20px #a68e75,0 0 50px #0002}.ok-wedding-panel:before{content:'';position:absolute;top:13%;bottom:11%;left:12%;right:12%;border:2px solid #ae926b;border-radius:48% 48% 3px 3px / 24% 24% 3px 3px;box-shadow:inset 0 0 0 8px #e3d2ba,inset 0 0 0 9px #b39b7d}.ok-wedding-panel:after{content:'❦';position:absolute;top:32%;left:50%;transform:translateX(-50%);font:53px 'Cormorant Garamond',serif;color:#a68769}.ok-wedding-left{transform-origin:left center}.ok-wedding-right{transform-origin:right center}.ok-wedding-left .ok-handle,.ok-wedding-right .ok-handle{position:absolute;top:53%;width:10px;height:42px;background:linear-gradient(90deg,#836643,#f0d9a9,#7a5835);border-radius:10px;border:1px solid #8f6e42;z-index:2}.ok-wedding-left .ok-handle{right:15px}.ok-wedding-right .ok-handle{left:15px}.ok-invite.is-open .ok-wedding-left{transform:rotateY(-112deg)}.ok-invite.is-open .ok-wedding-right{transform:rotateY(112deg)}.ok-cover-wedding-text{position:absolute;top:17%;left:0;right:0;text-align:center;color:#78634e;text-shadow:0 1px 2px #f6e6ca;pointer-events:none;transition:opacity .3s}.ok-cover-wedding-text .ok-cover-title{font-size:30px;letter-spacing:3px;margin:18px}.ok-cover-wedding-text .ok-cover-instruction{margin-top:285px}.ok-invite.is-open .ok-cover-wedding-text{opacity:0}
.ok-cover-birthday{background:radial-gradient(circle at center,#624a6b,#272435 60%,#1b1b2a);color:#f4d29c;overflow:hidden}.ok-cover-birthday:before{content:'';position:absolute;inset:-70%;background:repeating-conic-gradient(from 0deg,#e9c99514 0deg 5deg,transparent 5deg 20deg);animation:okSpin 24s linear infinite}.ok-birthday-gift{position:relative;width:225px;height:225px;border:2px solid #deba79;background:linear-gradient(130deg,#624e70,#24243c);box-shadow:0 0 0 12px #d5af7730,0 0 0 13px #d5af77a0,0 0 90px #c4a26c63;display:flex;justify-content:center;align-items:center;flex-direction:column;transition:transform 1.2s,opacity 1.1s;z-index:2}.ok-birthday-gift:before,.ok-birthday-gift:after{content:'';position:absolute;background:#d4b177;box-shadow:0 0 12px #f9d99b}.ok-birthday-gift:before{width:28px;height:100%;opacity:.35}.ok-birthday-gift:after{width:100%;height:28px;opacity:.35}.ok-birthday-gift>*{z-index:2}.ok-birthday-gift .ok-gift-star{font:62px 'Cormorant Garamond',serif}.ok-birthday-gift .ok-cover-title{font-size:37px}.ok-birthday-gift .ok-cover-instruction{position:absolute;top:238px;width:300px}.ok-invite.is-open .ok-birthday-gift{transform:scale(1.8) rotate(14deg);opacity:0}.ok-balloon{position:absolute;width:50px;height:68px;bottom:-100px;border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 30% 20%,#fff8e4aa,transparent 35%),linear-gradient(120deg,#ab8668,#ebc784);opacity:.58;animation:okBalloon 13s linear infinite}.ok-balloon:after{content:'';position:absolute;top:100%;left:50%;height:110px;width:1px;background:#d6b77c70}.ok-balloon:nth-child(2){left:12%;animation-delay:-6s}.ok-balloon:nth-child(3){left:78%;animation-delay:-9s;transform:scale(.7)}.ok-balloon:nth-child(4){left:55%;animation-delay:-2s;transform:scale(.5)}
.ok-cover-family{background:radial-gradient(circle,#efddc7,#cbaa92);color:#784f49}.ok-envelope{position:relative;width:280px;height:220px;background:#eee0c9;box-shadow:0 15px 45px #7d58474d;border:1px solid #c6a58e;transform:rotate(-3deg);transition:transform 1s,opacity 1s;display:grid;place-items:center}.ok-envelope:before{content:'';position:absolute;inset:0;background:linear-gradient(142deg,transparent 50%,#dbc5ab 50.2%) left bottom/50% 100% no-repeat,linear-gradient(-142deg,transparent 50%,#ddc6ad 50.2%) right bottom/50% 100% no-repeat;z-index:2}.ok-envelope-flap{position:absolute;width:100%;height:62%;top:0;left:0;transform-origin:top;clip-path:polygon(0 0,100% 0,50% 100%);background:#ead8bd;z-index:4;transition:transform 1s;box-shadow:0 3px 7px #67482933}.ok-wax-seal{z-index:5;position:absolute;width:66px;height:66px;display:grid;place-items:center;top:41%;left:calc(50% - 33px);border-radius:50%;background:radial-gradient(circle at 30% 20%,#e0a392,#8f5656);border:5px double #d1aa89;color:#f8d9bd;font:32px 'Cormorant Garamond',serif;box-shadow:0 6px 15px #4c302f55;transition:transform .6s}.ok-cover-family .ok-cover-instruction{position:absolute;top:76%;z-index:6;color:#704b46}.ok-invite.is-open .ok-envelope{transform:translateY(200px) scale(1.1);opacity:0}.ok-invite.is-open .ok-envelope-flap{transform:rotateX(175deg)}.ok-invite.is-open .ok-wax-seal{transform:scale(0)}
@keyframes okBalloon{to{translate:0 -950px}}@keyframes okGlow{50%{opacity:.35;transform:scale(1.07)}}@keyframes okSpin{to{transform:rotate(360deg)}}@keyframes okConfetti{to{background-position:0 240px}}@media(max-width:500px){.ok-invite{min-height:690px}.ok-content{padding:70px 30px 40px}.ok-content h1{font-size:53px}.ok-cover-wedding-text .ok-cover-instruction{margin-top:270px}}@media(prefers-reduced-motion:reduce){.ok-invite *{animation:none!important;transition:none!important}}

.oq-feature-frame{width:100%;height:min(80dvh,850px);min-height:520px;display:block;border:0;background:#f7f4ec}