:root{color-scheme:light;--cream:#fff6e8;--ink:#603919;--pink:#da8d98}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5e9db;color:var(--ink);font-family:Georgia,serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}main{width:min(100%,540px);margin:auto;background:var(--cream)}[hidden]{display:none!important}
.scene{width:100%;aspect-ratio:941/1672;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at center,#fffaef,#fff4e3)}.art{position:absolute;inset:0;width:100%;height:100%;display:block}.pieces{display:none;position:absolute;inset:0;pointer-events:none}.piece{will-change:transform,opacity}.hotspot{position:absolute;z-index:3;display:block;border:0;background:transparent;cursor:pointer;border-radius:24px;transition:box-shadow .2s}.hotspot:focus-visible{outline:3px solid #603919;outline-offset:4px;background:#ffffff18}.hotspot:hover{box-shadow:0 0 0 3px #fff8,0 4px 18px #6b42251a}.hotspot.play{left:35%;top:30.5%;width:30%;height:14.5%;border-radius:50%}.rsvp{left:9%;top:47%;width:26%;height:18.5%}.location{left:37%;top:47%;width:26%;height:18.5%}.about{left:65%;top:47%;width:26%;height:18.5%}
.scroll-hint{position:relative;z-index:5;display:flex;align-items:center;flex-direction:column;gap:10px;padding:17px 12px 21px;background:#fff6e8;text-decoration:none;font-family:system-ui,sans-serif;font-size:14px;color:var(--ink);letter-spacing:.03em}.chevron{height:10px;width:10px;border-bottom:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);animation:scrollCue 2.8s ease-in-out infinite}.sound{position:fixed;right:12px;top:12px;z-index:20;background:#fffaf2f2;color:var(--ink);border:1px solid #d5b9a3;border-radius:24px;padding:10px 14px;min-height:44px;font:14px system-ui,sans-serif;box-shadow:0 2px 16px #60391917;cursor:pointer}.sound:focus-visible,.back:focus-visible,.scroll-hint:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.return-to-menu{left:48%;top:77%;width:44%;height:8%;border-radius:40px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.moving .pieces{display:block}
.cover-left{clip-path:inset(0 50% 82% 0);animation:enterLeft .6s both}.cover-right{clip-path:inset(0 0 82% 50%);animation:enterRight .75s both}.cover-name{clip-path:inset(29.8% 10% 62.8% 10%);animation:titleCinema .85s both}
.menu-left{clip-path:inset(0 77% 86% 0);animation:enterLeft .6s both}.menu-right{clip-path:inset(0 0 86% 77%);animation:enterRight .75s both}.menu-name{clip-path:inset(14% 16% 69.5% 16%);animation:titleCinema .85s both}
.moving.settled .menu-name,.moving.settled .cover-name{animation:gentleTitle 10s ease-in-out infinite}.moving.settled .menu-left,.moving.settled .cover-left{animation:gentleLeft 12s ease-in-out infinite}.moving.settled .menu-right,.moving.settled .cover-right{animation:gentleRight 13s ease-in-out infinite}
@keyframes scrollCue{0%,100%{translate:0 0;opacity:.6}50%{translate:0 5px;opacity:1}}@keyframes enterLeft{from{opacity:0;transform:translate(-3%, -1%)}to{opacity:1;transform:none}}@keyframes enterRight{from{opacity:0;transform:translate(3%, -1%)}to{opacity:1;transform:none}}@keyframes titleCinema{from{opacity:0;transform:translateY(1%) scale(.985);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}@keyframes gentleTitle{0%,100%{transform:none}50%{transform:translateY(-.18%) scale(1.007)}}@keyframes gentleLeft{0%,100%{transform:none}50%{transform:translate(.35%,.3%) rotate(.12deg)}}@keyframes gentleRight{0%,100%{transform:none}50%{transform:translate(-.35%,.3%) rotate(-.12deg)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

.menu-baby{clip-path:inset(65.5% 24% 2% 28%);transform-origin:50% 96%;animation:babyFloat 7s ease-in-out infinite}
.tips-name{clip-path:inset(7% 19% 75% 19%);animation:gentleTitle 10s ease-in-out infinite}
.tips-baby{clip-path:inset(69% 50% 2% 12%);transform-origin:30% 96%;animation:babyFloat 7.5s ease-in-out infinite}
@keyframes babyFloat{0%,100%{transform:none}50%{transform:translateY(-.2%) rotate(.15deg)}}
@media(prefers-reduced-motion:reduce){.menu-baby,.tips-baby,.tips-name{animation:none}}