/* Reset पब्लिक लाइब्रेरी से inspiration लेकर तैयार किया गया है। rainBg की JS थी CodeWithRandom article से प्रेरित है :contentReference[oaicite:2]{index=2} */
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;700&display=swap');
* { margin:0; padding:0; box-sizing:border-box; font-family:'Hind', sans-serif; }
body {
  background: linear-gradient(135deg, #ffe6f0, #fffbe6);
  overflow-x: hidden; color:#333;
}
header { position:absolute; top:20%; text-align:center; width:100%; }
header h3 { font-size:1.4rem; margin-bottom:.5rem; color:#b23b8b; }
header h1 { font-size:3rem; color:#d13d6b; }

.typed-container { position:absolute; top:40%; width:100%; text-align:center; }
#typed-text { font-size:1.7rem; color:#4a4a4a; min-height:3rem; }

.rainBg { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; }

.action-section { position:absolute; bottom:15%; width:100%; text-align:center; }
#surpriseBtn {
  background:#d13d6b; color:white; padding:15px 30px; font-size:1.2rem; border-radius:50px;
  border:none; cursor:pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: background .3s;
}
#surpriseBtn:hover { background:#bf2c58; }

.modal {
  display:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); justify-content:center; align-items:center;
}
.modal-content {
  background:white; padding:20px; border-radius:15px; width:min(90%,600px);
  text-align:center; position:relative;
}
.modal-content h2 { margin-bottom:15px; color:#6b0b34; }
.modal-content .gal { display:flex; flex-wrap: wrap; justify-content: center; gap:10px; }
.modal-content .gal img {
  height:150px; width:auto; border-radius:10px; box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.close {
  position:absolute; top:10px; right:15px; font-size:2rem; color:#6b0b34; cursor:pointer;
}

/* Falling heart animation */
.rainBg i {
  position:absolute; display:block; width:15px; height:15px;
  background:url('assets/heart.svg') center/contain no-repeat;
  animation:fall linear infinite;
  opacity:0.8;
}
@keyframes fall {
  to { transform: translateY(100vh) rotate(360deg); opacity: 0.2; }
}