/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Utility Classes for Animation */
.reveal-text {
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
}

.reveal-on-scroll {
    opacity: 0;
    /* --reveal-from: geliş yönü. JS, eleman hangi kenardan çıktıysa
       bir dahaki gelişinde o yönden kaysın diye bunu günceller. */
    transform: translateY(var(--reveal-from, 48px));
    /*
     * Yalnızca opacity ve transform geçişi: "all" yazmak arka plan/gölge
     * gibi özellikleri de geçişe sokup animasyonu ağırlaştırıyordu.
     * will-change tarayıcıya katmanı önceden hazırlatır, titremeyi keser.
     */
    /* easeOutCubic: (0.16, 1, 0.3, 1) hareketin tamamını ilk çeyrekte
       bitirip ani hissettiriyordu; bu eğri süreyi hissedilir kılıyor. */
    transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

/* Bir kapsayıcının çocuklarını sırayla getir (JS --i sırasını atar) */
.reveal-stagger > .reveal-on-scroll {
    transition-delay: calc(var(--i, 0) * 90ms);
}

/* Hareketi azaltma tercihi olan kullanıcılarda animasyonu kapat */
@media (prefers-reduced-motion: reduce) {

    .reveal-on-scroll,
    .reveal-stagger > .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0s;
    }
}

/* Delays */
.delay-100 {
    animation-delay: 0.1s;
    transition-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
    transition-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
    transition-delay: 0.3s;
}