/* ===== Romantic Background ===== */
body{
 margin:0;
 text-align:center;
 font-family:'Segoe UI', Arial, sans-serif;
 overflow:hidden;

 background: linear-gradient(135deg,#ff9ecf,#ffd6e8,#fff);
 background-size: 300% 300%;
 animation: bgMove 12s ease infinite;
}

@keyframes bgMove{
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}


/* ===== Heading Glow ===== */
h1{
 font-size:42px;
 color:white;
 text-shadow:0 0 10px #ff4da6, 0 0 20px #ff99cc;
 animation: glow 2s infinite alternate;
}

@keyframes glow{
 from{ text-shadow:0 0 10px #ff4da6;}
 to{ text-shadow:0 0 25px #ff99cc;}
}


/* ===== Glass Card Effect for Content ===== */
.card{
 background:rgba(255,255,255,0.25);
 backdrop-filter: blur(10px);
 border-radius:20px;
 padding:20px;
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
 display:inline-block;
}


/* ===== Cute Romantic Button ===== */
.btn{
 padding:14px 26px;
 font-size:18px;
 background: linear-gradient(45deg,#ff4da6,#ff85c1);
 color:white;
 border:none;
 border-radius:30px;
 cursor:pointer;
 transition:.3s;
 box-shadow:0 0 15px pink;
}

.btn:hover{
 transform:scale(1.1);
 box-shadow:0 0 25px hotpink;
}


/* ===== Slideshow Image ===== */
.slide{
 width: min(80vw, 320px);
 height: min(80vw, 320px);
 object-fit: cover;
 border-radius: 30px;
 border: 6px solid #ff69b4;
 box-shadow: 0 0 25px hotpink;
 padding:8px;
 background:white;
 position:relative;
}

/* heart corners */
.slide::after{
 content:"💖";
 position:absolute;
 bottom:-18px;
 right:-10px;
 font-size:28px;
 filter: drop-shadow(0 0 6px pink);
}


@keyframes popIn{
 from{transform:scale(.7); opacity:.5}
 to{transform:scale(1); opacity:1}
}


/* ===== Start Overlay ===== */
.overlay{
 position:fixed;
 inset:0;
 background:linear-gradient(135deg,#ff4da6,#ff85c1);
 color:white;
 display:flex;
 justify-content:center;
 align-items:center;
 font-size:30px;
 cursor:pointer;
 z-index:10;
 text-shadow:0 0 10px white;
 animation: pulse 2s infinite;
}

@keyframes pulse{
 0%{opacity:.9}
 50%{opacity:1}
 100%{opacity:.9}
}


/* ===== Floating Hearts Animation ===== */
.hearts{
 position:fixed;
 inset:0;
 pointer-events:none;
}

.heart{
 position:absolute;
 font-size:26px;
 animation: floatUp 6s linear forwards;
 filter: drop-shadow(0 0 6px pink);
}

@keyframes floatUp{
 from{
   transform:translateY(0) scale(1);
   opacity:1;
 }
 to{
   transform:translateY(-110vh) scale(1.5);
   opacity:0;
 }
}


/* ===== Balloons ===== */
.balloon{
 position:absolute;
 bottom:-120px;
 width:90px;
 animation: floatUp linear forwards;
 filter: drop-shadow(0 0 10px #ff99cc);
}


/* ===== Text Message Style ===== */
#msg, #finalText{
 font-size:24px;
 color:#d6006c;
 font-weight:bold;
 text-shadow:0 0 6px pink;
}


/* ===== Sparkle Effect ===== */
.sparkle{
 position:absolute;
 font-size:18px;
 animation: sparkle 2s linear infinite;
}

@keyframes sparkle{
 0%{opacity:0}
 50%{opacity:1}
 100%{opacity:0}
}
/* Gift box */
.giftBox{
 font-size:90px;
 cursor:pointer;
 transition:.4s;
}

.giftBox.open{
 transform: scale(1.3) rotate(15deg);
 filter: drop-shadow(0 0 20px hotpink);
}

/* Love letter popup */
.letter{
 display:none;
 background:white;
 padding:25px;
 border-radius:20px;
 width:320px;
 margin:20px auto;
 box-shadow:0 0 30px pink;
 animation: letterPop .6s ease;
}

@keyframes letterPop{
 from{transform:scale(.5); opacity:0}
 to{transform:scale(1); opacity:1}
}
.petal{
 position:fixed;
 top:-20px;
 font-size:22px;
 animation: fallPetal linear forwards;
 pointer-events:none;
}

@keyframes fallPetal{
 to{
   transform:translateY(110vh) rotate(360deg);
   opacity:0;
 }
}
.spark{
 position:fixed;
 font-size:14px;
 pointer-events:none;
 animation: sparkleFade .8s linear forwards;
}

@keyframes sparkleFade{
 to{
   transform:translateY(-15px);
   opacity:0;
 }
}
.flipWrap{
 perspective:1000px;
 display:inline-block;
}

.flip{
 width: min(80vw, 320px);
 height: min(80vw, 320px);
 transition: transform 1s;
 transform-style: preserve-3d;
 position:relative;
 cursor:pointer;
}

.flip.flipped{
 transform: rotateY(180deg);
}

.flipFront, .flipBack{
 position:absolute;
 inset:0;
 backface-visibility:hidden;
 border-radius:30px;
 overflow:hidden;
}

.flipBack{
 transform: rotateY(180deg);
 background:#fff0f6;
 display:flex;
 justify-content:center;
 align-items:center;
 font-size:26px;
 color:#ff1493;
 font-weight:bold;
 padding:20px;
 text-align:center;
}
.lock{
 position:fixed;
 inset:0;
 background:linear-gradient(135deg,#ff4da6,#ff99cc);
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 z-index:50;
 color:white;
 font-size:26px;
 text-align:center;
}

.lock input{
 padding:12px;
 font-size:18px;
 border-radius:10px;
 border:none;
 text-align:center;
}
.nameGlow{
 font-size:32px;
 color:white;
 animation: namePulse 2s infinite alternate;
 text-shadow:0 0 10px #fff,0 0 20px #ff4da6,0 0 30px #ff1493;
}

@keyframes namePulse{
 from{ transform:scale(1); }
 to{ transform:scale(1.1); }
}