/* Animation Styles */

/* Basic animations */
.anim-shake {
    animation: shake 5s ease-in-out infinite;
}

@keyframes shake {
    0% { transform: translateY(0); }
    50% { transform: translateY(3vh); }
    100% { transform: translateY(0); }
}

/* AJAX Load More Animation */
.ajax-loaded-item {
    opacity: 0;
    transform: translateY(var(--ajax-animation-offset));
    transition: opacity var(--ajax-animation-duration) var(--ajax-animation-easing), 
                transform var(--ajax-animation-duration) var(--ajax-animation-easing);
}

.ajax-loaded-item.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.ajax-loaded-item.fade-scale {
    transform: scale(0.9);
}

.ajax-loaded-item.fade-scale.animate-in {
    opacity: 1;
    transform: scale(1);
}

.ajax-loaded-item.slide-left {
    transform: translateX(-30px);
}

.ajax-loaded-item.slide-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.load-more-container {
    transition: all 0.5s var(--ajax-animation-easing);
}

.load-more-container.fade-out {
    opacity: 0;
    transform: translateY(var(--ajax-animation-offset));
}

.load-more-container button {
    transition: all var(--transition-button) var(--ajax-animation-easing);
}

.load-more-container button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ajax-loading * {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
}

/* Module animations */
body [class*="module-"] {
    transition: var(--transition-fast);
    opacity: 0;
}

[animCascade] {
    line-height: initial;
    font-size: initial;
    display: inline-block;
}

body [class*="module-"] .grid[view] [animCascade],
body [class*="module-"] .flex[view] [animCascade],
body [class*="module-"] ul[view] [animCascade],
body [class*="module-"] form[view] [animCascade] {
    /* Начальное состояние */
    opacity: 0;
    transform: translate3d(0, 3vh, 0); /* GPU acceleration */
    will-change: opacity, transform; /* Оптимизация для браузера */
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--cascade-delay, 0s),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) var(--cascade-delay, 0s);
}

body [class*="module-"] .grid[view="true"] > [animCascade],
body [class*="module-"] .flex[view="true"] > [animCascade],
body [class*="module-"] ul[view="true"] > [animCascade],
body [class*="module-"] form[view="true"] > [animCascade] {
    /* Конечное состояние */
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body [class*="module-"] .grid[view="false"] > [animCascade],
body [class*="module-"] .flex[view="false"] > [animCascade],
body [class*="module-"] ul[view="false"] > [animCascade],
body [class*="module-"] form[view="false"] > [animCascade] {
    /* Возврат к начальному состоянию */
    opacity: 0;
    transform: translate3d(0, 3vh, 0);
}

body.loaded [class*="module-"] {
    opacity: 1;
}