.home-wrapper .home-component {
    display: block;
}

.home-wrapper .home-component:nth-child(even) > [class$='-section'] {
    background-color: color-mix(in srgb, var(--theme-primary-color) 10%, transparent);
}

/* Animation Effects cho Home Components - Mạnh hơn */
.home-component-animate {
    opacity: 0;
    transform: translateY(80px) scale(0.95);
    filter: blur(4px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.9s ease-out;
    will-change: opacity, transform, filter;
}

.home-component-animate.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Stagger delay cho các component liên tiếp */
.home-component-animate[data-index="1"] {
    transition-delay: 0.1s;
}

.home-component-animate[data-index="2"] {
    transition-delay: 0.2s;
}

.home-component-animate[data-index="3"] {
    transition-delay: 0.3s;
}

.home-component-animate[data-index="4"] {
    transition-delay: 0.4s;
}

.home-component-animate[data-index="5"] {
    transition-delay: 0.5s;
}

.home-component-animate[data-index="6"] {
    transition-delay: 0.6s;
}

/* Fade in từ trái cho các component chẵn - Mạnh hơn */
.home-component-animate[data-index]:nth-child(even) {
    transform: translateX(-60px) translateY(0) scale(0.95);
    filter: blur(4px);
}

.home-component-animate[data-index]:nth-child(even).animate-in {
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
}

/* Fade in từ phải cho các component lẻ (trừ component đầu tiên) - Mạnh hơn */
.home-component-animate[data-index]:nth-child(odd):not([data-index="1"]) {
    transform: translateX(60px) translateY(0) scale(0.95);
    filter: blur(4px);
}

.home-component-animate[data-index]:nth-child(odd):not([data-index="1"]).animate-in {
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
}

/* Scale effect và shadow khi hover - Mạnh hơn */
.home-component-animate.animate-in:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* Smooth scroll behavior */
.home-wrapper {
    scroll-behavior: smooth;
}

/* Performance optimization */
.home-component-animate {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Giảm motion cho người dùng prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-component-animate {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
    
    .home-component-animate.animate-in {
        transform: none;
        filter: none;
    }
}