@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@keyframes floatY{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-14px); }
}
.float{ animation: floatY 5s ease-in-out infinite; }

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

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

.stagger > *{ opacity:0; animation: fadeInUp .8s var(--ease) forwards; }
.stagger > *:nth-child(1){ animation-delay: .05s; }
.stagger > *:nth-child(2){ animation-delay: .15s; }
.stagger > *:nth-child(3){ animation-delay: .25s; }
.stagger > *:nth-child(4){ animation-delay: .35s; }
.stagger > *:nth-child(5){ animation-delay: .45s; }

/* nav appear */
.navbar{ animation: navDrop .7s var(--ease) both; }
@keyframes navDrop{ from{ opacity:0; transform: translate(-50%,-24px);} to{ opacity:1; transform: translate(-50%,0);} }

/* hero title reveal */
.hero h1, .hero-role, .hero p.desc, .btn-row, .hero-stats{
  animation: fadeInUp .9s var(--ease) both;
}
.hero-role{ animation-delay: .1s; }
.hero p.desc{ animation-delay: .2s; }
.btn-row{ animation-delay: .3s; }
.hero-stats{ animation-delay: .4s; }