/* Efek dasar untuk gambar transisi */
.group-left img.apply-transition {
  animation: fadeIn 2s ease forwards;
}

/* Variasi efek tambahan */
.group-left img.shape-transition {
  animation: shapeTransition 2s ease forwards;
}
.group-left img.linear-transition {
  animation: linearTransition 2s ease forwards;
}
.group-left img.page-curl {
  animation: pageCurl 2s ease forwards;
  transform-origin: left center;
}
.group-left img.move-rectangle {
  animation: moveRectangle 2s ease forwards;
}

/* Keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shapeTransition {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes linearTransition {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes pageCurl {
  from { transform: rotateY(90deg); opacity: 0; }
  to   { transform: rotateY(0); opacity: 1; }
}
@keyframes moveRectangle {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}