/* Dog Button Animation Styles */
.button-container {
    position: relative;
    width: 100%;
    margin-top: 4.5rem !important;
}

/* Ensure the Tailwind button stays above the dog */
.button-container button {
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    .button-container .dog {
        transform: translate(20px, -65px) rotate(15deg) !important;
        opacity: 1 !important;
    }
    .button-container .paw {
        right: -5px !important;
        opacity: 1 !important;
    }
    .button-container .paw::after {
        left: 0 !important;
    }
    .button-container .paw.top {
        right: 40px !important;
        top: -8px !important;
    }
    .button-container .tail {
        opacity: 1 !important;
    }
}

.button-container:hover .dog {
    transform: translate(20px, -65px) rotate(15deg);
    opacity: 1;
    transition-delay: 0.6s;
}

.button-container:hover .paw {
    transition-delay: 0.3s;
    right: -5px;
    opacity: 1;
}

.button-container:hover .paw::after {
    transition-delay: 0s;
    left: 0;
}

.button-container:hover .paw.top {
    transition-delay: 0.4s;
    right: 40px;
    top: -8px;
}

.button-container:hover .tail {
    opacity: 1;
    transition-delay: 0.6s;
}

.dog {
    position: absolute;
    width: 65px;
    height: 65px;
    top: 5px;
    right: 1px;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0) rotate(0);
    transition: 0.3s transform cubic-bezier(0.33, 1, 0.68, 1), 0.3s opacity cubic-bezier(0.33, 1, 0.68, 1);
}

.dog div {
    position: absolute;
}

.dog .tail {
    width: 10%;
    height: 35%;
    left: -50%;
    bottom: -34%;
    transform: rotate(-25deg);
    transition: 0.1s opacity;
    transition-delay: 0s;
    opacity: 0;
}

.dog .tail::after {
    content: "";
    position: absolute;
    transform-origin: bottom center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
    background-color: #E1A46E;
    animation: infinite alternate tailSkew 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes tailSkew {
    from {
        transform: skewX(15deg);
    }

    to {
        transform: skewX(-15deg);
    }
}

.dog .body {
    width: 70%;
    height: 50%;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #9F6A43;
    border-radius: 50% 50% 0 0;
}

.dog .head {
    width: 65%;
    height: 70%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 80% 80% 60% 60%;
    background-color: #E1A46E;
}

.dog .nuzzle {
    width: 70%;
    height: 40%;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.dog .nuzzle::before,
.dog .nuzzle::after {
    content: "";
    width: 50%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #C28E5F;
    border-radius: 70% 30% 50% 20%;
    z-index: 1;
}

.dog .nuzzle::after {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.dog .mouth {
    width: 50%;
    height: 90%;
    border-radius: 100%;
    background-color: #111827;
    left: 50%;
    bottom: -20%;
    transform: translateX(-50%);
}

.dog .tongue {
    width: 50%;
    height: 50%;
    background-color: #ef4444;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5%;
    border-radius: 50%;
    animation: 0.3s alternate tongueBounce infinite cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes tongueBounce {
    from {
        bottom: 20%;
    }

    to {
        bottom: 15%;
    }
}

.dog .nose {
    width: 30%;
    height: 20%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 10;
}

.dog .nose::before {
    content: "";
    width: 100%;
    height: 60%;
    top: -50%;
    left: 0;
    position: absolute;
    display: inline-block;
    background-color: #1f2937;
    border-radius: 1000px 1000px 0 0;
}

.dog .nose::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 10%;
    left: 0;
    position: absolute;
    display: inline-block;
    background-color: #1f2937;
    border-radius: 0 0 1000px 1000px;
}

.dog .nose .nostrils {
    width: 90%;
    height: 100%;
    top: 0;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

.dog .nose .nostrils::before {
    content: "";
    display: inline-block;
    width: 30%;
    left: 10%;
    height: 100%;
    position: absolute;
    background-color: #000;
    border-radius: 100%;
}

.dog .nose .nostrils::after {
    content: "";
    display: inline-block;
    width: 30%;
    right: 10%;
    height: 100%;
    position: absolute;
    background-color: #000;
    border-radius: 100%;
}

.dog .nose .highlight {
    top: -50%;
    left: 50%;
    width: 80%;
    height: 30%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 1000px 1000px 0 0;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0));
    opacity: 0.3;
}

.dog .eyes {
    width: 80%;
    height: 35%;
    top: 25%;
    transform: translateX(-50%);
    left: 50%;
}

.dog .eyes .left,
.dog .eyes .right {
    border-radius: 1000px;
    background-color: #111;
    width: 25%;
    height: 52%;
    top: 50%;
    transform: translateY(-50%);
}

.dog .eyes .left::after,
.dog .eyes .right::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 30%;
    height: 30%;
    background-color: #fff;
    opacity: 0.7;
    border-radius: 1000px;
    left: 15%;
    top: 15%;
}

.dog .eyes .left {
    left: 15%;
}

.dog .eyes .right {
    right: 15%;
}

.dog .ears {
    width: 90%;
    height: 90%;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dog .ears div {
    width: 30%;
    height: 50%;
    left: 0;
    top: 0;
    background-color: #9F6A43;
    transform: rotate(15deg);
    border-radius: 60% 20% 80% 10%;
    z-index: 1;
}

.dog .ears div.right {
    transform: rotate(-15deg) scaleX(-1);
    left: auto;
    right: 0;
}

.paw {
    position: absolute;
    right: -20px;
    top: 15px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s right cubic-bezier(0.33, 1, 0.68, 1), 0.3s top cubic-bezier(0.33, 1, 0.68, 1), 0.3s opacity cubic-bezier(0.33, 1, 0.68, 1);
}

.paw::after {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #E1A46E;
    transition: 0.3s left cubic-bezier(0.33, 1, 0.68, 1);
    transition-delay: 0.3s;
}

.paw.top {
    transform: rotate(-90deg);
    top: -20px;
    right: 40px;
    transition: 0.3s top cubic-bezier(0.33, 1, 0.68, 1);
}