/* Custom 3D Carousel Animation */
.hero-carousel {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hero-slide {
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-out;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
    will-change: transform, opacity;
}

/* Active slide is front and center */
.hero-slide.active {
    opacity: 1;
    transform: rotateY(0deg) translateZ(0) scale(1);
    z-index: 10;
}

/* Previous slide pushed back and rotated left */
.hero-slide.prev {
    opacity: 0;
    transform: rotateY(-60deg) translateZ(-200px) scale(0.9);
    z-index: 5;
}

/* Next slide pushed back and rotated right */
.hero-slide.next {
    opacity: 0;
    transform: rotateY(60deg) translateZ(-200px) scale(0.9);
    z-index: 5;
}