@keyframes orbA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 7vmax, 0) scale(1.12); }
}

@keyframes orbB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-8vmax, -6vmax, 0) scale(1.15); }
}

@media (prefers-reduced-motion: no-preference) {

  .rounded-avatar { animation: avatarIn .7s ease-out backwards; }
  h1              { animation: riseIn .65s ease-out .08s backwards; }
  p               { animation: riseIn .65s ease-out .16s backwards; }

  .button-entrance {
    animation-name: chipIn;
    animation-duration: .55s;
    animation-timing-function: cubic-bezier(.2, .7, .3, 1);
    animation-fill-mode: backwards;
    animation-delay: 0s;
  }

  .fadein {
    animation-name: fadein;
    animation-duration: 1.6s;
    animation-fill-mode: backwards;
  }
}

@keyframes avatarIn {
  from { opacity: 0; transform: translateY(-10px); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  html::before { animation: none; }
  .rounded-avatar, h1, p, .button-entrance, .fadein { animation: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .button-hover,
  .credit-hover,
  .footer-hover {
    display: inline-block;
    transition: transform .18s ease-out;
  }
  .button-hover:hover { transform: translateY(-2px); }
  .credit-hover:hover { transform: scale(1.04); }
  .footer-hover:hover { transform: translateY(-3px); }
}

.button.button-hover { display: flex !important; }