@import "../../assets/scss/variables";

.component-portfolio {
  padding-top: 140px;

  .box {
    position: relative;
    display: flex;
    //background: $black-alpha;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px 0;
    padding: 40px 20px;
    min-height: 250px;
    cursor: pointer;
    transition: transform .4s, background .4s;
    -webkit-backface-visibility: hidden;

    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%) scale(1.2);
      opacity: .5;
      filter: grayscale(100%) invert(100%);
      transition: transform .4s, opacity .4s, filter .4s;
      -webkit-backface-visibility: hidden;
      z-index: 0;
    }

    .text {
      display: block;
      margin: auto;
      text-align: center;
      transform: translate(0%, 0%);
      color: $black;
      transition: color .4s;
      -webkit-backface-visibility: hidden;
      z-index: 1;

      .title {
        display: block;
        font-size: $font-20;
        text-transform: uppercase;
        font-weight: bold;
      }

      .type {
        display: block;
        font-size: $font-16;
        font-weight: bold;
      }

      .tags {
        display: block;
        font-size: $font-12;
        text-transform: uppercase;
        font-weight: bold;
        padding-top: 10px;
      }
    }

    @each $angle in 0,1,2,3,4,5,6 {
      &.skew-#{$angle} {
        transform: skew(#{$angle - 3}deg, #{$angle - 3}deg);
        /*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards;
        @keyframes zoom#{$angle} {
          0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
          50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
          75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
          100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); }
        }*/
      }
    }

    &:hover {
      background: $black;
      z-index: 50;

      //animation-play-state: paused;

      @each $angle in 0,1,2,3,4,5,6 {
        &.skew-#{$angle} {
          transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg);
        }
      }

      .image {
        filter: grayscale(100%) invert(0%) brightness(.5);
        opacity: .9;
        transform: translate(-50%, -50%) scale(1.6);
      }
      .text {
        color: $yellow;
      }
    }
  }
}