/* Obsidra motion: short responses, stable chrome, no animated document canvas. */
:root {
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-panel: 240ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-page-x: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  :root, .topbar, .sidebar { view-transition-name: none; }
  main { view-transition-name: content; }
  ::view-transition, ::view-transition-group(*), ::view-transition-image-pair(*),
  ::view-transition-old(*), ::view-transition-new(*) { pointer-events: none; }
  /* Only content crossfades. The opaque canvas and wordmark never fade or scale. */
  ::view-transition-group(root), ::view-transition-group(appbar),
  ::view-transition-group(sidebar), ::view-transition-group(content) { animation: none; }
  ::view-transition-old(root), ::view-transition-old(appbar) { display: none; }
  ::view-transition-new(root), ::view-transition-new(appbar) {
    animation: none; opacity: 1; mix-blend-mode: normal;
  }
  ::view-transition-image-pair(content), ::view-transition-image-pair(sidebar) { isolation: isolate; }
  ::view-transition-old(content), ::view-transition-new(content),
  ::view-transition-old(sidebar), ::view-transition-new(sidebar) {
    display: block; mix-blend-mode: plus-lighter;
    animation-duration: var(--motion-base); animation-timing-function: ease-in-out;
    animation-fill-mode: both; object-position: top left;
  }
  ::view-transition-old(content), ::view-transition-old(sidebar) { animation-name: motion-leave; }
  ::view-transition-new(content) { animation-name: motion-page-enter; }
  ::view-transition-new(sidebar) { animation-name: motion-fade-enter; }
  :root:active-view-transition-type(back) { --motion-page-x: -6px; }
}
@keyframes motion-leave { to { opacity: 0; } }
@keyframes motion-fade-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-page-enter {
  from { opacity: 0; transform: translateX(var(--motion-page-x)); }
  to { opacity: 1; transform: none; }
}

/* A single response curve for controls, surfaces and theme changes. */
button, .btn-link, a.btn-sec, .sb-item, .tb-profile, .tb-search,
.seg a, .seg button, .tabbar a, .access-tabs a, .chip,
.module-btn, .card, .panel, .access-panel, .identity-banner,
input, select, textarea, details > summary {
  transition: background-color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease), color var(--motion-fast) ease,
    box-shadow var(--motion-base) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
html, body, .topbar, .sidebar, .tb-home, .tb-module > summary {
  transition: background-color var(--motion-base) ease, border-color var(--motion-base) ease,
    color var(--motion-base) ease;
}
button:active:not(:disabled), .btn-link:active, a.btn-sec:active { transform: scale(.98); }
button:disabled { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .module-btn:hover { transform: translateY(-2px); }
  .module-btn:hover .mod-circle { transform: scale(1.06); }
  .tb-profile:hover .tb-avatar { transform: scale(1.04); }
}
.module-btn:active { transform: scale(.99); }
.login-page .login-card { animation: motion-login var(--motion-panel) var(--motion-enter) both; }
@keyframes motion-login { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mod-circle, .tb-avatar { transition: transform var(--motion-base) var(--motion-enter); }
.sb-item .ico { transition: color var(--motion-fast) ease, transform var(--motion-base) var(--motion-ease); }
.sb-item:active .ico { transform: scale(.92); }
details > summary::before { transition: transform var(--motion-base) var(--motion-ease); }
.toast { animation-duration: var(--motion-panel); animation-timing-function: var(--motion-enter); }
.toast.leaving { transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--motion-ease); }

/* Progressive native accordion animation. No JS height loops, no fixed max-height. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  main details { interpolate-size: allow-keywords; }
  main details::details-content { block-size: 0; overflow: clip; }
  main details[open]::details-content { block-size: auto; }
  main details:not([open])::details-content { pointer-events: none; }
  .motion-ready main details::details-content {
    transition: block-size var(--motion-panel) var(--motion-enter),
      content-visibility var(--motion-panel) allow-discrete;
  }
  /* Huge conversations should not move the entire list through thousands of pixels. */
  .motion-ready main details[data-motion-long]::details-content { transition: none; }
}

/* Menus and dialogs animate in both directions without delaying their native state. */
@supports (transition-behavior: allow-discrete) {
  .bot-menu, .tb-module-menu {
    opacity: 0; transform: translateY(-4px) scale(.985); transform-origin: top left;
    animation: none;
    transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-enter),
      display var(--motion-base) allow-discrete;
  }
  .bot-switch::details-content, .tb-module::details-content {
    transition: content-visibility var(--motion-base) allow-discrete;
  }
  .bot-switch:not([open]) > .bot-menu, .tb-module:not([open]) > .tb-module-menu { pointer-events: none; }
  .bot-switch[open] > .bot-menu, .tb-module[open] > .tb-module-menu { opacity: 1; transform: none; }
  @starting-style {
    .bot-switch[open] > .bot-menu, .tb-module[open] > .tb-module-menu {
      opacity: 0; transform: translateY(-4px) scale(.985);
    }
  }
  dialog.palette {
    opacity: 0; transform: translateY(8px) scale(.985);
    transition: opacity var(--motion-fast) ease, transform var(--motion-base) var(--motion-enter),
      display var(--motion-base) allow-discrete, overlay var(--motion-base) allow-discrete;
  }
  dialog.palette[open] { animation: none; opacity: 1; transform: none; }
  dialog.palette:not([open]) { pointer-events: none; }
  dialog.palette::backdrop {
    opacity: 0;
    transition: opacity var(--motion-base) ease, display var(--motion-base) allow-discrete,
      overlay var(--motion-base) allow-discrete;
  }
  dialog.palette[open]::backdrop { opacity: 1; }
  @starting-style {
    dialog.palette[open] { opacity: 0; transform: translateY(8px) scale(.985); }
    dialog.palette[open]::backdrop { opacity: 0; }
  }
}

/* Active tabs glide to the selected item. Without JS the existing highlight remains. */
.seg.motion-tabs { position: relative; isolation: isolate; }
.seg.motion-tabs::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: var(--tab-y, 3px); left: 0;
  width: var(--tab-w); height: var(--tab-h); border-radius: inherit;
  background: color-mix(in srgb, var(--tint, var(--brand)) 22%, transparent);
  transform: translateX(var(--tab-x));
}
.motion-ready .seg.motion-tabs::after {
  transition: transform var(--motion-base) var(--motion-enter), width var(--motion-base) var(--motion-enter),
    height var(--motion-base) var(--motion-enter), top var(--motion-base) var(--motion-enter),
    background-color var(--motion-base) ease;
}
.seg.motion-tabs a.current, .seg.motion-tabs button[aria-pressed="true"] { background: transparent; }

@media (max-width: 960px) {
  /* Preserve the drawer's translated closed state while unifying its timing. */
  .sidebar { transition: transform var(--motion-panel) var(--motion-enter), background-color var(--motion-base) ease; }
  .sb-backdrop { transition: opacity var(--motion-base) ease; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  main details::details-content, .bot-switch::details-content, .tb-module::details-content { transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}