:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.public-page--features .feature-panel,
.public-page--features .request-sequence,
.public-page--api .api-contract,
.public-page--api .code-block,
.public-page .home-capability {
  transition: border-color 220ms var(--motion-ease-out), box-shadow 220ms var(--motion-ease-out), transform 220ms var(--motion-ease-out);
}

.motion-enabled .motion-target,
.motion-enabled .motion-group-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 620ms var(--motion-ease-out), transform 620ms var(--motion-ease-out), border-color 220ms var(--motion-ease-out), box-shadow 220ms var(--motion-ease-out);
}

.motion-enabled .motion-panel {
  clip-path: inset(0 0 12% 0 round 8px);
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: opacity 680ms var(--motion-ease-out), transform 680ms var(--motion-ease-out), clip-path 680ms var(--motion-ease-out);
}

.motion-enabled .motion-target.is-visible,
.motion-enabled .motion-group-item.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 8px);
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-enabled .motion-group-item:nth-child(2) { transition-delay: 70ms; }
.motion-enabled .motion-group-item:nth-child(3) { transition-delay: 140ms; }
.motion-enabled .motion-group-item:nth-child(4) { transition-delay: 210ms; }
.motion-enabled .motion-group-item:nth-child(5) { transition-delay: 280ms; }
.motion-enabled .motion-group-item.motion-settled { transition-delay: 0ms; }

.motion-enabled .hero-copy > .motion-target:nth-child(2),
.motion-enabled .public-hero__copy > .motion-target:nth-child(2),
.motion-enabled .api-intro > div:first-child > .motion-target:nth-child(2) { transition-delay: 70ms; }

.motion-enabled .hero-copy > .motion-target:nth-child(3),
.motion-enabled .public-hero__copy > .motion-target:nth-child(3),
.motion-enabled .api-intro > div:first-child > .motion-target:nth-child(3) { transition-delay: 140ms; }

.motion-enabled .hero-copy > .motion-target:nth-child(4),
.motion-enabled .public-hero__copy > .motion-target:nth-child(4) { transition-delay: 210ms; }

.public-page--features .feature-panel:hover,
.public-page .home-capability:hover {
  transform: translate3d(0, -3px, 0);
}

.motion-enabled .public-page--features .feature-panel.is-visible:hover,
.motion-enabled .public-page .home-capability.is-visible:hover {
  transform: translate3d(0, -3px, 0);
}

.public-page--features .request-sequence:hover,
.public-page--api .api-contract:hover,
.public-page--api .code-block:hover {
  border-color: color-mix(in srgb, var(--public-accent, var(--color-accent)) 38%, var(--public-border, var(--color-border)));
  box-shadow: 0 14px 34px rgb(15 23 42 / .08);
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-target,
  .motion-enabled .motion-group-item {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }

  .public-page--features .feature-panel:hover,
  .public-page .home-capability:hover {
    transform: none;
  }
}