/* Motion for the shared layout (tools and admin pages, not the games). Loaded by includes/layout.php after the other
layout styles; the behaviour is in assets/layout/motion.js (window.LayoutMotion).
Rules: only transform and opacity move (plus width for bars), everything uses the tokens at the end of layout.css,
and nothing waits on an animation before it can be used. Reduced motion and html.lay-motion-off cut the tokens to
zero; the rules below also switch the looping animations (shimmer, spinners, the top bar) to a still state.
Admin's loading motion, and what the rest of the tools app lacked (2026-10 inventory), now all from this file:
admin had tools / home / knowledge had
- shimmer skeleton rows, lists, tiles while - checkers: a centred card with pulse dots, a wave or a bar
data loads (layout_skeleton*, .adm-skel (assets/loading.js) -> now the admin look: top-edge bar, ring
pulsed in admin.css as well) spinner, skeleton lines (tool-ui.css + loader rules below)
- data browser: its own spinner; workflows: its own wf-skel
shimmer; history panel: nothing -> .lay-spin / .lay-skeleton
- ring spinner .st-spin (admin.css only) - four other spinners -> one .lay-spin (.st-spin is an alias)
- top bar for fetch/XHR, busy buttons - same (global already), but nothing for navigation; the checkers
had loading.js's own line that stuck after a JS-handled submit
-> one top bar for link clicks and real submits (motion.js)
- KPI tiles, cards, rows rise in staggered - only .tw-card / .tw-stat / check rows -> the page's blocks
(.tool-page / .kb children, .tw-section, record cards) too
- sliding underline on .adm-tabs - .td-tabs and [data-tab-ink] strips get it too
- drawers, menus, flashes, dialogs, toasts, - shared already (dialogs, toasts, details); the history panel
details, tab panels animate slides on the motion tokens
Duplicates removed from admin.css: .adm-skel's pulse, .st-spin and the chevron transitions.
Sections: skeletons · spinner · top progress bar · busy buttons · first-load entrance · tool loader · bars ·
count-up · dialogs, drawers, menus, toasts · details and tabs · reduced motion / off switch. */
/* ---------- skeletons: , LayoutMotion.skeletonRows(), .skeleton() ---------- */
.lay-skeleton, .adm-skel {
position: relative; display: block; height: 10px; border-radius: 4px; overflow: hidden;
background: var(--sel); animation: none;
}
.lay-skeleton::after, .adm-skel::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg) 55%, transparent), transparent);
transform: translateX(-100%); animation: lay-shimmer 1.3s var(--mo-ease) infinite;
}
@keyframes lay-shimmer { to { transform: translateX(100%); } }
.lay-skeleton.is-text { height: 9px; margin: 3px 0; }
.lay-skeleton.is-title { height: 14px; width: 40%; }
.lay-skeleton.is-num { height: 22px; width: 56px; border-radius: 5px; }
.lay-skeleton.is-block { height: 64px; border-radius: 6px; }
.lay-skeleton.is-circle { width: 28px; height: 28px; border-radius: 50%; flex: none; }
tr.lay-skel-row td { padding-top: 11px; padding-bottom: 11px; }
tr.lay-skel-row:hover td { background: none; }
.lay-skel-list { list-style: none; margin: 0; padding: 4px 0; display: grid; }
.lay-skel-list > li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; }
.lay-skel-list > li > div { flex: 1; display: grid; gap: 6px; min-width: 0; }
.lay-skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lay-skel-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 9px; background: var(--bg); }
.lay-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ---------- ring spinner: (admin's .st-spin is the same) ---------- */
.lay-spin, .st-spin {
display: inline-block; flex: none; width: 13px; height: 13px; border-radius: 50%; vertical-align: -2px;
border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-top-color: var(--accent);
animation: lay-busy-spin .7s linear infinite;
}
.lay-spin.is-lg { width: 22px; height: 22px; }
/* ---------- top progress bar for fetches in flight (motion.js puts in the body) ---------- */
.lay-progress {
position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 600; pointer-events: none; overflow: hidden;
opacity: 0; transition: opacity var(--mo-base) var(--mo-ease);
}
.lay-progress.is-on { opacity: 1; }
.lay-progress > i {
position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--accent); border-radius: 0 2px 2px 0;
transform: translateX(-100%); animation: lay-progress 1.15s var(--mo-ease) infinite;
}
.lay-progress.is-done > i { width: 100%; animation: none; transform: none; transition: width var(--mo-fast) var(--mo-ease-out); }
@keyframes lay-progress { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
/* ---------- busy buttons: LayoutMotion.busy(button, promise), or automatic for the button that started a fetch ---------- */
.lay-busy { position: relative; }
:is(.ui-btn, .lay-btn, .tw-btn, button).lay-busy { color: transparent !important; }
:is(.ui-btn, .lay-btn, .tw-btn, button).lay-busy > * { visibility: hidden; }
:is(.ui-btn, .lay-btn, .tw-btn, button).lay-busy::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -7.5px 0 0 -7.5px;
border-radius: 50%; border: 2px solid var(--lay-busy-ring, color-mix(in srgb, var(--ink) 22%, transparent));
border-top-color: var(--lay-busy-ink, var(--ink)); animation: lay-busy-spin .7s linear infinite;
}
.ui-btn-pri.lay-busy { --lay-busy-ink: var(--pri-ink); --lay-busy-ring: color-mix(in srgb, var(--pri-ink) 30%, transparent); }
@keyframes lay-busy-spin { to { transform: rotate(360deg); } }
/* ---------- first-load entrance: html.lay-mo-load is set in by motion.js and removed once the page settles ----------
Rows, list items, cards and stat tiles that are in the page (or arrive while it loads) fade and rise in with a
small stagger capped at the tenth item, and only the first 30 of a list move at all. */
@keyframes lay-rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes lay-fade { from { opacity: 0; } }
html.lay-mo-load .lay-main :is(tbody > tr, .adm-list > li, .adm-feed > li, .home-list > li, [data-motion-list] > li, .lay-mo-item):nth-child(-n+30):not(.lay-skel-row, [data-skeleton]),
html.lay-mo-load .lay-main :is(.adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row),
html.lay-mo-load .lay-main [data-motion-item] {
animation: lay-rise var(--mo-base) var(--mo-ease-out) both;
animation-delay: calc(var(--mo-stagger) * var(--mo-i, 0));
}
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(2) { --mo-i: 1; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(3) { --mo-i: 2; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(4) { --mo-i: 3; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(5) { --mo-i: 4; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(6) { --mo-i: 5; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(7) { --mo-i: 6; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(8) { --mo-i: 7; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(9) { --mo-i: 8; }
html.lay-mo-load .lay-main :is(tr, li, .adm-kpi, .adm-card, .tw-card, .tw-stat, .ipm-pool, .home-tool, .gs-bar-row, .lay-mo-item):nth-child(n+10) { --mo-i: 9; }
html.lay-mo-load .lay-main [data-motion="off"] *,
html.lay-mo-load .lay-main [data-motion="off"] { animation: none; }
/* ---------- tool results: a result block rises in each time it is shown (display none to shown restarts it) ---------- */
.lay-main :is(.check-section, .verdict-banner, .result-box, .friendly-result-wrapper, .quick-summary, .technical-details-accordion, [data-motion-reveal]) {
animation: lay-rise var(--mo-base) var(--mo-ease-out) both;
}
.lay-main .check-section:nth-of-type(2) { animation-delay: calc(var(--mo-stagger) * 1); }
.lay-main .check-section:nth-of-type(3) { animation-delay: calc(var(--mo-stagger) * 2); }
.lay-main .check-section:nth-of-type(n+4) { animation-delay: calc(var(--mo-stagger) * 3); }
/* ---------- page entrance: a tool page's blocks (head, cards, sections) rise in like admin's cards ----------
Four steps of stagger at most, so the last block is in place by ~270 ms; the blocks are usable at once (opacity and
transform only, no layout change). The home page's tool grid and knowledge's nav drawer move on their own. */
html.lay-mo-load .lay-main .tool-page > :not(.home-tools, script, style, template, [hidden], [data-motion="off"]),
html.lay-mo-load .lay-main .wf-app > :not(script, style, template, [hidden]),
html.lay-mo-load .lay-main .kb-article {
animation: lay-rise var(--mo-base) var(--mo-ease-out) both;
animation-delay: calc(var(--mo-stagger) * var(--mo-p, 0));
}
html.lay-mo-load .lay-main :is(.tool-page, .wf-app) > :nth-child(2) { --mo-p: 1; }
html.lay-mo-load .lay-main :is(.tool-page, .wf-app) > :nth-child(3) { --mo-p: 2; }
html.lay-mo-load .lay-main :is(.tool-page, .wf-app) > :nth-child(n+4) { --mo-p: 3; }
html.lay-mo-load .lay-main :is(.tw-section, .record-selector-card) { animation: lay-rise var(--mo-base) var(--mo-ease-out) both; }
/* ---------- tool loader (assets/loading.js UnifiedLoader, laid out in tool-ui.css) ----------
The card fades in; its top edge runs the same sweep as the page's top bar; the status icon is the ring spinner;
skeleton lines shimmer below. Done and error states stop the spinner and show their mark. */
.unified-loader.is-visible { animation: lay-fade var(--mo-base) var(--mo-ease-out); }
.unified-loader .loader-bar-fill { transition: width var(--mo-slow) var(--mo-ease); }
.unified-loader .loader-bar-fill.indeterminate { transform: translateX(-100%); animation: lay-progress 1.15s var(--mo-ease) infinite; }
.unified-loader .loader-text-icon {
border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); border-top-color: var(--accent);
animation: lay-busy-spin .7s linear infinite;
}
.unified-loader:is(.is-error, .is-done) .loader-text-icon { border: 0; animation: none; }
.unified-loader:is(.is-error, .is-done) .loader-skel { display: none; }
/* ---------- bars: grow from the left when they appear, ease to a new width when the value changes ----------
Any bar can join with [data-motion-bar] on the filled element. */
@keyframes lay-bar-grow { from { transform: scaleX(0); } }
.adm-meter > i, .gs-bar-fill, .lookup-meter .fill, .usage-bar > span, [data-motion-bar] {
transform-origin: left center;
transition: width var(--mo-slow) var(--mo-ease);
animation: lay-bar-grow var(--mo-slow) var(--mo-ease-out) both;
}
.loader-bar-fill, .progress-bar-fill { transition: width var(--mo-slow) var(--mo-ease); }
:where(.lay-app) :where(progress)::-webkit-progress-value { transition: width var(--mo-slow) var(--mo-ease); }
html.lay-motion-off :is(.adm-meter > i, .gs-bar-fill, .lookup-meter .fill, .usage-bar > span, [data-motion-bar]) { animation: none; transition: none; }
/* sparklines (admin overview, games stats) rise from their baseline when drawn */
@keyframes lay-spark { from { opacity: 0; transform: scaleY(.15); } }
.adm-spark:not(.is-empty) path, .gs-spark path {
transform-box: view-box; transform-origin: 50% 100%;
animation: lay-spark var(--mo-slow) var(--mo-ease-out) both;
}
.gs-heat-cell { animation: lay-fade var(--mo-slow) var(--mo-ease-out) both; }
/* ---------- count-up numbers: motion.js counts .adm-kpi-v, .ipm-pool-n, .tw-stat b and [data-count-up] ---------- */
.lay-counting { font-variant-numeric: tabular-nums; }
/* ---------- dialogs, drawers, menus, palette and toasts ---------- */
@keyframes lay-pop-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes lay-slide-in { from { opacity: 0; transform: translateX(10px); } }
@keyframes lay-drop-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes lay-panel-in { from { opacity: 0; transform: translateY(3px); } }
/* modal