@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.shape {
    position: absolute;
    transition: all 0.5s ease-out;
    will-change: transform;
    cursor: pointer;
}

.circle {
    border-radius: 50%;
}

.square {
    border-radius: 8px;
}

.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.animation-canvas {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
}