/* keyframes mooSpin, spinning-moo, moo-image - makes Start-the-Emerald-Road.png spin */
@keyframes mooSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spinning-moo {
    animation: mooSpin 4s linear infinite;
}

#moo-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    cursor: pointer; /* Optional: show it's clickable */
}

/* flashing floor emerald shoes - love it!*/

.hoofprint-button img {
    width: 140px;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hoofprint-button:hover img {
    transform: scale(1.08) rotate(-1deg);
    box-shadow: 0 0 24px rgba(255, 0, 0, 0.9);
    animation: sparkle 1.2s infinite ease-in-out;
}

@keyframes sparkle {
    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.5);
    }
}

/* 3PwrOptns */

.moo-button {
    border-radius: 12px;
    padding: 12px 24px;
    font-family: Arial;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease;
}

    .moo-button:hover {
        transform: scale(1.05);
    }

.yellow {
    background-color: #fdd835;
    color: #b71c1c;
}

.green {
    background-color: #2e7d32;
    color: #ffffff;
}

.black {
    background-color: #212121;
    color: #eeeeee;
}