[data-interaction-motion] .demo-stage.demo-card {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1), border-color 160ms ease, box-shadow 180ms ease;
}

[data-interaction-motion] .card-link:hover .demo-card {
  transform: none;
  border-color: var(--a-line);
  box-shadow: none;
}

[data-interaction-motion] .guide-card {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1), border-color 160ms ease, box-shadow 180ms ease;
}

.button, .icon-button, .random-button, .suggestion, .anatomy-item,
.main-nav a, .filter, .text-button, .anatomy-copy-button {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.button:active, .icon-button:active, .random-button:active, .suggestion:active {
  background-color: var(--a-accent-soft);
}

.hero-copy { text-wrap: pretty; }
.hero h1 { overflow-wrap: anywhere; hyphens: auto; }

[data-interaction-motion] .card-link:focus-visible .demo-card,
[data-interaction-motion] .catalog-card:has(.card-save:focus-visible) .demo-card {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px var(--a-accent-soft);
}

[data-interaction-motion] .catalog-card:focus-within .card-save {
  opacity: 1;
}

[data-interaction-motion] .guide-card:focus-visible {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px var(--a-accent-soft);
}

[data-interaction-motion='active'] .card-link:focus-visible .demo-card,
[data-interaction-motion='active'] .catalog-card:has(.card-save:focus-visible) .demo-card,
[data-interaction-motion='active'] .guide-card:focus-visible {
  transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  [data-interaction-motion='active'] .card-link:hover .demo-card,
  [data-interaction-motion='active'] .guide-card:hover {
    transform: translateY(-2px);
    border-color: var(--a-accent);
    box-shadow: 0 6px 16px color-mix(in srgb,var(--a-ink) 8%,transparent);
  }

  [data-interaction-motion='reduced'] .card-link:hover .demo-card {
    border-color: var(--a-accent);
  }
}

@media (hover: none), (pointer: coarse) {
  [data-interaction-motion] .card-save { opacity: 1; }
}

[data-interaction-motion][data-motion-loading='true']::before {
  content: '';
  position: fixed;
  z-index: 100;
  inset: 0 auto auto 0;
  width: 35%;
  height: 2px;
  background: var(--a-accent);
  pointer-events: none;
  transform-origin: left center;
  animation: animation-load-progress 1.2s ease-in-out infinite;
}

[data-interaction-motion='suspended'][data-motion-loading='true']::before { display: none; }

[data-interaction-motion='reduced'] .demo-stage.demo-card,
[data-interaction-motion='reduced'] .guide-card,
[data-interaction-motion='reduced'] .card-save { transition: none; }

[data-interaction-motion='reduced'][data-motion-loading='true']::before {
  width: 100%;
  animation: none;
  opacity: .65;
}

@keyframes animation-load-progress {
  from { transform: translateX(-110%); }
  to { transform: translateX(290%); }
}

:root {
  --a-spring: cubic-bezier(.32, .72, 0, 1);
  --a-exit: cubic-bezier(.4, 0, 1, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --a-spring: linear(0, 0.0094 1.75%, 0.0394 3.75%, 0.0981 6.25%, 0.1964 9.5%, 0.5076 18.75%, 0.6335 23%, 0.7336 27%, 0.8148 31%, 0.8817 35.25%, 0.9356 40%, 0.9747 45.25%, 1.0015 51.75%, 1.0143 60.5%, 1.0083 81.5%, 1); }
}

@media (prefers-reduced-motion: no-preference) {
  body[data-app="animation"] .hero > :is(.eyebrow, h1, .hero-copy) { animation: none; }
  body[data-app="animation"] :is(.hero:has(.boot-message) > *, main[data-routed] .hero > :is(.eyebrow, h1, .hero-copy), .hero > :is(.search-box, .suggestions, .hero-meta), .library-toolbar, .result-status, .detail-topbar, .detail-visual, .detail-heading, .detail-summary, .guide-article > *) {
    animation: a-enter-fade 260ms ease-out backwards, a-enter-rise 500ms var(--a-spring) backwards;
    animation-delay: var(--a-delay, 0ms);
  }
  .hero > :nth-child(2), .guide-article > :nth-child(2), .detail-visual { --a-delay: 40ms; }
  .hero > :nth-child(3), .guide-article > :nth-child(3), .detail-heading { --a-delay: 80ms; }
  .hero > :nth-child(4), .guide-article > :nth-child(4), .detail-summary { --a-delay: 120ms; }
  .hero > :nth-child(5), .guide-article > :nth-child(5) { --a-delay: 150ms; }
  .hero > :nth-child(n + 6), .guide-article > :nth-child(n + 6), .library-toolbar { --a-delay: 180ms; }
  .result-status { --a-delay: 210ms; }

  body[data-app="animation"] :is(.search-dialog, .definition-dialog) {
    opacity: 0;
    transform: translateY(10px) scale(.97);
    transition: opacity 160ms var(--a-exit), transform 190ms var(--a-exit), overlay 190ms allow-discrete, display 190ms allow-discrete;
  }
  body[data-app="animation"] :is(.search-dialog, .definition-dialog)[open] {
    opacity: 1;
    transform: none;
    transition: opacity 220ms ease-out, transform 500ms var(--a-spring), overlay 500ms allow-discrete, display 500ms allow-discrete;
  }
  @starting-style {
    body[data-app="animation"] :is(.search-dialog, .definition-dialog)[open] { opacity: 0; transform: translateY(16px) scale(.95); }
  }

  body[data-app="animation"] .suite-menu::details-content { transition: content-visibility 170ms allow-discrete; }
  body[data-app="animation"] .suite-menu nav { transform-origin: calc(100% - 18px) 0; }
  body[data-app="animation"] .suite-menu[open] nav {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease-out, transform 460ms var(--a-spring);
  }
  body[data-app="animation"] .suite-menu:not([open]) nav {
    opacity: 0;
    transform: translateY(-6px) scale(.96);
    transition: opacity 150ms var(--a-exit), transform 170ms var(--a-exit);
  }
  @starting-style {
    body[data-app="animation"] .suite-menu[open] nav { opacity: 0; transform: translateY(-6px) scale(.96); }
  }

  body[data-app="animation"] .app-toast { transition: opacity 160ms var(--a-exit), transform 200ms var(--a-exit); }
  body[data-app="animation"] .app-toast.visible { transition: opacity 200ms ease-out, transform 480ms var(--a-spring); }

  body[data-app="animation"] :is(.button, .icon-button, .random-button, .suggestion, .filter, .text-button, .anatomy-copy-button, .suite-menu summary, .main-nav a) {
    transition-property: transform, background-color, color, border-color, box-shadow;
    transition-duration: 420ms, 160ms, 160ms, 160ms, 160ms;
    transition-timing-function: var(--a-spring), ease, ease, ease, ease;
  }
  body[data-app="animation"] :is(.button, .icon-button, .random-button, .suggestion, .filter, .text-button, .anatomy-copy-button, .suite-menu summary, .main-nav a):active {
    transform: scale(.95);
    transition-duration: 90ms;
    transition-timing-function: ease-out;
  }
  body[data-app="animation"] [data-interaction-motion] :is(.demo-stage.demo-card, .guide-card) {
    transition: transform 460ms var(--a-spring), border-color 160ms ease, box-shadow 180ms ease;
  }
  body[data-app="animation"] [data-interaction-motion] :is(.card-link:active .demo-card, .guide-card:active) {
    transform: scale(.98);
    box-shadow: none;
    transition-duration: 110ms;
    transition-timing-function: ease-out;
  }
}

@keyframes a-enter-fade { from { opacity: .6; } }
@keyframes a-enter-rise { from { transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .button, .icon-button, .random-button, .suggestion, .anatomy-item,
  .main-nav a, .filter, .text-button, .anatomy-copy-button { transition: none; }
  [data-interaction-motion] .demo-stage.demo-card,
  [data-interaction-motion] .guide-card { transition: none; transform: none !important; }
  [data-interaction-motion] .card-save { transition: none; }
  [data-interaction-motion][data-motion-loading='true']::before { width: 100%; animation: none; opacity: .65; }
}