/*
  Getting Started Collector Graphic
  ------------------------------------------------------------------------------
*/

$collector-graphic-anim-time: 0.1s;

.collector-graphic--bg {
  fill: mix($c-void, $c-sapphire, 70%);
}

.collector-graphic--bucket {
  fill: $c-neutrino;
  transition: fill 0.4s ease;
}

.collector-graphic--bucket-hole {
  fill: $c-laser;
  transition: fill 0.4s ease;
}

.collector-graphic--cubo {
  transform: rotate(17deg);
}

.collector-graphic--data {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.data-a,
.data-b,
.data-c,
.data-d,
.data-e {
  stroke-width: 2px;
}

.dot-a {
  fill: $c-rainforest;
}
.dot-b {
  fill: $c-thunder;
}
.dot-c {
  fill: $c-pool;
}
.dot-d {
  fill: $c-comet;
}
.dot-e {
  fill: $c-dreamsicle;
}

.data-a {
  stroke: $c-rainforest;
  stroke-dasharray: 146;
  stroke-dashoffset: 0;
}

.data-b {
  stroke: $c-thunder;
  stroke-dasharray: 102;
  stroke-dashoffset: 0;
}

.data-c {
  stroke: $c-pool;
  stroke-dasharray: 81;
  stroke-dashoffset: 0;
}

.data-d {
  stroke: $c-comet;
  stroke-dasharray: 102;
  stroke-dashoffset: 0;
}

.data-e {
  stroke: $c-dreamsicle;
  stroke-dasharray: 146;
  stroke-dashoffset: 0;
}

@keyframes dataOuterFlow {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 146;
  }
  100% {
    stroke-dashoffset: 292;
  }
}
@keyframes dataInnerFlow {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 102;
  }
  100% {
    stroke-dashoffset: 204;
  }
}
@keyframes dataCenterFlow {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: 81;
  }
  100% {
    stroke-dashoffset: 162;
  }
}

.collector-graphic--cubo {
  transform-origin: 161px 161.6px;
}

.collector-graphic--cubo-line {
  transition: stroke 0.25s ease;
  stroke-width: 1.5px;
  stroke: $c-void;
  fill: none;
}

/* Hover State */
.getting-started--image__animating{
  .collector-graphic--bucket {
    fill: $g20-white;
  }
  .collector-graphic--bucket-hole {
    fill: $c-neutrino;
  }
  .collector-graphic--cubo-line {
    stroke: $c-star;
  }
  .data-a,
  .data-b,
  .data-c,
  .data-d,
  .data-e {
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: reverse;
  }
  .data-a {
    animation-name: dataOuterFlow;
    animation-delay: $collector-graphic-anim-time * 0;
  }
  .data-b {
    animation-name: dataInnerFlow;
    animation-delay: $collector-graphic-anim-time * 1;
  }
  .data-c {
    animation-name: dataCenterFlow;
    animation-delay: $collector-graphic-anim-time * 2;
  }
  .data-d {
    animation-name: dataInnerFlow;
    animation-delay: $collector-graphic-anim-time * 3;
  }
  .data-e {
    animation-name: dataOuterFlow;
    animation-delay: $collector-graphic-anim-time * 4;
  }
}
