/**
 * Scroll Animations CSS
 * Elementlerin scroll'da animasyonlu görünmesi için stiller
 * 
 * @package Karadag_Tema
 */

/* Başlangıç durumu - Element henüz görünmeden önce */
.animate-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    will-change: opacity, transform;
}

/* Animasyon tamamlandığında - Element görünür olduğunda */
.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Farklı animasyon varyasyonları */
.animate-ready.fade-in-left {
    transform: translateX(-20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.animate-ready.fade-in-right {
    transform: translateX(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.animate-ready.fade-in-up {
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.animate-ready.fade-in-down {
    transform: translateY(-20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.animate-ready.scale-in {
    transform: scale(0.95);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Hero section'lar için özel animasyon */
.hero-landing,
.about-hero,
.contact-hero,
.products-hero,
.product-request-hero {
    opacity: 0;
    animation: heroFadeIn 0.5s ease-out forwards;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section'lar için */
section.animate-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Kartlar için cascade animasyon */
.process-grid .process-card.animate-ready,
.features-grid-landing .feature-card-landing.animate-ready,
.values-grid .value-card.animate-ready {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.process-grid .process-card.animate-in,
.features-grid-landing .feature-card-landing.animate-in,
.values-grid .value-card.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Performans optimizasyonu */
.animate-ready {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Mobil cihazlarda daha hafif animasyon */
@media (max-width: 768px) {
    .animate-ready {
        transform: translateY(20px);
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    
    section.animate-ready {
        transform: translateY(20px);
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
}

/* Reduced motion için erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
    .animate-ready,
    section.animate-ready,
    .hero-landing,
    .about-hero,
    .contact-hero,
    .products-hero,
    .product-request-hero {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}