@import './src/tokens.generated.css';
body>header{max-width:1120px;width:100%;padding-top:24px}body>header h1{margin-top:12px}.rsvp-motion-workbench{max-width:1120px;display:grid;grid-template-columns:300px 1fr;align-items:start;gap:64px;padding:16px 24px 48px;width:100%}
.rsvp-motion-controls{position:sticky;top:24px;padding-top:28px}.rsvp-motion-eyebrow{font:var(--type-label-xs-font);letter-spacing:1.6px;color:var(--color-text-icon-secondary);margin:0 0 12px}.rsvp-motion-switcher{display:flex;gap:8px;margin-bottom:16px}.rsvp-motion-switcher button{appearance:none;padding:10px 12px;border:1px solid var(--color-border-default);border-radius:8px;background:transparent;color:var(--color-text-icon-primary);font:var(--type-body-m-font);cursor:pointer;white-space:nowrap}.rsvp-motion-switcher [aria-pressed=true]{background:var(--color-surface-selected);border-color:var(--color-border-selected)}.rsvp-motion-switcher :disabled{color:var(--color-text-icon-disabled);border-color:var(--color-border-disabled);cursor:default}.rsvp-motion-note{font:var(--type-body-m-font);line-height:1.7;margin:0 0 24px;max-width:290px}.rsvp-motion-status{font:var(--type-helper-font);margin-top:16px}.rsvp-motion-controls button:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:3px}
.rsvp-motion-phone{--rsvp-base:var(--color-blue700);--rsvp-bright:var(--color-blue500);--rsvp-glow:var(--color-periwinkle500);--rsvp-end:var(--rsvp-violet,var(--color-periwinkle500));position:relative;isolation:isolate;width:min(100%,360px);height:680px;justify-self:center;border-radius:36px;overflow:hidden;background:var(--rsvp-base);box-shadow:0 24px 70px #0005,0 0 0 1px #ffffff24;color:#fff9f0}
.rsvp-motion-phone::before{content:'';position:absolute;inset:-28%;background:radial-gradient(ellipse at 25% 22%,color-mix(in srgb,var(--rsvp-bright) 85%,transparent),transparent 55%),radial-gradient(ellipse at 83% 72%,var(--rsvp-end),transparent 57%),linear-gradient(160deg,color-mix(in srgb,var(--rsvp-base) 60%,var(--color-black)),var(--rsvp-base) 55%,color-mix(in srgb,var(--rsvp-base) 70%,var(--color-black)));z-index:-2;pointer-events:none;transform:translate(-4%,-3%) scale(1.03)}
.rsvp-motion-phone::after{content:'';position:absolute;inset:-30%;background:radial-gradient(ellipse at 65% 40%,color-mix(in srgb,var(--rsvp-glow) 60%,transparent),transparent 45%),radial-gradient(ellipse at 10% 85%,color-mix(in srgb,var(--rsvp-bright) 60%,transparent),transparent 55%);z-index:-1;pointer-events:none;opacity:.2}
.rsvp-motion-phone.is-playing::before{animation:rsvp-cobalt-drift 9s ease-in-out infinite alternate}
.rsvp-motion-phone.is-playing::after{animation:rsvp-cobalt-pulse 6s ease-in-out infinite alternate}
@keyframes rsvp-cobalt-drift{0%{transform:translate(-7%,-5%) scale(1.05) rotate(-7deg)}65%{transform:translate(7%,4%) scale(1.16) rotate(5deg)}100%{transform:translate(3%,2%) scale(1.08) rotate(2deg)}}
@keyframes rsvp-cobalt-pulse{0%{opacity:.1;transform:scale(.9)}48%{opacity:.65;transform:scale(1.15)}100%{opacity:.27;transform:scale(1)}}
.rsvp-motion-progress{width:100%;height:3px;overflow:hidden;border-radius:3px;background:var(--color-surface-secondary);margin:24px 0 8px}.rsvp-motion-progress>span{display:block;width:100%;height:100%;background:var(--color-periwinkle500);transform-origin:left;animation:rsvp-three-second-progress var(--orbit-duration,4s) linear infinite}@keyframes rsvp-three-second-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rsvp-motion-safe-top{height:44px}.rsvp-motion-home-indicator{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);height:4px;width:104px;border-radius:20px;background:#35306070}#confirmation-host,.rsvp-animation-host{position:absolute;inset:0;height:100%;width:100%}
.rsvp-confirmation{position:absolute;inset:0;width:100%;height:100%}
.rsvp-graphic-stage{position:absolute;inset:0;width:100%;height:100%;perspective:900px}
.rsvp-arabic-object{position:absolute;inset:0;direction:ltr;transform-style:preserve-3d;perspective:900px;pointer-events:none}
.rsvp-orbit-word{position:absolute;left:50%;top:50%;transform-origin:center;will-change:transform;filter:drop-shadow(0 18px 12px #07152b50);animation:rsvp-orbit-appear 450ms ease-out both}.rsvp-orbit-word img{display:block;width:100%;height:auto;min-width:0;user-select:none;pointer-events:none}
@keyframes rsvp-orbit-appear{from{opacity:0}to{opacity:1}}
.rsvp-orbit-lines{position:absolute;left:50%;top:50%;width:560px;height:560px;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;animation:rsvp-orbit-appear 600ms ease-out both}
.rsvp-message-anchor{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);z-index:10;pointer-events:none;isolation:isolate}
.rsvp-message-anchor::before{content:'';position:absolute;inset:-36px -16px;z-index:-1;background:radial-gradient(ellipse,color-mix(in srgb,var(--rsvp-base) 70%,transparent),transparent 72%);filter:blur(12px);pointer-events:none}
.rsvp-orbit-track{stroke:var(--color-blue200);stroke-opacity:.24;stroke-width:.75}
.rsvp-orbit-glint{stroke:var(--color-blue100);stroke-opacity:.75;stroke-width:1.2;stroke-dasharray:55 900;animation:rsvp-orbit-glint 4s linear infinite reverse}
@keyframes rsvp-orbits-reveal{0%{opacity:0;transform:scale(.8)}12%,62%{opacity:1}88%,100%{opacity:0;transform:scale(1.06)}}
@keyframes rsvp-orbit-glint{from{stroke-dashoffset:0}to{stroke-dashoffset:-955}}
.rsvp-confirmation-message{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;padding:0 20px;margin-top:0;opacity:0;animation:rsvp-message-enter 400ms cubic-bezier(.22,.61,.36,1) 950ms both}.rsvp-confirmation-message p{margin:0;text-align:center;color:#fffaf4;text-shadow:0 1px 6px #6654ad12}.rsvp-confirmation-message .rsvp-message-en{font-family:var(--font-family);font-size:23px;line-height:31px;font-weight:500;letter-spacing:-.3px}.rsvp-confirmation-message .rsvp-message-ar{font-family:var(--font-family);font-size:20px;line-height:30px;font-weight:400}
.rsvp-particle{position:absolute;left:50%;top:50%;z-index:1;width:var(--size);height:var(--size);pointer-events:none;opacity:0;animation:rsvp-yes-burst 720ms cubic-bezier(.15,.6,.25,1) var(--delay) both;transform-origin:center}.rsvp-particle-sphere{border-radius:50%;background:radial-gradient(circle at 30% 24%,#fffefa 0%,#fff1d9 22%,#f4c5bb 47%,#b8a8ee 78%,#7c6ec3 100%);box-shadow:inset -1px -2px 3px #6555a52e,0 4px 7px #59408c1c}.rsvp-particle-star{background:linear-gradient(135deg,#fffaf1,#ffdbb4 55%,#cda6b6);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);filter:drop-shadow(1px 2px 1px #75528a26)}
@keyframes rsvp-message-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes rsvp-yes-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0deg)}18%{opacity:.95}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.8) rotate(var(--spin))}}
@media(max-width:740px){.rsvp-motion-workbench{grid-template-columns:1fr;gap:28px;padding:8px 16px 32px}.rsvp-motion-controls{position:static;padding:0}.rsvp-motion-note{max-width:none;margin-bottom:16px}.rsvp-motion-phone{width:min(100%,360px);height:650px}.rsvp-motion-switcher{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.rsvp-motion-phone.is-playing::before,.rsvp-motion-phone.is-playing::after{animation:none;transform:none}.rsvp-motion-phone::after{opacity:.27}.rsvp-confirmation-message{animation:none;opacity:1;transform:none}.rsvp-particle,.rsvp-orbit-lines{display:none}.rsvp-motion-progress>span{animation:none;transform:none}.rsvp-orbit-word{will-change:auto;animation:none}}

/* Maybe reuses the approved orbit composition with quieter depth and slower travel. */
.rsvp-confirmation-maybe .rsvp-orbit-word{animation:none}
.rsvp-confirmation-maybe .rsvp-orbit-word img{animation:rsvp-maybe-word-enter 800ms ease-out both}
@keyframes rsvp-maybe-word-enter{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.rsvp-confirmation-maybe .rsvp-graphic-stage{animation:rsvp-maybe-float 5s ease-in-out infinite}
@keyframes rsvp-maybe-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.rsvp-confirmation-maybe .rsvp-confirmation-message{animation-delay:300ms;animation-duration:400ms}
.rsvp-confirmation-maybe .rsvp-orbit-track{stroke-opacity:.16}
.rsvp-confirmation-maybe .rsvp-orbit-glint{stroke-opacity:.45;animation-duration:5s}
.rsvp-motion-phone[data-state=maybe].is-playing::before{animation-duration:14s}
.rsvp-motion-phone[data-state=maybe].is-playing::after{animation-duration:12s}
@media(prefers-reduced-motion:reduce){.rsvp-confirmation-maybe .rsvp-graphic-stage,.rsvp-confirmation-maybe .rsvp-orbit-word img{animation:none;transform:none}.rsvp-confirmation-maybe .rsvp-orbit-word img{opacity:1}}

/* Supplied Shapes 1–3 replace the Arabic word art for Can’t go. */
.rsvp-confirmation-no .rsvp-orbit-word{animation:rsvp-orbit-appear 700ms ease-out both}
.rsvp-confirmation-no .rsvp-graphic-stage{animation:rsvp-no-float 5s ease-in-out infinite}
.rsvp-confirmation-no .rsvp-confirmation-message{animation-delay:250ms;animation-duration:400ms}
.rsvp-confirmation-no .rsvp-orbit-track{stroke-opacity:.16}
.rsvp-confirmation-no .rsvp-orbit-glint{animation-duration:5s;stroke-opacity:.45}
.rsvp-motion-phone[data-state=no].is-playing::before{animation-duration:14s}
.rsvp-motion-phone[data-state=no].is-playing::after{animation-duration:12s}
@keyframes rsvp-no-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.rsvp-confirmation-no .rsvp-graphic-stage,.rsvp-confirmation-no .rsvp-orbit-word{animation:none;transform:none}}

/* State-specific palette; shared drift and pulse remain unchanged. */
.rsvp-motion-phone[data-state=yes]{--rsvp-base:color-mix(in srgb,var(--color-green500) 45%,var(--color-black));--rsvp-bright:var(--color-green500);--rsvp-glow:var(--color-lime500);--rsvp-end:var(--color-accent-green)}
.rsvp-motion-phone[data-state=no]{--rsvp-base:color-mix(in srgb,var(--color-red600) 65%,var(--color-black));--rsvp-bright:var(--color-orange500);--rsvp-glow:var(--color-orange500);--rsvp-end:var(--color-red500)}
.rsvp-motion-phone[data-state=yes] .rsvp-orbit-track,.rsvp-motion-phone[data-state=no] .rsvp-orbit-track{stroke:var(--rsvp-glow)}
.rsvp-motion-phone[data-state=yes] .rsvp-orbit-glint,.rsvp-motion-phone[data-state=no] .rsvp-orbit-glint{stroke:#fffaf4}

/* More pronounced moving color fields; text and artwork motion stay independent. */
.rsvp-motion-phone::before{inset:-55%;background:radial-gradient(ellipse at 20% 24%,var(--rsvp-bright) 0%,transparent 48%),radial-gradient(ellipse at 82% 76%,var(--rsvp-end) 0%,transparent 46%),linear-gradient(145deg,var(--rsvp-base) 18%,color-mix(in srgb,var(--rsvp-base) 65%,var(--color-black)) 78%)}
.rsvp-motion-phone::after{inset:-45%;background:radial-gradient(ellipse at 78% 20%,var(--rsvp-glow) 0%,transparent 42%),radial-gradient(ellipse at 16% 82%,var(--rsvp-bright) 0%,transparent 40%);mix-blend-mode:screen}
.rsvp-motion-phone.is-playing::before{animation:rsvp-color-sweep 18s cubic-bezier(.45,0,.55,1) infinite alternate}
.rsvp-motion-phone.is-playing::after{animation:rsvp-color-bloom 14s ease-in-out infinite alternate}
.rsvp-motion-phone[data-state=yes]{--rsvp-base:color-mix(in srgb,var(--color-green500) 28%,var(--color-black));--rsvp-end:var(--color-green500)}
.rsvp-motion-phone[data-state=maybe]{--rsvp-end:var(--rsvp-orchid,var(--color-periwinkle500))}
.rsvp-motion-phone[data-state=maybe].is-playing::before{animation-duration:22s}
.rsvp-motion-phone[data-state=maybe].is-playing::after{animation-duration:18s}
.rsvp-motion-phone[data-state=no].is-playing::before{animation-duration:20s}
.rsvp-motion-phone[data-state=no].is-playing::after{animation-duration:16s}
@keyframes rsvp-color-sweep{0%{transform:translate(-12%,-10%) scale(1.08)}50%{transform:translate(10%,-4%) scale(1.18)}100%{transform:translate(6%,12%) scale(1.1)}}
@keyframes rsvp-color-bloom{0%{opacity:.12;transform:translate(12%,-9%) scale(1.05)}55%{opacity:.72;transform:translate(-8%,7%) scale(1.18)}100%{opacity:.35;transform:translate(-12%,10%) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.rsvp-motion-phone.is-playing::before,.rsvp-motion-phone.is-playing::after{animation:none;transform:none}.rsvp-motion-phone::after{opacity:.3}}

/* Explicit clipping prevents Safari blend layers from exposing rectangular edges. */
.rsvp-motion-phone{clip-path:inset(0 round 36px)}
.rsvp-motion-phone::before,.rsvp-motion-phone::after{filter:blur(24px)}