@media (prefers-reduced-motion: no-preference) {
  .hop-motion .hero::before {
    animation: hop-orbit 18s linear infinite;
  }

  .hop-motion .hero-crest,
  .hop-motion .hero-kicker,
  .hop-motion .hero h1 span,
  .hop-motion .hero h1 em,
  .hop-motion .hero aside p,
  .hop-motion .hero aside strong,
  .hop-motion .hero aside .text-link,
  .hop-motion .hero-foot {
    opacity: 0;
    will-change: opacity, transform;
  }

  .hop-motion .hero-crest { transform: translate3d(40px, 24px, 0) scale(.94); }
  .hop-motion .hero-kicker,
  .hop-motion .hero h1 span,
  .hop-motion .hero h1 em,
  .hop-motion .hero aside p,
  .hop-motion .hero aside strong,
  .hop-motion .hero aside .text-link,
  .hop-motion .hero-foot { transform: translate3d(0, 24px, 0); }
  .hop-motion .hero-foot i { transform: scaleX(0); transform-origin: left center; }

  .hop-motion .hero.is-revealed .hero-crest { animation: hop-crest-reveal 1.4s cubic-bezier(.16, 1, .3, 1) .15s both; }
  .hop-motion .hero.is-revealed .hero-kicker { animation: hop-rise .7s cubic-bezier(.16, 1, .3, 1) .25s both; }
  .hop-motion .hero.is-revealed .hero h1 span:nth-child(1) { animation: hop-rise .9s cubic-bezier(.16, 1, .3, 1) .42s both; }
  .hop-motion .hero.is-revealed .hero h1 span:nth-child(2) { animation: hop-rise .9s cubic-bezier(.16, 1, .3, 1) .55s both; }
  .hop-motion .hero.is-revealed .hero h1 em { animation: hop-rise .7s cubic-bezier(.16, 1, .3, 1) .76s both; }
  .hop-motion .hero.is-revealed .hero aside p { animation: hop-rise .75s cubic-bezier(.16, 1, .3, 1) .68s both; }
  .hop-motion .hero.is-revealed .hero aside strong { animation: hop-rise .65s cubic-bezier(.16, 1, .3, 1) .82s both; }
  .hop-motion .hero.is-revealed .hero aside .text-link { animation: hop-rise .65s cubic-bezier(.16, 1, .3, 1) .94s both; }
  .hop-motion .hero.is-revealed .hero-foot { animation: hop-rise .75s cubic-bezier(.16, 1, .3, 1) 1.08s both; }
  .hop-motion .hero.is-revealed .hero-foot i { animation: hop-line-grow 1.15s cubic-bezier(.16, 1, .3, 1) 1.15s both; }

  .hop-motion .hero.is-revealed .hero-crest .site-logo { animation: hop-crest-float 7s ease-in-out 1.65s infinite; }

  .hop-motion .page-hero.is-revealed > .eyebrow,
  .hop-motion .page-hero.is-revealed > h1,
  .hop-motion .page-hero.is-revealed > p,
  .hop-motion .contact-page.is-revealed > div,
  .hop-motion .contact-page.is-revealed > form {
    animation: hop-rise .8s cubic-bezier(.16, 1, .3, 1) both;
  }

  .hop-motion .page-hero.is-revealed > h1 { animation-delay: .13s; }
  .hop-motion .page-hero.is-revealed > p { animation-delay: .25s; }
  .hop-motion .contact-page.is-revealed > form { animation-delay: .15s; }

  .hop-motion .motion-reveal:not(.is-in-view) {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }

  .hop-motion .motion-reveal.is-in-view {
    animation: hop-section-in .75s cubic-bezier(.16, 1, .3, 1) both;
  }
}

.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  width: min(48vw, 700px);
  aspect-ratio: 1;
  right: -13vw;
  top: 16%;
  border: 1px solid rgba(237, 175, 61, .42);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(237, 175, 61, .035), 0 0 0 140px rgba(237, 175, 61, .018);
  pointer-events: none;
}

.hero::after { z-index: 0; pointer-events: none; }
.hero-kicker { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; }
.hero-kicker::after { content: ''; width: 65px; height: 1px; background: var(--gold); }
.team-grid article .portrait img { transition: transform .55s ease, filter .55s ease; }
.team-grid article:hover .portrait img { transform: scale(1.045); filter: saturate(1); }

@media (max-width: 760px) {
  .hero::before { width: 95vw; right: -49vw; top: 19%; opacity: .7; }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .menu-toggle span { transition: transform .25s ease; }
}

@keyframes hop-rise {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hop-crest-reveal {
  to { opacity: .14; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hop-line-grow {
  to { transform: scaleX(1); }
}

@keyframes hop-crest-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-8px, -11px, 0) rotate(-1deg); }
}

@keyframes hop-orbit {
  to { transform: rotate(360deg); }
}

@keyframes hop-section-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}