/* Elements Section Styles - Using Tailwind */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Open+Sans:wght@400;500;600&display=swap');

/* Slide in animations for element cards */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Initial state - colored squares hidden */
#elements .grid .bg-\[\#a38f8f\],
#elements .grid .bg-\[\#abbea6\],
#elements .grid .bg-\[\#C8B8A8\],
#elements .grid .bg-\[\#c284a0\],
#elements .grid .bg-\[\#946362\],
#elements .grid .bg-\[\#687c7b\],
#elements .grid .bg-\[\#7d6e8c\],
#elements .grid .bg-\[\#ad8647d9\] {
    opacity: 0;
    transition: none;
}

/* Apply animations when triggered by scroll */
/* Elements on RIGHT side (1, 3, 5, 7) - slide in from RIGHT */
#elements .grid.animate-in .bg-\[\#a38f8f\],
#elements .grid.animate-in .bg-\[\#c284a0\],
#elements .grid.animate-in .bg-\[\#687c7b\],
#elements .grid.animate-in .bg-\[\#ad8647d9\] {
    animation: slideInFromRight 0.8s ease-out forwards;
}

/* Elements on LEFT side (2, 4, 6) - slide in from LEFT */
#elements .grid.animate-in .bg-\[\#abbea6\],
#elements .grid.animate-in .bg-\[\#946362\],
#elements .grid.animate-in .bg-\[\#7d6e8c\] {
    animation: slideInFromLeft 0.8s ease-out forwards;
}