/*
 * CSS za Animacija na Skrol Plugin
 */

/* * Definišemo početna stanja za elemente koje želimo da animiramo.
 * Oni su u početku nevidljivi (opacity: 0) i biće animirani pomoću transition svojstva.
 * Koristimo CSS varijablu --aos-duration koju smo definisali u PHP-u.
 * Ako varijabla nije dostupna, podrazumevana vrednost je 0.8s.
*/

[class*="aos-fade-"] {
    opacity: 0;
    transition: opacity var(--aos-duration, 0.8s) ease-out, transform var(--aos-duration, 0.8s) ease-out;
    will-change: opacity, transform; /* Optimizacija za performanse */
}

/* Početna pozicija za animaciju sa leve strane */
.aos-fade-left {
    transform: translateX(-50px);
}

/* Početna pozicija za animaciju sa desne strane */
.aos-fade-right {
    transform: translateX(50px);
}

/* Početna pozicija za animaciju odozgo */
.aos-fade-up {
    transform: translateY(50px);
}

/* Početna pozicija za animaciju odozdo */
.aos-fade-down {
    transform: translateY(-50px);
}

/* Jednostavna fade-in animacija bez pomeranja */
.aos-fade-in {
    transform: scale(0.95);
}

/* * Kada JavaScript doda klasu .is-visible, element se vraća u normalno stanje,
 * što pokreće CSS transition i stvara efekat animacije.
*/

[class*="aos-fade-"].is-visible {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
}