*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg1:#f8f3ff; --bg2:#ffe6ef;
  --shadow:rgba(0,0,0,.10);
  --accent:#d63384; --text:#2b2b2b; --muted:#545454;

  --petal1:#ffffff; --petal2:#e9e9e9; --sheen:rgba(255,255,255,.85);
  --stem:#67a35f;

  --scene-size: clamp(260px, 60vw, 360px);
  --curve: cubic-bezier(.2,.8,.2,1);
}
html,body{height:100%}
body{
  display:flex;align-items:center;justify-content:center;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); padding:16px;
}
.wrap{text-align:center;}

/* Title */
h1{font-size:clamp(1.6rem,3.2vw,2.1rem);color:var(--accent);margin-bottom:16px}

/* Pink circle background */
.flower-bg{
  width:calc(var(--scene-size) * 1.2);
  height:calc(var(--scene-size) * 1.2);
  margin:0 auto;
  border-radius:50%;
  background: radial-gradient(circle at 50% 40%, #ffcce0, #ffb3d9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.15) inset;
}

/* Scene */
.scene{
  width:var(--scene-size); height:var(--scene-size);
  perspective:900px; -webkit-perspective:900px;
  perspective-origin:50% 40%; -webkit-perspective-origin:50% 40%;
}
.lily3d{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transform: rotateX(10deg) rotateZ(-2deg);
}
.shadow{display:none;} /* hide floor shadow (circle replaces it) */

/* Stem */
.stem{
  position:absolute;left:50%;bottom:0;
  width:3%;height:70%;
  transform:translateX(-50%);
  background: linear-gradient(180deg,#8ecb82,var(--stem));
  border-radius:24px;
}

/* Petals */
.petal-wrap{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform: rotateZ(calc(var(--angle) * 1deg)) translateZ(calc(var(--z) * 1px));
  transition: transform .9s var(--curve);
}
.petal{
  position:absolute;left:50%;top:28%;
  width:34%;height:48%;
  transform: translateX(-50%) rotateX(22deg) scale(0.94);
  transform-origin: bottom center;
  border-radius:60% 60% 12% 12% / 70% 70% 18% 18%;
  background:
    radial-gradient(120% 80% at 50% 12%, var(--sheen), transparent 36%),
    linear-gradient(180deg, var(--petal1), var(--petal2) 82%);
  box-shadow: inset 0 -16px 22px rgba(0,0,0,.08), 0 10px 20px var(--shadow);
  transition: transform .9s var(--curve), top .9s var(--curve);
}
.petal.small{
  width:28%; height:40%; top:32%;
  transform: translateX(-50%) rotateX(22deg) scale(0.94);
}

/* Bloom state */
.lily3d.open .petal-wrap{
  transform: rotateZ(calc(var(--angle) * 1deg)) translateZ(calc(var(--z) * 1px)) translateY(-6%);
}
.lily3d.open .petal{ top:26%; transform: translateX(-50%) rotateX(10deg) scale(1.06); }
.lily3d.open .petal.small{ top:30%; transform: translateX(-50%) rotateX(10deg) scale(1.02); }

/* Caption */
#loveMessage{margin-top:14px;color:var(--muted);font-size:1.05rem}

/* Button */
#bloomBtn{
  margin-top:16px; padding:10px 16px; border-radius:999px; border:0;
  background:#f7d0e4; color:#9a2b63; font-weight:600; cursor:pointer;
  box-shadow:0 6px 18px var(--shadow);
  transition: transform .15s ease;
}
#bloomBtn:active{ transform: translateY(1px) }