/* One quiet interaction language for public pages, in both themes. */
.public-design .motion-card {
  transition: translate 300ms cubic-bezier(.2,.8,.2,1), border-color 250ms ease, box-shadow 300ms ease, background-color 250ms ease;
}
.public-design .motion-card:focus-within {
  border-color: var(--technical-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--technical-accent) 30%, transparent);
}
.public-design :is(.technical-flow a, .technical-channels a, .technical-tab, .site-footer__links a) {
  transition: color 220ms ease, background-color 220ms ease;
}
.public-design :is(.technical-start, .technical-discuss, .technical-panel a, .header-signup) > span,
.public-design .header-signup::after {
  display: inline-block;
  transition: translate 250ms cubic-bezier(.2,.8,.2,1);
}
.public-design .motion-card :is(.seo-card__icon, .seo-card__number) {
  transition: rotate 300ms ease, background-color 250ms ease, color 250ms ease;
}
.public-design .motion-card :is(h3, .doc-related b) { transition: color 250ms ease; }
.public-design .technical-panel:not([hidden]) {
  animation: public-panel-in 360ms cubic-bezier(.16,1,.3,1);
}
.public-design .faq-item[open] > :not(summary) {
  animation: public-answer-in 280ms ease-out;
}
@keyframes public-panel-in {
  from { opacity: .3; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes public-answer-in {
  from { opacity: .3; translate: 0 -4px; }
  to { opacity: 1; translate: 0 0; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .public-design .motion-card:hover {
    translate: 0 -5px;
    border-color: var(--technical-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--technical-accent) 22%, transparent), 0 18px 30px -22px rgba(var(--primary-rgb), .4);
  }
  /* Keep the entrance and hover on separate transform properties. */
  .public-design :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li, .story-launch article, .public-product-preview):hover {
    transform: none;
  }
  .public-design .motion-card:hover :is(.seo-card__icon, .seo-card__number) {
    rotate: -6deg;
    background-color: var(--technical-accent);
    color: var(--bg);
  }
  .public-design .motion-card:hover :is(h3, .doc-related b) { color: var(--technical-accent); }
  .public-design :is(.technical-start, .technical-discuss, .technical-panel a, .header-signup):hover > span,
  .public-design .header-signup:hover::after { translate: 4px 0; }
  .public-design .technical-flow a:hover,
  .public-design .technical-tab:hover { background-color: color-mix(in srgb, var(--technical-accent) 8%, transparent); }
  .public-design .technical-channels a:hover { background-color: #ffffff08; }
  .public-design .site-footer__links a:hover { color: var(--technical-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .public-design .motion-card,
  .public-design :is(.technical-flow a, .technical-channels a, .technical-tab, .site-footer__links a),
  .public-design :is(.technical-start, .technical-discuss, .technical-panel a, .header-signup) > span,
  .public-design .header-signup::after,
  .public-design .motion-card :is(.seo-card__icon, .seo-card__number, h3, .doc-related b) { transition: none; }
  .public-design .technical-panel:not([hidden]),
  .public-design .faq-item[open] > :not(summary) { animation: none; }
}
@media print {
  .public-design .motion-card { translate: none; box-shadow: none; }
}