/* Subtle drifting lily petals and a soft petal burst on desktop pointer interactions. */
@media(hover:hover) and (pointer:fine){
  .petal-effects-root{position:fixed;inset:0;z-index:9999;overflow:hidden;pointer-events:none;contain:strict}
  .floating-petal{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:calc(var(--size) * 1.72);border-radius:72% 28% 66% 34% / 66% 36% 64% 34%;background:linear-gradient(142deg,#fffef8 8%,hsl(calc(82 + var(--tint)),35%,94%) 58%,#d8e7cd 100%);box-shadow:inset -2px -2px 4px rgba(83,111,68,.12),0 1px 8px rgba(242,255,231,.24);opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) scale(.48);animation:petalDrift var(--duration) cubic-bezier(.2,.55,.3,1) forwards;will-change:transform,opacity}
  .floating-petal::after{content:"";position:absolute;left:49%;top:16%;width:1px;height:66%;background:linear-gradient(transparent,rgba(147,168,120,.34),transparent);transform:rotate(-9deg)}
  .floating-petal-burst{animation-name:petalBurst;filter:drop-shadow(0 1px 5px rgba(237,255,229,.24))}
  @keyframes petalDrift{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) scale(.42)}18%{opacity:.92}100%{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) rotate(calc(var(--angle) + 105deg)) scale(.78)}}
  @keyframes petalBurst{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) scale(.34)}12%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) scale(1.08)}100%{opacity:0;transform:translate(calc(-50% + var(--travel-x)),calc(-50% + var(--travel-y))) rotate(calc(var(--angle) + 250deg)) scale(.68)}}
}