/* ==========================================================================
   CINEMATIC 3D TRANSITION ENGINE & MOTION BLUR
   Multi-axis perspective, velocity blur, and depth physics
   ========================================================================== */

/* Motion blur filters applied dynamically via CSS or SVG filter */
.filter-blur-horizontal {
  filter: url('#cinematic-motion-blur') blur(0px);
}

/* Base slide states */
.slide-card {
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.2, 0.9, 0.3, 1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.slide-card.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
  z-index: 10;
}

/* ==========================================================================
   TRANSITION MODE 1: CINEMATIC DOLLY GLIDE (Default)
   Camera pull-back, velocity blur, and 3D depth glide
   ========================================================================== */

/* Next Slide Animation */
.transition-dolly.animating-next .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(-110%, 0, -320px) rotateY(-18deg) scale(0.85);
  filter: blur(12px) brightness(0.7);
}

.transition-dolly.animating-next .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: dollyInFromRight 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dollyInFromRight {
  0% {
    opacity: 0;
    transform: translate3d(110%, 0, -250px) rotateY(16deg) scale(0.88);
    filter: blur(14px) brightness(1.2);
  }
  40% {
    opacity: 1;
    filter: blur(6px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* Prev Slide Animation */
.transition-dolly.animating-prev .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(110%, 0, -320px) rotateY(18deg) scale(0.85);
  filter: blur(12px) brightness(0.7);
}

.transition-dolly.animating-prev .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: dollyInFromLeft 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dollyInFromLeft {
  0% {
    opacity: 0;
    transform: translate3d(-110%, 0, -250px) rotateY(-16deg) scale(0.88);
    filter: blur(14px) brightness(1.2);
  }
  40% {
    opacity: 1;
    filter: blur(6px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* ==========================================================================
   TRANSITION MODE 2: 3D VOLUMETRIC CUBE
   True 3D cube turnover with depth perspective
   ========================================================================== */

.transition-cube .slide-stage {
  perspective: 1800px;
}

.transition-cube.animating-next .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(-50%, 0, -400px) rotateY(-90deg);
  filter: blur(6px) brightness(0.5);
}

.transition-cube.animating-next .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: cubeInNext 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cubeInNext {
  0% {
    opacity: 0;
    transform: translate3d(50%, 0, -400px) rotateY(90deg);
    filter: blur(8px) brightness(0.7);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
    filter: blur(0px) brightness(1);
  }
}

.transition-cube.animating-prev .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(50%, 0, -400px) rotateY(90deg);
  filter: blur(6px) brightness(0.5);
}

.transition-cube.animating-prev .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: cubeInPrev 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cubeInPrev {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, -400px) rotateY(-90deg);
    filter: blur(8px) brightness(0.7);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg);
    filter: blur(0px) brightness(1);
  }
}

/* ==========================================================================
   TRANSITION MODE 3: HYPER-ZOOM WARP
   Cinematic camera fly-through with depth warp
   ========================================================================== */

.transition-warp.animating-next .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, 0, 500px) scale(2);
  filter: blur(20px) brightness(1.8);
}

.transition-warp.animating-next .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: warpInForward 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes warpInForward {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, -700px) scale(0.3);
    filter: blur(18px) brightness(0.4);
  }
  50% {
    opacity: 0.9;
    filter: blur(8px) brightness(0.9);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0px) brightness(1);
  }
}

.transition-warp.animating-prev .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform: translate3d(0, 0, -600px) scale(0.3);
  filter: blur(18px) brightness(0.4);
}

.transition-warp.animating-prev .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: warpInBackward 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes warpInBackward {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 500px) scale(2);
    filter: blur(20px) brightness(1.8);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* ==========================================================================
   TRANSITION MODE 4: CURVED 3D FLIP
   Realistic paper curvature and specular reflection
   ========================================================================== */

.transition-flip.animating-next .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform-origin: left center;
  transform: rotateY(-110deg) translateZ(100px);
  filter: blur(10px) brightness(0.6);
}

.transition-flip.animating-next .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: flipInNext 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flipInNext {
  0% {
    opacity: 0;
    transform-origin: right center;
    transform: rotateY(90deg) translateZ(100px);
    filter: blur(10px) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotateY(0deg) translateZ(0);
    filter: blur(0px) brightness(1);
  }
}

.transition-flip.animating-prev .slide-card.outgoing {
  opacity: 0;
  visibility: visible;
  transform-origin: right center;
  transform: rotateY(110deg) translateZ(100px);
  filter: blur(10px) brightness(0.6);
}

.transition-flip.animating-prev .slide-card.incoming {
  opacity: 1;
  visibility: visible;
  animation: flipInPrev 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flipInPrev {
  0% {
    opacity: 0;
    transform-origin: left center;
    transform: rotateY(-90deg) translateZ(100px);
    filter: blur(10px) brightness(1.2);
  }
  100% {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: rotateY(0deg) translateZ(0);
    filter: blur(0px) brightness(1);
  }
}