.hide {
    opacity: 0;
    visibility: hidden;
    color: red;
    transition: opacity 2s ease;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    footer:hover .hide {
        opacity: 1;
        visibility: visible;
    }
}

.goose {
    position: fixed;
    width: 64px;
    height: 64px;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 64px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    transform-origin: center bottom;
    transform: scale(1.6);
    will-change: transform, left, top;
}

.goose.is-facing-left {
    transform: scale(-1.6, 1.6);
}

.goose.is-idle {
    background-image: url('sprites/character/Idle.png');
    animation: goose-idle 0.8s steps(2) infinite;
}

.goose.is-walking {
    background-image: url('sprites/character/Walk.png');
    animation: goose-walk 0.5s steps(4) infinite;
}

.goose.is-running {
    background-image: url('sprites/character/Run.png');
    animation: goose-run 0.32s steps(4) infinite;
}

.goose.is-flapping {
    background-image: url('sprites/character/Flap.png');
    animation: goose-flap 0.4s steps(4) infinite;
}

/* Explosion: JS swaps the background-image through 10 separate PNGs.
   No CSS animation here — frame swaps are driven by JS. The sprite
   has no facing or animation classes during explosion. */
.goose.is-exploding {
    cursor: default;
    pointer-events: none;
    animation: none !important;
    background-size: contain;
    background-position: center;
    /* Bigger boom — scale up so the explosion is visually impactful.
       transform-origin: center bottom keeps it anchored to the goose's feet. */
    transform: scale(2.2) !important;
}

@keyframes goose-idle {
    from { background-position: 0 0; }
    to   { background-position: -128px 0; }
}

@keyframes goose-walk {
    from { background-position: 0 0; }
    to   { background-position: -256px 0; }
}

@keyframes goose-run {
    from { background-position: 0 0; }
    to   { background-position: -256px 0; }
}

@keyframes goose-flap {
    from { background-position: 0 0; }
    to   { background-position: -256px 0; }
}

@media (max-width: 600px) {
    .goose {
        transform: scale(1.25);
    }

    .goose.is-facing-left {
        transform: scale(-1.25, 1.25);
    }

    .goose.is-exploding {
        transform: scale(1.8) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .goose {
        animation-duration: 2s !important;
    }
}