.cards(data-active=3, data-current=3)
  .card
    .card__sibebar
      h2 Basic level
    .card__body
      ul
        li HTML/CSS/JavaScript
        li Internet basics
        li Dev tools basics
      a(href="#more") See more ⇝
      span Next card ⇝
  .card
    .card__sibebar
      h2 Intermediate level
    .card__body
      ul
        li Pug/Sass/ES6
        li WordPress
        li Git
      a(href="#more") See more ⇝
      span Next card ⇝
  .card
    .card__sibebar
      h2 Advanced level
    .card__body
      ul
        li Performance 
        li Accessibility 
        li JAMstack
      a(href="#more") See more ⇝
      span Next card ⇝

:root {
  --color-alpha: #FF3366;
  --color-beta: #12E09F;
  --color-gamma: #FAC2D4;
  --color-delta: #C2FAE8;
  --color-chi: #120207;
  --color-psi: #F7F8F8;
  --color-omega: #fff;
}

html {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  
  @media (max-width: 800px) {
    font-size: 14px;
  } 
}

.cards {
  position: relative;
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 4rem 4rem 0;
  padding: .5rem 2rem 1.5rem 1rem;
  border-radius: .2rem;
  background-color: var(--color-beta);
  border: 1px dotted var(--color-chi);
  position: relative;
  min-width: 13rem;
  min-height: 18rem;
  transform: translate(-1.5rem, -100%) skewX(-1deg);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), background-color .5s cubic-bezier(0.64, 0, 0.78, 0);
  max-width: calc(100vww - 4rem);
  z-index: 1;
  
  h2 {
    color: var(--color-chi);
  }
  
  ul {
    font-family: sans-serif;
    padding-left: 1em;
    margin: 1em 0;
  }
  
  li {
    font-size: 0.875rem;
    margin: .5em 0;
  }
  
  a {
    display: block;
    color: var(--color-chi);
    text-decoration: none;
    margin-top: 3rem;
    
    :hover,
    :focus,
    :active {
      text-decoration: none;
    }
  }
  
  span {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  
  [data-active="1"] &:not(:nth-of-type(1)),
  [data-active="2"] &:not(:nth-of-type(2)),
  [data-active="3"] &:not(:nth-of-type(3)) {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-alpha);
  }
  
  [data-active="1"] &:nth-of-type(1),
  [data-active="2"] &:nth-of-type(2),
  [data-active="3"] &:nth-of-type(3) {
    z-index: 0;
    transform: none;
  }
  
  [data-active="1"] & {
    &:nth-of-type(2) {
      transform: translate(2rem, 2rem);
      z-index: -1;
    }
  }
  
  [data-current="1"] & {
    &:nth-of-type(3) {
      transform: translate(4rem, 4rem);
      z-index: -2;
    }
  }
  
  [data-active="2"] & {
    &:nth-of-type(3) {
      transform: translate(2rem, 2rem);
      z-index: -1;
    }
  }
  
  [data-current="2"] & {
    &:nth-of-type(1) {
      transform: translate(4rem, 4rem);
      z-index: -2;
    }
  }
  
  [data-active="3"] & {
    &:nth-of-type(1) {
      transform: translate(2rem, 2rem);
      z-index: -1;
    }
  } 

  [data-current="3"] & {
    &:nth-of-type(2) {
      transform: translate(4rem, 4rem);
      z-index: -2;
    }
  }
}

@keyframes shuffle1 {
  73.33%,
  100% {
    transform: none;
    z-index: 0;
  }
  3.33% {
    transform: translate(-1.5rem, -100%) skewX(-1deg);    
    z-index: 1;
  }
  6.66%,
  36.66% {
    transform: translate(4rem, 4rem);
    z-index: -2;  
  }
  40%,
  70% {
    transform: translate(2rem, 2rem);
    z-index: -1;  
  }
}

@keyframes shuffle2 {
  6.66%,
  36.66% {
    transform: none;
    z-index: 0;
  }
  36.66% {
    transform: translate(-1.5rem, -100%) skewX(-1deg);    
    z-index: 1;
  }
  40%,
  70% {
    transform: translate(4rem, 4rem);
    z-index: -2;  
  }
  73.33%,
  100%,
  0%,
  3.33% {
    transform: translate(2rem, 2rem);
    z-index: -1;  
  }
}

@keyframes shuffle3 {
  33.33%, 
  63.33% {
    transform: none;
    z-index: 0;
  }
  63.33% {
    transform: translate(-1.5rem, -100%) skewX(-1deg);    
    z-index: 1;
  }
  66.66%,
  96.66% {
    transform: translate(4rem, 4rem);
    z-index: -2;  
  }
  100%,
  30% {
    transform: translate(2rem, 2rem);
    z-index: -1;  
  }
}

const $cards = document.querySelector('.cards');

if($cards) {
  let i = 0;
  setInterval(() => {
    const active = i++ % 3 + 1;
    $cards.setAttribute('data-active', active);
    $cards.removeAttribute('data-current');
    setTimeout(() => {
      $cards.setAttribute('data-current', active);
    }, 1000)
  }, 5000);
}