/* fade in headings */

.component-split .infoblock {
  transition-delay: 50ms;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 1s;
}

/* image swipe effects */

/* 01. first transition */

.component-split .image-wrapper {
  position: relative;
  isolation: isolate;
}
.component-split .image-wrapper:after {
  content: '';
  position: absolute;
  z-index: -2;
  background-color: #FFF;
  inset: 0;
  scale: 1 1;
  transition-delay: 500ms;
  transition-property: transform, scale;
  transition-duration: 950ms;
  transition-timing-function: ease-in-out;
  transform-origin: left;
}

.component-split.flex-row-reverse .image-wrapper::after {
  transform-origin: right;
}

.bg-dark .component-split .image-wrapper::after {
  background-color: #FFF;
}

.component-split .image-wrapper img {
  position: relative;
  z-index: -3;
}

.component-split .image-outer-wrapper.swipe .image-wrapper::after {
  scale: 0 1;
}

/* 02. second transition */

.component-split .image-outer-wrapper {
  position: relative;
  isolation: isolate;
}

.component-split .image-outer-wrapper:after {
  content: '';
  position: absolute;
  z-index: 0;
  background-color: rgba(255,255,255,0.8);
  inset: 0;
  scale: 1 1;
  transition-delay: 1s;
  transition-property: transform, scale;
  transition-duration: 600ms;
  transition-timing-function: ease-in-out;
  transform-origin: left;
}

.component-split .image-outer-wrapper.swipe::after {
  scale: 0 1;
}

.component-split.flex-row-reverse .image-outer-wrapper::after {
  transform-origin: right;
}