/* 
  💖 Rose with Message 💖
  Created by: Arun Neupane
  GitHub: https://github.com/arundada9000
  YouTube: https://youtube.com/@arundada9000
  Instagram: https://instagram.com/arundada9000
  Instagram: https://facebook.com/arundada9000
  Project Date: 2025 November 10

  ⚠️ Copyright Notice:
  This project is made for educational and personal use only.
  You are free to use or modify the code, but do not reuse my images, music, or personal assets without permission.

  Made with ❤️ and a bit of rose 😅
*/
body {
  background: #fadede;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  cursor: url("./heart-icons/red-heart-32.png");
}

.container {
  width: min(800px, 100vw);
  height: 400px;
  display: flex;
  gap: 35px;
}

h1 {
  font-family: "Sacramento", cursive;
  color: #fe7696;
  font-size: 3.5rem;
}

.letter {
  width: min(600px, 95vw);
  padding: 1rem;
  height: 400px;
}

.rose {
  width: 200px;
  height: 200px;
  animation: yidon 5s infinite;
  transform: translateY(40%);
}

.petal {
  width: 50px;
  height: 50px;
  background: #fe7696;
  border-radius: 0px 50%;
  position: absolute;
  box-shadow: 0 0 10px #d1123f;
  z-index: 2;
  transform-origin: bottom right;
  animation: zhankai2 10s infinite;
  transition: all 1s ease;
  transition-delay: 1s;
  transition: translate 1s ease;
  transition-delay: 1.1s;
}
.petal:nth-child(2) {
  transform-origin: right bottom;
  transform: rotate(90deg);
  background: #fe7696;
  left: -10px;
  animation: zhankai1 10s infinite;
}

.petal:nth-child(3) {
  width: 40px;
  height: 40px;
  left: 10px;
  top: -20px;
  z-index: 1;
  background: #f03a64;
  transform-origin: bottom right;
  animation: zhankai2 10s infinite;
}

.petal:nth-child(4) {
  transform: rotate(90deg);
  width: 40px;
  height: 40px;
  left: 0px;
  top: -20px;
  z-index: 1;
  background: #f03a64;
  transform-origin: bottom right;
  animation: zhankai1 10s infinite;
}

.petal:nth-child(5) {
  width: 50px;
  height: 50px;
  border-radius: 20px;
  left: 20px;
  top: -30px;
  z-index: 0;
  background: #d1123f;
}
.petal.dead-petal {
  background: #5c3a36;
  box-shadow: 0 0 10px #5c3a36;
  transition: background 0.25s ease 1s, translate 1.7s ease 1s;
  translate: 200px;
}
.dead-petal:nth-child(1),
.dead:nth-child(1) {
  transition-delay: 1s;
}
.dead-petal:nth-child(2),
.dead:nth-child(2) {
  transition-delay: 1.1s;
}
.dead-petal:nth-child(3) {
  transition-delay: 1.15s;
}
.dead-petal:nth-child(4) {
  transition-delay: 1.2s;
}
.dead-petal:nth-child(5) {
  transition-delay: 1.25s;
}
.leaf {
  position: absolute;
  top: 120px;
  left: -115px;
}

.stem {
  width: 240px;
  height: 40px;
  background: transparent;
  border: 8px solid #8ac78a;
  border-color: #77a377 transparent transparent transparent;
  border-radius: 50% 50%;
  transform: rotate(100deg);
  transition: all 1s ease-in;
  transition-delay: 0.8s;
}
.stem.gray {
  border: 8px solid #5a4e3c;
  border-color: #5a4e3c transparent transparent transparent;
}
.leafs.dead {
  background: #7a6f5b;
  transition: background 1s ease, translate 1s ease;
  transition: background 1s ease 1s, translate 1s ease 1.5s;
  translate: 200px;
}
.leafs {
  width: 50px;
  height: 40px;
  border-radius: 0px 50%;
  background: #77a377;
  position: absolute;
  top: 0;
  left: 100px;
  z-index: 49;
  transition: background 1s ease;
  transition-delay: 0.8s;
}

.leafs:nth-child(2) {
  width: 40px;
  height: 20px;
  top: 40px;
  left: 140px;
  transform: rotate(120deg);
}

@keyframes yidon {
  50% {
    transform: translateY(35%);
  }
  100% {
    transform: translateY(40%);
  }
}

@keyframes zhankai1 {
  50% {
    transform: rotate(110deg);
  }
  100% {
    transform: rotate(90deg);
  }
}

@keyframes zhankai2 {
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.image {
  width: 300px;
  height: 300px;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0 0 15px #d1123f;
  transition: all 1.5s ease-in-out;
}
.image.show {
  transform: scale(1);
}
.rose-after-class {
  transition: all 1s ease;
}
.rose-after {
  transform: rotate(90deg) translate(350px, -150px);
}
@media (max-width: 600px) {
  body {
    align-items: start;
    padding-top: 2rem;
  }
  .container {
    flex-direction: column;
    gap: 0;
  }
  h1 {
    font-size: 44px;
  }
  .rose {
    margin-left: 40%;
    transition: all 0.5s ease;
  }
  .rose-container {
    margin-left: 14%;
  }
}