/* Interactive corner cat — Mattz Art pixel cat; click/tap throws a yarn toy */
#site-cat {
    --cat-w: 240px;
    --cat-h: 192px;
    --cat-idle-frames: 8;
    --cat-walk-frames: 12;
    --cat-run-frames: 8;
    --cat-attack-frames: 8;
    position: fixed;
    left: 0;
    top: 0;
    width: var(--cat-w);
    height: var(--cat-h);
    z-index: 1050;
    pointer-events: none;
    will-change: transform;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.35s ease;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}

#site-cat.is-ready {
    visibility: visible;
    opacity: 1;
}

#site-cat-sprite {
    position: absolute;
    inset: 0;
    width: var(--cat-w);
    height: var(--cat-h);
    user-select: none;
    -webkit-user-drag: none;
}

/* All sheets stay in the DOM so every sprite is fetched/decoded before first chase */
.site-cat-sheet {
    position: absolute;
    inset: 0;
    width: var(--cat-w);
    height: var(--cat-h);
    opacity: 0;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background-repeat: no-repeat;
    background-position: 0 0;
}

.site-cat-sheet-idle {
    background-image: url("images/cat/IDLE.png");
    background-size: calc(var(--cat-w) * var(--cat-idle-frames)) var(--cat-h);
    animation: site-cat-idle 2.8s steps(8) infinite;
}

.site-cat-sheet-walk {
    background-image: url("images/cat/WALK.png");
    background-size: calc(var(--cat-w) * var(--cat-walk-frames)) var(--cat-h);
    animation: site-cat-walk 0.7s steps(12) infinite;
}

.site-cat-sheet-run {
    background-image: url("images/cat/RUN.png");
    background-size: calc(var(--cat-w) * var(--cat-run-frames)) var(--cat-h);
    animation: site-cat-run 0.45s steps(8) infinite;
}

.site-cat-sheet-attack {
    background-image: url("images/cat/ATTACK.png");
    background-size: calc(var(--cat-w) * var(--cat-attack-frames)) var(--cat-h);
    animation: site-cat-attack 0.55s steps(8) 1 forwards;
}

#site-cat.is-idle .site-cat-sheet-idle,
#site-cat.is-walk .site-cat-sheet-walk,
#site-cat.is-run .site-cat-sheet-run,
#site-cat.is-attack .site-cat-sheet-attack {
    opacity: 1;
}

#site-cat-toys {
    --toy-w: 32px;
    --toy-h: 32px;
    position: fixed;
    inset: 0;
    z-index: 1051;
    pointer-events: none;
}

.site-cat-toy {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--toy-w);
    height: var(--toy-h);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background: url("images/cat/TOY.png") center / contain no-repeat;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.28));
}

.site-cat-toy.is-visible {
    opacity: 1;
}

.site-cat-toy.is-hit {
    opacity: 0;
    transition: opacity 0.25s ease;
}

@keyframes site-cat-idle {
    from { background-position: 0 0; }
    to { background-position: calc(var(--cat-w) * var(--cat-idle-frames) * -1) 0; }
}

@keyframes site-cat-walk {
    from { background-position: 0 0; }
    to { background-position: calc(var(--cat-w) * var(--cat-walk-frames) * -1) 0; }
}

@keyframes site-cat-run {
    from { background-position: 0 0; }
    to { background-position: calc(var(--cat-w) * var(--cat-run-frames) * -1) 0; }
}

@keyframes site-cat-attack {
    from { background-position: 0 0; }
    to { background-position: calc(var(--cat-w) * var(--cat-attack-frames) * -1) 0; }
}

@media (prefers-reduced-motion: reduce) {
    #site-cat,
    #site-cat-toys {
        display: none !important;
    }
}