.taiji {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 2rem auto;
    background: linear-gradient(90deg, #000 50%, #fff 50%);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.taiji::before,
.taiji::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.taiji::before {
    top: 0;
    background: radial-gradient(circle, #fff 30%, #000 30%);
}

.taiji::after {
    bottom: 0;
    background: radial-gradient(circle, #000 30%, #fff 30%);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateSmooth {
    from { 
        transform: rotate(0deg) translateZ(0); 
    }
    to { 
        transform: rotate(360deg) translateZ(0); 
    }
}