.ccm-petal { position: relative; width: 220px; height: 140px; }

.ccm-petal-fab { position: absolute; left: 50%; bottom: 0; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff; font-size: 26px; line-height: 52px; text-align: center; cursor: pointer; transform: translateX(-50%); transition: transform 0.4s; box-shadow: 0 6px 18px rgba(124,108,255,0.4); z-index: 2; }

.ccm-petal-i { position: absolute; left: 50%; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: #1f1f2e; color: #c4b5fd; font-size: 14px; display: flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(255,255,255,0.08); transform: translate(-50%, 0) rotate(0) translateY(0) rotate(0); opacity: 0; transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; }

.ccm-petal:hover .ccm-petal-fab, .ccm-petal-t:checked + .ccm-petal-fab { transform: translateX(-50%) rotate(45deg); }

.ccm-petal:hover .ccm-petal-i, .ccm-petal-t:checked ~ .ccm-petal-i { transform: translate(-50%, 0) rotate(var(--a)) translateY(-72px) rotate(calc(var(--a) * -1)); opacity: 1; }

.ccm-petal-i:nth-of-type(1) { transition-delay: 0.05s; }

.ccm-petal-i:nth-of-type(2) { transition-delay: 0.10s; }

.ccm-petal-i:nth-of-type(3) { transition-delay: 0.15s; }

.ccm-petal-i:nth-of-type(4) { transition-delay: 0.20s; }

.ccm-petal-i:nth-of-type(5) { transition-delay: 0.25s; }

.ccm-petal-i:nth-of-type(6) { transition-delay: 0.30s; }