/* Warm, tactile feedback; motion accompanies an action, never the act of reading. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-spring:cubic-bezier(.34,1.56,.64,1)}
main,main.reenter,dialog[open]{animation:none}
button,nav a,summary{transition:transform 240ms var(--motion-spring),background-color 180ms ease,color 180ms ease,box-shadow 240ms ease}
button:not(:disabled):active,nav a:active{transform:scale(.955);transition-duration:70ms}
.book-row:active,.chapter-row:active{transform:scale(.985)}
.study-verse>summary:active,.study-fold>summary:active{transform:translateX(2px);background:#79856e0a}
.cover{transition:transform 420ms var(--motion-spring),box-shadow 300ms ease;transform-origin:30% 70%}
.arrow,.chapter-navigation svg{transition:transform 260ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
  .book-row:hover .cover{transform:translateY(-4px) rotate(-2deg);box-shadow:5px 10px 18px #25352820,inset 4px 0 0 #0001,inset 7px 0 0 #fff1}
  .chapter-row:hover,.saved-open:hover{background:#79856e09}
  .book-row:hover .arrow,.chapter-row:hover .arrow{transform:translateX(4px)}
  .primary:not(:disabled):hover{box-shadow:0 5px 15px #303b341c;transform:translateY(-1px)}
  .secondary:hover,.small-button:hover{background:#e9ece280}
  .word-list button:hover{color:var(--red)}
}
.motion-nav:before{content:'';position:absolute;top:-1px;left:0;width:22px;height:2px;border-radius:2px;background:var(--red);transform:translateX(calc(var(--nav-x) - 11px));transition:transform 380ms var(--motion-spring)}
.motion-nav a.active:after{display:none}
.motion-nav a svg{transform-origin:50% 65%}
.verse-chevron svg,.study-fold>summary svg{transition:transform 300ms var(--motion-spring)}
details[data-motion-open="false"]>summary svg{transform:rotate(0deg)}
details[data-motion-open="true"]>summary svg{transform:rotate(90deg)}
.motion-fold{overflow-anchor:none}
.motion-effects{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;contain:strict}
.motion-dot,.motion-ripple{position:absolute;pointer-events:none;border-radius:50%;background:var(--red)}
.motion-dot{width:5px;height:5px;background:#a95843}
.motion-dot:nth-child(even){background:#889571;border-radius:2px}
.motion-ripple{width:34px;height:34px;background:#899772}
dialog{transform-origin:50% 100%;overscroll-behavior:contain}
dialog::backdrop{animation:motion-backdrop 240ms ease both}
dialog.motion-closing::backdrop{animation:motion-backdrop-out 170ms ease both}
@keyframes motion-backdrop{from{opacity:0}to{opacity:1}}
@keyframes motion-backdrop-out{from{opacity:1}to{opacity:0}}
#toast{transition:opacity 180ms ease,transform 320ms var(--motion-spring);transform:translate(-50%,12px) scale(.97);max-width:calc(100vw - 32px);white-space:normal;text-align:center}
#toast.visible{transform:translate(-50%,0) scale(1)}
.progress-track span{transition:width 550ms var(--motion-ease)}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  button:not(:disabled):active,nav a:active,.study-verse>summary:active,.study-fold>summary:active{transform:none}
  .book-row:hover .cover,.book-row:hover .arrow,.chapter-row:hover .arrow,.primary:not(:disabled):hover{transform:none}
  .motion-effects{display:none}
}