/* Public motion system. Native navigation and readable content are the fallback. */
@view-transition { navigation: auto; }
@supports (view-transition-name: ds-content) {
  main { view-transition-name: ds-content; }
  .site-header { view-transition-name: ds-header; }
  .site-footer--compact { view-transition-name: ds-footer; }
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) { animation-duration: 200ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-group(ds-header), ::view-transition-group(ds-footer) { animation-duration: 0s; }
  ::view-transition-old(ds-header), ::view-transition-old(ds-footer) { display: none; }
  ::view-transition-new(ds-header), ::view-transition-new(ds-footer) { animation: none; }
  ::view-transition-old(ds-content) { animation: ds-page-out 110ms ease-out both; }
  ::view-transition-new(ds-content) { animation: ds-page-in 190ms cubic-bezier(.22,1,.36,1) both; }
  html:has(.wiki-shell) ::view-transition-new(ds-content),
  html:has(.wiki-home) ::view-transition-new(ds-content) { animation-name: ds-page-fade; animation-duration: 150ms; }
  ::view-transition-group(blog-cover) { animation-duration: 280ms; overflow: clip; border-radius: 12px; }
  ::view-transition-old(blog-cover), ::view-transition-new(blog-cover) { height: 100%; object-fit: cover; }
}
@keyframes ds-page-out { to { opacity: 0; } }
@keyframes ds-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ds-page-fade { from { opacity: 0; } to { opacity: 1; } }
.has-motion-indicator { position: relative; }
.motion-indicator { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 2px; background: var(--ds-brand); pointer-events: none; transition: transform 180ms var(--motion-ease), width 180ms var(--motion-ease); }
.home-page .has-motion-indicator a.is-active::after { display: none; }
.home-page .anchor-nav__inner a { font-weight: 600; }
.home-page .anchor-nav__inner a.is-active { padding-left: 12px; }
.home-page .anchor-nav__inner a:first-child { padding-left: 0; }
.wiki-tabs.has-motion-indicator .wiki-tab[aria-selected="true"] { border-bottom-color: transparent; }
.wiki-tree__toggle { position: relative; }
.wiki-tree__toggle::before { content: ''; position: absolute; inset: 5px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; opacity: 0; }
.wiki-tree__toggle[aria-busy="true"] { color: var(--ds-text-2); font-size: 0; }
.wiki-tree__toggle[aria-busy="true"]::before { opacity: 1; animation: ds-tree-loading .8s linear infinite; }
@keyframes ds-tree-loading { to { transform: rotate(360deg); } }
.wiki-tree__status { display: block; padding: 4px 8px 8px; font-size: 12px; color: var(--ds-text-2); }
.wiki-code__copy[data-copy-state="success"] { background: var(--ds-brand-bg); border-color: var(--ds-brand-deep); color: var(--ds-text); }
.home-story__cover img, .blog-list-card > img { transition: transform 220ms var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .home-story__link:hover .home-story__cover img, .blog-list-card:hover > img { transform: scale(1.02); }
}
a.home-story__link:active, a.blog-list-card:active, .wiki-doc a.wiki-hub-card:active { transform: translateY(0); box-shadow: var(--sh-interactive); }
[data-contact-compose] :is(input, textarea, select) { transition: border-color 160ms, box-shadow 160ms; }
[data-contact-compose] :is(input, textarea, select):focus { outline: 2px solid var(--ds-brand-deep); outline-offset: 2px; }
[data-timeline] { overflow-anchor: none; }
[data-timeline] > [hidden] { display: none !important; }
.motion-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Controls live below the photo, never cover office text or shrink touch targets. */
.home-page .oc.is-enhanced { aspect-ratio: auto; }
.home-page .oc__viewport { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.home-page .oc__track { height: 100%; will-change: auto; }
.home-page .oc__controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 6px 12px; background: var(--ds-bg); border-top: 1px solid var(--ds-line); }
.oc__controls button { min-width: 44px; min-height: 44px; border: 1px solid transparent; background: transparent; border-radius: 8px; cursor: pointer; color: var(--ds-text); font: inherit; font-size: 13px; }
.oc__controls button:hover { background: var(--ds-brand-bg); }
.oc__controls button:focus-visible { outline: 2px solid var(--ds-text); outline-offset: 2px; }
.oc__controls .oc__step { font-size: 22px; }
.oc__count { font: 12px var(--font-mono, monospace); color: var(--ds-text-2); }
@media (max-width: 760px) { .home-page .oc__viewport { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .motion-indicator, .home-story__cover img, .blog-list-card > img { transition: none; }
  .home-story__link:hover .home-story__cover img, .blog-list-card:hover > img { transform: none; }
  .wiki-tree__toggle[aria-busy="true"]::before { animation: none; }
}

.has-tree-motion { font-size: 0; }
.has-tree-motion::after { content: '▸'; display: block; font-size: 14px; transition: transform 140ms var(--motion-ease); }
.has-tree-motion[aria-expanded="true"]::after { transform: rotate(90deg); }
.has-tree-motion[aria-busy="true"]::after { opacity: 0; }