.c-block {
  $duration: 1s;
  $delay: 0.3s;

  > .c-block__bg {
    will-change: transform;
    transform-origin: 100% 100%;
    transition: transform $duration;
    transform: scale3d(1, 1, 1);
  }

  &.state-1 > .c-block__bg {
    transform-origin: 100% 100%;
    transition: transform $duration;
    transform: scale3d(0.5, 1, 1);
  }

  &.state-2 > .c-block__bg {
    transform-origin: 100% 100%;
    transform-origin: 100 100;
    transition: transform $duration;
    transform: scale3d(0.5, 0.5, 1);
  }

  > .c-block__img {
    will-change: opacity, transform;
    transform-origin: 0 0;
    transition: opacity $duration $delay ease-in, transform $duration;
    opacity: 1;
    transform: none;
  }

  &.state-1 > .c-block__img {
    transition: opacity $duration $delay ease-out, transform $duration;
    opacity: 0;
    transform: translate(50%, 0) scale(1.3);
  }

  &.state-2 > .c-block__img {
    opacity: 0;
    transform: translate(50%, 50%) scale(2);
  }
}

// vim:set filetype=scss: