@media (prefers-reduced-motion: no-preference){
  [data-anim]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  [data-anim="fade-left"]{transform:translateX(24px)}
  [data-anim="fade-right"]{transform:translateX(-24px)}
  [data-anim].in-view{opacity:1;transform:none}

  .card-grid [data-anim]:nth-child(1){transition-delay:.05s}
  .card-grid [data-anim]:nth-child(2){transition-delay:.12s}
  .card-grid [data-anim]:nth-child(3){transition-delay:.19s}
  .card-grid [data-anim]:nth-child(4){transition-delay:.26s}
  .card-grid [data-anim]:nth-child(5){transition-delay:.33s}

  .hero-content > *{animation:heroRise .8s ease both}
  .hero-content > *:nth-child(2){animation-delay:.08s}
  .hero-content > *:nth-child(3){animation-delay:.16s}
  .hero-content > *:nth-child(4){animation-delay:.24s}
  .hero-content > *:nth-child(5){animation-delay:.32s}
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--c-accent);z-index:110;width:0%;transition:width .1s linear}

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