.directionality__inner {
  pointer-events: none;
  opacity: 0;
}

.directionality__inner a {
  pointer-events: all;
}

.in-top .directionality__inner,
.in-right .directionality__inner,
.in-bottom .directionality__inner,
.in-left .directionality__inner,
.out-top .directionality__inner,
.out-right .directionality__inner,
.out-bottom .directionality__inner,
.out-left .directionality__inner {
  opacity: 1;
}

.in-top .directionality__inner {
  top: 0; bottom: auto;
  animation: in-top 0.3s ease 0ms 1 forwards;
}

.in-right .directionality__inner {
  right: 0; left: auto;
  animation: in-right 0.3s ease 0ms 1 forwards;
}

.in-bottom .directionality__inner {
  bottom: 0; top: auto;
  animation: in-bottom 0.3s ease 0ms 1 forwards;
}

.in-left .directionality__inner {
  left: 0; right: auto;
  animation: in-left 0.3s ease 0ms 1 forwards;
}

.out-top .directionality__inner {
  top: 0; bottom: auto;
  animation: out-top 0.3s ease 0ms 1 forwards;
}

.out-right .directionality__inner {
  right: 0; left: auto;
  animation: out-right 0.3s ease 0ms 1 forwards;
}

.out-bottom .directionality__inner {
  bottom: 0; top: auto;
  animation: out-bottom 0.3s ease 0ms 1 forwards;
}

.out-left .directionality__inner {
  left: 0; right: auto;
  animation: out-left 0.3s ease 0ms 1 forwards;
}

@keyframes in-top {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

@keyframes in-right {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes in-bottom {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

@keyframes in-left {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes out-top {
  from {
    height: 100%;
  }
  to {
    height: 0%;
  }
}

@keyframes out-right {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes out-bottom {
  from {
    height: 100%;
  }
  to {
    height: 0%;
  }
}

@keyframes out-left {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}