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

.skeleton {
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: loadingSkeleton 1.5s infinite;
}

@keyframes loadingSkeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.view-transition-enter {
    opacity: 0;
    transform: translateY(15px);
}

.view-transition-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Micro-interaction transformations */
.scale-down {
    transform: scale(0.95);
    transition: transform 0.1s ease-in-out;
}