html,body,#root{background:#f2ede3}body{margin:0;overflow-x:hidden}.page{background:#f2ede3;justify-content:center;min-height:100vh;padding-bottom:0;display:flex}.invite{flex-direction:column;align-items:center;width:100%;max-width:500px;min-height:100vh;display:flex;position:relative}.names-wrap{flex-direction:column;align-items:center;width:min(260px,60vw);margin-top:160px;margin-left:-24px;display:flex;position:relative}.macaw-pair{pointer-events:none;z-index:11;height:150px;position:absolute;top:30px;left:0;right:0}.macaw{mix-blend-mode:multiply;will-change:transform, opacity;transform-origin:50%;backface-visibility:hidden;opacity:0;width:auto;height:130px;position:absolute;top:0;left:50%}.macaw-red{transform:translate(calc(-50% - 160vw),6vh)}.macaw-yellow{height:95px;transform:translate(calc(160vw - 50%),4vh)}.macaw-red.in-flight{animation:14s cubic-bezier(.22,1,.36,1) forwards flyInRed,6s ease-in-out 14s infinite floatRed}.macaw-yellow.in-flight{animation:14s cubic-bezier(.22,1,.36,1) forwards flyInYellow,6.5s ease-in-out 14s infinite floatYellow}.el-names{mix-blend-mode:multiply;z-index:10;opacity:0;width:88%;transition:opacity 1.2s;position:relative}.el-names.is-visible{opacity:1}.el-std{mix-blend-mode:multiply;z-index:10;opacity:0;clip-path:inset(0 100% 0 0);width:min(380px,84vw);margin-top:14px}.el-std.is-writing{animation:3.2s ease-in-out forwards writeInStd}@keyframes flyInRed{0%{opacity:0;transform:translate(calc(-50% - 160vw),6vh)scale(1)}6%{opacity:1}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes flyInYellow{0%{opacity:0;transform:translate(calc(160vw - 50%),4vh)scale(1)}6%{opacity:1}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes floatRed{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-4px)}}@keyframes floatYellow{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-5px)}}.invite{flex-direction:column;align-items:center;width:100%;max-width:500px;display:flex;position:relative}.palms-wrap{z-index:5;width:100vw;height:60vh;margin-top:26vh;display:block;position:relative;overflow:visible}.date-wrap{z-index:20;justify-content:center;align-items:flex-start;width:100%;min-height:18vh;margin-top:-22vh;padding-bottom:4vh;display:flex;position:relative}.palm-left{transform-origin:0 100%;z-index:2;width:72%;animation:7s ease-in-out 2.2s infinite swayLeft;position:absolute;bottom:0;left:-8%}.palm-right{transform-origin:100% 100%;z-index:1;width:72%;animation:9s ease-in-out 2.7s infinite swayRight;position:absolute;bottom:0;right:-4%}.el-date{mix-blend-mode:multiply;z-index:20;opacity:0;clip-path:inset(0 100% 0 0);width:min(320px,76vw);position:relative;bottom:auto;left:auto;transform:none}.el-date.is-visible{animation:3.2s ease-in-out forwards writeInStd}.splash{z-index:999;cursor:pointer;background:#f2ede3;flex-direction:column;justify-content:center;align-items:center;transition:opacity 1s;display:flex;position:fixed;inset:0}.splash-out{opacity:0;pointer-events:none}.splash-birds{mix-blend-mode:multiply;transform-origin:50%;width:72%;max-width:360px;animation:1.6s ease-in-out infinite flap}.splash-names{color:#6b4c34;letter-spacing:3px;margin-top:24px;font-family:Georgia,serif;font-size:20px;font-weight:400}.splash-tap{letter-spacing:4px;color:#9a8a72;text-transform:uppercase;margin-top:18px;font-family:Georgia,serif;font-size:10px;animation:2s ease-in-out infinite pulseTap}.splash-volume{letter-spacing:3px;color:#b8a78c;text-transform:uppercase;align-items:center;gap:8px;margin-top:14px;font-family:Georgia,serif;font-size:9px;display:flex}.splash-volume svg{opacity:.85}.music-btn{z-index:100;color:#6b4c34;cursor:pointer;background:linear-gradient(145deg,#f6efe1,#e7d8bd);border:1px solid #b89a72;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-family:Georgia,serif;font-size:12px;line-height:1;transition:transform .2s,box-shadow .2s;display:flex;position:fixed;bottom:14px;right:14px;box-shadow:0 3px 8px #6b4c3438}.music-btn:hover{transform:scale(1.06);box-shadow:0 4px 10px #6b4c344d}.music-btn.is-on{background:linear-gradient(145deg,#e7d8bd,#c8b089)}@keyframes floaty{0%,to{transform:translateY(0)rotate(-1.5deg)}50%{transform:translateY(-14px)rotate(1.5deg)}}.floaty{animation:4.2s ease-in-out infinite floaty}.splash .floaty{animation:3.6s ease-in-out infinite floaty,1.5s ease-in-out infinite flap}.el-names{transform-origin:50%}@keyframes birdDrift{0%,to{transform:translateY(0)rotate(-.8deg)}50%{transform:translateY(-4px)rotate(.8deg)}}@keyframes pulseTap{0%,to{opacity:.35}50%{opacity:1}}@keyframes swayLeft{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes swayRight{0%,to{transform:rotate(3.5deg)}50%{transform:rotate(-.5deg)}}@keyframes flap{0%,to{transform:scaleY(1)}50%{transform:scaleY(.92)}}@keyframes subtleBirdDrift{0%,to{transform:translate(0)rotate(-.8deg)}50%{transform:translate(-4px,-3px)rotate(.8deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes writeInStd{0%{opacity:0;clip-path:inset(0 100% 0 0)}15%{opacity:1}to{opacity:1;clip-path:inset(0 0% 0 0)}}.fade-in{opacity:0;animation:1s forwards fadeIn}.fade-up{opacity:0;animation:1s forwards fadeUp}.write-in-std{opacity:0;clip-path:inset(0 100% 0 0);animation:2s ease-in-out 1s forwards writeInStd}.d-1{animation-delay:.1s}.d-2{animation-delay:.65s}.d-3{animation-delay:1.1s}.d-4{animation-duration:1.4s;animation-delay:1.7s}.d-5{animation-duration:1.2s;animation-delay:2.3s}.el-birds.fade-in{animation:1s .1s forwards fadeIn,5s ease-in-out 1.1s infinite floaty,1.8s ease-in-out 1.1s infinite flap}
