// keyframes : arrows
@keyframes arrows {
  0% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%)
  }

  10% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: translateX(60%);
    transform: translateX(60%)
  }

  85% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(65%);
    transform: translateX(65%)
  }

  90% {
    -webkit-transform: translateX(110%);
    transform: translateX(110%)
  }

  100% {
    -webkit-transform: translateX(150%);
    transform: translateX(150%)
  }
}

// keyframes : arrows - small
@keyframes arrows-small {
  0% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(-110%);
    transform: translateX(-110%)
  }

  10% {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-transform: translateX(60vw);
    transform: translateX(60vw)
  }

  70% {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transform: translateX(65vw);
    transform: translateX(65vw)
  }

  75% {
    -webkit-transform: translateX(140vw);
    transform: translateX(140vw)
  }

  100% {
    -webkit-transform: translateX(180vw);
    transform: translateX(180vw)
  }
}

// animation code
.animation--arrows {
  bottom: 0;
  font-size: 21px; // font-size determines arrow size
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

.animation__arrow {
  animation: arrows 6s 1.5s infinite;
  color: currentColor;
  transform: translateX(-110%);
  width: 100vw;
  will-change: transform
}

.animation__arrow-inner {
  background: currentColor;
  border-radius: 2em;
  display: block;
  height: 4em;
  margin-top: 6em;
  position: relative;
  width: 13.5em;

  &::before,
  &::after {
    background: currentColor;
    border-radius: 2em;
    content: '';
    height: 4em;
    position: absolute;
    right: -1.3em;
    width: 10em
  }

  &::before {
    top: -2.2em;
    transform: rotate(45deg)
  }

  &::after {
    right: -1.3em;
    top: 2.1em;
    transform: rotate(135deg)
  }
}
// arrow 1
.animation__arrow--1 {
  color: $color-brand--five;

  // specific background mapping
  .bg-brand--red & {
    color: $color-brand--six;
  }

  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    color: $color-brand--two;
  }
}

// arrow 2
.animation__arrow--2 {
  animation-delay: 1.6s;
  color: $color-brand--six;

  // specific background mapping
  .bg-brand--red & {
    color: $color-brand--two;
  }

  .bg-brand--yellow & {
    color: $color-brand--four;
  }

  .animation__arrow-inner {
    margin: 6em 0 0 -7em;
  }
}

// arrow 3
.animation__arrow--3 {
  animation-delay: 1.7s;
  color: $color-brand--three;

  // specific background mapping
  .bg-brand--red & {
    color: $color-brand--six;
  }

  .bg-brand--blue &,
  .bg-brand--turquoise &,
  .bg-brand--yellow & {
    color: $color-brand--two;
  }

  .animation__arrow-inner {
    margin: 6em 0 0 -14em;
  }
}

// viewport s
@include viewport--l('inversed') {
  .animation--arrows {
    font-size: 12px;
    top: $navigation-height;
  }

  .animation__arrow {
    animation-name: arrows-small;
  }
}
