/* ==========================================================================
   Keyframe animations
   ========================================================================== */

@keyframes loadBar{
  0%{ width:10%; transform:translateX(-20%); }
  50%{ width:60%; }
  100%{ width:10%; transform:translateX(220%); }
}

@keyframes floatBlob{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(30px,-40px) scale(1.08); }
  66%{ transform: translate(-24px,26px) scale(.94); }
}

@keyframes floatChip{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

@keyframes mouseScroll{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:22px; }
  100%{ opacity:0; top:8px; }
}

@keyframes spinSlow{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.badge-exp b, .badge-exp span{ animation: counterUnspin 16s linear infinite; }
@keyframes counterUnspin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }
}

@keyframes rippleAnim{
  to{ transform: scale(3); opacity:0; }
}

@keyframes pulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(229,57,53,0.55); }
  70%{ box-shadow: 0 0 0 16px rgba(229,57,53,0); }
  100%{ box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}

@keyframes dashMove{
  to{ stroke-dashoffset: -200; }
}
.route-line{ stroke-dasharray: 6 8; animation: dashMove 3.5s linear infinite; }

@keyframes planeFly{
  0%{ offset-distance: 0%; }
  100%{ offset-distance: 100%; }
}
.route-plane{ offset-path: path('M10,90 C90,10 210,10 290,60'); animation: planeFly 4s ease-in-out infinite alternate; }

@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(30px); }
  to{ opacity:1; transform:none; }
}

@keyframes typing{
  from{ width:0; }
  to{ width:100%; }
}
@keyframes blinkCaret{
  50%{ border-color: transparent; }
}
.typed-text{
  display:inline-block; overflow:hidden; white-space:nowrap; border-right:2px solid var(--gold-soft);
  animation: typing 2.4s steps(28,end), blinkCaret .8s step-end infinite;
}

@keyframes shimmer{
  0%{ background-position: -300px 0; }
  100%{ background-position: 300px 0; }
}

@keyframes visaSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}