.transition {
  position: fixed;
  width: var(--vw);
  height: var(--vh);
  inset: 0;

  z-index: 100;

  background: var(--white);

  padding: 16px;
  transition: transform .2s var(--ease-out-quad), opacity .2s .2s var(--ease-out-quad), clip-path .2s var(--ease-out-quad);
  clip-path: inset(0% 0% round 0px);
  /* opacity: 0; */

  &.start {
    opacity: 1;
    clip-path: inset(0% 0% round 0px);
  }
}

.transition~main,
.transition~header,
.transition~footer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s .1s var(--ease-out-quad), transform .4s .1s var(--ease-out-quad) !important;
}

.transition.end {
  opacity: 0;
  clip-path: inset(5% 5% round 24px);

}

.transition~main,
.transition~header,
.transition~footer {
  transform: translateY(0);
  opacity: 1;
}

.transition-inner {

  width: 100%;
  height: 100%;

  background: var(--lighter-pink);

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 24px;
}

.transition svg {
  width: 200px;
  height: 150px;
  transform: translateY(20%);
}

.transition .person {
  transform-origin: center;
  animation: pathPulse 1.2s ease-in-out infinite;
}

.transition .person:nth-of-type(2) {
  animation-delay: 0.15s;
}

.transition .person:nth-of-type(3) {
  animation-delay: 0.3s;
}

.transition .person:nth-of-type(4) {
  animation-delay: 0.45s;
}

.transition .person:nth-of-type(5) {
  animation-delay: 0.6s;
}

.transition .person:nth-of-type(6) {
  animation-delay: 0.75s;
}

@keyframes pathPulse {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(1.15);
  }
}