:root{--pastel-pink: #FFB6C1;--pastel-rose: #FFC0CB;--pastel-cream: #FFF5EE;--pastel-lavender: #E6E6FA;--pastel-peach: #FFDAB9;--text-dark: #5A4A5E;--text-light: #8B7B8F;--shadow-soft: 0 8px 32px rgba(255, 182, 193, .3);--shadow-hover: 0 12px 48px rgba(255, 182, 193, .4);--border-radius: 24px;font-family:Poppins,system-ui,-apple-system,sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#ffe5ec,#fff5ee,#ffe5e5);min-height:100vh;color:var(--text-dark);overflow-x:hidden;line-height:1.6;position:relative;animation:backgroundPulse 10s ease-in-out infinite;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="20" font-size="20">💖</text></svg>') 12 12,auto}@keyframes backgroundPulse{0%,to{background:linear-gradient(135deg,#ffe5ec,#fff5ee,#ffe5e5)}50%{background:linear-gradient(135deg,#fff0f5,#ffe5ec,#fff5ee)}}.floating-hearts{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden}.floating-hearts .heart{position:absolute;font-size:24px;opacity:.3;animation:float-up 15s infinite ease-in-out}.floating-hearts .heart:nth-child(1){left:10%;animation-delay:0s;font-size:28px}.floating-hearts .heart:nth-child(2){left:25%;animation-delay:2s;font-size:20px}.floating-hearts .heart:nth-child(3){left:40%;animation-delay:4s;font-size:32px}.floating-hearts .heart:nth-child(4){left:55%;animation-delay:6s;font-size:24px}.floating-hearts .heart:nth-child(5){left:70%;animation-delay:8s;font-size:26px}.floating-hearts .heart:nth-child(6){left:85%;animation-delay:10s;font-size:22px}.floating-hearts .heart:nth-child(7){left:15%;animation-delay:12s;font-size:30px}.floating-hearts .heart:nth-child(8){left:90%;animation-delay:14s;font-size:24px}.floating-hearts .heart:nth-child(9){left:5%;animation-delay:1s;font-size:26px}.floating-hearts .heart:nth-child(10){left:33%;animation-delay:3s;font-size:28px}.floating-hearts .heart:nth-child(11){left:48%;animation-delay:5s;font-size:22px}.floating-hearts .heart:nth-child(12){left:62%;animation-delay:7s;font-size:30px}.floating-hearts .heart:nth-child(13){left:77%;animation-delay:9s;font-size:24px}.floating-hearts .heart:nth-child(14){left:92%;animation-delay:11s;font-size:26px}.floating-hearts .heart:nth-child(15){left:18%;animation-delay:13s;font-size:32px}.floating-hearts .heart:nth-child(16){left:44%;animation-delay:1.5s;font-size:20px}.floating-hearts .heart:nth-child(17){left:58%;animation-delay:3.5s;font-size:28px}.floating-hearts .heart:nth-child(18){left:73%;animation-delay:5.5s;font-size:24px}.floating-hearts .heart:nth-child(19){left:88%;animation-delay:7.5s;font-size:26px}.floating-hearts .heart:nth-child(20){left:12%;animation-delay:9.5s;font-size:30px}@keyframes float-up{0%{transform:translateY(100vh) rotate(0);opacity:0}10%{opacity:.3}90%{opacity:.3}to{transform:translateY(-100vh) rotate(360deg);opacity:0}}.sparkle-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}.sparkle{position:absolute;font-size:16px;animation:sparkle-float 4s ease-in-out forwards;pointer-events:none}@keyframes sparkle-float{0%{transform:translateY(0) scale(1) rotate(0);opacity:1}to{transform:translateY(-100px) scale(0) rotate(180deg);opacity:0}}.cursor-trail{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.trail-heart{position:absolute;font-size:20px;pointer-events:none;animation:trail-fade 1s ease-out forwards}@keyframes trail-fade{0%{transform:scale(1) rotate(0);opacity:.8}to{transform:scale(0) rotate(45deg);opacity:0}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}.confetti{position:absolute;font-size:24px;animation:confetti-fall 3s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.unlock-gate{position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;z-index:1000;background:linear-gradient(135deg,#ffe5ec,#fff5ee,#ffe5e5);transition:opacity .6s ease,transform .6s ease}.unlock-gate.hidden{opacity:0;transform:scale(.9);pointer-events:none}.unlock-card{background:#fff;padding:48px 40px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);max-width:480px;width:90%;text-align:center;position:relative;z-index:10;transition:transform .3s ease,box-shadow .3s ease;animation:cardFloat 3s ease-in-out infinite}.unlock-card:hover{box-shadow:0 16px 64px #ff69b480;transform:translateY(-5px)}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.unlock-card.shake{animation:shake .5s ease}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.unlock-title{font-size:3rem;font-weight:700;background:linear-gradient(135deg,#ff69b4,#ffb6c1,#ff1493);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px;animation:gradientShift 3s ease infinite;filter:drop-shadow(0 2px 8px rgba(255,105,180,.3))}@keyframes gradientShift{0%,to{background-position:0% center}50%{background-position:100% center}}.unlock-subtitle{color:var(--text-light);font-size:1.1rem;margin-bottom:32px}.unlock-form{display:flex;flex-direction:column;gap:20px}.form-group{text-align:left}.form-group label{display:block;font-weight:600;color:var(--text-dark);margin-bottom:8px;font-size:.95rem}.form-input{width:100%;padding:14px 18px;border:2px solid #FFE5EC;border-radius:12px;font-family:Poppins,sans-serif;font-size:1rem;transition:all .3s ease;background:#fafafa}.form-input:hover{border-color:#ffb6c1;transform:translateY(-1px)}.form-input:focus{outline:none;border-color:var(--pastel-pink);background:#fff;box-shadow:0 0 0 4px #ffb6c11a,0 4px 12px #ff69b433;transform:translateY(-2px)}.unlock-button{background:linear-gradient(135deg,#ff69b4,#ffb6c1);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Poppins,sans-serif;margin-top:8px;position:relative;overflow:hidden;box-shadow:0 4px 15px #ff69b433;animation:buttonPulse 2s ease-in-out infinite}@keyframes buttonPulse{0%,to{box-shadow:0 4px 15px #ff69b433}50%{box-shadow:0 4px 25px #ff69b466}}.unlock-button:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px #ff69b466}.unlock-button:active{transform:translateY(-1px) scale(1.02)}@keyframes ripple{0%{width:0;height:0;opacity:1}to{width:300px;height:300px;opacity:0}}.error-message{margin-top:20px;padding:16px;background:#ffe5e5;border-radius:12px;opacity:0;transform:scale(.8);transition:all .3s ease;pointer-events:none}.error-message.show{opacity:1;transform:scale(1)}.broken-heart{font-size:3rem;animation:heartbreak .5s ease}@keyframes heartbreak{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.2) rotate(-10deg)}50%{transform:scale(.8) rotate(10deg)}75%{transform:scale(1.1) rotate(-5deg)}to{transform:scale(1) rotate(0)}}.error-message p{color:#d8003a;font-weight:600;margin-top:8px}.main-content{opacity:0;transform:translateY(30px);transition:opacity .8s ease .3s,transform .8s ease .3s;pointer-events:none;position:relative;z-index:10}.main-content.visible{opacity:1;transform:translateY(0);pointer-events:all}.container{max-width:1200px;margin:0 auto;padding:0 24px}section{padding:80px 0;opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease}section.visible{opacity:1;transform:translateY(0)}.section-title{text-align:center;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#ff69b4,#ffb6c1,#ff1493);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:48px;animation:gradientShift 3s ease infinite;filter:drop-shadow(0 2px 8px rgba(255,105,180,.2));transition:transform .3s ease}.section-title:hover{transform:scale(1.05)}.hero-section{text-align:center;padding-top:120px}.hero-title{font-size:4rem;font-weight:700;background:linear-gradient(135deg,#ff69b4,#ffb6c1,#ff1493);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;animation:float 3s ease-in-out infinite,gradientShift 3s ease infinite;filter:drop-shadow(0 4px 12px rgba(255,105,180,.3));transition:transform .3s ease}.hero-title:hover{transform:scale(1.05) translateY(-5px)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero-subtitle{font-size:1.8rem;color:var(--text-light);margin-bottom:24px;font-weight:400}.hero-text{font-size:1.2rem;color:var(--text-dark);max-width:700px;margin:0 auto;line-height:1.8}.wish-section{display:flex;justify-content:center}.wish-card{background:#fff;padding:48px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);text-align:center;max-width:500px;transition:transform .3s ease,box-shadow .3s ease;animation:cardFloat 4s ease-in-out infinite;border:2px solid transparent}.wish-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 16px 64px #ff69b466;border-color:#ff69b433}.cake-container{margin-bottom:32px}.cake-svg{width:200px;height:200px;margin:0 auto}.wish-card h2{font-size:2rem;color:var(--text-dark);margin-bottom:12px}.wish-card p{color:var(--text-light);font-size:1.1rem;margin-bottom:24px}.blow-button{background:linear-gradient(135deg,#ffb6c1,#ff69b4);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Poppins,sans-serif;position:relative;overflow:hidden;box-shadow:0 4px 15px #ff69b44d;animation:buttonPulse 2s ease-in-out infinite}.blow-button:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 32px #ff69b480}.blow-button:active{transform:scale(1.02)}.wish-success{margin-top:24px;padding:20px;background:linear-gradient(135deg,#ffe5ec,#fff5ee);border-radius:12px;opacity:0;transform:scale(.8);transition:all .5s ease;pointer-events:none}.wish-success.show{opacity:1;transform:scale(1)}.wish-success p{font-size:1.3rem;font-weight:600;color:#ff69b4;margin:0}.confetti-burst{position:relative;height:50px}.timeline{display:flex;flex-direction:column;gap:32px;max-width:800px;margin:0 auto}.timeline-item{background:#fff;padding:32px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);display:flex;align-items:flex-start;gap:24px;transition:transform .3s ease,box-shadow .3s ease,border .3s ease;border:2px solid transparent;animation:slideInFromLeft .6s ease-out}.timeline-item:hover{transform:translate(12px) scale(1.02);box-shadow:0 16px 48px #ff69b459;border-color:#ff69b433}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}.timeline-icon{font-size:3rem;flex-shrink:0;animation:iconBounce 2s ease-in-out infinite;transition:transform .3s ease}.timeline-item:hover .timeline-icon{transform:scale(1.2) rotate(10deg)}@keyframes iconBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.timeline-item h3{font-size:1.5rem;color:var(--text-dark);margin-bottom:12px}.timeline-item p{color:var(--text-light);font-size:1.05rem;line-height:1.7}.counter-card{background:linear-gradient(135deg,#ffe5ec,#fff5ee);padding:64px 48px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);text-align:center;max-width:600px;margin:0 auto;transition:transform .3s ease,box-shadow .3s ease;animation:cardFloat 4s ease-in-out infinite;border:2px solid transparent}.counter-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px #ff69b466;border-color:#ff69b44d}.counter-card h2{font-size:2rem;color:var(--text-dark);margin-bottom:32px}.counter-display{display:flex;flex-direction:column;align-items:center;gap:16px}.counter-number{font-size:6rem;font-weight:700;background:linear-gradient(135deg,#ff69b4,#ffb6c1,#ff1493);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;animation:gradientShift 3s ease infinite,numberPulse 2s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(255,105,180,.3))}@keyframes numberPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.counter-label{font-size:1.3rem;color:var(--text-light);font-weight:500}.reasons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1000px;margin:0 auto}.reason-card{background:#fff;padding:32px 24px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);text-align:center;transition:transform .3s ease,box-shadow .3s ease,border .3s ease;cursor:default;border:2px solid transparent;animation:fadeInUp .6s ease-out backwards}.reason-card:nth-child(1){animation-delay:.1s}.reason-card:nth-child(2){animation-delay:.2s}.reason-card:nth-child(3){animation-delay:.3s}.reason-card:nth-child(4){animation-delay:.4s}.reason-card:nth-child(5){animation-delay:.5s}.reason-card:nth-child(6){animation-delay:.6s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.reason-card:hover{transform:translateY(-12px) scale(1.05);box-shadow:0 16px 48px #ff69b466;border-color:#ff69b44d}.reason-icon{font-size:3.5rem;margin-bottom:16px;animation:iconSpin 4s ease-in-out infinite;transition:transform .3s ease}.reason-card:hover .reason-icon{transform:scale(1.3) rotate(15deg);animation-play-state:paused}@keyframes iconSpin{0%,to{transform:rotate(0)}50%{transform:rotate(10deg)}}.reason-card p{color:var(--text-dark);font-size:1.1rem;font-weight:500}.upload-container{text-align:center;margin-bottom:48px}.upload-label{display:inline-block;background:linear-gradient(135deg,#ff69b4,#ffb6c1);color:#fff;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;box-shadow:0 4px 15px #ff69b44d;animation:buttonPulse 2s ease-in-out infinite}.upload-label:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 32px #ff69b480}.upload-label:active{transform:translateY(-2px) scale(1.02)}.upload-status{margin-top:24px;padding:20px;background:linear-gradient(135deg,#ffe5ec,#fff5ee);border-radius:12px;opacity:0;transform:scale(.8);transition:all .3s ease;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px}.upload-status.show{opacity:1;transform:scale(1)}.upload-spinner{width:40px;height:40px;border:4px solid #FFE5EC;border-top:4px solid #FF69B4;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.upload-status p{color:#ff69b4;font-weight:600;margin:0}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.photo-item{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-soft);aspect-ratio:3/4;transition:transform .3s ease,box-shadow .3s ease;animation:fadeInUp .6s ease-out}.photo-item:hover{transform:scale(1.08) rotate(2deg);box-shadow:0 16px 48px #ff69b466;z-index:10}.photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.photo-item:hover img{transform:scale(1.1)}.photo-placeholder{background:linear-gradient(135deg,#ffe5ec,#fff5ee);aspect-ratio:3/4;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:4rem;opacity:.5;transition:all .3s ease;animation:placeholderPulse 3s ease-in-out infinite}@keyframes placeholderPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}.photo-placeholder:hover{opacity:.8;transform:scale(1.05)}.letter-card{background:#fff;padding:64px 48px;border-radius:var(--border-radius);box-shadow:var(--shadow-soft);text-align:center;max-width:500px;margin:0 auto;cursor:pointer;transition:all .3s ease;animation:cardFloat 4s ease-in-out infinite;border:2px solid transparent}.letter-card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 20px 60px #ff69b466;border-color:#ff69b44d}.letter-card:active{transform:translateY(-8px) scale(1.01)}.letter-icon{font-size:5rem;margin-bottom:24px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.letter-card h2{font-size:2rem;color:var(--text-dark);margin-bottom:12px}.letter-card p{color:var(--text-light);font-size:1.1rem}.modal{position:fixed;top:0;left:0;width:100%;height:100vh;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:24px}.modal.show{opacity:1;pointer-events:all}.modal-content{background:#fff;padding:48px;border-radius:var(--border-radius);max-width:700px;width:100%;max-height:80vh;overflow-y:auto;position:relative;transform:scale(.8);transition:transform .3s ease;box-shadow:0 20px 60px #0000004d}.modal.show .modal-content{transform:scale(1)}.modal-close{position:absolute;top:16px;right:16px;background:#ffe5ec;border:none;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer;transition:all .3s ease;color:var(--text-dark);display:flex;align-items:center;justify-content:center}.modal-close:hover{background:var(--pastel-pink);color:#fff;transform:rotate(90deg)}.modal-heart{text-align:center;margin-bottom:32px}.heart-pulse{font-size:5rem;display:inline-block;animation:heartPulse 1.5s ease-in-out infinite}@keyframes heartPulse{0%,to{transform:scale(1)}25%{transform:scale(1.1)}50%{transform:scale(1)}75%{transform:scale(1.05)}}.letter-text h2{text-align:center;font-size:2.2rem;color:var(--text-dark);margin-bottom:32px}.letter-text p{color:var(--text-dark);font-size:1.1rem;line-height:1.8;margin-bottom:24px}.letter-signature{text-align:right;font-style:italic;color:#ff69b4;font-weight:600;margin-top:40px}.final-love-section{padding:120px 0;background:linear-gradient(135deg,#ffe5ec,#fff0f5,#ffe5ec);min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.final-love-message{text-align:center;position:relative;z-index:10}.floating-hearts-final{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:1}.heart-final{position:absolute;font-size:40px;animation:floatAround 8s ease-in-out infinite;opacity:.6}.heart-final:nth-child(1){left:10%;top:20%;animation-delay:0s;animation-duration:7s}.heart-final:nth-child(2){right:15%;top:30%;animation-delay:1s;animation-duration:8s}.heart-final:nth-child(3){left:20%;bottom:25%;animation-delay:2s;animation-duration:9s}.heart-final:nth-child(4){right:10%;bottom:20%;animation-delay:1.5s;animation-duration:7.5s}.heart-final:nth-child(5){left:50%;top:15%;animation-delay:.5s;animation-duration:8.5s}.heart-final:nth-child(6){right:45%;bottom:30%;animation-delay:2.5s;animation-duration:7s}@keyframes floatAround{0%,to{transform:translate(0) rotate(0) scale(1)}25%{transform:translate(30px,-40px) rotate(10deg) scale(1.1)}50%{transform:translate(-20px,-80px) rotate(-10deg) scale(.9)}75%{transform:translate(-40px,-40px) rotate(15deg) scale(1.05)}}.final-love-text{font-size:8rem;font-weight:700;background:linear-gradient(135deg,#ff1493,#ff69b4,#ffb6c1,#ff1493);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:32px;animation:rainbowGradient 4s ease infinite,textFloat 3s ease-in-out infinite,textPulse 2s ease-in-out infinite;filter:drop-shadow(0 8px 24px rgba(255,20,147,.4));letter-spacing:.05em;position:relative;z-index:10}@keyframes rainbowGradient{0%,to{background-position:0% center}50%{background-position:100% center}}@keyframes textFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes textPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.love-subtitle{font-size:2rem;color:#ff69b4;font-weight:600;animation:subtitleFade 3s ease-in-out infinite;filter:drop-shadow(0 4px 12px rgba(255,105,180,.3))}@keyframes subtitleFade{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@media (max-width: 768px){.hero-title{font-size:2.5rem}.hero-subtitle{font-size:1.3rem}.hero-text{font-size:1rem}.section-title{font-size:2rem}.unlock-card{padding:32px 24px}.unlock-title{font-size:2.2rem}.counter-number{font-size:4rem}.reasons-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.timeline-item{flex-direction:column;text-align:center}.modal-content{padding:32px 24px}.letter-text p{font-size:1rem}.final-love-text{font-size:4rem}.love-subtitle{font-size:1.3rem}.heart-final{font-size:28px}}@media (max-width: 480px){.hero-title{font-size:2rem}.unlock-title{font-size:1.8rem}.counter-number{font-size:3rem}.final-love-text{font-size:2.5rem}.love-subtitle{font-size:1rem}.heart-final{font-size:20px}}
