.js-ready .reveal {
  opacity: 0;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  will-change: opacity, transform;
}

.js-ready .reveal.fade-up { transform: translate3d(0, 34px, 0); }
.js-ready .reveal.fade-left { transform: translate3d(38px, 0, 0); }
.js-ready .reveal.fade-right { transform: translate3d(-38px, 0, 0); }
.js-ready .reveal.zoom-in { transform: scale(.94); }
.js-ready .reveal.scale-up { transform: scale(.9); }
.js-ready .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

.stagger-grid > .reveal:nth-child(2) { transition-delay: 70ms; }
.stagger-grid > .reveal:nth-child(3) { transition-delay: 140ms; }
.stagger-grid > .reveal:nth-child(4) { transition-delay: 70ms; }
.stagger-grid > .reveal:nth-child(5) { transition-delay: 140ms; }
.stagger-grid > .reveal:nth-child(6) { transition-delay: 210ms; }
.stagger-grid > .reveal:nth-child(7) { transition-delay: 280ms; }
.stagger-grid > .reveal:nth-child(8) { transition-delay: 350ms; }

.hero-copy > .reveal:nth-child(2) { transition-delay: 70ms; }
.hero-copy > .reveal:nth-child(3) { transition-delay: 140ms; }
.hero-copy > .reveal:nth-child(4) { transition-delay: 210ms; }
.hero-copy > .reveal:nth-child(5) { transition-delay: 280ms; }

.parallax { --px: 0px; --py: 0px; }
.hero-orb-one { animation: orb-float-one 14s var(--ease) infinite alternate; }
.hero-orb-two { animation: orb-float-two 17s var(--ease) infinite alternate; }
.hero-grid-pattern { animation: grid-float 20s ease-in-out infinite alternate; }

@keyframes loader-bar {
  from { transform: translateX(-110%) scaleX(.75); }
  55% { transform: translateX(110%) scaleX(1); }
  to { transform: translateX(260%) scaleX(.65); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes device-float {
  0%, 100% { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg) translateY(0) rotateZ(0); }
  50% { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-10px) rotateZ(.7deg); }
}

@keyframes terminal-float {
  0%, 100% { transform: perspective(1000px) rotateY(8deg) rotateX(2deg) translateY(0) rotateZ(0); }
  50% { transform: perspective(1000px) rotateY(7deg) rotateX(2deg) translateY(-11px) rotateZ(-.8deg); }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

@keyframes orb-float-one {
  from { transform: translate3d(var(--px), var(--py), 0) scale(1); }
  to { transform: translate3d(calc(var(--px) + 9px), calc(var(--py) - 13px), 0) scale(1.04); }
}

@keyframes orb-float-two {
  from { transform: translate3d(var(--px), var(--py), 0) rotate(0); }
  to { transform: translate3d(calc(var(--px) - 8px), calc(var(--py) + 10px), 0) rotate(8deg); }
}

@keyframes grid-float {
  from { transform: translate3d(var(--px), var(--py), 0); }
  to { transform: translate3d(calc(var(--px) + 8px), calc(var(--py) - 6px), 0); }
}

@keyframes cta-spin {
  to { transform: rotate(360deg); }
}

@keyframes bar-grow {
  from { transform: scaleY(0); opacity: .25; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes ripple {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal { opacity: 1; transform: none; }
}