/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes routeTravel{
  0%   { left:0%; opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { left:calc(100% - 7px); opacity:0; }
}

@keyframes scrollDot{
  0%   { transform:translateY(0); opacity:1; }
  70%  { opacity:.4; }
  100% { transform:translateY(16px); opacity:0; }
}

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

/* scroll reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

.hero__card--main{ animation:floatCard 7s ease-in-out infinite; }
.hero__card--sub{ animation:floatCard 8s ease-in-out infinite 1.2s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
}