/* Shared motion for panels, cards and pills: entrance on load, hover and focus,
   filter and collapse transitions. Transform and opacity only: the browser
   composites them without a re-layout. Everything is off under
   prefers-reduced-motion.

   Classes
     .mo-rise      enters on load (fade + rise). Stagger with --mo-i, or put
                   the items in a .mo-stagger and they are numbered for you.
                   --mo-base on a container shifts its whole group later.
     .mo-lift      lifts on hover and keyboard focus, squashes on press.
     .mo-pill      springs on hover, pops when it gains .is-active or
                   aria-pressed="true".
     .mo-out       leaving: fades and shrinks (motion.js then hides it).
     .mo-in        arriving after a filter or expand (motion.js adds it).

   Tune per site on :root: --mo-lift, --mo-tilt, --mo-step, --mo-accent. */

:root {
    --mo-ease: cubic-bezier(.16, 1, .3, 1);
    --mo-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
    --mo-dur: .55s;
    --mo-step: 55ms;
    --mo-lift: -4px;
    --mo-tilt: 0deg;
    --mo-accent: var(--color-primary, currentColor);
}

@keyframes mo-rise {
    from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.97); }
    to   { opacity: 1; transform: none; }
}

@keyframes mo-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12) rotate(-2deg); }
    100% { transform: scale(1); }
}

/* backwards, not both: once the animation ends it must stop owning transform,
   or .mo-lift / .mo-pill hover could never move the element. */
.mo-rise {
    animation: mo-rise var(--mo-dur) var(--mo-ease-pop) backwards;
    animation-delay: calc((var(--mo-base, 0) + var(--mo-i, 0)) * var(--mo-step));
}

/* Stagger for the direct children of a .mo-stagger without waiting for JS.
   motion.js numbers deeper .mo-rise items; an inline --mo-i wins over both. */
.mo-stagger > :nth-child(2)  { --mo-i: 1; }
.mo-stagger > :nth-child(3)  { --mo-i: 2; }
.mo-stagger > :nth-child(4)  { --mo-i: 3; }
.mo-stagger > :nth-child(5)  { --mo-i: 4; }
.mo-stagger > :nth-child(6)  { --mo-i: 5; }
.mo-stagger > :nth-child(7)  { --mo-i: 6; }
.mo-stagger > :nth-child(8)  { --mo-i: 7; }
.mo-stagger > :nth-child(9)  { --mo-i: 8; }
.mo-stagger > :nth-child(10) { --mo-i: 9; }
.mo-stagger > :nth-child(11) { --mo-i: 10; }
.mo-stagger > :nth-child(12) { --mo-i: 11; }
.mo-stagger > :nth-child(n+13) { --mo-i: 12; }

.mo-in {
    animation: mo-rise .38s var(--mo-ease-pop) backwards;
    animation-delay: calc(var(--mo-i, 0) * 35ms);
}

.mo-out {
    opacity: 0 !important;
    transform: scale(.96) !important;
    transition: opacity .18s ease, transform .18s ease !important;
    pointer-events: none;
}

.mo-lift {
    transition: transform .35s var(--mo-ease-pop);
}
.mo-lift:hover,
.mo-lift:focus-visible,
.mo-lift:focus-within {
    transform: translate3d(0, var(--mo-lift), 0) rotate(var(--mo-tilt));
}
.mo-lift:active {
    transform: translate3d(0, calc(var(--mo-lift) / 2), 0) scale(.985);
    transition-duration: .1s;
}

.mo-pill {
    transition: transform .25s var(--mo-ease-pop), opacity .2s ease;
}
.mo-pill:hover,
.mo-pill:focus-visible {
    transform: translate3d(0, -2px, 0) scale(1.05) rotate(calc(var(--mo-tilt) * 2));
}
.mo-pill:active {
    transform: scale(.94);
    transition-duration: .08s;
}
.mo-pill.is-active,
.mo-pill[aria-pressed="true"] {
    animation: mo-pop .4s var(--mo-ease-pop);
}
/* An active pill that is still entering keeps the entrance. motion.js drops
   .mo-rise when it ends; a later click then gets the pop. */
.mo-pill.mo-rise.is-active,
.mo-pill.mo-rise[aria-pressed="true"] {
    animation: mo-rise var(--mo-dur) var(--mo-ease-pop) backwards;
    animation-delay: calc((var(--mo-base, 0) + var(--mo-i, 0)) * var(--mo-step));
}

.mo-lift:focus-visible,
.mo-pill:focus-visible {
    outline: 2px solid var(--mo-accent);
    outline-offset: 3px;
}

/* ── Admin panel cards ───────────────────────────────────────────
   Every admin page gets a short settle on its cards without a markup change.
   Cards already on the scroll reveal (.sr) keep that one. Hover stays with the
   panel's own .ui-card-hover contract. */
@keyframes mo-settle {
    from { opacity: 0; transform: translate3d(0, 6px, 0); }
    to   { opacity: 1; transform: none; }
}
.acp-card:not(.sr) {
    animation: mo-settle .35s var(--mo-ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .mo-rise,
    .mo-in,
    .mo-pill.is-active,
    .mo-pill[aria-pressed="true"],
    .acp-card:not(.sr) {
        animation: none !important;
    }
    .mo-lift,
    .mo-pill,
    .mo-out {
        transition: none !important;
    }
    .mo-lift:hover,
    .mo-lift:focus-visible,
    .mo-lift:focus-within,
    .mo-lift:active,
    .mo-pill:hover,
    .mo-pill:focus-visible,
    .mo-pill:active {
        transform: none !important;
    }
}