/* ============================================
   INTERACTIVE PARALLAX EFFECT - CSS
   Passive animation + mouse-interactive hover
   ============================================ */

/* Ensure covers can be transformed in 3D */
.parallax-cover {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Passive parallax animation - gentle 3D tilt on COVER only */
@keyframes passiveParallax {

    0%,
    100% {
        transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateZ(0px);
    }

    25% {
        transform: perspective(1000px) rotateY(2deg) rotateX(-1deg) translateZ(10px);
    }

    50% {
        transform: perspective(1000px) rotateY(0deg) rotateX(1deg) translateZ(5px);
    }

    75% {
        transform: perspective(1000px) rotateY(-2deg) rotateX(-0.5deg) translateZ(10px);
    }
}

/* Text stays static - no parallax movement */
.slide-info {
    transform: none !important;
    will-change: auto;
}