:root{
  --bg1: #fff4fb;
  --bg2: #fffefc;
  --stem: #4fbf7a;
  --bright1: #ff7fb8;
  --bright2: #ffd166;
  --bright3: #79d1ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  height:100vh;
  overflow:hidden;
  font-family:'Poppins',system-ui,Arial;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  animation: bgFade 12s ease-in-out infinite alternate;
}

/* background fade */
@keyframes bgFade{
  0%{ background: linear-gradient(180deg,#fff4fb,#fffefc); }
  50%{ background: linear-gradient(180deg,#fff1f8,#fffefb); }
  100%{ background: linear-gradient(180deg,#fff7ff,#fffefc); }
}

/* Garden */
#garden{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:absolute;
  bottom:0;
  opacity:0;
  transition: opacity 1s ease;
  z-index:10;
}

/* Flower */
.flower{
  width:70px;
  margin:0 10px;
  position:relative;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
}
.stem{
  width:6px;
  height:0;
  background: linear-gradient(180deg,var(--stem),#2f9a5f);
  border-radius:4px;
  box-shadow: 0 6px 12px rgba(80,140,90,0.08);
  transition: height 1.2s cubic-bezier(.2,.9,.2,1);
}

/* brighter petals */
.petal{
  position:absolute;
  bottom:320px;
  width:28px;
  height:28px;
  border-radius:50% 60% 50% 60%;
  opacity:0;
  transform-origin:center;
  box-shadow: 0 10px 26px rgba(90,60,90,0.08);
}
.petal.layer1{ background: linear-gradient(120deg,var(--bright1),#ff9ccf 60%); transform: translate(-14px,-10px) rotate(-12deg); }
.petal.layer2{ background: linear-gradient(120deg,var(--bright2),#ffd98a 60%); transform: translate(14px,-10px) rotate(16deg); }
.petal.layer3{ background: linear-gradient(120deg,var(--bright3),#9fdfff 60%); transform: translate(-6px,12px) rotate(-8deg); }
.petal.layer4{ background: linear-gradient(120deg,#ffd1a6,#ffbfe0 60%); transform: translate(10px,14px) rotate(20deg); }
.petal.center{ width:24px; height:24px; background: #fff3d9; left:50%; transform: translateX(-50%) translateY(-8px); border-radius:50%; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.06); opacity:0; }

@keyframes petalBloom{ to { opacity:1; transform: translateY(0) scale(1); } }

/* Message card */
#message{ position:absolute; top:22%; width:100%; display:flex; justify-content:center; pointer-events:none; z-index:50; opacity:0; transition: opacity 400ms ease; }
#message .card{ background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9)); padding:22px 28px; border-radius:18px; box-shadow: 0 12px 40px rgba(120,80,140,0.08); color:#4b2f52; text-align:center; width: min(86%,520px); }
#message .line1{ font-size:22px; font-weight:700; margin:0 0 8px 0; }
#message .line2{ margin:0; font-size:16px; color:#6e4b6e; }

/* petals falling */
#petals{ position:fixed; inset:0; pointer-events:none; z-index:20; overflow:hidden; }
.petalFall{ position:absolute; top:-20px; border-radius:50%; filter: blur(1px); opacity:0.95; animation: fall 6s linear forwards; }
@keyframes fall{ to { transform: translateY(120vh) translateX(40px) rotate(30deg); opacity:0; } }

/* sparkles */
.sparkle{ position:fixed; width:6px; height:6px; background:#fff; border-radius:50%; filter:blur(1px); opacity:0; animation: twinkle 3s linear forwards; z-index:55; }
@keyframes twinkle{ 0%{ transform: scale(0.3); opacity:0 } 50%{ transform: scale(1.6); opacity:1 } 100%{ transform: scale(0); opacity:0 } }

/* butterflies */
#butterflies{ position:fixed; inset:0; pointer-events:none; z-index:45; overflow:visible; }
.butterfly{ position:absolute; width:44px; height:30px; opacity:0.95; transform-origin:center; filter: drop-shadow(0 6px 12px rgba(120,80,120,0.08)); transition: transform .3s linear; }
.butterfly .wing{ position:absolute; width:50%; height:100%; top:0; border-radius:50%; background: linear-gradient(180deg, rgba(255,200,240,0.95), rgba(230,230,255,0.9)); opacity:0.95; }
.butterfly .wing.left{ left:0; transform-origin:right center; }
.butterfly .wing.right{ right:0; transform-origin:left center; }

/* hearts */
#hearts{ position:fixed; inset:0; pointer-events:none; z-index:48; overflow:visible; }
.heartGlow{ position:absolute; width:22px; height:22px; transform: rotate(-45deg); opacity:0.95; filter: blur(0.5px); }
.heartGlow::before, .heartGlow::after{ content:''; position:absolute; width:22px; height:22px; background: linear-gradient(180deg,#ffc6df,#ff90c1); border-radius:50%; }
.heartGlow::before{ top:-11px; left:0; }
.heartGlow::after{ left:11px; top:0; }
@keyframes heartFloat{ 0%{ transform: translateY(0) scale(0.8); opacity:0.95 } 100%{ transform: translateY(-180px) scale(1.1); opacity:0 } }

/* responsive tweaks */
@media (max-width:480px){
  .flower{ width:54px; margin:0 6px; }
  .petal{ width:20px; height:20px; bottom:220px; }
  .butterfly{ width:34px; height:22px; }
  #message .card{ padding:16px 18px; font-size:15px; }
}