/*

#################################
### ORGANISM: fragment-slider ###
#################################

*/

@import '../../extends';
@import '../../functions';
@import '../../mixins';
@import '../../variables';


.#{organism('fragment-slider')} {
  &-images {
    grid-column: 4 / 25;
    width: 100%;
    padding: 8% 0;
    display: flex;
    transform: perspective(300em) rotateX(38deg) rotateY(0deg) rotateZ(-18deg) skewX(2deg);
    margin-left: 18%;
    @media (min-width: 768px) {
      margin-left: 0;
    }
    .slide {
      width: 50%;
      margin-right: 16vw;
      flex-shrink: 0;
      transform: scale(1);
      transition: transform 400ms, opacity 400ms, box-shadow 400ms;
      transition-delay: 400ms;
      transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
      @media (min-width: 768px) {
        width: 34%;
        margin-right: 8vw;
      }
      amp-img {
        transition: transform 400ms, opacity 400ms, box-shadow 400ms;
        box-shadow: 0 0 0 rgba(0,0,0,0);
        z-index: 2;
        &.small {
          position: absolute;
          width: 38%;
          z-index: 1;
          opacity: 0;
          transform: translate3d(100%, -180%, 0) scale(0.5);
          transition-delay: 0;
        }
      }
      &.active {
        amp-img {
          transform: scale(1.3);
          transition-delay: 800ms;
          box-shadow: -18px 25px 36px rgba(0,0,0,0.4);
        }
        .small {
          opacity: 1;
          box-shadow: -10px 14px 26px rgba(0,0,0,0.4);
          &01 { transform: translate3d(0, -360%, 0) scale(1.2); transition-delay: 800ms; }
          &02 { transform: translate3d(-30%, -40%, 0) scale(1.4); transition-delay: 850ms; }
          &03 { transform: translate3d(150%, 40%, 0) scale(1.3); transition-delay: 900ms; }
          &04 { transform: translate3d(0, 120%, 0) scale(1.2); transition-delay: 950ms; }
          &05 { transform: translate3d(130%, 190%, 0) scale(1.1); transition-delay: 1000ms; }
          &06 { transform: translate3d(20%, 260%, 0) scale(0.9); transition-delay: 1050ms; }
        }
      }
    }

    &.slide1 {
      .slide {
        transform: translateX(0);
      }
    }

    &.slide2 {
      .slide {
        transform: translateX(calc(-100% - 16vw));
        @media (min-width: 768px) {
          transform: translateX(calc(-100% - 8vw));
        }
      }
    }

    &.slide3 {
      .slide {
        transform: translateX(calc(-200% - 32vw));
        @media (min-width: 768px) {
          transform: translateX(calc(-200% - 16vw));
        }
      }
    }

    &.slide4 {
      .slide {
        transform: translateX(calc(-300% - 48vw));
        @media (min-width: 768px) {
          transform: translateX(calc(-300% - 24vw));
        }
      }
    }

    &.slide5 {
      .slide {
        transform: translateX(calc(-400% - 64vw));
        @media (min-width: 768px) {
          transform: translateX(calc(-400% - 32vw));
        }
      }
    }

    &.slide6 {
      .slide {
        transform: translateX(calc(-500% - 80vw));
        @media (min-width: 768px) {
          transform: translateX(calc(-500% - 40vw));
        }
      }
    }
  }
}
