.ccm-iris { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at center, #0a0a14 30%, #15151d); border: 4px solid #2a2a3e; }

.ccm-iris-blade { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px; background: linear-gradient(135deg, #2a2a3e, #15151d); clip-path: polygon(50% 0%, 100% 50%, 50% 50%); transform: rotate(var(--a)) translateY(-30px); transform-origin: center; transition: transform 0.5s cubic-bezier(0.65,0,0.35,1); }

.ccm-iris:hover .ccm-iris-blade { transform: rotate(calc(var(--a) + 30deg)) translateY(-50px); }

.ccm-iris-i { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: #1f1f2e; color: #00e5ff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 1px solid rgba(0,229,255,0.4); transform: rotate(var(--a)) translate(70px) rotate(calc(var(--a) * -1)); opacity: 0; transition: opacity 0.4s ease 0.25s; z-index: 2; }

.ccm-iris:hover .ccm-iris-i { opacity: 1; }

.ccm-iris-i:hover { background: #00e5ff; color: #0a0a14; }