.fade-in { animation: fadeIn 0.5s ease-in-out both; }
.fade-in-down { animation: fadeInDown 0.5s ease-in-out both; }
.fade-in-up { animation: fadeInUp 0.5s ease-in-out both; }
.image-moving { animation: imageMoving 60s linear infinite; }
.scanning { animation: scanning 10s linear infinite; }
.show-edit-zone { animation: showEditZone 0.3s ease-in-out both; }
.show-edit-zone .bottom-banner { animation: showEditZoneBottom 0.3s ease-in-out both; }
.show-error { animation: showError 1s ease-in-out both; }
.show-modal { animation: showModal 0.3s ease-in-out both; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@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 imageMoving {
    0% { background-position: left; }
    50% { background-position: right; }
    100% { background-position: left; }
}

@keyframes scanning {
    0% { top: 0; opacity: 0; }
    50% { opacity: 0.5; }
    95% { opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

@keyframes showEditZone {
    from { right: -600px; }
    to { right: -15px; }
}

@keyframes showEditZoneBottom {
    from { right: -585px; }
    to { right: 0px; }
}

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

@keyframes showModal {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}