/* One motion language for the active site; no hidden-on-load content. */
:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-feedback: 180ms;
  --motion-panel: 320ms;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 160ms ease-out both; }
::view-transition-new(root) { animation: page-in 320ms var(--motion-ease) both; }
::view-transition-group(root) { animation-duration: 320ms; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

.button, .language-switch button, .scenario-controls button {
  transition: background-color var(--motion-feedback) ease, color var(--motion-feedback) ease,
    border-color var(--motion-feedback) ease, transform var(--motion-feedback) var(--motion-ease);
}
.button:active { transform: scale(.98); }
.button svg, .text-link svg, .card-arrow svg, .application-row > svg {
  transition: transform 260ms var(--motion-ease);
}
.button:focus-visible svg, .text-link:is(:hover, :focus-visible) svg,
.card-link:focus-visible svg, .application-row:focus-visible > svg { transform: translateX(3px); }
.scenario-controls button:not([aria-pressed="true"]):hover { background: #dce4d4; }
.workbench-dark .scenario-controls button:not([aria-pressed="true"]):hover { background: #385244; }
.nav-page { position: relative; }
.nav-links > a.nav-page:hover { text-decoration: none; }
.nav-page::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--motion-ease);
}
.nav-page:is(:hover, :focus-visible, [aria-current="page"])::after { transform: scaleX(1); }
.capability-detail .disclosure-mark::after { transition: transform var(--motion-panel) var(--motion-ease); }
.capability-detail[data-expanded="false"] .disclosure-mark::after { transform: rotate(0); }
.capability-detail[data-expanded="true"] .disclosure-mark::after { transform: rotate(90deg); }
.capability-detail[data-animating] { overflow: clip; }
.capability-detail summary:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root) { animation: none; }
  .button:active, .button svg, .text-link svg, .card-arrow svg, .application-row > svg { transform: none !important; }
}