@import "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap";
.gift-box-wrapper{justify-content:center;align-items:center;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.gift-box-wrapper.theme-red{background-color:#14800a}.gift-box-wrapper.theme-pink{background:linear-gradient(135deg,#ffd4e5 0%,#ffe8f0 50%,#fff5f8 100%)}.gift-box-wrapper.theme-blue{background:linear-gradient(135deg,#cce5ff 0%,#e6f2ff 50%,#f0f8ff 100%)}.box{width:18em;height:18em;position:relative}.box-tape,.box-tape-left,.box-tape-right,.box-tape-center,.box-gifts,.box-gift-shadow,.box-gift,.box-star{position:absolute}.theme-red .box-tape-center,.theme-red .box-tape-left,.theme-red .box-tape-right{background-color:#cc2424}.theme-red .box-gifts{background:linear-gradient(#cc2424,#cc2424) 50%/3.3em 100% no-repeat,#dfd9d9}.theme-red .box-gift{background:linear-gradient(#ee2e2e,#ee2e2e) 50%/3.3em 100% no-repeat,#efffee}.theme-red .box-star{background-color:#ffcf50}.theme-pink .box-tape-center,.theme-pink .box-tape-left,.theme-pink .box-tape-right{background-color:#ff69b4}.theme-pink .box-gifts{background:linear-gradient(#ff69b4,#ff69b4) 50%/3.3em 100% no-repeat,#ffe0f0}.theme-pink .box-gift{background:linear-gradient(#ff8fb3,#ff8fb3) 50%/3.3em 100% no-repeat,#fff5f8}.theme-pink .box-star{background-color:gold}.theme-blue .box-tape-center,.theme-blue .box-tape-left,.theme-blue .box-tape-right{background-color:#4a90e2}.theme-blue .box-gifts{background:linear-gradient(#4a90e2,#4a90e2) 50%/3.3em 100% no-repeat,#e3f2ff}.theme-blue .box-gift{background:linear-gradient(#5aa8ff,#5aa8ff) 50%/3.3em 100% no-repeat,#f0f8ff}.theme-blue .box-star{background-color:gold}.box-tape{transform-origin:50% 230%;width:3em;height:2em;transition:all 1s ease-in-out;animation:1.5s ease-in-out infinite bTape;bottom:11em;left:7.5em}.box-tape.open{opacity:0;animation:none;transform:translateY(-15em)rotate(180deg)}.box-tape-center{border-radius:1em;width:100%;height:100%}.box-tape-left,.box-tape-right{z-index:-1;width:4em;height:5em;top:.1em;box-shadow:inset 0 0 .7em #ee2e2e}.theme-pink .box-tape-left,.theme-pink .box-tape-right{box-shadow:inset 0 0 .7em #ff8fb3}.theme-blue .box-tape-left,.theme-blue .box-tape-right{box-shadow:inset 0 0 .7em #5aa8ff}.box-tape-left:before,.box-tape-right:before{border-radius:inherit;content:"";background-color:#ee2e2e;display:block;position:absolute;inset:0}.theme-pink .box-tape-left:before,.theme-pink .box-tape-right:before{background-color:#ff8fb3}.theme-blue .box-tape-left:before,.theme-blue .box-tape-right:before{background-color:#5aa8ff}.box-tape-left{transform-origin:100% 15%;border-radius:1.5em 0 3em 1em/1.5em 0 3em 3.5em;animation:1.5s ease-in-out infinite bLeft;right:calc(100% - .75em);transform:rotate(35deg)}.box-tape-left:before{clip-path:polygon(0 42%,100% 12%,100% 100%,0 100%)}.box-tape-right{transform-origin:0 15%;border-radius:0 1.5em 1em 3em/0 1.5em 3.5em 3em;animation:1.5s ease-in-out infinite bRight;left:calc(100% - .75em);transform:rotate(-35deg)}.box-tape-right:before{clip-path:polygon(0 12%,100% 42%,100% 100%,0 100%)}.box-gifts,.box-gift,.box-gift-shadow{transform-origin:50% 100%}.box-gifts{border-radius:1.5em;width:11.4em;height:9em;transition:all 1s ease-in-out;animation:1.5s ease-in-out infinite boxBounce;bottom:.5em;left:3.3em;overflow:hidden}.box-gifts.open{animation:none}.box-gift,.box-gift-shadow{border-radius:1em;width:13em;height:3.3em}.box-gift{transition:all 1s ease-in-out;animation:1.5s ease-in-out infinite boxBounce2;bottom:8.7em;left:2.5em}.box-gift.open{opacity:0;animation:none;transform:translateY(-12em)rotate(-25deg)}.box-gift-shadow{background-color:#00000010;animation:1.5s ease-in-out infinite boxShadowBounce;top:-1.5em;left:-1em}.box-star{clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);transition:all 1.5s ease-in-out;animation:1.5s ease-in-out infinite starRotate1;transform:scale(0)}.box-star.open{animation:1.5s ease-out forwards starExplode}.box-star-2,.box-star-4,.box-star-5{animation-name:starRotate2}.box-star-2.open,.box-star-4.open,.box-star-5.open{animation-name:starExplode}.box-star-1{width:1.5em;height:1.5em;animation-delay:.75s;top:0;left:12.5em}.box-star-2{width:1em;height:1em;animation-delay:.9s;top:3em;left:3em}.box-star-3{width:1.2em;height:1.2em;animation-delay:1.05s;top:2em;left:14em}.box-star-4{width:.8em;height:.8em;animation-delay:1.2s;top:5em;left:1em}.box-star-5{width:1em;height:1em;animation-delay:1.35s;top:6em;left:15em}@keyframes starRotate1{0%,to{transform:scale(0)rotate(0)}50%{transform:scale(1)rotate(180deg)}}@keyframes starRotate2{0%,to{transform:scale(0)rotate(0)}50%{transform:scale(1)rotate(-180deg)}}@keyframes starExplode{0%{opacity:1;transform:scale(1)rotate(0)}to{opacity:0;transform:scale(3)rotate(360deg)}}@keyframes bounce-slow{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes sway{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.animate-bounce-slow{animation:2s ease-in-out infinite bounce-slow}.animate-sway{animation:3s ease-in-out infinite sway}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
#card-front{color:#ffdfdf}#card,#card-front,#card-inside{height:480px}.wrap{height:100%;padding:1em}#card-front,#card-inside{width:100%;position:absolute;left:0;box-shadow:2px 2px 30px #00000040,0 0 1px #00000080}#card-inside .wrap{width:90%;height:auto;max-height:85%;padding:0 1em;overflow:hidden auto}#card-inside .wrap::-webkit-scrollbar{width:6px}#card-inside .wrap::-webkit-scrollbar-track{background:0 0}#card-inside .wrap::-webkit-scrollbar-thumb{background-color:#0000001a;border-radius:3px}#card{max-width:100%;transform-style:preserve-3d;perspective:3000px;cursor:pointer;width:350px;margin:0 auto 5rem;position:relative}#card h1{text-align:center;text-shadow:4px 4px #00000026,1px 1px #ffc8c8,2px 2px #ff9696,3px 3px #ff7d7d;color:#fff;font-size:40px;font-style:italic}#card-inside{color:#331717;background:#ffefef;justify-content:center;align-items:center;font-size:16px;font-style:italic;line-height:1.4;display:flex;box-shadow:inset 2px 0 1px #0000000d}#card-inside p{margin-top:1em}#card-inside p:first-child{margin-top:0}p.signed{text-align:center;margin-top:1.5em;margin-left:6.5em;font-family:Dancing Script,sans-serif;font-size:1.5em}#card-front{transform-origin:0;background-color:#f55;background-image:linear-gradient(#f55 0%,#f77 100%);transition:transform .5s linear;position:relative}#card-front .wrap{transition:background .5s linear}#card.open-half #card-front,#card.close-half #card-front{transform:rotateY(-90deg)}#card.open-half #card-front .wrap{background-color:#00000080}#card.open-fully #card-front,#card.close-half #card-front{background:#ffefef}#card.open-fully #card-front{transform:rotateY(-180deg)}#card.open-fully #card-front .wrap{background-color:#0000}#card.open-fully #card-front .wrap *,#card.close-half #card-front .wrap *{display:none}@media screen and (max-width:600px){#card{perspective:3000px;max-width:100%}#card-front,#card-inside{width:100%;left:0}#card h1{font-size:40px}.wrap{padding:1em}}#cake{margin-bottom:20rem;display:block;position:relative}.candle{backface-visibility:hidden;background:#fff;border-radius:10px;width:10px;height:90px;margin-top:-8.33333px;margin-left:-2.4px;animation:2s ease-in-out 5s forwards slideDown;position:absolute;left:50%;transform:translate(-50%)}.candle:after,.candle:before{content:"";background:#f006;width:100%;height:8px;position:absolute}.candle:after{top:30%;left:0}.candle:before{top:60%;left:0}.flame{border-radius:100%;width:8px;height:24px;margin-left:-3px;position:absolute;top:-25px;left:50%}.flame:first-child{animation:2s 7.5s infinite flame}.flame:nth-child(2){animation:1.5s 7.5s infinite flame}.flame:nth-child(3){animation:1s 7.5s infinite flame}.flame:nth-child(4){animation:.5s 7.5s infinite flame}.flame:nth-child(5){animation:.2s 7.5s infinite flame}@keyframes flame{0%,to{background:#fef86180;transform:translateY(-10px)scale(1.4);box-shadow:0 0 60px 10px #f8e9d1e6}50%{background:#ff32001a;transform:translateY(-20px)scale(0);box-shadow:0 0 40px 20px #f8e9d133}}@keyframes slideDown{0%{top:-100px}to{top:840px}}.confetti-container{pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.confetti{opacity:1;width:10px;height:10px;animation:3s linear infinite confetti-fall;position:absolute;top:-10px}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(360deg)}}.swiper{width:100%;height:500px;padding:50px}.swiper-slide{color:#fff;border-radius:18px;justify-content:center;align-items:center;font-size:22px;font-weight:700;display:flex}.swiper-pagination-bullet{background:#667eea!important}.swiper-pagination-bullet-active{background:#764ba2!important}@media (max-width:640px){.card-container{width:280px;height:380px}.swiper{height:400px;padding:30px}}
@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes neonGlow{0%,to{text-shadow:0 0 10px #fffc,0 0 20px #fff9,0 0 30px #fff6,0 0 40px #9333eacc,0 0 70px #9333ea99,0 0 80px #9333ea66}50%{text-shadow:0 0 5px #fff9,0 0 10px #fff6,0 0 15px #fff3,0 0 20px #9333ea99,0 0 35px #9333ea66,0 0 40px #9333ea33}}@keyframes boxGlow{0%,to{box-shadow:0 0 20px #9333ea99,0 0 40px #9333ea66,0 0 60px #9333ea33,inset 0 0 20px #9333ea33}50%{box-shadow:0 0 10px #9333ea66,0 0 20px #9333ea33,0 0 30px #9333ea1a,inset 0 0 10px #9333ea1a}}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.7;transform:scale(1.2)rotate(180deg)}}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(10deg)}}.countdown-container{background:#0f0c29;justify-content:center;align-items:center;width:100%;height:100vh;transition:background .8s ease-in-out;display:flex;position:relative;overflow:hidden}.countdown-container.transitioning{background:#0f0c29}.fireworks-canvas{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.content-wrapper{z-index:10;text-align:center;flex-direction:column;align-items:center;gap:2rem;display:flex;position:relative}.title{color:#fff;font-size:5rem;font-weight:400;font-family:var(--font-ephesis),"Cursive",sans-serif;letter-spacing:.05em;margin:0}.neon-text{animation:2s ease-in-out infinite neonGlow}.countdown-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:2px solid #9333ea80;border-radius:24px;padding:2rem 3rem;animation:2s ease-in-out infinite boxGlow}.time-display{color:#fff;letter-spacing:.1em;justify-content:center;align-items:center;gap:.5rem;font-family:Courier New,monospace;font-size:3.5rem;font-weight:700;display:flex}.time-unit{text-align:center;text-shadow:0 0 10px #fffc,0 0 20px #9333ea99;min-width:3.5rem;display:inline-block}.separator{color:#fff9}.celebration{flex-direction:column;align-items:center;animation:1s ease-out fadeIn;display:flex}.happy-text{color:#fff;font-size:6rem;font-weight:400;font-family:var(--font-ephesis),"Cursive",sans-serif;letter-spacing:.1em;margin:0}.stars-container{align-items:center;gap:2rem;display:flex}.star{font-size:5rem;animation:1.5s ease-in-out infinite sparkle,2s ease-in-out infinite float}.star:nth-child(2){font-size:6rem;animation-delay:.2s}.star:nth-child(3){animation-delay:.4s}.animate-fade-in{animation:1.5s ease-out fadeIn}.card-button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fbbf24;font-family:var(--font-kanit),sans-serif;cursor:pointer;background:linear-gradient(135deg,#ffffff26,#ffffff1a);border:2px solid #fbbf2466;border-radius:12px;margin-top:2rem;padding:1rem 2.5rem;font-size:1.25rem;font-weight:500;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000004d,0 0 20px #fbbf2433}.card-button:before{content:"";background:#fbbf2433;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-button:hover:before{width:300px;height:300px}.card-button:hover{border-color:#fbbf2499;transform:translateY(-3px);box-shadow:0 12px 32px #0006,0 0 30px #fbbf2466}.card-button:active{transform:translateY(0);box-shadow:0 4px 12px #0000004d,0 0 15px #fbbf2433}@media (max-width:768px){.title{font-size:3.5rem}.countdown-box{padding:1.5rem 2rem}.time-display{font-size:2rem}.time-unit{min-width:2rem}.happy-text{font-size:4rem}.stars-container{gap:1rem}.star{font-size:3rem}.star:nth-child(2){font-size:4rem}.card-button{padding:.875rem 2rem;font-size:1rem}}@media (max-width:480px){.title{font-size:2.5rem}.countdown-box{padding:1rem 1.5rem}.time-display{font-size:1.5rem}.time-unit{min-width:1.5rem}.happy-text{font-size:3rem}.stars-container{gap:.5rem}.star{font-size:2rem}.star:nth-child(2){font-size:3rem}.card-button{margin-top:1.5rem;padding:.75rem 1.5rem;font-size:.875rem}}
.letter-overlay{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.letter-card{background:linear-gradient(135deg,#1a1a3e 0%,#2d2d5f 50%,#1a1a3e 100%);border:2px solid #fbbf244d;border-radius:20px;flex-direction:column;width:95%;max-width:650px;max-height:90vh;padding:2.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 0 40px #fbbf244d,0 20px 60px #00000080}.letter-pattern{opacity:.08;pointer-events:none;background-image:radial-gradient(circle,#fbbf24 1px,#0000 1px),radial-gradient(circle,#fff .5px,#0000 .5px);background-position:0 0,30px 30px;background-size:60px 60px,40px 40px;animation:4s ease-in-out infinite twinkle;position:absolute;inset:0}@keyframes twinkle{0%,to{opacity:.08}50%{opacity:.12}}.letter-content{z-index:10;flex-direction:column;flex:1;gap:1.75rem;display:flex;position:relative;overflow:hidden}.letter-title{font-family:var(--font-ephesis),"Cursive",sans-serif;background:linear-gradient(135deg,#fbbf24,#fcd34d,#fbbf24);-webkit-text-fill-color:transparent;text-align:center;filter:drop-shadow(0 0 15px #fbbf244d);-webkit-background-clip:text;background-clip:text;margin:0;font-size:3rem;font-weight:400}.letter-title-thai{font-family:var(--font-kanit),sans-serif;font-weight:500}.letter-photo-frame{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:1px solid #fbbf2433;border-radius:12px;margin:0 auto;padding:8px;position:relative;box-shadow:0 0 20px #fbbf2433,0 8px 16px #0000004d}.letter-photo{aspect-ratio:4/3;background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:8px;width:280px;position:relative;overflow:hidden}.letter-photo-placeholder{justify-content:center;align-items:center;font-size:5rem;animation:2s ease-in-out infinite fireworkPulse;display:flex;position:absolute;inset:0}@keyframes fireworkPulse{0%,to{filter:brightness();transform:scale(1)}50%{filter:brightness(1.2);transform:scale(1.05)}}.letter-message{font-family:var(--font-kanit),sans-serif;color:#e0e7ff;scrollbar-width:thin;scrollbar-color:#fbbf244d transparent;flex:1;min-height:0;padding-right:.75rem;font-size:1rem;line-height:1.9;overflow-y:auto}.letter-message::-webkit-scrollbar{width:6px}.letter-message::-webkit-scrollbar-track{background:#fbbf240d;border-radius:3px}.letter-message::-webkit-scrollbar-thumb{background:#fbbf244d;border-radius:3px}.letter-message::-webkit-scrollbar-thumb:hover{background:#fbbf2480}.letter-text{white-space:pre-wrap;word-wrap:break-word;text-shadow:0 2px 8px #0000004d}.typing-cursor{color:#fbbf24;animation:1s step-end infinite blink}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@media (max-width:768px){.letter-card{padding:2rem}.letter-title{font-size:2.5rem}.letter-photo{width:220px}.letter-message{font-size:.9rem}.letter-close-button{padding:.75rem 1.75rem;font-size:.9rem}}@media (max-width:480px){.letter-card{padding:1.5rem}.letter-title{font-size:2rem}.letter-photo{width:180px}.letter-photo-placeholder{font-size:3.5rem}.letter-message{font-size:.85rem}.letter-close-button{padding:.625rem 1.5rem;font-size:.85rem}}