@keyframes cat-animation {
    0% {
        content: url('cat-base.svg');
    }
    25% {
        content: url('cat-base.svg');
    }
    25.5% {
        content: url('cat-blink1.svg');
    }
    26% {
        content: url('cat-blink2.svg');
    }
    26.5% {
        content: url('cat-blink3-closed.svg');
    }
    27.5% {
        content: url('cat-blink2.svg');
    }
    28% {
        content: url('cat-blink1.svg');
    }
    28.5% {
        content: url('cat-eyesleft1.svg');
    }
    29% {
        content: url('cat-eyesleft2.svg');
    }
    29.5% {
        content: url('cat-eyesleft3.svg');
    }
    30% {
        content: url('cat-eyesleft4.svg');
    }
    30.5% {
        content: url('cat-eyesleft5.svg');
    }
    60% {
        content: url('cat-eyesleft5.svg');
    }
    60.5% {
        content: url('cat-eyesleft4.svg');
    }
    61% {
        content: url('cat-eyesleft3.svg');
    }
    61.5% {
        content: url('cat-eyesleft2.svg');
    }
    62% {
        content: url('cat-eyesleft1.svg');
    }
    62.5% {
        content: url('cat-blink1.svg');
    }
    63% {
        content: url('cat-blink2.svg');
    }
    63.5% {
        content: url('cat-blink3-closed.svg');
    }
    64% {
        content: url('cat-blink2.svg');
    }
    64.5% {
        content: url('cat-blink1.svg');
    }
    65% {
        content: url('cat-base.svg');
    }
    100% {
        content: url('cat-base.svg');
    }
}

.cat {
    position: absolute;
    bottom: -10rem;
    right: -10rem;
    width: 55vw;
    height: auto;
    animation: cat-animation 8s infinite;
    z-index: -1; /* Ensure it is in the background */
    overflow: hidden;
    aspect-ratio: 1.78/1;
}

.no-transition .sun,
.no-transition .moon {
    transition: none;
}

.sun, .moon {
    position: absolute;
    left: 10rem;
    top: 10rem;
    width: 25rem;
    height: 25rem;
    transition: opacity 1s ease-in-out;
    z-index: -1;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Tablet */
@media only screen and (min-width: 992px) and (max-width: 1925px) {
    .cat {
        bottom: -5rem;
        right: -5rem;
        width: 60vw;
    }

    .sun, .moon {
        left: 5rem;
        top: 8rem;
        width: 22rem;
        height: 22rem;
    }
}

/* Mobile */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .cat {
        bottom: -5rem;
        right: -5rem;
        width: 80vw;
    }

    .sun, .moon {
        left: -1rem;
        top: 4rem;
        width: 20rem;
        height: 20rem;
    }
}

/* Small mobile */
@media only screen and (max-width: 768px) {
    .cat {
        bottom: 0;
        right: -5rem;
        width: 120vw;
    }

    .sun, .moon {
        left: -1rem;
        top: 5rem;
        width: 12rem;
        height: 12rem;
    }
}