:root{--base-1: #0f0d1a;--base-2: #1f1634;--base-3: #3f1d50;--accent-1: #ff8ec3;--accent-2: #ffd68a;--accent-3: #8ae2ff;--text: #fef9ff;--muted: #f4dceb;--glass: rgba(255, 255, 255, .11);--glass-border: rgba(255, 255, 255, .2);--cursor-x: 50%;--cursor-y: 50%}html{overflow:hidden;height:100vh;width:100vw}body{font-family:Outfit,sans-serif;color:var(--text);background:radial-gradient(circle at 20% 10%,rgba(255,142,195,.22),transparent 35%),radial-gradient(circle at 80% 15%,rgba(138,226,255,.2),transparent 35%),radial-gradient(circle at 65% 90%,rgba(255,214,138,.2),transparent 40%),linear-gradient(130deg,var(--base-1),var(--base-2) 45%,var(--base-3));overflow-x:hidden;overflow-y:hidden;position:relative;animation:bgShift 18s ease-in-out infinite alternate;margin:0;padding:0;height:100vh;width:100vw;box-sizing:border-box}body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at var(--cursor-x) var(--cursor-y),rgba(255,255,255,.12),transparent 28%);pointer-events:none;z-index:1}.aurora{position:fixed;inset:-20%;background:radial-gradient(circle at 30% 30%,rgba(255,142,195,.28),transparent 38%),radial-gradient(circle at 70% 45%,rgba(138,226,255,.24),transparent 40%),radial-gradient(circle at 50% 70%,rgba(255,214,138,.2),transparent 38%);filter:blur(24px);pointer-events:none;z-index:0;animation:auroraMove 14s ease-in-out infinite alternate}.fx-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2}.float-heart,.sparkle,.shooting-star,.confetti{position:absolute;-webkit-user-select:none;user-select:none;pointer-events:none}.float-heart{bottom:-30px;color:#ffe9f6cc;animation:heartRise linear forwards}.sparkle{width:6px;height:6px;border-radius:50%;background:#fff4fb;box-shadow:0 0 12px #fffc;opacity:0;animation:twinkle 2.6s ease-in-out infinite}.shooting-star{width:120px;height:2px;background:linear-gradient(90deg,#fff0,#fffffff2);transform:rotate(-22deg);opacity:0;animation:shoot 1.4s ease-out forwards}.page{position:relative;z-index:3;width:100%;max-width:1400px;margin:0 auto;padding:20px 2vw;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;box-sizing:border-box}.confetti{width:8px;height:14px;border-radius:2px;opacity:.95;animation:confettiFall var(--dur) ease-out forwards}@keyframes bgShift{0%{filter:saturate(100%)}to{filter:saturate(128%)}}@keyframes auroraMove{0%{transform:translate3d(-3%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.05)}}@keyframes heartRise{to{transform:translateY(-115vh) rotate(18deg);opacity:0}}@keyframes twinkle{0%,to{transform:scale(.6);opacity:.2}50%{transform:scale(1.25);opacity:1}}@keyframes shoot{0%{transform:translate(0) translateY(0) rotate(-22deg);opacity:0}15%{opacity:1}to{transform:translate(-330px) translateY(160px) rotate(-22deg);opacity:0}}@keyframes confettiFall{0%{transform:translateZ(0) rotate(0)}to{transform:translate3d(var(--x),var(--y),0) rotate(var(--rot));opacity:0}}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.modal-content{background:linear-gradient(135deg,var(--base-2),var(--base-3));border:1px solid var(--glass-border);border-radius:24px;padding:40px;box-shadow:0 8px 32px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:500px;width:90%;animation:slideUp .4s ease-out}.modal-content h2{margin-top:0;margin-bottom:24px;font-size:28px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.form-group{margin-bottom:20px;display:flex;flex-direction:column}.form-group label{margin-bottom:8px;font-weight:600;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.5px}.form-group input,.form-group textarea{padding:12px 16px;background:#ffffff0d;border:1px solid var(--glass-border);border-radius:12px;color:var(--text);font-family:Outfit,sans-serif;font-size:14px;transition:all .3s ease}.form-group input::placeholder,.form-group textarea::placeholder{color:#fef9ff80}.form-group input:focus,.form-group textarea:focus{outline:none;background:#ffffff14;border-color:var(--accent-1);box-shadow:0 0 16px #ff8ec333}.form-group textarea{resize:vertical;min-height:120px}.form-actions{display:flex;gap:12px;margin-top:28px}.form-actions button{flex:1;padding:12px 24px;border:none;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.5px}.form-actions button[type=submit]{background:linear-gradient(135deg,var(--accent-1),#ff7cb3);color:#fff;box-shadow:0 4px 16px #ff8ec34d}.form-actions button[type=submit]:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 24px #ff8ec366}.form-actions button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.form-actions button[type=button]{background:#ffffff1a;color:var(--text);border:1px solid var(--glass-border)}.form-actions button[type=button]:hover{background:#ffffff26;border-color:var(--accent-3)}.wish-success{text-align:center;padding:20px}.wish-success h2{font-size:32px;margin-bottom:12px}.wish-success p{color:var(--muted);font-size:16px;line-height:1.6}.featured-section{display:grid;grid-template-columns:65% 35%;gap:2%;align-items:center;min-height:auto;margin-bottom:0;position:relative;width:100%;max-width:100%}.featured-section.photo-left{grid-template-columns:60% 38%;gap:2%}.featured-section.photo-right{grid-template-columns:66% 32%;gap:2%}.featured-photo-container{position:relative;perspective:1000px;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;overflow:hidden}.featured-section.photo-left .featured-photo-container{justify-content:center}.featured-section.photo-right .featured-photo-container{justify-content:flex-end;width:100%}.featured-photo{margin:0;position:relative;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #ff8ec34d;transform-origin:center;transition:all .8s cubic-bezier(.34,1.56,.64,1);height:fit-content;width:100%;max-width:100%}.featured-section.photo-left .featured-photo{box-shadow:0 30px 80px #ff8ec380,0 0 60px #ff8ec333;border:3px solid rgba(255,255,255,.2)}.featured-section.photo-right .featured-photo{box-shadow:0 25px 70px #ff8ec366,0 0 50px #ffd68a33;border:2px solid rgba(255,255,255,.25);width:100%}.featured-photo img{width:100%;height:100%;object-fit:cover;display:block;min-height:500px;max-height:85vh}.featured-section.photo-left .featured-photo img{min-height:650px;max-height:88vh}.featured-section.photo-right .featured-photo img{min-height:550px;max-height:82vh;object-position:center}.featured-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;padding:20px;font-size:18px;font-weight:600;text-align:center}.featured-section.photo-left .featured-photo-container{animation:popupAndSlideLeft 1.2s cubic-bezier(.34,1.56,.64,1);order:1}.featured-section.photo-left .featured-content{animation:fadeInFromRight 1s ease-out .6s both;order:2}.featured-section.photo-right .featured-photo-container{animation:popupAndSlideRight 1.2s cubic-bezier(.34,1.56,.64,1);order:2}.featured-section.photo-right .featured-content{animation:fadeInFromLeft 1s ease-out .6s both;order:1}.featured-content{position:relative;display:flex;flex-direction:column;height:100%}.content-card{background:linear-gradient(135deg,var(--base-2),var(--base-3));border:1px solid var(--glass-border);border-radius:20px;padding:30px 35px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;height:fit-content;max-height:85vh;overflow:visible}.featured-section.photo-left .content-card{padding:35px 40px;justify-content:center}.birthday-card{position:relative;overflow:hidden;animation:popupCard .8s cubic-bezier(.34,1.56,.64,1) .8s both}@keyframes popupCard{0%{opacity:0;transform:scale(.3) rotate(-5deg)}50%{transform:scale(1.05) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0)}}.birthday-title{position:relative;animation:titleBounce 1s ease-in-out 1.2s both}@keyframes titleBounce{0%,to{transform:translateY(0)}25%{transform:translateY(-10px)}75%{transform:translateY(-5px)}}.birthday-emoji{display:inline-block;animation:emojiSpin 2s ease-in-out infinite;margin:0 8px}@keyframes emojiSpin{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-15deg) scale(1.2)}75%{transform:rotate(15deg) scale(1.2)}}.birthday-balloons{position:absolute;inset:0;pointer-events:none;overflow:hidden}.balloon{position:absolute;font-size:40px;animation:floatUp 6s ease-in infinite;opacity:0}.balloon-1{left:10%;animation-delay:.5s}.balloon-2{left:50%;animation-delay:1.5s}.balloon-3{left:80%;animation-delay:2.5s}@keyframes floatUp{0%{bottom:-60px;opacity:0;transform:translate(0) rotate(0)}10%{opacity:1}50%{transform:translate(20px) rotate(10deg)}90%{opacity:1}to{bottom:110%;opacity:0;transform:translate(-20px) rotate(-10deg)}}.glitter-container{position:absolute;inset:0;pointer-events:none;overflow:hidden}.glitter{position:absolute;width:8px;height:8px;background:linear-gradient(45deg,gold,#ffed4e,gold);border-radius:50%;box-shadow:0 0 10px gold;animation:glitterFall 3s ease-in infinite;opacity:0}.glitter:nth-child(1){left:15%;animation-delay:.2s}.glitter:nth-child(2){left:35%;animation-delay:.8s}.glitter:nth-child(3){left:55%;animation-delay:1.4s}.glitter:nth-child(4){left:75%;animation-delay:2s}.glitter:nth-child(5){left:25%;animation-delay:2.6s}.glitter:nth-child(6){left:85%;animation-delay:3.2s}@keyframes glitterFall{0%{top:-20px;opacity:0;transform:rotate(0) scale(0)}10%{opacity:1;transform:rotate(180deg) scale(1)}90%{opacity:1}to{top:110%;opacity:0;transform:rotate(720deg) scale(.5)}}.featured-section.photo-right .content-card{padding:40px 45px;background:linear-gradient(135deg,#3f1d50f2,#1f1634f2);border:2px solid rgba(255,142,195,.3);box-shadow:0 12px 40px #0006,0 0 40px #ff8ec326;overflow-y:auto;scrollbar-width:none}.featured-section.photo-right .content-card::-webkit-scrollbar{display:none}.letter-card{position:relative;overflow:hidden;animation:unfoldLetter 1s cubic-bezier(.34,1.56,.64,1) .5s both}@keyframes unfoldLetter{0%{opacity:0;transform:rotateX(-90deg) scale(.8);transform-origin:top center}50%{transform:rotateX(-45deg) scale(.9)}to{opacity:1;transform:rotateX(0) scale(1)}}.letter-title{position:relative;animation:fadeInGlow 1.2s ease-in-out 1s both}@keyframes fadeInGlow{0%{opacity:0;filter:blur(10px);transform:translateY(-20px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.letter-emoji{display:inline-block;animation:heartPulse 1.5s ease-in-out infinite;margin:0 8px}@keyframes heartPulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.floating-hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden}.love-heart{position:absolute;font-size:24px;animation:heartFloat 8s ease-in-out infinite;opacity:0}.love-heart:nth-child(1){left:5%;animation-delay:0s;font-size:20px}.love-heart:nth-child(2){left:25%;animation-delay:1.5s;font-size:28px}.love-heart:nth-child(3){left:45%;animation-delay:3s;font-size:22px}.love-heart:nth-child(4){left:65%;animation-delay:4.5s;font-size:26px}.love-heart:nth-child(5){left:85%;animation-delay:6s;font-size:24px}@keyframes heartFloat{0%{bottom:-40px;opacity:0;transform:translate(0) rotate(0) scale(.5)}10%{opacity:.8}50%{transform:translate(30px) rotate(180deg) scale(1)}90%{opacity:.8}to{bottom:110%;opacity:0;transform:translate(-30px) rotate(360deg) scale(.5)}}.rose-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}.petal{position:absolute;font-size:20px;animation:petalFall 6s ease-in infinite;opacity:0}.petal:nth-child(1){left:10%;animation-delay:.5s}.petal:nth-child(2){left:30%;animation-delay:1.5s}.petal:nth-child(3){left:50%;animation-delay:2.5s}.petal:nth-child(4){left:70%;animation-delay:3.5s}.petal:nth-child(5){left:90%;animation-delay:4.5s}@keyframes petalFall{0%{top:-30px;opacity:0;transform:rotate(0)}10%{opacity:.9}50%{transform:rotate(180deg) translate(50px)}90%{opacity:.9}to{top:110%;opacity:0;transform:rotate(360deg) translate(-50px)}}.love-sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.love-sparkle{position:absolute;font-size:16px;animation:sparkleTwinkle 4s ease-in-out infinite;opacity:0}.love-sparkle:nth-child(1){top:15%;left:10%;animation-delay:0s}.love-sparkle:nth-child(2){top:25%;right:15%;animation-delay:1s}.love-sparkle:nth-child(3){top:45%;left:8%;animation-delay:2s}.love-sparkle:nth-child(4){top:65%;right:12%;animation-delay:3s}@keyframes sparkleTwinkle{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:1;transform:scale(1.5) rotate(180deg)}}.content-card h2{margin-top:0;font-size:26px;background:linear-gradient(135deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:18px;flex-shrink:0}.featured-section.photo-right .content-card h2{font-size:30px;margin-bottom:24px;text-shadow:0 2px 10px rgba(255,142,195,.3)}.birthday-message,.letter{color:var(--text);line-height:1.65;font-size:14.5px;white-space:pre-line}.birthday-message p,.letter p{margin:0;width:100%}.floating-heart-button{position:fixed;bottom:10%;right:5%;width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#ff8ec3e6,#ff64b4e6);border:2px solid rgba(255,255,255,.3);color:#fff;font-size:14px;font-weight:600;cursor:pointer;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 32px #ff8ec366;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;animation:flyingBird 20s infinite ease-in-out;outline:none}.floating-heart-button:hover{transform:scale(1.1);box-shadow:0 12px 48px #ff8ec399}.floating-heart-button:active{transform:scale(.95)}.heart-beat{font-size:48px;animation:heartBeat 1.2s ease-in-out infinite;display:inline-block}.wish-text{font-size:12px;text-transform:uppercase;letter-spacing:1px;text-align:center}.action-buttons{position:fixed;top:30px;right:30px;display:flex;gap:15px;z-index:99}.btn-toggle-letter,.btn-music{padding:14px 24px;border:2px solid transparent;background:linear-gradient(135deg,#ff8ec326,#8ae2ff26);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:var(--text);border-radius:16px;font-weight:700;font-size:14px;cursor:pointer;transition:all .4s cubic-bezier(.34,1.56,.64,1);text-transform:uppercase;letter-spacing:1px;outline:none;position:relative;overflow:hidden;box-shadow:0 8px 24px #0003}.btn-toggle-letter:before,.btn-music:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),transparent);transform:translate(-50%,-50%);transition:width .6s ease,height .6s ease}.btn-toggle-letter:hover:before,.btn-music:hover:before{width:300px;height:300px}.btn-toggle-letter{background:linear-gradient(135deg,#ff8ec340,#ff64b433);border-color:#ff8ec366}.btn-music{background:linear-gradient(135deg,#8ae2ff40,#64c8ff33);border-color:#8ae2ff66}.btn-toggle-letter:hover,.btn-music:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px #ff8ec366;border-color:var(--accent-1)}.btn-music:hover{box-shadow:0 12px 32px #8ae2ff66;border-color:var(--accent-3)}.btn-toggle-letter:active,.btn-music:active{transform:translateY(-1px) scale(1.02)}@keyframes popupAndSlideLeft{0%{opacity:0;transform:translate(150%,-50%) scale(.3)}40%{opacity:1;transform:translate(150%,-50%) scale(1.1)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes popupAndSlideRight{0%{opacity:0;transform:translate(-150%,-50%) scale(.3)}40%{opacity:1;transform:translate(-150%,-50%) scale(1.1)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes fadeInFromRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInFromLeft{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}@keyframes flyingBird{0%{bottom:10%;right:5%;transform:translate(0) rotate(0)}25%{bottom:20%;right:15%;transform:translateY(-20px) rotate(10deg)}50%{bottom:30%;right:25%;transform:translate(0) rotate(0)}75%{bottom:20%;right:10%;transform:translateY(-20px) rotate(-10deg)}to{bottom:10%;right:5%;transform:translate(0) rotate(0)}}@keyframes heartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}50%{transform:scale(1)}75%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.featured-section{grid-template-columns:55% 45%;gap:20px;min-height:auto;margin-bottom:0;max-height:none}.featured-section.photo-left{grid-template-columns:55% 45%}.featured-section.photo-right{grid-template-columns:65% 35%}.featured-photo img{height:auto;min-height:400px;max-height:550px}.featured-section.photo-left .featured-photo img{min-height:450px;max-height:550px}.featured-section.photo-right .featured-photo img{min-height:500px;max-height:600px}.content-card{padding:25px 30px;height:fit-content;overflow:visible}.action-buttons{top:20px;right:20px;gap:10px}.btn-toggle-letter,.btn-music{padding:12px 18px;font-size:12px;letter-spacing:.8px}.floating-heart-button{width:100px;height:100px}.heart-beat{font-size:40px}.wish-text{font-size:11px}}@media(max-width:560px){.page{width:94vw;padding-top:20px}.featured-section{grid-template-columns:1fr!important;gap:18px;margin-bottom:0;min-height:auto;max-height:none}.featured-photo img{height:320px;min-height:320px!important;max-height:400px!important}.content-card{padding:28px;height:auto;overflow-y:visible;max-height:500px}.content-card h2{font-size:24px;margin-bottom:20px}.birthday-message,.letter{font-size:15px;line-height:1.7}.action-buttons{top:15px;right:15px;flex-direction:row;gap:8px}.btn-toggle-letter,.btn-music{padding:10px 14px;font-size:10px;white-space:nowrap;letter-spacing:.5px}.floating-heart-button{width:90px;height:90px;bottom:8%;right:8%}.heart-beat{font-size:36px}.wish-text{font-size:10px;letter-spacing:.5px}.modal-content{padding:24px}.form-group{margin-bottom:16px}.form-actions{flex-direction:column}}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}
