/* The ways on under "nothing found" (parts/empty-way.php, drawn by parts/empty.php, parts/legacy-empty.php and the
   search page's and directories' parts/empty.php). Oren 2026-10-16, item 112, in place of item 105's band and x:
   each hover says where its way goes, by motion, never a colour wash.

   On to the whole catalogue: the catalogue's own grid mark (squares-four, its "everything" tile) steps in after
   the words and its four tiles land one after another in reading order -- the catalogue's cards filling its grid.
   Back to the list before the search or the filters: the undo arrow, pointing back against the reading direction,
   turns in a quarter along its own arc as it appears -- the search wound back. No x: nothing is being closed.

   In both the words step back by offset to give the mark room (offset, not transform: text kept off the compositor
   keeps clean glyph edges). Colours are pinned against page.css's and legacy-empty.css's hover tints and the
   theme's green a:hover. The keyboard gets the same, with a ring; touch has no hover and loses nothing by it --
   the words say where each way goes, the mark only shows it. */

.cil-ctl-empty__actions .cil-ctl-way {
    --ctl-way-fwd: -1; --ctl-way-ease: cubic-bezier(.22, 1, .36, 1);
    position: relative; overflow: hidden; transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
/* Forward is the reading direction: left in Hebrew and Arabic, right in English and Russian. */
.lang-to-css-ltr .cil-ctl-empty__actions .cil-ctl-way { --ctl-way-fwd: 1; }
.cil-ctl-empty__actions .cil-ctl-way:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-black); text-decoration: none; }
.cil-ctl-empty__actions .cil-ctl-way.cil-ctl-btn--primary:is(:hover, :focus-visible) { background: var(--cil-blue); }
.cil-ctl-empty__actions .cil-ctl-way:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 3px; }
.cil-ctl-empty__actions .cil-ctl-way:active { transform: scale(.98); }

.cil-ctl-way .cil-ctl-btn__words { position: relative; inset-inline-end: 0; transition: inset-inline-end .25s var(--ctl-way-ease); }
.cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-btn__words { inset-inline-end: 14px; }

/* The mark, at the end of the line the words leave free. Drawn left to right: forward is mirrored on a
   right-to-left page, so the grid's first tile and the arrow's "back" follow the reading. */
.cil-ctl-way__mark {
    position: absolute; top: 50%; inset-inline-end: 14px; width: 18px; height: 18px; margin-top: -9px;
    transform: scaleX(var(--ctl-way-fwd)); pointer-events: none;
}
.cil-ctl-way__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The whole catalogue: each tile drops a few pixels into its place as it appears (lengths in the mark's own
   256-unit grid: 48 units are 3.4px at 18px). Leaving, all four go at once. */
.cil-ctl-way__tile {
    transform-box: fill-box; transform-origin: center; opacity: 0; transform: translateY(-48px) scale(.55);
    transition: opacity .12s ease, transform .12s ease;
}
.cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-way__tile { opacity: 1; transform: none; transition: opacity .18s ease, transform .24s var(--ctl-way-ease); }
.cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-way__tile:nth-child(2) { transition-delay: .06s; }
.cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-way__tile:nth-child(3) { transition-delay: .12s; }
.cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-way__tile:nth-child(4) { transition-delay: .18s; }

/* Back: the arrow drawn turning clockwise, mirrored where the reading runs left to right, so it always points
   back; it comes in a quarter turn behind where it rests and winds along its arc into place. */
.cil-ctl-way--clear .cil-ctl-way__mark { transform: scaleX(calc(var(--ctl-way-fwd) * -1)); }
.cil-ctl-way--clear .cil-ctl-way__mark svg { opacity: 0; transform: rotate(-90deg); transition: opacity .12s ease, transform .12s ease; }
.cil-ctl-way--clear:is(:hover, :focus-visible) .cil-ctl-way__mark svg { opacity: 1; transform: none; transition: opacity .18s ease, transform .3s var(--ctl-way-ease); }

/* Reduced motion: nothing travels or turns -- the words stand aside at once and the mark is simply there. */
@media (prefers-reduced-motion: reduce) {
    .cil-ctl-empty__actions .cil-ctl-way, .cil-ctl-way .cil-ctl-btn__words { transition: none; }
    .cil-ctl-way .cil-ctl-way__tile, .cil-ctl-way--clear .cil-ctl-way__mark svg,
    .cil-ctl-way:is(:hover, :focus-visible) .cil-ctl-way__tile,
    .cil-ctl-way--clear:is(:hover, :focus-visible) .cil-ctl-way__mark svg { transform: none; transition: none; }
}