/* ============================================
   SALOME BUTİK - SMOOTH SCROLL ANIMATIONS
   ============================================
   Bu dosya siteye kaydırma animasyonları ekler.
   Pasif yapmak için functions.php'den bu dosyayı
   çağıran satırı yorum satırı yapmanız yeterlidir.
   ============================================ */

/* Animasyon uygulanacak öğelerin başlangıç durumu */
.salome-scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity, transform;
}

/* Görünür olduğunda alacağı durum */
.salome-scroll-reveal.salome-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Animasyon Gecikmeleri (Stagger Effect) 
   Yan yana duran ürünlerin sırayla gelmesi için */
.salome-delay-100 { transition-delay: 0.1s; }
.salome-delay-200 { transition-delay: 0.2s; }
.salome-delay-300 { transition-delay: 0.3s; }
.salome-delay-400 { transition-delay: 0.4s; }

/* Farklı Animasyon Tipleri (İleride kullanılabilir) */

/* Soldan Gelme */
.salome-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease-out;
}
.salome-fade-in-left.salome-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Sağdan Gelme */
.salome-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out;
}
.salome-fade-in-right.salome-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* Hover Zoom Efekti (Ekstra Güzellik) */
.salome-hover-scale {
    transition: transform 0.4s ease;
}
.salome-hover-scale:hover {
    transform: scale(1.02);
}

/* Mobilde animasyonları biraz hızlandıralım */
@media (max-width: 768px) {
    .salome-scroll-reveal {
        transition-duration: 0.6s;
    }
}