@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&family=Dancing+Script:wght@400;700&family=Quicksand:wght@700&display=swap";:root{--font-dancing:"Dancing Script", cursive;--font-baloo:"Baloo 2", cursive;--font-quicksand:"Quicksand", sans-serif;--font-default:sans-serif;--color-dark:#1a1a1a;--color-pink-base:#f5a2da;--color-pink-light:#fdeee9;--color-pink-dark:#fe76a8;--color-pink-footer:#fd9dbc;--color-purple-primary:#9346b4;--color-purple-secondary:#9658cc;--color-purple-light:#956ab0;--color-purple-bg:#c299de;--color-peach:#fdecdc;--color-accent:#e35f9b}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-dark);font-family:var(--font-default)}.app-container{background-color:var(--color-pink-base);scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;max-width:393px;height:100dvh;margin:0 auto;overflow-y:auto}.app-container::-webkit-scrollbar{display:none}.frame{scroll-snap-align:start;scroll-snap-stop:always;flex-direction:column;align-items:center;width:100%;height:100dvh;display:flex;position:relative;overflow:hidden}.frame-cream{background-color:var(--color-pink-light);justify-content:flex-start}.mt-auto{margin-top:auto}.bg-absolute{object-fit:cover;z-index:1;width:100%;height:100%;position:absolute;top:0}.ornament-top{z-index:2;width:103%;height:auto;position:absolute;top:-10px}.badge-container{z-index:2;justify-content:center;width:85%;margin-top:21dvh;display:flex}.hbd-badge{filter:drop-shadow(0 4px 6px #00000026);width:100%;height:auto}.guest-box{z-index:2;background-color:var(--color-peach);width:274px;box-shadow:0 0 15px 5px var(--color-peach);text-align:center;border-radius:15px;flex-direction:column;align-items:center;margin-top:auto;margin-bottom:8dvh;padding:10px;display:flex}.text-untuk,.text-nama,.text-ditempat{font-family:var(--font-dancing);line-height:1}.text-untuk,.text-ditempat{color:var(--color-purple-secondary);font-weight:400}.text-untuk{align-self:flex-start;margin-left:20px;font-size:clamp(22px,4dvh,32px)}.text-nama{color:var(--color-purple-primary);margin-top:2dvh;margin-bottom:-5px;font-size:clamp(32px,6dvh,46px);font-weight:700}.underline-img{width:200px;height:auto}.text-ditempat{font-size:clamp(18px,3dvh,24px)}.profile-header{background-color:var(--color-pink-dark);flex:auto;justify-content:center;align-items:center;width:100%;min-height:65px;max-height:96px;display:flex}.banner-celebrate{width:90%;max-width:320px;height:auto}.profile-content{flex-direction:column;flex-grow:1;justify-content:space-evenly;align-items:center;width:100%;padding-bottom:5px;display:flex}.profile-card-img{width:100%;height:auto;display:block}.text-verse{font-family:var(--font-dancing);color:var(--color-purple-primary);text-align:center;margin:0;font-size:clamp(20px,4dvh,32px);font-weight:700;line-height:1.2}.profile-footer{flex-direction:column;flex:auto;justify-content:flex-end;width:100%;min-height:65px;max-height:96px;display:flex}#frame-profile .profile-footer{background-color:var(--color-pink-footer)}#frame-event .profile-footer{background-color:#d89acd}.rumbai-border{width:100%;height:auto}.footer-pattern{background-image:url(/assets/kupu-kupu-COYcKup8.webp);background-position:bottom;background-size:cover;width:100%;height:81px}.event-header{background-color:var(--color-pink-footer);flex:auto;width:100%;min-height:0;max-height:96px}.header-pattern{z-index:1;background-image:url(/assets/kupu-kupu-COYcKup8.webp);background-position:top;background-size:cover;width:100%;height:81px}.event-kupu-bg{z-index:1;pointer-events:none;flex-direction:column;width:100%;display:flex;position:absolute;top:0;left:0}.event-content{z-index:2;flex-direction:column;flex-grow:1;justify-content:space-evenly;align-items:center;width:100%;padding-bottom:0;display:flex;position:relative}.invited-banner-container{justify-content:center;align-items:center;width:100%;display:flex;position:relative;container-type:inline-size}.banner-invited{width:100%;height:auto;display:block}.event-intro{text-align:center;flex-direction:column;align-items:center;width:70cqw;padding:3.8cqw 2.5cqw;display:flex;position:absolute;top:27%;left:50%;transform:translate(-50%)}.text-haiteman{font-family:var(--font-baloo);color:var(--color-purple-light);margin:0;font-size:4.1cqw;font-weight:700;line-height:1.2}.text-sekar-ke{font-family:var(--font-dancing);color:var(--color-accent);margin-top:5cqw;font-size:8.1cqw;font-weight:700}.event-grid{text-align:start;grid-template-columns:max-content max-content;gap:3.5cqw 5cqw;width:max-content;margin-top:9.8cqw;margin-left:12cqw;display:grid}.grid-label,.grid-value{font-family:var(--font-quicksand);color:var(--color-purple-light);font-size:3.5cqw;font-weight:700;line-height:1.3}.btn-maps{background-color:var(--color-purple-bg);color:var(--color-pink-light);border-radius:15px;align-items:center;margin-top:.5cqw;margin-left:19cqw;padding:6px 16px;font-size:16px;transition:transform .2s;display:flex;box-shadow:0 4px 6px #c299de4d}.btn-maps:active{transform:scale(.95)}.footer-parents{background-color:#d89acd;flex-grow:1;justify-content:center;align-items:center;display:flex}.footer-parents p{font-family:var(--font-dancing);color:var(--color-pink-light);text-shadow:1px 1px 2px #0003;margin:0 20px;padding-bottom:7px;font-size:clamp(16px,3dvh,20px)}@keyframes floatEffect{0%{transform:translateY(0)}50%{transform:translateY(-8px)}to{transform:translateY(0)}}.hbd-badge{animation:4s ease-in-out infinite floatEffect}@keyframes swayEffect{0%{transform:rotate(0)}50%{transform:rotate(1.2deg)}to{transform:rotate(0)}}.ornament-top{transform-origin:top;animation:6s ease-in-out infinite swayEffect}@keyframes glowEffect{0%{box-shadow:0 0 25px 10px var(--color-peach)}50%{box-shadow:0 0 35px 18px var(--color-peach)}to{box-shadow:0 0 25px 10px var(--color-peach)}}.guest-box{animation:3.5s ease-in-out infinite glowEffect}.animate-item{opacity:0;transition:opacity .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.25,1,.5,1);transform:translateY(30px)}.frame.active .animate-item{opacity:1;transform:translateY(0)}.event-intro.animate-item{opacity:0;transition:opacity .9s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.25,1,.5,1);transform:translate(-50%,30px)}.frame.active .event-intro.animate-item{opacity:1;transform:translate(-50%)}.delay-1{transition-delay:.15s}.delay-2{transition-delay:.3s}.delay-3{transition-delay:.45s}
