/* * AJ Collage - Advanced 3D Animation Muscle
 * Keyframes for True 3D Rubik's Cube Rotations.
 */

/* 1. Initial Load Animation */
.aj-animate-ready {
    opacity: 0; 
    animation: aj-slide-up-reveal 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes aj-slide-up-reveal {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. 3D SLIDESHOW ENGINE
   ========================================= */

.aj-slideshow {
    position: relative; 
    width: 100%;
    height: 100%;
    perspective: 1500px; /* This creates the 3D depth camera */
    transform-style: preserve-3d;
    overflow: hidden; 
}

/* Base style for all slides */
.aj-slideshow .aj-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 0;
    backface-visibility: hidden; /* Hides the back of the image when it flips */
    animation-duration: var(--aj-trans-speed, 0.8s);
    animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
    animation-fill-mode: forwards;
}

.aj-slideshow .aj-slide:first-child {
    position: relative;
}

.aj-slideshow .aj-slide-active {
    z-index: 2;
    opacity: 1;
}

/* =========================================
   3. 3D CUBE ROTATION KEYFRAMES
   ========================================= */

/* CUBE TURNING UP (Rows) */
.aj-cube-in-up { animation-name: cubeInUp; z-index: 2; }
.aj-cube-out-up { animation-name: cubeOutUp; z-index: 1; }

@keyframes cubeInUp {
    0% { transform: rotateX(-90deg) translateZ(100px); opacity: 0; }
    100% { transform: rotateX(0deg) translateZ(0); opacity: 1; }
}
@keyframes cubeOutUp {
    0% { transform: rotateX(0deg) translateZ(0); opacity: 1; }
    100% { transform: rotateX(90deg) translateZ(100px); opacity: 0; }
}

/* CUBE TURNING DOWN (Rows) */
.aj-cube-in-down { animation-name: cubeInDown; z-index: 2; }
.aj-cube-out-down { animation-name: cubeOutDown; z-index: 1; }

@keyframes cubeInDown {
    0% { transform: rotateX(90deg) translateZ(100px); opacity: 0; }
    100% { transform: rotateX(0deg) translateZ(0); opacity: 1; }
}
@keyframes cubeOutDown {
    0% { transform: rotateX(0deg) translateZ(0); opacity: 1; }
    100% { transform: rotateX(-90deg) translateZ(100px); opacity: 0; }
}

/* CUBE TURNING LEFT (Columns) */
.aj-cube-in-left { animation-name: cubeInLeft; z-index: 2; }
.aj-cube-out-left { animation-name: cubeOutLeft; z-index: 1; }

@keyframes cubeInLeft {
    0% { transform: rotateY(90deg) translateZ(100px); opacity: 0; }
    100% { transform: rotateY(0deg) translateZ(0); opacity: 1; }
}
@keyframes cubeOutLeft {
    0% { transform: rotateY(0deg) translateZ(0); opacity: 1; }
    100% { transform: rotateY(-90deg) translateZ(100px); opacity: 0; }
}

/* CUBE TURNING RIGHT (Columns) */
.aj-cube-in-right { animation-name: cubeInRight; z-index: 2; }
.aj-cube-out-right { animation-name: cubeOutRight; z-index: 1; }

@keyframes cubeInRight {
    0% { transform: rotateY(-90deg) translateZ(100px); opacity: 0; }
    100% { transform: rotateY(0deg) translateZ(0); opacity: 1; }
}
@keyframes cubeOutRight {
    0% { transform: rotateY(0deg) translateZ(0); opacity: 1; }
    100% { transform: rotateY(90deg) translateZ(100px); opacity: 0; }
}

/* Simple Fade (Fallback) */
.aj-anim-fade { animation-name: ajFadeIn; }
@keyframes ajFadeIn { from { opacity: 0; } to { opacity: 1; } }