@keyframes heroAnimation {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.heroImage {
  animation: heroAnimation 0.5s forwards;
  backface-visibility: hidden;
  margin: 0 auto;
}

.logo {
  transform-origin: 50% 50%;
  stroke: var(--electron-color-light);
  stroke-width: 5;
  stroke-linecap: round;
}

.logoCircle {
  composes: logo;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}

.logoFilled {
  composes: logo;
  fill: var(--electron-color-light);
}

.logoLine {
  composes: logo;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
}

$logo-delay: 0.6s;
$logo-delay-diff: 0.1s;
$logo-duration: 1s;
$logo-all-delay: 9 * $logo-delay-diff + $logo-delay;

@keyframes logoAnimation {
  100% {
    stroke-dashoffset: 0;
  }
}

@for $i from 1 through 9 {
  .logo:nth-child(#{$i}) {
    $_duration: $logo-duration;
    $_delay: $logo-delay + ($logo-delay-diff * $i);

    animation: logoAnimation
      $_duration
      $_delay
      cubic-bezier(0.05, 0.35, 0.2, 1)
      forwards;
  }
}

.app {
  fill: var(--electron-color-light);
  transform-origin: 50% 50%;
}

// Ripple effect
$app-delay: $logo-all-delay;
$app-delay-diff: 0.04s;
$app-duration: 0.8s;
$app-opacity: 0.1;

@keyframes appAnimateLeft {
  0% {
    transform: scale(1) translateX(30px);
    opacity: $app-opacity;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
  }
  20% {
    transform: scale(1.1) translateX(20px);
    animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0.4;
  }
}

@keyframes allAnimateRight {
  0% {
    transform: scale(1) translateX(-30px);
    opacity: $app-opacity;
    animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5);
  }
  20% {
    transform: scale(1.1) translateX(-20px);
    animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1);
  }
  100% {
    transform: scale(1) translateX(0);
    opacity: 0.4;
  }
}

// Colorize and animate
@for $i from 1 through 15 {
  .app:nth-child(#{$i}) {
    $_delay: $app-delay + ($app-delay-diff * $i);

    @if $i % 2 == 0 {
      animation: appAnimateLeft $app-duration $_delay both;
    } @else {
      animation: allAnimateRight $app-duration $_delay both;
    }
  }
}
