/* Interaction polish. Movement stays small and fast so the interface reads as
   responsive rather than animated; keyframes live in design/base.css. */

:root {
    --ease: cubic-bezier(.32, .72, 0, 1);
    --lift: 0 2px 6px rgba(12, 26, 41, .07);
}

[data-litheme="dark"] {
    --lift: 0 2px 8px rgba(0, 0, 0, .45);
}

/* --- Controls ------------------------------------------------------------ */

.li-button,
.li-text-button,
.li-panel-link,
.li-kpi,
.li-work-row,
.li-device-row,
.li-attention-row,
.li-activity-row {
    transition:
        background-color var(--dur) var(--ease),
        border-color var(--dur) var(--ease),
        color var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease),
        transform var(--dur) var(--ease);
}

.li-button:active,
.li-panel-link:active {
    transform: translateY(1px);
}

.li-button .ms,
.li-text-button .ms,
.li-panel-link .ms {
    transition: transform .2s var(--ease);
}

/* Trailing arrows lean into the direction they travel.

   :last-child is what makes this a *trailing* arrow rule. Hairline buttons put
   their icon first (<span class="ms">add</span>New device), where a leading icon
   is followed by the label's text node - so it is not :last-child and correctly
   stays put. Without that, every small button's icon drifted right on hover,
   which reads as a rendering glitch rather than as motion.

   .li-button-icon is excluded outright: its icon IS the only child, so it would
   otherwise match and slide around inside a 26px square. */
.li-text-button:hover .ms,
.li-panel-link:hover .ms,
.li-button-small:not(.li-button-icon):hover .ms:last-child {
    transform: translateX(3px);
}

/* --- Cards and panels ---------------------------------------------------- */

.li-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--lift);
}

.li-kpi:active {
    transform: translateY(0);
}

.li-panel {
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.li-panel:hover {
    box-shadow: var(--lift);
}

/* Rows pick up a signal edge on hover instead of only a fill change. */
.li-work-row,
.li-device-row {
    position: relative;
}

.li-work-row::before,
.li-device-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--signal);
    transform: scaleY(0);
    transition: transform .18s var(--ease);
}

.li-work-row:hover::before,
.li-device-row:hover::before {
    transform: scaleY(1);
}

.li-health-bar span {
    transition: width .6s var(--ease);
}

/* --- Entrance ------------------------------------------------------------ */

/* Only the active screen is mounted under .li-page-content, so this replays on
   every navigation and reads as a page transition rather than a one-time load.

   "backwards", never "both": a filled-forwards transform stays applied after the
   animation ends, and a transformed ancestor becomes the containing block for
   any position:fixed inside it - which silently clips modal backdrops to the
   page column. Every keyframe here ends at transform:none, so dropping the fill
   costs nothing and leaves the element with no transform at rest. */
.li-page-content > :not(.li-app-footer) {
    animation: liUp .28s var(--ease) backwards;
}

/* A modal covers the viewport, so it does not travel with the page beneath it. */
.li-page-content > .li-dialog-backdrop {
    animation: none;
}

.li-overview-kpis > .li-kpi {
    animation: liIn .34s var(--ease) backwards;
}

.li-overview-kpis > .li-kpi:nth-child(1) { animation-delay: .06s; }
.li-overview-kpis > .li-kpi:nth-child(2) { animation-delay: .1s; }
.li-overview-kpis > .li-kpi:nth-child(3) { animation-delay: .14s; }
.li-overview-kpis > .li-kpi:nth-child(4) { animation-delay: .18s; }

.li-quick-actions {
    animation: liUp .3s var(--ease) .2s backwards;
}

.li-overview-grid > .li-panel {
    animation: liIn .36s var(--ease) backwards;
}

.li-overview-grid > .li-panel:nth-child(1) { animation-delay: .12s; }
.li-overview-grid > .li-panel:nth-child(2) { animation-delay: .18s; }
.li-overview-grid > .li-panel:nth-child(3) { animation-delay: .24s; }
.li-overview-grid > .li-panel:nth-child(4) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    .li-kpi:hover,
    .li-button:active,
    .li-panel-link:active {
        transform: none;
    }
}