.dialog--open .dialog__overlay {
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.dialog--close .dialog__overlay {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.dialog__content {
  padding: 0;
  background: 0 0;
}
.dialog.dialog--open .dialog__content {
  opacity: 1;
}
.morph-shape {
  position: absolute;
  width: calc(100%);
  height: calc(100%);
  top: 0;
  left: 0;
  z-index: -1;
}
.morph-shape svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 1680;
}
.dialog--open .morph-shape svg rect {
  -webkit-animation: anim-dash 0.6s forwards;
  animation: anim-dash 0.6s forwards;
}
.dialog-inner {
  opacity: 0;
  background: #fff;
}
.dialog--open .dialog-inner {
  padding: 4em;
  opacity: 1;
  -webkit-transition: opacity 0.85s 0.35s;
  transition: opacity 0.85s 0.35s;
}
.dialog.dialog--open h2 {
  -webkit-animation: anim-elem-1 0.7s ease-out both;
  animation: anim-elem-1 0.7s ease-out both;
}
.dialog.dialog--open button {
  -webkit-animation: anim-elem-2 0.7s ease-out both;
  animation: anim-elem-2 0.7s ease-out both;
}
@keyframes anim-dash {
  0% {
    stroke-dashoffset: 1680;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes anim-dash {
  0% {
    stroke-dashoffset: 1680;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes anim-elem-1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-150px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes anim-elem-1 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes anim-elem-2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(150px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes anim-elem-2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}