@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Lora:ital,wght@0,400;1,400&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

body {
  min-height:100vh;
  background: linear-gradient(135deg,#0d0d0d 0%,#1a0a2e 50%,#0d1a0d 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Lora',serif;
  overflow:hidden;
}

canvas#hearts{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* ENVELOPE */
.envelope{
  position:relative;width:320px;height:220px;
  background:linear-gradient(145deg,#1e6b1e,#2d9c2d);
  border-radius:4px;
  box-shadow:0 8px 40px rgba(0,200,0,0.3),0 0 80px rgba(0,255,0,0.08);
  cursor:pointer;z-index:10;
  transition:transform .3s;
}
.envelope:hover{transform:scale(1.03)}
.envelope::before,.envelope::after{
  content:'';position:absolute;width:0;height:0;
}
.envelope::before{
  bottom:0;left:0;
  border-left:160px solid transparent;
  border-right:160px solid transparent;
  border-bottom:110px solid #155215;
}
.envelope::after{
  top:0;left:0;
  border-left:160px solid transparent;
  border-right:160px solid transparent;
  border-top:110px solid #1a5c1a;
}
.flap{
  position:absolute;top:0;left:0;width:100%;height:100%;
  transform-origin:top center;
  transition:transform 0.8s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
.flap::after{
  content:'';position:absolute;top:0;left:0;
  border-left:160px solid transparent;
  border-right:160px solid transparent;
  border-top:110px solid #23852e;
}
.flap.open{transform:rotateX(180deg)}
.letter-peek{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  width:260px;height:60px;
  background:linear-gradient(180deg,#fff9f0,#fff3e0);
  border-radius:3px;z-index:1;
  transition:transform 0.6s ease 0.5s;
}
.letter-peek.rise{transform:translateX(-50%) translateY(-80px)}

/* LETTER */
.letter{
  position:absolute;width:min(90vw,560px);
  background:linear-gradient(160deg,#fffdf7,#fff8ee);
  border-radius:6px;
  padding:48px 44px 40px;
  box-shadow:0 20px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(0,180,0,0.15);
  z-index:20;
  opacity:0;transform:translateY(60px) scale(0.92);
  transition:opacity 0.7s ease,transform 0.7s ease;
}
.letter.hidden{display:none}
.letter.visible{opacity:1;transform:translateY(0) scale(1)}

.stamp{
  position:absolute;top:20px;right:24px;
  font-size:2rem;
  border:2px solid #2d9c2d;
  padding:6px 8px;border-radius:3px;
  box-shadow:2px 2px 0 #2d9c2d;
  background:#fff;
}

.salutation{
  font-family:'Dancing Script',cursive;
  font-size:2rem;color:#1a5c1a;
  margin-bottom:22px;
  opacity:0;transform:translateX(-20px);
  transition:opacity 0.5s,transform 0.5s;
}
.salutation.show{opacity:1;transform:none}

.body-text p{
  font-family:'Lora',serif;font-size:1.05rem;
  line-height:1.85;color:#2c1a00;
  margin-bottom:16px;
  opacity:0;transform:translateY(12px);
  transition:opacity 0.5s,transform 0.5s;
}
.body-text p.show{opacity:1;transform:none}
.body-text p em{color:#1a6b1a;font-style:italic}
.body-text p strong{color:#0d3d0d}

.sign{
  font-family:'Dancing Script',cursive;
  font-size:1.6rem;color:#1a5c1a;
  margin-top:24px;text-align:right;
  opacity:0;transition:opacity 0.6s 0.2s;
}
.sign.show{opacity:1}

.hearts-row{
  text-align:right;font-size:1.4rem;
  margin-top:8px;letter-spacing:4px;
  opacity:0;transition:opacity 0.6s 0.4s;
}
.hearts-row.show{opacity:1}

/* click hint */
.hint{
  position:absolute;bottom:-36px;left:50%;transform:translateX(-50%);
  color:rgba(150,255,150,0.7);font-size:.85rem;font-family:'Lora',serif;
  white-space:nowrap;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}