/* Simple View Transitions for Image Loading */

::view-transition-group(image-content) {
    animation-duration: 50ms;
    animation-timing-function: ease-out;
}

::view-transition-old(image-content) {
    animation-name: fade-out;
}

::view-transition-new(image-content) {
    animation-name: fade-in;
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(image-content) {
        animation-duration: 0.1s;
    }
}