:root {
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-page: 220ms;
  --motion-ease-out: cubic-bezier(.2, 0, 0, 1);
  --motion-ease-in: cubic-bezier(.4, 0, 1, 1);
}

.topbar { view-transition-name: site-topbar; }
.main { view-transition-name: site-content; }

@media (prefers-reduced-motion: no-preference) {
  html.file-page-motion .main {
    animation: motion-file-page-in var(--motion-page) var(--motion-ease-out);
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-content),
  ::view-transition-new(site-content) {
    animation-duration: var(--motion-page);
    animation-fill-mode: both;
  }
  ::view-transition-old(root),
  ::view-transition-old(site-content) {
    animation-name: motion-page-out;
    animation-timing-function: var(--motion-ease-in);
  }
  ::view-transition-new(root),
  ::view-transition-new(site-content) {
    animation-name: motion-page-in;
    animation-timing-function: var(--motion-ease-out);
  }
  ::view-transition-group(site-topbar),
  ::view-transition-old(site-topbar),
  ::view-transition-new(site-topbar) {
    animation: none;
  }

  a,
  button,
  input,
  select,
  .card {
    transition-property: color, background-color, border-color, opacity, transform;
    transition-duration: var(--motion-normal);
    transition-timing-function: var(--motion-ease-out);
  }
  .reading-badge {
    transition-property: color, background-color, border-color;
    transition-duration: var(--motion-normal);
    transition-timing-function: var(--motion-ease-out);
  }
  .nav a.active,
  .nav a[aria-current="page"],
  .sidebar-nav a.active,
  .sidebar-nav a[aria-current],
  .toc-nav a.active,
  .toc-nav a[aria-current="location"] {
    transition-duration: 160ms;
  }
  .progress-fill { transition: width var(--motion-fast) var(--motion-ease-out); }
  .button:active:not(:disabled):not([aria-disabled="true"]),
  button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(.985);
  }

}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:not([aria-disabled="true"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(31 50 37 / 8%);
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: no-preference) {
  .reading-site.ui-ready .sidebar {
    transform-origin: top;
    transition: opacity var(--motion-normal) var(--motion-ease-out), transform var(--motion-normal) var(--motion-ease-out);
  }
  .reading-site.ui-ready .sidebar.motion-closing:not(.is-open) {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 16px;
    opacity: 0;
    transform: translateY(-6px) scaleY(.985);
    pointer-events: none;
  }
}

@keyframes motion-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes motion-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes motion-file-page-in {
  from { transform: translateY(4px); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(site-topbar),
  ::view-transition-image-pair(site-topbar),
  ::view-transition-old(site-topbar),
  ::view-transition-new(site-topbar),
  ::view-transition-group(site-content),
  ::view-transition-image-pair(site-content),
  ::view-transition-old(site-content),
  ::view-transition-new(site-content) {
    animation: none !important;
    transition: none !important;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .reading-site.ui-ready .sidebar.motion-closing:not(.is-open) {
    display: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .topbar, .main { view-transition-name: none; }
  ::view-transition-group(root),
  ::view-transition-image-pair(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(site-topbar),
  ::view-transition-image-pair(site-topbar),
  ::view-transition-old(site-topbar),
  ::view-transition-new(site-topbar),
  ::view-transition-group(site-content),
  ::view-transition-image-pair(site-content),
  ::view-transition-old(site-content),
  ::view-transition-new(site-content) { animation: none !important; transition: none !important; }
}