/* Base styles */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
  background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  transition: background 2s;
}

/* Landing page */
.container {
  text-align: center;
  padding: 50px;
  color: white;
  z-index: 2;
  position: relative;
}

button {
  padding: 12px 25px;
  border-radius: 25px;
  border: none;
  margin: 10px;
  cursor: pointer;
}

#yesBtn { background: #ff4d6d; color: white; }
#noBtn { background: #ddd; }

/* Floating hearts */
.floating {
  position: absolute;
  animation: floatUp linear infinite;
}

@keyframes floatUp {
  0% { transform: translateY(100vh); opacity:0;}
  100% { transform: translateY(-10vh); opacity:1;}
}

/* Proposal overlay */
#proposalOverlay {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  color:black;
  z-index: 999;
  background: linear-gradient(135deg, #ff9a9e, #ffd6e0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2s;
  text-align: center;
}

#proposalOverlay.active {
  opacity:1;
  pointer-events: auto;
}

/* Man dancing */
#man {
  font-size: 90px;
  animation: dance 0.5s infinite alternate;
  margin-bottom: 20px;
}

@keyframes dance {
  from { transform: rotate(-10deg);}
  to { transform: rotate(10deg);}
}

.kneel {
  animation: kneel 1s forwards;
}
@keyframes kneel {
  to { transform: translateY(20px);}
}

/* Love text centered */
#loveText {
  font-size: 1.8rem;
  text-shadow: 0 0 10px white, 0 0 20px pink;
  margin-top: 20px;
  max-width: 90%;
  line-height: 1.5;
}

/* Name glow */
#herName {
  margin-top: 20px;
  font-size: 2.5rem;
  opacity:0;
}
.showName {
  animation: glowName 2s forwards;
}
@keyframes glowName {
  to { opacity:1; transform: scale(1.2);}
}

/* Fireworks */
.fire {
  position: absolute;
  font-size: 24px;
  animation: explode 1s forwards;
}
@keyframes explode {
  from { transform: scale(0);}
  to { transform: scale(3); opacity:0;}
}

/* Optional floating photos */
.photo {
  position: absolute;
  width: 140px;
  border-radius: 10px;
  opacity:0;
  animation: fadePhoto 6s infinite;
}
@keyframes fadePhoto {
  0%,100% {opacity:0;}
  50% {opacity:1;}
}