/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playwrite+VN:wght@400;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playwrite+Deutschland+Grund:wght@400;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playwrite+Deutschland+Grund:wght@400;500&display=swap'); */



* {
  margin:0; padding:0; box-sizing:border-box;
  user-select: none;
}
label {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body {
  height:100vh; display:flex; justify-content:center; align-items:center;
  background:url("phusi.png") no-repeat center  ;
  overflow: hidden;
}
.overlay {
position: fixed;
  inset: 0;
  background: linear-gradient(
    rgba(150, 80, 200, 0.25),
    rgba(255, 120, 160, 0.25)
  );
  backdrop-filter: blur(2px);
  z-index: -1;
}
.logo {
  position:fixed; top:0; left:0;
  width:120px;
  background-size:contain;
}
.envelope {
  position:relative;
  width:200px; height:200px;
  cursor:pointer;
  animation: appear 1s ease forwards;
}

@keyframes appear {
  from {opacity:0; transform: translateY(20px); }
  to {opacity:1; transform: translateY(0);}
}

.envelope-body {
  position: absolute;
  width:200px; height:150px;
  transition:0.5s;
  transform: scale(1.8);
}
/* Body of envelope (triangular bottom) */
.envelope-body .body {
  position:absolute; 
  margin: 50px 0 0 0;
  width:200px; height: 100px;
  background: linear-gradient(to left,#a33757,#852e4e,#4c1d3d ) ;
  z-index:1;
}
/* Top fold (the flap) */
.envelope-body .top-fold {
  position:absolute; top:50px; width:0; height:0;
  border-style:solid;
  border-width:50px 100px 0 100px;
  border-color:#dc586c transparent transparent transparent;
  transform-origin:50% 0%;
  transition:transform 0.5s 0.5s, z-index 0.25s 0.5s;
  z-index:3;;
}
/* Back fold */
.envelope-body .back-fold {
  position:absolute; bottom:0;
  width:200px; height:100px;
  background:#02374b;
  z-index:0;
}
/* Left fold / side maybe */
/* Letter inside */
.envelope-body .letter {
  position:absolute; left:20px; bottom:0;
  /* font-family: 'Georgia', 'Times New Roman', serif; */
  /* font-family: 'Roboto', sans-serif; */
  /* font-family: 'Playwrite VN', cursive; */
  /* font-family: 'Itim', cursive; */
  font-family: "Playwrite DE Grund", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  width:160px; height:60px;
  /* background:#fff; */
  font-size: 9px;
  transition:0.5s 0.25s;
  z-index:1;
  overflow:hidden;
  background: #fffdf8;
  color: #222;
  padding: 10px;
  border-radius: 6px;
  line-height: 1.6;
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
  border: 1px solid #f5e1c0;
  background-image: 
    repeating-linear-gradient(to bottom, transparent 0, transparent 23px, rgba(255, 213, 173, 0.3) 24px);
}



/* Shadow under envelope */
.shadow {
  position:absolute;
  top:calc(200px * 1.8); left:50%;
  height:30px; width:400px;
  transform:translateX(-50%);
  background:radial-gradient(#00000040, transparent, transparent);
  transition:0.5s;
  border-radius:50%;
}


/* animation */
input#click:checked ~ .envelope .envelope-body {
  transform: scale(1.8) translateY(50px);
}
input#click:checked ~ .envelope .envelope-body .top-fold {
  transform: rotateX(180deg);
  z-index:0;
  transition: transform 0.5s, z-index 0.25s;
}
input#click:checked ~ .envelope .envelope-body .letter {
  height: 250px;
}
input#click:checked ~ .envelope .shadow {
  width: calc(350px * 1.8);
}


/* Tạo trái tim */
.heart {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e63946;
  transform: rotate(-45deg);
  animation: float 6s infinite ease-in-out;
  opacity: 0;
}
.heart::before,
.heart::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e63946;
  border-radius: 50%;
}
.heart::before { top: -10px; left: 0; }
.heart::after  { left: 10px; top: 0; }

@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.8) rotate(-45deg);
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-300px) scale(1.2) rotate(-45deg);
    opacity: 0;
  }
}