/* =========================================================
   FULL WIDTH CONTENT / IMAGE SECTION
========================================================= */

.cis-content-image {
  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;
}


.cis-content-image__image-column {
  padding: 56px;
}


/* =========================================================
   FULL WIDTH DECORATIVE BACKGROUND
========================================================= */

.cis-content-image__background {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  background-image: var(--cis-content-bg);

  background-size: contain;

  background-repeat: no-repeat;

  pointer-events: none;

  box-sizing: border-box;
}


/* =========================================================
   LEFT ARRANGEMENT
========================================================= */

.cis-content-image--left
.cis-content-image__background {
  background-position: left center;
}


/* =========================================================
   RIGHT ARRANGEMENT
========================================================= */

.cis-content-image--right
.cis-content-image__background {
  background-position: right center;
}


/* =========================================================
   INNER CONTENT
========================================================= */

.cis-content-image__inner {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 1440px;

  margin-left: auto;
  margin-right: auto;

  min-width: 0;

  box-sizing: border-box;
}


/* =========================================================
   COLUMN SAFETY
========================================================= */

.cis-content-image__image-column,
.cis-content-image__copy-column {
  min-width: 0;
}


/* =========================================================
   IMAGE WRAP
========================================================= */

.cis-image-wrap {
  position: relative;

  isolation: isolate;

  width: 100%;
  max-width: 620px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;
}


/* =========================================================
   ACF IMAGE
========================================================= */

.cis-image {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;
  height: auto;

  max-width: 620px;
  max-height: 620px;

  margin-left: auto;
  margin-right: auto;

  object-fit: contain;

  box-sizing: border-box;

  will-change:
    opacity,
    transform;
}


/* =========================================================
   IMAGE FROM LEFT

   Used when image is physically on LEFT.
========================================================= */

.cis-image.cis-image-from-left {
  opacity: 0;

  transform: translateX(-70px);

  animation:
    cisImageFromLeft
    0.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.2s
    forwards;
}


@keyframes cisImageFromLeft {

  0% {
    opacity: 0;

    transform:
      translateX(-70px);
  }


  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}


/* =========================================================
   IMAGE FROM RIGHT

   Used when image is physically on RIGHT.
========================================================= */

.cis-image.cis-image-from-right {
  opacity: 0;

  transform: translateX(70px);

  animation:
    cisImageFromRight
    0.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.2s
    forwards;
}


@keyframes cisImageFromRight {

  0% {
    opacity: 0;

    transform:
      translateX(70px);
  }


  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}


/* =========================================================
   DECORATIVE BLOB LAYER
========================================================= */

.cis-blob-layer {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;
}


.cis-blob-layer--right {
  transform: scaleX(-1);
}


/* =========================================================
   BLOBS
========================================================= */

.cis-blob {
  position: absolute;

  max-width: none;

  user-select: none;

  pointer-events: none;
}


.cis-blob-1 {
  top: -14%;
  left: -20%;

  width: 78%;

  transform: rotate(-8deg);
}


.cis-blob-2 {
  bottom: -16%;
  left: -16%;

  width: 62%;

  transform: rotate(10deg);
}


.cis-blob-3 {
  top: 18%;
  left: -10%;

  width: 54%;

  transform: rotate(-4deg);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1023px) {

  .cis-content-image__background {
    background-size: contain;

    background-repeat: no-repeat;
  }


  .cis-content-image--left
  .cis-content-image__background {
    background-position: left center;
  }


  .cis-content-image--right
  .cis-content-image__background {
    background-position: right center;
  }


  .cis-image-wrap {
    width: 100%;

    max-width: 620px;
  }


  .cis-image {
    width: 100%;
    height: auto;

    max-width: 620px;
    max-height: 620px;

    object-fit: contain;
  }


  .cis-content-image__image-column {
    padding: 0;
  }


  .cis-blob-1 {
    top: -10%;
    left: -12%;

    width: 60%;
  }


  .cis-blob-2 {
    bottom: -10%;
    left: -10%;

    width: 48%;
  }


  .cis-blob-3 {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .cis-content-image {
    width: 100%;

    overflow: hidden;
  }


  .cis-content-image__background {
    width: 100%;
    height: 100%;

    background-size: contain;

    background-repeat: no-repeat;
  }


  .cis-content-image--left
  .cis-content-image__background {
    background-position: left top;
  }


  .cis-content-image--right
  .cis-content-image__background {
    background-position: right top;
  }


  .cis-image-wrap {
    width: 100%;

    max-width: 620px;
  }


  .cis-image {
    width: 100%;
    height: auto;

    max-width: 620px;
    max-height: 620px;

    object-fit: contain;
  }


  /*
   * Smaller movement on mobile.
   */

  .cis-image.cis-image-from-left {
    transform: translateX(-35px);

    animation-name:
      cisImageFromLeftMobile;
  }


  .cis-image.cis-image-from-right {
    transform: translateX(35px);

    animation-name:
      cisImageFromRightMobile;
  }


  .cis-blob-1 {
    top: -6%;
    left: -6%;

    width: 52%;
  }


  .cis-blob-2 {
    bottom: -6%;
    left: -6%;

    width: 42%;
  }

}


/* =========================================================
   MOBILE ANIMATIONS
========================================================= */

@keyframes cisImageFromLeftMobile {

  0% {
    opacity: 0;

    transform:
      translateX(-35px);
  }


  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}


@keyframes cisImageFromRightMobile {

  0% {
    opacity: 0;

    transform:
      translateX(35px);
  }


  100% {
    opacity: 1;

    transform:
      translateX(0);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .cis-image.cis-image-from-left,
  .cis-image.cis-image-from-right {
    opacity: 1;

    transform: none;

    animation: none;
  }

}