/* The reading plane is quiet. Only an intentional state change moves. */
.page, .home, .reader-page .doc__body > * { animation: none; }
#main { view-transition-name: vibel-content; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(vibel-content) { animation-duration: var(--motion-route); animation-timing-function: var(--motion-ease); }
::view-transition-old(vibel-content) { animation: motion-out var(--motion-route) var(--motion-ease) both; }
::view-transition-new(vibel-content) { animation: motion-in var(--motion-route) var(--motion-ease) both; }
::view-transition { pointer-events: none; }
@keyframes motion-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes motion-out { from { opacity: 1; } to { opacity: 0; } }
.doc__body details > summary { transition: color var(--motion-feedback) var(--motion-ease); }
.doc__body details[data-motion-state] { overflow: hidden; }
.doc__body [data-flash="true"] { animation: motion-target 650ms var(--motion-ease) 1; }
@keyframes motion-target { from { background: rgba(239,110,39,.16); } to { background: transparent; } }
.reader-copy { min-inline-size: 36px; }
.reader-copy[data-state="copied"] { color: var(--motion-thread); }
.finish__box { transition: background-color var(--motion-feedback), border-color var(--motion-feedback); }
.motion-preference { display: grid; grid-template-columns: 1fr minmax(140px, auto); gap: .5rem 1rem; padding: .9rem 0; align-items: center; color: var(--text-main, inherit); }
.motion-preference > span { font-weight: 600; font-size: .9rem; }
.motion-preference select { min-height: 44px; max-width: 100%; border: 1px solid var(--reader-border, var(--border-subtle, #8886)); border-radius: 10px; background: var(--surface-card, transparent); color: inherit; padding: .55rem .8rem; font: inherit; font-size: .85rem; }
.motion-preference option { color: CanvasText; background: Canvas; }
.motion-preference small { grid-column: 1 / -1; opacity: .75; font-size: .8rem; line-height: 1.5; }
.motion-loading { color: var(--text-primary, inherit); display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; font-size: .9rem; }
.motion-loading--initial { padding: clamp(20px, 4vw, 48px); min-height: 150px; max-width: 780px; margin: 0 auto; }
.motion-loading--pending { position: fixed; inset-inline: 16px; top: calc(var(--bar-h, 80px) + 10px); z-index: 95; max-width: 620px; margin-inline: auto; padding: .8rem 1rem; border: 1px solid var(--motion-thread); border-radius: 14px; background: var(--bg-base, #fff); box-shadow: 0 8px 30px #0002; }
html[data-theme="dark"] .motion-loading--pending { background: #141414; }
.motion-loading__label { flex: 1; min-width: 150px; }
.motion-loading button { min-height: 40px; padding: .25rem .7rem; border-radius: 8px; border: 1px solid #8885; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.motion-loading__thread { width: 26px; height: 3px; border-radius: 2px; background: var(--motion-thread); transform-origin: left; animation: motion-thread 900ms var(--motion-ease) 2 alternate; }
@keyframes motion-thread { from { transform: scaleX(.3); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
.motion-skeleton { flex-basis: 100%; display: grid; gap: 14px; padding-top: 24px; }
.motion-skeleton i, .motion-skeleton b { height: 12px; border-radius: 5px; background: currentColor; opacity: .065; }
.motion-skeleton .motion-skeleton__title { width: 65%; height: 24px; margin-bottom: 12px; }
.motion-skeleton .motion-skeleton__short { width: 75%; }
.motion-skeleton b { height: 105px; margin-top: 14px; }
.motion-image-ghost { position: fixed; pointer-events: none; z-index: 1; margin: 0; max-width: none; max-height: none; object-fit: contain; transform-origin: 0 0; border-radius: 12px; }
.imageviewer__image { will-change: auto; }
.motion-landing { padding-block: clamp(32px, 6vw, 72px); }
.motion-landing .doc__standfirst { max-width: 64ch; }
.motion-lab-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 16px; margin: 28px 0; }
.motion-lab-link { display: grid; align-content: start; gap: 12px; padding: 24px; border: 1px solid var(--reader-border, #8885); border-radius: 16px; text-decoration: none; color: inherit; }
.motion-lab-link strong { font-size: 1.15rem; line-height: 1.4; }
.motion-lab-link small { line-height: 1.65; opacity: .7; }
.motion-lab-link:focus-visible, .motion-lab-link:hover { border-color: var(--motion-thread); }
.motion-lab-link span { color: var(--motion-thread); font-size: .82rem; }
.motion-lab-supplement { display: block; margin-block: 1rem; font-size: .9rem; }
.motion-specimen { display: grid; gap: 20px; max-width: 800px; }
.motion-specimen > section, .motion-specimen > details { padding: 20px; border: 1px solid #8885; border-radius: 14px; }
.motion-specimen summary { padding: 12px 0; cursor: pointer; }
.motion-specimen button { margin: .25rem; }
.motion-specimen .motion-sample-reveal { padding: 20px; border-left: 2px solid var(--motion-thread); margin-block: 16px; }
/* An explicit override also covers existing chrome, not only new effects. */
html[data-motion="reduced"] *, html[data-motion="off"] * { scroll-behavior: auto !important; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after,
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html:not([data-motion="full"])::view-transition-group(*), html:not([data-motion="full"])::view-transition-old(*), html:not([data-motion="full"])::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the specimen SVG inside the reading column, not at intrinsic width. */
.motion-specimen, .motion-specimen > section { min-width: 0; }
.motion-specimen .figure__open { height: auto; min-height: 0; padding: 0; margin: 0; white-space: normal; }
.motion-specimen .figure__open > svg { display: block; width: 100%; height: auto; }