.hearts-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.heart {
  position: absolute;
  width: 24px;
  height: 24px;
  background: pink;
  opacity: 0.8;
  clip-path: polygon(50% 0%, 100% 35%, 80% 100%, 50% 80%, 20% 100%, 0% 35%);
  animation: fall 8s linear infinite;
}

@keyframes fall {
  0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

body {
  background: #ffe4f0;
  font-family: georgia, Courier;
  text-align: center;
  padding: 1rem;
  color: #ff6e97;
}
.hidden { display: none; }

.envlope-wrapper {
  height: 380px;
  text-align: center;
  margin-top: 100px;
}
.envelope {
  position: relative;
  width: 280px;
  height: 180px;
  margin: 0 auto;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background-color: #FFB6C1;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.front { position: absolute; width: 0; height: 0; z-index: 3; }
.flap {
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
  border-bottom: 82px solid transparent;
  border-top: 98px solid #FFA6B6;
  transform-origin: top;
  transition: transform 0.8s ease;
}
.open .flap { transform: rotateX(180deg); z-index: 1; }
.close .flap { transform: rotateX(0deg); z-index: 5; }
.pocket {
  border-left: 140px solid #FFB6C1;
  border-right: 140px solid #FFB6C1;
  border-bottom: 90px solid #FFC6D1;
  border-top: 90px solid transparent;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.letter {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 90%;
  background: #fffcff;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transform: translate(-50%, 0);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.open .letter {
  opacity: 1;
  transform: translate(-50%, -60px);
}
.words {
  position: absolute;
  left: 10%;
  width: 80%;
  height: 14%;
  background-color: #FFA6B6;
  opacity: 0.5;
  border-radius: 4px;
}
.words.line1 { top: 15%; width: 20%; height: 7%; }
.words.line2 { top: 35%; }
.words.line3 { top: 55%; }
.words.line4 { top: 75%; }

button {
  padding: 0.6rem 1rem;
  background: #ff91af;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  margin-top: 1rem;
}
button:hover { background: #ff6e97; }

.music-player {
    margin: 2rem auto;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.music-label {
    font-size: 1rem;
    margin-bottom: 10px;
    color: #ff6e97;
    font-weight: bold;
}

.spotify-embed {
    border-radius: 12px;
    overflow: hidden;
}