/* Optional motion: readable without JavaScript, and quiet when paused. */
:root { --motion-ease: cubic-bezier(.16,1,.3,1); }
.reading-progress { position: fixed; inset: 0 0 auto; height: 1px; z-index: 1100; background: var(--accent-text); transform-origin: left; scale: var(--page-progress,0) 1; pointer-events: none; }
.motion-control { position: fixed; right: 20px; bottom: 20px; z-index: 1001; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 30px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 20px #151A1814; font-size: 11px; font-weight: 600; }
.motion-control:disabled { cursor: default; }
.motion-control-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-control[aria-pressed='true'] .motion-control-icon { width: 0; height: 0; border: 6px solid transparent; border-right: 0; border-left: 9px solid currentColor; }
.motion-control:disabled .motion-control-icon { width: 10px; height: 2px; border: 0; background: currentColor; }
html[data-motion='on'] .motion-ready { opacity: 0; translate: 0 24px; transition: opacity .65s var(--motion-ease) var(--reveal-delay,0ms), translate .65s var(--motion-ease) var(--reveal-delay,0ms); }
html[data-motion='on'] .motion-ready.is-visible, .motion-ready:focus-within { opacity: 1; translate: 0 0; }
html[data-motion='on'] .rhythm-band.motion-inview .rhythm-track { animation: rhythm 40s linear infinite; }
@keyframes rhythm { to { translate: -50% 0; } }
.faq-item { overflow: hidden; }
.faq-item summary:after { transition: rotate .25s var(--motion-ease); }
html.is-page-hidden *, html.is-page-hidden *::before, html.is-page-hidden *::after { animation-play-state: paused !important; }
html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after { animation: none !important; transition: none !important; }
html[data-motion='off'] .motion-ready { opacity: 1; translate: none; }
@media (max-width: 640px) { .motion-control { right: 12px; bottom: 12px; font-size: 10px; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .motion-ready { opacity: 1 !important; translate: none !important; }
}