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

.hero-animate {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
}

.fade-up,
.about-animate,
.contact-animate,
.review-card,
.service-card {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Navbar dropdown */
#services-dropdown { display: none; }
#services-dropdown.open { display: block; }

/* Float button */
#float-call-btn {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
#float-call-btn.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Blog card hidden state */
.blog-card.filtered-out { display: none; }

/* FAQ transition */
.faq-content { display: none; }
.faq-content.open { display: block; }

/* Columns layout fallback */
@supports not (column-count: 3) {
    .masonry { display: grid; grid-template-columns: repeat(3, 1fr); }
}

/* Animate pulse */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Animate ping */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; }

/* Animate spin */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }

/* Animate bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.animate-bounce { animation: bounce 1s infinite; }

/* Grid background utility */
.bg-grid {
    background-image: linear-gradient(rgba(14,165,233,0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(14,165,233,0.3) 1px, transparent 1px);
    background-size: 60px 60px;
}