.button-3d-container {
    position: relative;
    width: 650px;
    height: 550px;
    perspective: 1000px;
    margin: 0 auto;
}

.button-3d-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
    border-radius: 12px;
    z-index: -1;
    transform: translateY(80px);
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.three-d-button {
    position: relative;
    background: linear-gradient(145deg, #3d3d3d, #252525);
    border: 2px solid #3e3e3e;
    border-radius: 12px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.three-d-button:hover {
    background: linear-gradient(145deg, #4a4a4a, #1c1c1c);
}

.three-d-button.pressed {
    transform: translateY(40px);
    background: linear-gradient(145deg, #2a2a2a, #111);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.goat-3d {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}