.ccm-half { position: relative; width: 220px; height: 130px; display: flex; align-items: flex-end; justify-content: center; }

.ccm-half-fab { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #2ecc8a, #00e5ff); color: #0a0f0c; font-weight: 700; font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.4s; z-index: 2; box-shadow: 0 6px 22px rgba(46,204,138,0.4); }

.ccm-half input:checked + .ccm-half-fab { transform: rotate(180deg); }

.ccm-half-i { position: absolute; bottom: 28px; left: 50%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: #1f1f2e; border: 1.5px solid #2ecc8a; color: #2ecc8a; font: 700 12px/36px ui-monospace, monospace; text-align: center; text-decoration: none; transform: translate(0, 0) rotate(var(--a)) translate(0) rotate(calc(var(--a) * -1)); opacity: 0; transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; }

.ccm-half input:checked ~ .ccm-half-i { transform: translate(0, 0) rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1)); opacity: 1; }

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

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

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

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

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