/* ============================================================
   Builder animation classes — MUST load on the public frontend
   (index.php, page.php, blog.php, etc.) so animations saved
   in the builder (`class="fade-in"` etc.) actually play for visitors.
   Mirrors the definitions in builder.css so same class = same behavior.
   ============================================================ */

@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp    { from { transform: translateY(30px);  opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown  { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideLeft  { from { transform: translateX(30px);  opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideRight { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes zoomIn     { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70%     { transform: translate3d(0, -15px, 0); }
    90%     { transform: translate3d(0, -4px, 0); }
}

.fade-in     { animation: fadeIn     0.5s ease-out; animation-fill-mode: both; }
.slide-up    { animation: slideUp    0.5s ease-out; animation-fill-mode: both; }
.slide-down  { animation: slideDown  0.5s ease-out; animation-fill-mode: both; }
.slide-left  { animation: slideLeft  0.5s ease-out; animation-fill-mode: both; }
.slide-right { animation: slideRight 0.5s ease-out; animation-fill-mode: both; }
.zoom-in     { animation: zoomIn     0.5s ease-out; animation-fill-mode: both; }
.bounce      { animation: bounce     1s   ease-out; animation-fill-mode: both; }

@media (prefers-reduced-motion: reduce) {
    .fade-in, .slide-up, .slide-down, .slide-left, .slide-right, .zoom-in, .bounce {
        animation: none !important;
    }
}
