.work-list {
  position: relative;
  transition: all 0.4s linear;
  z-index: -1;

  .work-section > div:not(.active) {
    opacity: 0;
  }

  &.active {
    background-color: $gray-001;
    z-index: 10;

    .work-section > div {
      opacity: 1;
    }

    .work-section .work-section-item.item-two {
      figcaption {
        opacity: 1;
      }

      .image-mask {
        transform: translateY(0);
      }
    }
  }

  @include tablet-only-home {
    z-index: 2;
  }

  @include mobile {
    z-index: 2;
  }
}

.work-counter {
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s linear;
  z-index: 2;

  h5 {
    @extend .body-regular;
    color: $gray-004;
    margin: 0 0 0 28px;
    display: block;

    .arrow {
      display: none;
      margin-left: 8px;
    }
  }

  .project {
    @extend .h2;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: $gray-003;
    font-weight: 100!important;

    .current {
      position: relative;
      color: $gray-002;

      .icon {
        display: block;
        position: absolute;
        width: 100%;
        cursor: pointer;

        &.icon-up {
          top: -45px;
        }

        &.icon-down {
          bottom: -25px;
        }
      }

      svg {
        position: relative;
        display: block;
        margin: 0 auto;
        path { fill: $gray-002; }
        z-index: -1;
      }
    }

    .total {
      &.desktop {
        display: block;

        @include tablet-only-home {
          display: none;
        }

        @include mobile {
          display: none;
        }
      }

      &.mobile {
        display: none;

        @include tablet-only-home {
          display: block;
        }

        @include mobile {
          display: block;
        }
      }
    }
  }

  &.active {
    opacity: 1;
  }

  &.active-mobile {

    @include tablet-only-home {
      opacity: 1;
    }

    @include mobile {
      opacity: 1;
    }
  }

  @include small-desktop {
    left: 40px;

    h5 {
      margin: 0;
      font-size: 22px!important;
      line-height: 22px!important;
    }
  }

  @include tablet-only-home {
    position: static;
    top: auto;
    left: auto;
    transform: translateY(0);
    padding: 0 12px 120px;
    background-color: $white;
    margin-top: -1px;
    opacity: 0;

    .project {
      display: none;
      line-height: 60px!important;

      .current .icon {
        display: none!important;
      }
    }

    h5 {
      margin: 0;
      display: flex;
      align-items: center;
      font-size: 24px!important;
      line-height: 24px!important;
      font-weight: 200!important;

      .arrow {
        display: block;
        width: 12px;
        height: 19px;
      }
    }
  }

  @include mobile {
    position: static;
    top: auto;
    left: auto;
    transform: translateY(0);
    padding: 0 12px 50px;
    background-color: $white;
    margin-top: -1px;
    opacity: 0;

    .project {
      display: none;
      line-height: 32px!important;

      .current .icon {
        display: none!important;
      }
    }

    h5 {
      margin: 0;
      display: flex;
      align-items: center;

      .arrow {
        display: block;
        width: 8px;
        height: 11px;

        svg {
          transform: scale(0.6);
          transform-origin: top left;
        }
      }
    }
  }
}

.work-section-mobile {
  position: relative;
  display: none;
  padding: 25px 0 0;
  z-index: 10;
  background-color: $gray-001;
  opacity: 0;
  transition: opacity 0.25s linear;

  .work-section-mobile-item {
    flex: 0 0 159px;
    margin-right: 30px;
    text-decoration: none;

    .image {
      height: 222px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
    }

    &:first-child {
      margin-left: 12px;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  figcaption {
    @extend .title;

    display: flex;
    color: $gray-004;
    margin-top: 25px;

    .icon {
      align-self: flex-start;
      display: block;
      width: 12px;
      height: 19px;
      margin-right: 8px;
    }
  }

  & > div {
    display: flex;
    overflow-x: auto;
    padding-bottom: 25px;
  }

  @include tablet-only-home {
    display: block;

    figcaption {
      width: 230px;
    }

    .work-section-mobile-item {
      flex: 0 0 296px;

      .image {
        height: 412px;
      }
    }

    & > div {
      margin-top: -130px;
    }
  }

  @include mobile {
    display: block;

    & > div {
      margin-top: -65px;
    }
  }

  &.active {
    opacity: 1;
  }
}

.work-section {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;

  & > div {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  & > div.active {
    z-index: 10;
  }

  @include tablet-only-home {
    display: none;
  }

  @include mobile {
    display: none;
  }
}

.work-section-item {
  width: 384px;
  opacity: 0;
  transition: opacity 0.25s linear;
  cursor: pointer;

  figure {
    display: block;
    width: 100%;
    transition: transform 0.5s cubic-bezier(.19,1,.22,1);
  }

  figcaption {
    @extend .title;

    display: flex;
    justify-items: flex-start;
    align-items: flex-start;
    color: $gray-004;
    transition: 0.25s opacity linear;

    .icon {
      display: block;
      font-size: 0;
      width: 12px;
      margin-right: 10px;
    }

    .text {
      width: 188px;
    }
  }

  .image-mask {
    position: relative;
    width: 100%;
    height: 535px;
    z-index: 10;
  }

  .image-mask-inner {
    position: absolute;
    height: 535px;
    width: 384px;
    transition: all 0.25s linear;
    z-index: 10;
  }

  .img {
    position: absolute;
    top: 0;
    width: 384px;
    height: 535px;
    background-size: cover;
    transition: width 0.25s linear;
  }

  .img-inner {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    transition: all 0.25s linear;
  }

  .image-link {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.25s linear;

    span {
      @extend .navigation;

      display: block;
      padding-top: 24px;
      width: 264px;
      color: $white;
      text-align: center;
      border-top: 1px solid white;
      cursor: pointer;
    }
  }

  &.item-one {
    margin-right: 100px;

    figcaption {
      margin-top: 32px;
    }

    .img {
      left: 0;
      background-position: center center;
    }

    .img-inner {
      right: 0;
    }

    .image-mask-inner {
      right: 0;
    }

    &:hover {
      figcaption {
        opacity: 0;
      }

      .image-mask-inner {
        width: 434px;
      }

      .img {
        width: 744px;
      }

      .image-link {
        opacity: 1;
      }
    }
  }

  &.item-two {
    figcaption {
      margin-top: 116px;
      margin-bottom: 32px;
    }

    .img {
      right: 0;
      background-position: center center;
    }

    .img-inner {
      left: 0;
    }

    .image-mask-inner {
      left: 0;
    }

    &:hover {
      figcaption {
        opacity: 0!important;
      }

      .image-mask-inner {
        width: 434px;
      }

      .img {
        width: 744px;
      }

      .image-link {
        opacity: 1;
      }
    }
  }

  @include small-desktop {
    width: 258px;

    .image-mask {
      height: 360px;
    }

    .image-mask-inner {
      height: 360px;
      width: 258px;
    }

    .img {
      height: 360px;
      width: 258px;
    }

    &.item-one {
      margin-right: 63px;

      &:hover {
  
        .image-mask-inner {
          width: 258px;
        }
  
        .img {
          width: 258px;
        }

        .image-link {
          opacity: 0;
        }
      }
    }

    &.item-two {
      &:hover {

        .image-mask-inner {
          width: 258px;
        }
  
        .img {
          width: 258px;
        }

        .image-link {
          opacity: 0;
        }
      }
    }
  }
}

.work-section-item.blur {
  opacity: 0.5!important;

  figcaption {
    opacity: 0!important;
  }

  &.item-one {
    figure {
      transform: translateX(-20px);
    }
  }

  &.item-two {
    figure {
      transform: translateX(20px);
    }
  }
}

.work-section-item.change-view {
  .img {
    background-image: none!important;
  }

  .image-link {
    opacity: 0!important;
  }

  .img-inner {
    width: 0;
    opacity: 0;
  }
}

.work-section-item.change-view-opposite {

  &.item-one {
    .image-mask-inner {
      opacity: 0;
      transform: translateY(-50px);
    }
  }

  &.item-two {
    .image-mask-inner {
      opacity: 0;
      transform: translateY(50px);
    }
  }
}

.work-section-item.send-to-back {
  z-index: -1;
}

.work-section {
  &.active {
    z-index: 2;
  }


  & > div.fade-out {
    .work-section-item.item-one {
      animation: fadeOutOne 1s cubic-bezier(.19,1,.22,1) forwards!important;
    }

    .work-section-item.item-two {
      animation: fadeOutTwo 1s cubic-bezier(.19,1,.22,1) forwards!important;
    }
  }

  & > div.fade-in {
    .work-section-item.item-one {
      animation: fadeInOne 1s cubic-bezier(.19,1,.22,1) forwards;
    }

    .work-section-item.item-two {
      animation: fadeInTwo 1s cubic-bezier(.19,1,.22,1) forwards;
    }
  }

  & > div.fade-out-opposite {
    .work-section-item.item-one {
      animation: fadeOutOneOpposite 1s cubic-bezier(.19,1,.22,1) forwards!important;
    }

    .work-section-item.item-two {
      animation: fadeOutTwoOpposite 1s cubic-bezier(.19,1,.22,1) forwards!important;
    }
  }

  & > div.fade-in-opposite {
    .work-section-item.item-one {
      animation: fadeInOneOpposite 1s cubic-bezier(.19,1,.22,1) forwards;
    }

    .work-section-item.item-two {
      animation: fadeInTwoOpposite 1s cubic-bezier(.19,1,.22,1) forwards;
    }
  }
}

@keyframes fadeInOne {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInTwo {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInOneOpposite {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInTwoOpposite {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutOne {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(50px);
  }
}

@keyframes fadeOutTwo {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

@keyframes fadeOutOneOpposite {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-50px);
  }
}

@keyframes fadeOutTwoOpposite {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(50px);
  }
}

.work-section-gallery {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 535px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-out;

  .work-section-gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 535px;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.5s ease-out;

    &.active {
      opacity: 1;
    }
  }
}