:root{color-scheme:light;--wine:#a20816;--paper:#f3f0ed}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--paper)}
body{display:flex;justify-content:center;align-items:flex-start;font-family:Georgia,serif;-webkit-tap-highlight-color:transparent}
/* ponytail: mobile fills the viewport; only desktop keeps the narrow canvas. No content reflow. */
#invitation{position:relative;width:min(100vw,56.25vh);width:min(100vw,56.25dvh);height:100vh;height:100dvh;overflow:hidden;isolation:isolate;visibility:hidden;opacity:0}
@media(max-width:767px),(pointer:coarse){#invitation{width:100vw}}
#art,#artwork{display:block;width:100%;height:100%}
#artwork{overflow:hidden}
body[data-state=ready] #invitation{visibility:visible;opacity:1;transition:opacity .28s ease}
#rsvp{position:absolute;left:60.86%;top:4.13%;width:38.1%;height:6.15%;min-height:28px;border-radius:999px;cursor:pointer;z-index:2;transition:box-shadow .2s,background .2s}
#rsvp:hover,#rsvp:focus-visible{outline:2px dashed var(--wine);outline-offset:3px;background:#ffffff17;box-shadow:0 0 24px #a2081628}
#rsvp:active{background:#a2081617}
#loader{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--paper);color:var(--wine);transition:opacity .25s,visibility .25s}
body[data-state=ready] #loader{opacity:0;visibility:hidden;pointer-events:none}
.loader-star{font-size:65px;animation:loading-spin 4s linear infinite}
#enter{border:1px solid var(--wine);border-radius:999px;padding:17px 29px;background:var(--wine);color:var(--paper);font:16px Georgia,serif;cursor:pointer;box-shadow:0 5px 22px #a208161c;touch-action:manipulation}
#enter[hidden]{display:none}
#enter:hover{background:#820710}
#enter:focus-visible{outline:2px dashed var(--wine);outline-offset:5px}
body[data-state=loaded] .loading-track{display:none}
#loading-copy{font:13px 'Courier New',monospace;color:#57262a}
.loading-track{height:2px;width:126px;background:#a2081622;overflow:hidden}
#loading-progress{display:block;height:100%;width:0;background:var(--wine);transition:width .2s}
.motion{transform-box:view-box;animation-play-state:paused!important}
body[data-state=ready] .motion{animation-play-state:running!important}
.swing{animation:disco-swing 2.4s ease-in-out infinite}
.cheers{animation:cheers 1.65s ease-in-out infinite}
.float{animation:balloon-float 2.2s ease-in-out infinite}
.twinkle{animation:twinkle 1.4s ease-in-out infinite}
.star{animation:star-shimmer 1.8s ease-in-out infinite}
.kiss{animation:kiss-pop 2.1s ease-in-out infinite}
.record{animation:record-sway 3s ease-in-out infinite}
body.page-hidden .motion{animation-play-state:paused!important}
@keyframes disco-swing{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(8px)}}
@keyframes cheers{0%,100%{transform:rotate(-7deg) translateY(3px)}45%{transform:rotate(8deg) translateY(-12px)}75%{transform:rotate(-3deg) translateY(-4px)}}
@keyframes balloon-float{0%,100%{transform:translate(-5px,22px) rotate(-4deg)}50%{transform:translate(5px,-16px) rotate(4deg)}}
@keyframes twinkle{0%,100%{transform:scale(.88) rotate(-9deg);opacity:.65}50%{transform:scale(1.16) rotate(9deg);opacity:1}}
@keyframes star-shimmer{0%,100%{transform:translateY(3px) rotate(-12deg) scale(.94)}50%{transform:translateY(-7px) rotate(14deg) scale(1.12)}}
@keyframes kiss-pop{0%,100%{transform:scale(1) rotate(-4deg)}35%{transform:scale(1.16) rotate(6deg)}60%{transform:scale(.97) rotate(-6deg)}80%{transform:scale(1.07) rotate(2deg)}}
@keyframes record-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes loading-spin{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.motion,.loader-star{animation:none!important}#loader,#invitation{transition:none!important}}