@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(44, 106, 146, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(44, 106, 146, 0); }
    100% { box-shadow: 0 0 0 0 rgba(44, 106, 146, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-pattern {
    background: linear-gradient(120deg, rgba(44, 106, 146, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.float-animation { animation: float 3s ease-in-out infinite; }
.pulse { animation: pulse 2s infinite; }
.fade-in { animation: fadeIn 1s ease-out forwards; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

.btn-primary {
    background: linear-gradient(to right, #2c678e, #20577b);
    color: #fff;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(31, 74, 102, 0.3);
}

.service-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.service-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.pet-icon { transition: all 0.3s ease; }
.pet-icon:hover { transform: rotate(15deg) scale(1.1); }

.testimonial-card { transition: all 0.3s ease; }
.testimonial-card:hover { transform: scale(1.05); }

.floating { animation: float 6s ease-in-out infinite; }

.bounce { animation: bounce 2s infinite; }
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

.pop-in { animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.rotate-in { animation: rotateIn 0.8s ease-out forwards; }
@keyframes rotateIn {
    from { transform: rotate(-10deg) scale(0.8); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
}

.slide-in-left { animation: slideInLeft 0.8s ease-out forwards; }
@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-right { animation: slideInRight 0.8s ease-out forwards; }
@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.wave { animation: wave 2s infinite; }
@keyframes wave {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60%, 100% { transform: rotate(0deg); }
}

.paw-print {
    position: absolute;
    opacity: 0.1;
    font-size: 24px;
    color: #2C6A92;
}

.pet-shake { animation: shake 0.5s ease-in-out infinite alternate; }
@keyframes shake {
    from { transform: rotate(-3deg); }
    to { transform: rotate(3deg); }
}

.bg-pattern {
    background-image: radial-gradient(#2978ad 1px, transparent 1px);
    background-size: 30px 30px;
}


@media screen and (max-width: 768px) {
    .hero-pattern {
        background: linear-gradient(120deg, rgba(44, 106, 146, 0.1) 0%, rgba(255, 255, 255, 0.8) 100%);
    }
    .btn-primary {
        background: linear-gradient(to right, #2c678e, #20577b);
        color: #fff;
    }
    .service-card:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
    }
    .depoimento-buttons{
        font-size: 11px !important;
    }
}