/* ---- Scroll Animations ---- */
[data-animate] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Hero Keyframes ---- */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

.animate-fade-in-down { animation: fadeInDown 0.6s ease forwards; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; }
.animate-fade-in-right { animation: fadeInRight 0.6s ease forwards; }

.animation-delay-200 { animation-delay: 0.2s; opacity: 0; }
.animation-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animation-delay-600 { animation-delay: 0.6s; opacity: 0; }
.animation-delay-800 { animation-delay: 0.8s; opacity: 0; }

/* ---- Ping Animation (live indicator) ---- */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ---- Hover Transforms ---- */
.hover-lift {
    transition: transform 0.3s, box-shadow 0.3s;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--msme-card-shadow-hover);
}