:root{
  --bg1:#0f1021; --bg2:#1b1e3c; --glow:#ffb6ff;
  --petal:#ff5bbd; --petal2:#ffcfdf; --pistil:#ffd166;
  --stem:#38b000;

  --size:min(88vmin, 720px);
  --petal-w:12vmin; --petal-h:20vmin;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; display:grid; place-items:center; color:#eaeaf2;
  background:
    radial-gradient(1800px 900px at 50% 120%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1200px 800px at 50% -10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(160deg, var(--bg1), var(--bg2) 60%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  overflow:hidden;
}

/* 星空 */
.stars{ position:fixed; inset:0; pointer-events:none; filter: blur(.2px) saturate(1.1) }
.stars span{
  position:absolute; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.2) 60%, transparent 70%);
  opacity:var(--o,.6); width:var(--s,2px); height:var(--s,2px);
  left:var(--x,50vw); top:var(--y,50vh); animation: float var(--d,12s) linear infinite;
}
@keyframes float{ 0%,100%{ transform:translate3d(0,0,0)} 50%{ transform:translate3d(-20px,-25px,0)} }

/* 舞台 */
.scene{ position:relative; width:var(--size); height:var(--size); display:grid; place-items:center;
  filter: drop-shadow(0 10px 30px rgba(255,182,255,.2));
}
.flower{ position:relative; width:calc(var(--size)*.66); height:calc(var(--size)*.66); display:grid; place-items:center;
  animation:sway 6s ease-in-out infinite;
}
@keyframes sway{ 0%,100%{ transform:rotate(-2deg) } 50%{ transform:rotate(2deg) } }

/* 光晕与花心 */
.aura{
  position:absolute; width:28vmin; height:28vmin; border-radius:50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  mix-blend-mode: screen; opacity:.28; filter: blur(10px); animation:pulse 4.5s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scale(.92) } 50%{ transform:scale(1.04) } }

.pistil{
  position:absolute; width:8.2vmin; height:8.2vmin; border-radius:50%; z-index:3;
  background:
    radial-gradient(circle at 30% 30%, #fff6, transparent 45%),
    radial-gradient(circle at 60% 70%, #0002, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--pistil), #ffae00 70%);
  box-shadow:0 0 30px 10px rgba(255,209,102,.22), 0 0 0 2px #fff2 inset;
}

/* 花瓣 */
.petals{ position:absolute; inset:0; display:grid; place-items:center; z-index:2 }
.petal{
  position:absolute; top:50%; left:50%;
  width:var(--petal-w); height:var(--petal-h);
  transform-origin:50% 92%;
  border-radius:58% 58% 45% 45% / 92% 92% 30% 30%;
  background:
    radial-gradient(130% 100% at 50% 8%, #fff6, transparent 60%),
    linear-gradient(to bottom, var(--petal2), var(--petal) 55%, #b31567 100%);
  box-shadow:
    0 12px 24px rgba(255,91,189,.22),
    inset 0 -8px 18px rgba(0,0,0,.12);
  filter: saturate(1.05) hue-rotate(var(--h,0deg));
  transform: translate(-50%,-50%) rotate(var(--deg,0)) translateY(var(--offset,-5.2vmin)) scale(var(--scale,1));
}
/* 在花心附近加一点内阴影，增强“贴合感” */
.petal::after{
  content:""; position:absolute; left:50%; bottom:8%;
  width:55%; height:35%; transform:translateX(-50%);
  background: radial-gradient(60% 70% at 50% 100%, rgba(0,0,0,.10), transparent 60%);
  border-bottom-left-radius:60% 90%; border-bottom-right-radius:60% 90%;
  pointer-events:none;
}

/* 花茎（保留） */
.stem{
  position:absolute; bottom:-2vmin; left:50%; width:1.1vmin; height:32vmin; border-radius:999px;
  background: linear-gradient(to right, #2a9d8f, var(--stem));
  box-shadow:0 0 0 2px #ffffff0a inset, 0 0 20px rgba(56,176,0,.22);
  transform: translate(-50%, 15vmin); z-index:0;
}

/* 地面柔光与说明 */
.ground-glow{
  position:absolute; bottom:6vmin; width:36vmin; height:6vmin; border-radius:50%;
  background: radial-gradient(60% 100% at 50% 50%, rgba(255,182,255,.35), transparent 70%);
  filter: blur(10px); opacity:.6; z-index:-1; transform: translateY(18vmin);
}
.caption{ position:absolute; bottom:2.5vmin; width:100%; text-align:center; font-size:clamp(12px,2.2vmin,16px); letter-spacing:.5px; opacity:.85 }
.caption b{ color:#ffd6ff }

/* 交互 */
.flower:hover .petal{ filter:hue-rotate(16deg) saturate(1.12) }
.flower:hover{ animation-play-state: paused }

@media (prefers-reduced-motion: reduce){
  .flower,.aura,.stars span{ animation:none }
}