/**************************
* ANIMATIONS             
**************************/
@keyframes heartbeat {
  0% { transform: scale(1); opacity:1;  }
  2% { transform: scale(1.1); }
  4% { transform: scale(1); }
  6% { transform: scale(1.2); }
  9% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes wiggle {
  0% { transform: translateX(0px); opacity:1; }
  1% { transform: translateX(-5px); }
  2% { transform: translateX(5px); }
  4% { transform: translateX(-5px); }
  5% { transform: translateX(5px); }
  6% { transform: translateX(0px); }
  100% {  transform: translateX(0px);}
}

@keyframes blink {
  0% { opacity:1; }
  3% { opacity:0.1; }
  6% { opacity:1; }
  10% { opacity:0.1; }
  100% { opacity:1; }
}

@keyframes blink-steady {
  0% { opacity:1; }
  50% { opacity:1; }
  75% { opacity:0.1; }
  100% { opacity:1; }
}

@keyframes bounce {
  0% {
    transform:translateY(-100%);
    opacity: 0;
  }
  1% {
    transform:translateY(-100%);
    opacity: 0;
  }
  3% {
    transform:translateY(0);/*     padding-bottom: 5px; */
  }
  6% {
    transform:translateY(-50%);
  }
  8% {
    transform:translateY(0%);/*     padding-bottom: 6px; */
  }
  10% {
    transform:translateY(-30%);
  }
  14% {
    transform:translateY(0%);/*     padding-bottom: 7px; */
  }
  16% {
    transform:translateY(-15%);
  }
  18% {
    transform:translateY(0%);/*     padding-bottom: 8px; */
  }
  19% {
    transform:translateY(-7%);
  }
  20% {
    transform:translateY(0%);/*     padding-bottom: 9px; */
  }
  21% {
    transform:translateY(-3%);
  } 
  22% {
    transform:translateY(0);      
    opacity: 1;
  }
  100% {
    transform:translateY(0);/*     padding-bottom: 9px; */
  }
}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}

@keyframes fade{
  from{opacity:1;}
  to{opacity:0;}
}
 
@keyframes fade-down{
  from{
    opacity:1;
  }
  to{
    opacity:0; 
    transform: translateY(500px); 
  }
}
@keyframes fade-up{
  from{
    opacity:1;
  }
  to{
    opacity:0; 
    /* transform: translateY(500px);  */
    top:-90%;
  }
}
 
@keyframes pulseTextYellowHalo{
  0% { text-shadow:unset; }
  50% { text-shadow:unset; }
  80% { text-shadow:0px 0px 1px black,0px 0px 5px yellow; }
  100% { text-shadow:unset; }
}
 
@keyframes pulseTextRed{
  0% { color:unset; }
  50% { color:unset; }
  80% { color:firebrick; }
  100% { color:unset; }
}
 

@keyframes pulse0 {
  0% { transform: scale(1); opacity:1;  }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes pulse1 {
  0% { transform: scale(1); opacity:1;  }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes pop {
  0% { transform: scale(1); opacity:1;  }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ~~~\| @EXTRACT 20180725 JAB: make into "RadialPulse" component */
 @keyframes radiate {
	0% {
		opacity:0.1;
		transform: scale(0.1);
  }  
	40% {		
    opacity:0.8;
  }
	100% {
		transform: scale(1);
    /* border: 1px solid transparent; */
    border-color: rgba(89, 241, 89, 0.2);
    box-shadow: inset 0 0 40px 1px rgba(251, 255, 0, 0.733);
    opacity:0.1;
	}
}
.circle-e-base{
  pointer-events:none;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 150%;
  height: 150%;
  top: -25%; /* JAB: maybe offset towards the top to compensate for optical illusion caused by title text */
  left: -25%;  
}
.circle-e {
  border: 1px solid rgba(89, 241, 89, 0.589);
  border-radius: 50%;
  position: absolute;
  box-shadow: inset 0 0 40px 1px rgb(0, 77, 128);
  width:90%; height:90%; left:5%; top:5%;
  /* animation: radiate 4s infinite ease-out; */
  animation: radiate 6s infinite cubic-bezier(0.2, 1, 0.8, 1.000);
  opacity:0.1;
}
.circle-e.ce1 {
  animation-delay:0s;
}
.circle-e.ce2 {
  animation-delay:2s;
}
.circle-e.ce3 {
  animation-delay:4s;
}
.circle-e.ce4 {
  animation-delay:6s;
}
/* ~~~/| @EXTRACT */

/**************************
* CLASSES TO APPLY ANIMATIONS
**************************/
.pulsing-text-red{
  animation: pulseTextRed 2s infinite;
}
.pulsing-text-yellow-halo{
  animation: pulseTextYellowHalo 2s infinite;
}
.wiggle{
  animation: wiggle 5s 3;
}
.wiggle-once{
  animation: wiggle 5s 1;
}
.bounce{
  animation: bounce 4s ease-out 3;
}
.bounce-once{
  animation: bounce 4s ease-out 1;
}
.heartbeat{
  animation: heartbeat 4s ease-out 3;
}
.heartbeat-once{
  animation: heartbeat 4s ease-out 1;
}
.blink-steady{
  animation: blink-steady 0.5s infinite; 
}
.fade-down-delayed-5{
  animation-delay: 5s;
  animation-name: fade-down;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
.fade-up{
  animation-name: fade-up;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}
.delayed-10s{
  animation-delay: 10s;
}

.pulse0{
  animation: pulse0 150ms ease-out 1;
}
.pulse1{
  animation: pulse1 150ms ease-out 1;
}