/* ========== SLIDE LEFT (balról → jobbra) ========== */
.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(-50%);
  opacity: 0;
}

.slide-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.slide-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.slide-left-leave-to {
  transform: translateX(30%);
  opacity: 0;
}

/* ========== SLIDE RIGHT (jobbról → balra) ========== */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-right-enter-from {
  transform: translateX(50%);
  opacity: 0;
}

.slide-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.slide-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.slide-right-leave-to {
  transform: translateX(-30%);
  opacity: 0;
}

/* ========== FLOAT LEFT (balról → balra) ========== */
.float-left-enter-active,
.float-left-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.float-left-enter-from {
  transform: translateX(-30%);
  opacity: 0;
}

.float-left-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.float-left-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.float-left-leave-to {
  transform: translateX(-30%);
  opacity: 0;
}

/* ========== FLOAT RIGHT (jobbról → jobbra) ========== */
.float-right-enter-active,
.float-right-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.float-right-enter-from {
  transform: translateX(30%);
  opacity: 0;
}

.float-right-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.float-right-leave-from {
  transform: translateX(0);
  opacity: 1;
}

.float-right-leave-to {
  transform: translateX(30%);
  opacity: 0;
}

/* ========== FLOAT UP (fentről → fentre) ========== */
.float-up-enter-active,
.float-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.float-up-enter-from {
  transform: translateY(-30%);
  opacity: 0;
}

.float-up-enter-to {
  transform: translateY(0);
  opacity: 1;
}

.float-up-leave-from {
  transform: translateY(0);
  opacity: 1;
}

.float-up-leave-to {
  transform: translateY(-30%);
  opacity: 0;
}

/* ========== FLOAT DOWN (lentről → le) ========== */
.float-down-enter-active,
.float-down-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.float-down-enter-from {
  transform: translateY(30%);
  opacity: 0;
}

.float-down-enter-to {
  transform: translateY(0);
  opacity: 1;
}

.float-down-leave-from {
  transform: translateY(0);
  opacity: 1;
}

.float-down-leave-to {
  transform: translateY(30%);
  opacity: 0;
}

/* ========== FADE ========== */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

/* ========== CUBE LEFT (balról → jobbra, 3D forgás) ========== */
.cube-left-enter-active,
.cube-left-leave-active {
  transition: transform 0.4s ease, opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.cube-left-enter-from {
  transform: perspective(800px) rotateY(-90deg);
  opacity: 0;
}

.cube-left-enter-to {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
}

.cube-left-leave-from {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
}

.cube-left-leave-to {
  transform: perspective(800px) rotateY(90deg);
  opacity: 0;
}

/* ========== CUBE RIGHT (jobbról → balra, 3D forgás) ========== */
.cube-right-enter-active,
.cube-right-leave-active {
  transition: transform 0.4s ease, opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.cube-right-enter-from {
  transform: perspective(800px) rotateY(90deg);
  opacity: 0;
}

.cube-right-enter-to {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
}

.cube-right-leave-from {
  transform: perspective(800px) rotateY(0deg);
  opacity: 1;
}

.cube-right-leave-to {
  transform: perspective(800px) rotateY(-90deg);
  opacity: 0;
}