/* motion.css — the sheet for motion.js, the house motion (Luis, 2026-10-15).
   Loaded by topbar.php on every page with the bar.

   The glide is one element that travels between the items of a row. Its
   default look is the raised white pill of the house's segmented controls;
   a row that wants another look passes its own class (opts.cls) and styles
   that. The item the pill is on carries .pm-on, so a row whose selected item
   draws its own pill can hand it over:
       .my-tabs.pm-track .my-tab.active.pm-on { background: transparent; box-shadow: none; }

   Arrivals in the house curve (--ease-liquid, index.css): .42s for the
   selected pill, .30s for one that follows the pointer. */

/* No position rules on the row or its items here: a row may be fixed (the
   dock) or already positioned, so motion.js makes the row a positioned box
   and the items positioned only where they are not already. */
.pm-glide {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    background: #fdfdfe;
    box-shadow: 0 2px 6px rgba(31, 45, 61, .13),
                0 0 0 1px rgba(255, 255, 255, .9);
    opacity: 0;
    transition: transform .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                width .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                height .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                opacity .2s ease;
}
.pm-glide.on { opacity: 1; }
.pm-glide.pm-glide-hover {
    transition: transform .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                width .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                height .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)),
                opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) {
    .pm-glide, .pm-glide.pm-glide-hover { transition: opacity .12s ease; }
}