/* Add these to your animation-demo.css file */

/* Configure sizes for the additional animation tiles */
.animation-tile:nth-of-type(10) {
    grid-column: span 4;
    height: var(--standard-tile-height);
}

.animation-tile:nth-of-type(11) {
    grid-column: span 4;
    height: var(--standard-tile-height);
}

.animation-tile:nth-of-type(12) {
    grid-column: span 4;
    height: var(--standard-tile-height);
}

.animation-tile:nth-of-type(13) {
    grid-column: span 6;
    height: var(--standard-tile-height);
}

/* Update responsive styles */
@media (max-width: 992px) {
    .animation-tile:nth-of-type(10),
    .animation-tile:nth-of-type(11),
    .animation-tile:nth-of-type(12),
    .animation-tile:nth-of-type(13) {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .animation-tile:nth-of-type(10),
    .animation-tile:nth-of-type(11),
    .animation-tile:nth-of-type(12),
    .animation-tile:nth-of-type(13) {
        grid-column: span 12;
    }
}

/* Fix for AOS animations on flip cards */
/* Ensure AOS animations work with 3D transforms */
[data-aos] {
    pointer-events: none; /* Temporarily disable pointer events during animation */
}

[data-aos].aos-animate {
    pointer-events: auto; /* Re-enable pointer events after animation completes */
}

/* Fix for service cards with AOS */
.service-card-wrapper[data-aos] {
    perspective: 1000px; /* Maintain perspective during AOS animation */
    transform-style: preserve-3d; /* Ensure 3D space is preserved */
    backface-visibility: hidden; /* Prevent flickering */
}

/* Ensure the flip effect still works after AOS animation */
.service-card-wrapper.aos-animate:hover .service-card {
    transform: rotateY(180deg);
}

/* Fix for AOS animations that might conflict with 3D transforms */
.service-card-wrapper[data-aos="flip-left"].aos-animate .service-card,
.service-card-wrapper[data-aos="flip-right"].aos-animate .service-card,
.service-card-wrapper[data-aos="flip-up"].aos-animate .service-card,
.service-card-wrapper[data-aos="flip-down"].aos-animate .service-card,
.service-card-wrapper[data-aos="zoom-in"].aos-animate .service-card,
.service-card-wrapper[data-aos="zoom-in-up"].aos-animate .service-card,
.service-card-wrapper[data-aos="zoom-in-down"].aos-animate .service-card,
.service-card-wrapper[data-aos="zoom-in-left"].aos-animate .service-card,
.service-card-wrapper[data-aos="zoom-in-right"].aos-animate .service-card {
    transform: rotateY(0deg); /* Reset transform to prevent conflicts */
}