/* Illustration animations */

:root {
  --bezier-pull-effect: cubic-bezier(1,0,0,1);
  --bezier-pulse-effect: cubic-bezier(.39,.58,.57,1);
}

/* This gets the start twinkling. */
@keyframes twinkle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* This animates the speed lines on DuckDuckGo */
@keyframes speed {
  from {
    opacity: 1;
    transform: translate(0, 0);
  }
  to {
    opacity: 0;
    transform: translate(8px, 8px);
  }
}

/* This is similar to 'speed' animation but tweaked to look
   like a shooting star. */
@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: translate(8px, 8px);
  }
  100% {
    opacity: 0;
    transform: translate(9px, 9px);
  }
}

/* This animates the 'is typing' indicator. */
@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}

/* DuckDuckGo Animations */

.duckduckgo-illustration .star {
  animation: twinkle .5s ease-in-out infinite alternate;
}

.duckduckgo-illustration .line {
  animation: speed 1s var(--bezier-pull-effect) infinite alternate;
}

.duckduckgo-illustration .star-delay {
  animation: twinkle .8s ease-in-out infinite alternate;
}

/* Brave Animations */

.brave-illustration .star {
  animation: twinkle .8s ease-in-out infinite alternate;
}

.brave-illustration .star-delay {
  animation: twinkle .4s ease-in-out infinite alternate;
}

/* ProtonVPN Animations */

.protonvpn-illustration .line {
  animation: shooting-star 1.7s var(--bezier-pull-effect) infinite;
}

.protonvpn-illustration .star {
  animation: twinkle .8s ease-in-out infinite alternate;
}

.protonvpn-illustration .star-delay {
  animation: twinkle .4s ease-in-out infinite alternate;
}

.protonvpn-illustration .star-delay-2 {
  animation: twinkle .7s ease-in-out infinite alternate;
}

/* Tresorit Animations */

.tresorit-illustration .star {
  animation: twinkle .8s ease-in-out infinite alternate;
}

.tresorit-illustration .star-delay {
  animation: twinkle .4s ease-in-out infinite alternate;
}

/* Threema Animations */

.circle-1 {
  opacity: 0.35;
  animation: fade 0.7s var(--bezier-pulse-effect) 0s infinite alternate-reverse;
}

.circle-2 {
  opacity: 0.35;
  animation: fade 0.7s var(--bezier-pulse-effect) 0.4s infinite alternate-reverse;
}

.circle-3 {
  opacity: 0.35;
  animation: fade 0.7s var(--bezier-pulse-effect) 0.8s infinite alternate-reverse;
}

.threema-illustration .star {
  animation: twinkle .8s ease-in-out infinite alternate;
}

.threema-illustration .star-delay {
  animation: twinkle .4s ease-in-out infinite alternate;
}

/* ProtonMail Animations */

.protonmail-illustration .star-delay-2 {
  animation: twinkle .7s ease-in-out infinite alternate;
}

.protonmail-illustration .star {
  animation: twinkle .5s ease-in-out infinite alternate;
}

.protonmail-illustration .star-delay {
  animation: twinkle .8s ease-in-out infinite alternate;
}