@keyframes load{
  to{
    width:100%;
  }
}

@keyframes pulse{
  0%,100%{
    opacity:.6;
    transform:scale(1);
  }
  50%{
    opacity:1;
    transform:scale(1.06);
  }
}

@keyframes drift{
  0%,100%{
    transform:translate(0,0);
  }
  33%{
    transform:translate(30px,-40px);
  }
  66%{
    transform:translate(-20px,30px);
  }
}

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

@keyframes bounce{
  0%,100%{
    transform:translateX(-50%) translateY(0);
  }
  50%{
    transform:translateX(-50%) translateY(6px);
  }
}

/* utility reveal */
.fade-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease, transform .7s ease;
}

.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

.fade-up-d1{transition-delay:.1s}
.fade-up-d2{transition-delay:.2s}
.fade-up-d3{transition-delay:.3s}
.fade-up-d4{transition-delay:.4s}

/* animation hook classes */
.pre-logo{
  animation:pulse 1.4s ease-in-out infinite;
}

.pre-fill{
  animation:load 1.8s ease forwards;
}

.orb{
  animation:drift 18s ease-in-out infinite;
}

.orb1{
  animation-delay:0s;
}

.orb2{
  animation-delay:-8s;
}

.orb3{
  animation-delay:-4s;
}

.hero-logo{
  animation:floatLogo 6s ease-in-out infinite;
}

.hero-scroll{
  animation:bounce 2s ease-in-out infinite;
}