/* Shared, optional motion. Content stays usable without animation support or JavaScript. */
@keyframes booklist-content-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes booklist-work-enter {
  from { opacity: 0; transform: translateY(18px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes booklist-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes booklist-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  main { view-transition-name: page-content; }
  ::view-transition-group(root), ::view-transition-group(site-header),
  ::view-transition-group(page-content) { animation-duration: 240ms; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  ::view-transition-old(page-content) { animation: booklist-fade-out 120ms ease-out both; }
  ::view-transition-new(page-content) { animation: booklist-content-enter 240ms cubic-bezier(.2,.7,.3,1) both; }
  html.native-page-transition main { animation: none; }

  main { animation: booklist-content-enter 240ms cubic-bezier(.2,.7,.3,1) backwards; }
  a, button, input, textarea, select, summary, .tag-filter label {
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease,
                box-shadow 150ms ease, opacity 120ms ease, transform 120ms ease;
  }
  .public-card, .book-card, .period, .candidate {
    transition: border-color 160ms ease, background-color 160ms ease,
                box-shadow 160ms ease, transform 160ms ease;
  }
  #candidates > .candidate, .reason-text {
    animation: booklist-content-enter 160ms ease-out backwards;
  }
  [role="status"]:not(:empty) { animation: booklist-fade-in 140ms ease-out backwards; }
  details[open] > :not(summary) { animation: booklist-content-enter 160ms ease-out backwards; }

  /* All native buttons and links styled as buttons share the same feedback. */
  :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.primary, .back-link, .return-button, .reason-link):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px) scale(.98);
    box-shadow: none;
  }
  :is(nav a, .brand, .scope-label a, .source-link, .book-title, a.book-cover, .work-tag, .work-author, summary):active {
    transform: translateY(1px);
  }
  input:is([type="checkbox"], [type="radio"]):not(:disabled):active {
    transform: scale(.9);
  }
  :is(button, input[type="submit"], input[type="button"], input[type="reset"]):disabled,
  [aria-disabled="true"] {
    transform: none;
    box-shadow: none;
  }
}

/* Inline text links need a box for movement; existing card/button layouts take precedence. */
:where(nav a, .scope-label a, .source-link, .book-title, .work-tag, .work-author) { display: inline-block; }
summary { cursor: pointer; }
:is(a[href], button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent,#555555);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .public-card:hover, .book-card:hover, .period:hover {
    transform: translateY(-2px);
    border-color: var(--strong-line,#a5a5a5);
    box-shadow: 0 5px 15px #22222210;
  }
  .candidate:not(:disabled):not([aria-disabled="true"]):hover { border-color: #888888; }
  :is(button, input[type="submit"], input[type="button"], input[type="reset"], a.primary, .back-link, .return-button, .reason-link):not(:disabled):not([aria-disabled="true"]):hover:not(:active) {
    transform: translateY(-1px);
    box-shadow: 0 3px 7px #2222221a;
  }
  :is(nav a, .brand, .scope-label a, .source-link, .book-title, a.book-cover, .work-tag, .work-author, summary):hover:not(:active) {
    transform: translateY(-1px);
  }
  .tag-filter label:hover { box-shadow: 0 2px 6px #2222221a; }
  input:is([type="checkbox"], [type="radio"]):not(:disabled):hover { box-shadow: 0 0 0 3px #5555551f; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Match only the clicked shelf card to the destination's detail surface. */
@media (prefers-reduced-motion: no-preference) {
  .public-card.work-opening, .work-detail { view-transition-name: work-surface; }
  .public-card.work-opening .book-cover, .work-detail .detail-cover { view-transition-name: work-cover; }
  .public-card.work-opening .book-title, .work-detail .detail-heading h1 { view-transition-name: work-title; }
  .public-card.work-opening { transform: none; }
  /* Let the card itself travel, without a second transition on its parent. */
  main:has(.work-opening), main:has(.work-detail) { view-transition-name: none; }
  main:has(.work-detail) { animation: none; }
  .work-detail {
    transform-origin: center top;
    animation: booklist-work-enter 480ms cubic-bezier(.22,.75,.25,1) backwards;
  }
  html.native-page-transition .work-detail { animation: none; }
  ::view-transition-group(work-surface), ::view-transition-group(work-cover),
  ::view-transition-group(work-title) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(.22,.75,.25,1);
  }
  ::view-transition-image-pair(work-surface) { overflow: clip; border-radius: 8px; }
  ::view-transition-old(work-surface) { animation: booklist-fade-out 280ms ease-out both; }
  ::view-transition-new(work-surface) { animation: booklist-fade-in 440ms ease-out both; }
  ::view-transition-old(work-cover), ::view-transition-new(work-cover) {
    height: 100%; object-fit: cover; mix-blend-mode: normal;
    animation-duration: 520ms;
  }
  ::view-transition-old(work-title), ::view-transition-new(work-title) { animation-duration: 420ms; }
}


/* Layout switching has its own card/cover/title matches, not a page entrance. */
@media(prefers-reduced-motion:no-preference){
 html[data-shelf-view-changing] main,html[data-shelf-view-changing] .site-header{view-transition-name:none}
 html[data-shelf-view-changing] .public-card{transition:none;transform:none}
 html[data-shelf-view-changing]::view-transition-group(*){animation-duration:380ms;animation-timing-function:cubic-bezier(.22,.75,.25,1)}
 html[data-shelf-view-changing]::view-transition-image-pair(*){isolation:isolate;overflow:clip;border-radius:7px}
 html[data-shelf-view-changing]::view-transition-old(*),html[data-shelf-view-changing]::view-transition-new(*){height:100%;mix-blend-mode:normal;object-fit:fill}
 html[data-shelf-view-changing]::view-transition-old(*){animation:booklist-fade-out 220ms ease-out both}
 html[data-shelf-view-changing]::view-transition-new(*){animation:booklist-fade-in 300ms ease-out both}
 html[data-shelf-view-changing]::view-transition-old(root),html[data-shelf-view-changing]::view-transition-new(root){animation:none}
}

@media(prefers-reduced-motion:no-preference){
 @supports(view-transition-class:shelf-layout-card){
  html[data-shelf-view-changing]::view-transition-old(.shelf-layout-card),html[data-shelf-view-changing]::view-transition-new(.shelf-layout-card),
  html[data-shelf-view-changing]::view-transition-old(.shelf-layout-title),html[data-shelf-view-changing]::view-transition-new(.shelf-layout-title){object-fit:none;object-position:left top}
 }
}

/* A user-requested reduction applies to CSS motion as well as JS animations. */
html[data-motion=reduce]{scroll-behavior:auto!important}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=reduce] :is(.public-card,.book-card,.book-cover,.book-title,.work-tag,.work-author,button,summary):is(:hover,:active){transform:none!important}
html[data-motion=reduce]::view-transition-group(*),html[data-motion=reduce]::view-transition-old(*),html[data-motion=reduce]::view-transition-new(*){animation:none!important}