#welcome-gif {
    height: 100%;
    aspect-ratio: 1070 / 1022;
    background-image: url("/img/welcome-gifs/1.png");
    background-size: auto 100%;
    background-position: 0 0;
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

#welcome-gif.anim-reverse {
    animation: welcome-reverse 0.4s steps(12) both;
}

#welcome-gif:hover, body:has(.gif-activate:hover) #welcome-gif {
    filter: grayscale(0%);
    animation: welcome-forward 0.4s steps(12) both;
}

.gif-trigger {
    cursor: pointer;
}

@keyframes welcome-forward {
    from { background-position: 0% 0; }
    to { background-position: 100% 0; }
}

@keyframes welcome-reverse {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}