*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--deep-red: #8B1A1A;--rose: #C4787A;--rose-light: #E8A5A7;--pink: #FF6B8A;--pink-light: #FFB3C6;--cream: #FDF6EC;--cream-dark: #F5EBD8;--brown: #3D2B1F;--brown-light: #6B4F3E;--gold: #C5A55A;--gold-light: #E2CB8B;--white: #FFFFFF}html,body{height:100%;overflow:hidden;touch-action:none}body{font-family:Lora,Georgia,serif;background:var(--cream);color:var(--brown);-webkit-font-smoothing:antialiased}#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}#app{width:100%;height:100%;overflow:hidden}.card-container{display:flex;width:900vw;height:100%;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}.card-page{width:100vw;height:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.page-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative}.front-page{background:linear-gradient(135deg,#fff0f3,#ffe4e8,#fdf6ec);gap:1.5rem}.heart-container{position:relative}.big-heart{width:150px;height:150px;color:var(--deep-red);animation:heartbeat 1.5s ease-in-out infinite;filter:drop-shadow(0 4px 20px rgba(139,26,26,.3))}.heart-svg{width:100%;height:100%}@keyframes heartbeat{0%,to{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}60%{transform:scale(1)}}.gift-container{display:flex;flex-direction:column;align-items:center;gap:.8rem}.gift-box{width:140px;cursor:pointer;position:relative}.gift-lid{width:150px;height:35px;background:linear-gradient(135deg,#e74c6f,#c62e52);border-radius:6px 6px 0 0;position:relative;margin-left:-5px;transition:transform .6s cubic-bezier(.68,-.55,.27,1.55);z-index:2;box-shadow:0 2px 8px #00000026}.gift-bow{position:absolute;top:-20px;left:50%;transform:translate(-50%);width:50px;height:25px}.gift-bow:before,.gift-bow:after{content:"";position:absolute;width:25px;height:25px;border-radius:50% 50% 0;background:var(--gold);top:0}.gift-bow:before{left:0;transform:rotate(-30deg)}.gift-bow:after{right:0;border-radius:50% 50% 50% 0;transform:rotate(30deg)}.gift-base{width:140px;height:100px;background:linear-gradient(135deg,#e74c6f,#d4365a);border-radius:0 0 8px 8px;position:relative;overflow:hidden;box-shadow:0 4px 15px #0003}.gift-ribbon-v{position:absolute;left:50%;transform:translate(-50%);width:20px;height:100%;background:var(--gold)}.gift-box.opened .gift-lid{transform:translateY(-60px) rotate(-30deg)}.tap-gift-hint{font-family:Caveat,cursive;font-size:1.3rem;color:var(--brown-light);opacity:.8;animation:hintBounce 2s ease-in-out infinite;transition:opacity .3s}.tap-gift-hint.hidden{opacity:0}@keyframes hintBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.swipe-hint{position:absolute;bottom:2rem;display:flex;align-items:center;gap:.5rem;font-family:Caveat,cursive;font-size:1.2rem;color:var(--brown-light);opacity:0;transition:opacity .5s ease}.swipe-hint.visible{opacity:.7;animation:swipeHintSlide 2s ease-in-out infinite}.swipe-arrow{font-size:1.5rem}@keyframes swipeHintSlide{0%,to{transform:translate(0)}50%{transform:translate(8px)}}.birthday-page{background:linear-gradient(180deg,#fff5f7,#ffe8ec)}.hearts-bg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}.hearts-bg .mini-heart{position:absolute;color:var(--rose-light);opacity:.12;font-size:1.5rem;animation:floatHeart 8s ease-in-out infinite}@keyframes floatHeart{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-15px) rotate(5deg)}50%{transform:translateY(-5px) rotate(-3deg)}75%{transform:translateY(-20px) rotate(3deg)}}.birthday-text{z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem}.birthday-title{font-family:Playfair Display,serif;font-size:2.8rem;font-weight:700;color:var(--brown);opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;line-height:1.1}.birthday-name{font-family:Caveat,cursive;font-size:4rem;font-weight:700;color:var(--deep-red);opacity:0;transform:translateY(30px) scale(.8);transition:opacity .8s ease .3s,transform .8s ease .3s}.birthday-divider{color:var(--rose);font-size:1.2rem;letter-spacing:.8rem;margin-top:1rem;opacity:0;transition:opacity .8s ease .6s}.card-page.active .birthday-title,.card-page.active .birthday-name,.card-page.active .birthday-divider{opacity:1;transform:translateY(0) scale(1)}.message-page{background:linear-gradient(180deg,#fff8f0,#ffe8ec,#fff0f3)}.message-container{max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem}.message-decoration{font-size:2rem;color:var(--rose-light);opacity:0;transition:opacity .8s ease}.message-prelude{font-family:Caveat,cursive;font-size:1.4rem;color:var(--rose);opacity:0;transform:translateY(20px);transition:opacity .6s ease .2s,transform .6s ease .2s}.message-headline{font-family:Playfair Display,serif;font-size:2rem;font-weight:700;color:var(--deep-red);line-height:1.3;opacity:0;transform:translateY(20px);transition:opacity .6s ease .4s,transform .6s ease .4s}.message-body{display:flex;flex-direction:column;gap:.8rem;opacity:0;transform:translateY(20px);transition:opacity .6s ease .6s,transform .6s ease .6s}.message-body p{font-size:1rem;line-height:1.7;color:var(--brown-light);font-style:italic}.message-sign{font-family:Caveat,cursive;font-size:1.5rem;color:var(--brown);margin-top:.5rem;opacity:0;transform:translateY(20px);transition:opacity .6s ease .8s,transform .6s ease .8s}.sign-name{font-size:1.8rem;color:var(--deep-red)}.card-page.active .message-decoration,.card-page.active .message-prelude,.card-page.active .message-headline,.card-page.active .message-body,.card-page.active .message-sign{opacity:1;transform:translateY(0)}.photo-intro-page{background:linear-gradient(180deg,#fff5f7,#ffe8ec)}.photo-intro-text{font-family:Playfair Display,serif;font-size:2.2rem;font-weight:400;font-style:italic;color:var(--deep-red);text-align:center;max-width:320px;line-height:1.5;z-index:1;opacity:0;transform:translateY(30px);transition:opacity .8s ease .2s,transform .8s ease .2s}.card-page.active .photo-intro-text{opacity:1;transform:translateY(0)}.photo-page{background:linear-gradient(180deg,#fff5f7,#ffe8ec)}.photo-slide{z-index:1;display:flex;flex-direction:column;align-items:center;gap:2rem}.photo-frames{display:flex;justify-content:center;align-items:flex-end;gap:16px}.photo-frame{background:#fff;padding:10px 10px 40px;box-shadow:0 6px 24px #8b1a1a26;opacity:0;transform:translateY(30px);transition:opacity .5s ease,transform .5s ease}.photo-frame.rotate-left{transform:rotate(-4deg) translateY(30px);transition-delay:.1s}.photo-frame.rotate-right{transform:rotate(3deg) translateY(30px);transition-delay:.2s}.card-page.active .photo-frame{opacity:1;transform:translateY(0)}.card-page.active .photo-frame.rotate-left{transform:rotate(-4deg) translateY(0)}.card-page.active .photo-frame.rotate-right{transform:rotate(3deg) translateY(0)}.photo-frame img{width:min(220px,55vw);height:min(220px,55vw);object-fit:cover;display:block}.photo-frames.dual .photo-frame img{width:min(140px,36vw);height:min(140px,36vw)}.photo-label{font-family:Caveat,cursive;font-size:2rem;color:var(--deep-red);letter-spacing:.05em;text-align:center;z-index:1;opacity:0;transform:translateY(20px);transition:opacity .6s ease .4s,transform .6s ease .4s}.card-page.active .photo-label{opacity:1;transform:translateY(0)}@media(min-width:768px){.big-heart{width:200px;height:200px}.gift-box{width:180px}.gift-lid{width:190px;height:45px}.gift-base{width:180px;height:130px}.birthday-title{font-size:3.5rem}.birthday-name{font-size:5rem}.message-headline{font-size:2.5rem}}@media(prefers-reduced-motion:reduce){.big-heart,.hearts-bg .mini-heart,.tap-gift-hint{animation:none}.swipe-hint.visible{animation:none;opacity:.7}}@media(max-width:380px){.big-heart{width:120px;height:120px}.birthday-title{font-size:2.2rem}.birthday-name{font-size:3rem}.message-headline{font-size:1.6rem}.message-body p{font-size:.9rem}}