/*

########################################
### MOLECULE: format-visual-websites ###
########################################

*/

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

@import '../atoms/component-frame.scss';

.#{molecule('format-visual-websites')} {
  padding: 0;
  grid-template-columns: 11.1fr 32.4fr 18.1fr 32.1fr 7fr;
  grid-template-rows: 3.5fr 56.3fr 25.1fr 12.3fr 3.3fr;

  &:after {
    transform-origin: left bottom;
    animation: 10s ease-in-out 3.5s infinite both rotateShadow;
  }

  .#{molecule('format-visual')} {
    &-bottom-image {
      grid-column: 2 / 5;
      grid-row: 1 / 5;
      max-width: 8.125em;
      transform: translate3d(0%, 3%, 0) scale(0.9);
      animation: none;

      @media (min-width: 768px) {
        max-width: 100%;
      }
    }

    &-top-image {
      grid-column: 3 / 6;
      grid-row: 2 / 6;
      max-width: 5.625em;
      @include component-frame-websites;
      box-shadow: 20px 40px 60px -5px rgba(0, 0, 0,0.25);
      animation: 10s ease-in-out 3.5s infinite both slide;

      @media (min-width: 768px) {
        max-width: 100%;
      }
    }

    &-code-snippet {
      font-size: 0.9rem;

      &-highlight {
        position: relative;
        color: #e6db74;

        span {
          position: absolute;
          left: 0;
          top: 0;

          &::before {
            content: '';
            position: absolute;
            display: block;
            width: calc(100% - 25px);
            height: 100%;
            top: -1px;
            left: 8px;
            z-index: -1;
            background-color: color('lav-magenta');
            animation: 10s ease-in-out 3.5s infinite both handleCodeMarker;
          }

          &::after {
            content: '>';
            color: #fff;
          }

          &:nth-child(1) { animation: 10s ease-in-out 3.5s infinite both handleValueRight; }
          &:nth-child(2) { animation: 10s ease-in-out 3.5s infinite both handleValueEmpty; }
          &:nth-child(3) { animation: 10s ease-in-out 3.5s infinite both handleValueLeft; }
        }
      }
    }
  }
}

@keyframes slide {
  0%, 9%, 18%, 36%, 90%, 100% { transform: translateX(0); }
  45%, 54%, 63%, 72%, 81% { transform: translateX(-90%); }
}

@keyframes rotateShadow {
  0%, 9%, 18%, 36%, 90%, 100% { transform: rotate(-5deg) scale(1, 1.1) skew(-25deg); }
  45%, 54%, 63%, 72%, 81% { transform: rotate(-10deg) scale(1, 1.1) skew(-22deg); }
}

@keyframes handleValueRight {
  0%, 18% { opacity: 1; }
  18.01%, 81% { opacity: 0; }
  81.01%, 100% { opacity: 1; }
}

@keyframes handleValueEmpty {
  0%, 18% { opacity: 0; }
  18.01%, 36% { opacity: 1; }
  36.01%, 72% { opacity: 0; }
  72.01%, 81% { opacity: 1; }
  81.01%, 100% { opacity: 0; }
}

@keyframes handleValueLeft {
  0%, 36% { opacity: 0; }
  36.01%, 72% { opacity: 1; }
  72.01%, 100% { opacity: 0; }
}

@keyframes handleCodeMarker {
  0% { opacity: 0; }
  9%, 36% { opacity: 1; }
  45%, 54% { opacity: 0; }
  63%, 81% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
