/* Slideshow Transition Effects */
/* All transitions use GPU-accelerated properties (transform, opacity) for smooth performance */

/* Fade transition (default) - smooth opacity change */
.slide.transition-fade {
  transition: opacity 1s ease-in-out;
}

.slide.transition-fade:not(.active) {
  opacity: 0;
}

.slide.transition-fade.active {
  opacity: 1;
}

/* Slide Left - picture exits left, new enters from right */
.slide.transition-slide-left {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide.transition-slide-left.preload {
  transform: translate(50%, -50%);
  opacity: 0;
}

.slide.transition-slide-left:not(.active) {
  transform: translate(-150%, -50%);
  opacity: 0;
}

.slide.transition-slide-left.active {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Slide Right - picture exits right, new enters from left */
.slide.transition-slide-right {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide.transition-slide-right.preload {
  transform: translate(-150%, -50%);
  opacity: 0;
}

.slide.transition-slide-right:not(.active) {
  transform: translate(50%, -50%);
  opacity: 0;
}

.slide.transition-slide-right.active {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Zoom In - new picture zooms in from center */
.slide.transition-zoom-in {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide.transition-zoom-in.preload {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}

.slide.transition-zoom-in:not(.active) {
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}

.slide.transition-zoom-in.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Zoom Out - current picture zooms out while fading */
.slide.transition-zoom-out {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide.transition-zoom-out.preload {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

.slide.transition-zoom-out:not(.active) {
  transform: translate(-50%, -50%) scale(1.2);
  opacity: 0;
}

.slide.transition-zoom-out.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Cross Dissolve - smooth blend between images, slightly longer duration */
.slide.transition-cross-dissolve {
  transition: opacity 1.2s ease-in-out;
}

.slide.transition-cross-dissolve:not(.active) {
  opacity: 0;
}

.slide.transition-cross-dissolve.active {
  opacity: 1;
}

/* Slide Up - picture slides up, new enters from bottom */
.slide.transition-slide-up {
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

.slide.transition-slide-up.preload {
  transform: translate(-50%, 50%);
  opacity: 0;
}

.slide.transition-slide-up:not(.active) {
  transform: translate(-50%, -150%);
  opacity: 0;
}

.slide.transition-slide-up.active {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* ===================================== */
/* PREVIEW ANIMATIONS FOR TRANSITION CARDS */
/* ===================================== */

/* Base preview state - all cards get smooth transitions */
.transition-option[data-transition] {
  transition: transform 1.2s ease-in-out, opacity 1.2s ease-in-out;
  transform-origin: center;
}

/* Fade preview */
.transition-option.preview-fade.previewing {
  animation: preview-fade 1.4s ease-in-out;
}

@keyframes preview-fade {
  0% { opacity: 1; }
  50% { opacity: 0.15; }
  100% { opacity: 1; }
}

/* Slide Left preview */
.transition-option.preview-slide_left.previewing {
  animation: preview-slide-left 1.4s ease-in-out;
}

@keyframes preview-slide-left {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(-35px); opacity: 0.3; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Slide Right preview */
.transition-option.preview-slide_right.previewing {
  animation: preview-slide-right 1.4s ease-in-out;
}

@keyframes preview-slide-right {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(35px); opacity: 0.3; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Zoom In preview */
.transition-option.preview-zoom_in.previewing {
  animation: preview-zoom-in 1.4s ease-in-out;
}

@keyframes preview-zoom-in {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

/* Zoom Out preview */
.transition-option.preview-zoom_out.previewing {
  animation: preview-zoom-out 1.4s ease-in-out;
}

@keyframes preview-zoom-out {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.3; }
  100% { transform: scale(1); opacity: 1; }
}

/* Cross Dissolve preview - very slow and smooth */
.transition-option.preview-cross_dissolve.previewing {
  animation: preview-cross-dissolve 2s ease-in-out;
}

@keyframes preview-cross-dissolve {
  0% { opacity: 1; }
  25% { opacity: 0.5; }
  50% { opacity: 0.1; }
  75% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Slide Up preview */
.transition-option.preview-slide_up.previewing {
  animation: preview-slide-up 1.4s ease-in-out;
}

@keyframes preview-slide-up {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-35px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}