/* LearnX AI motion layer: restrained product motion for LMS surfaces. */

:root {
    --lxp-motion-fast: 160ms;
    --lxp-motion: 260ms;
    --lxp-motion-slow: 620ms;
    --lxp-motion-ease: cubic-bezier(.22, .61, .36, 1);
    --lxp-motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}

.lxp-page [data-lxp-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity var(--lxp-motion-slow) var(--lxp-motion-ease-out),
        transform var(--lxp-motion-slow) var(--lxp-motion-ease-out),
        box-shadow var(--lxp-motion) var(--lxp-motion-ease),
        border-color var(--lxp-motion) var(--lxp-motion-ease),
        background-color var(--lxp-motion) var(--lxp-motion-ease);
    transition-delay: var(--lxp-delay, 0ms);
}

.lxp-page [data-lxp-reveal].is-visible,
.lxp-page.lxp-motion-reduced [data-lxp-reveal] {
    opacity: 1;
    transform: translateY(0);
}

.lxp-page .tbl-table tbody tr,
.lxp-page .lxp-lesson-link,
.lxp-page .lxp-filterbar__item,
.lxp-page .lxp-insight-card,
.lxp-page .lxp-course-card,
.lxp-page .lxp-resource-card,
.lxp-page .lxp-assessment-card {
    transition:
        transform var(--lxp-motion-fast) var(--lxp-motion-ease),
        background-color var(--lxp-motion-fast) var(--lxp-motion-ease),
        border-color var(--lxp-motion-fast) var(--lxp-motion-ease),
        box-shadow var(--lxp-motion-fast) var(--lxp-motion-ease);
}

.lxp-page .tbl-table tbody tr:hover {
    transform: translateY(-1px);
    box-shadow: inset 3px 0 0 rgba(31, 111, 235, .55);
}

.lxp-page .lxp-lesson-link:hover,
.lxp-page .lxp-filterbar__item:hover,
.lxp-page .lxp-insight-card:hover,
.lxp-page .lxp-course-card:hover,
.lxp-page .lxp-resource-card:hover,
.lxp-page .lxp-assessment-card:hover {
    transform: translateY(-2px);
}

.lxp-page .lxp-progress {
    overflow: hidden;
}

.lxp-page .lxp-progress__bar {
    transform-origin: left center;
    animation: lxpProgressFill var(--lxp-motion-slow) var(--lxp-motion-ease-out) both;
}

.lxp-page .lxp-kpi__value,
.lxp-page .mkpi__value,
.lxp-page [data-lxp-count] {
    font-variant-numeric: tabular-nums;
}

.lxp-page .lxp-chip--pulse,
.lxp-page .lxp-chip--live,
.lxp-page .lxp-state-pulse {
    position: relative;
}

.lxp-page .lxp-chip--pulse::after,
.lxp-page .lxp-chip--live::after,
.lxp-page .lxp-state-pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 1px solid currentColor;
    opacity: 0;
    pointer-events: none;
    animation: lxpStatusPulse 2.4s var(--lxp-motion-ease) infinite;
}

.lxp-page .lxp-timeline-row {
    position: relative;
    transform-origin: left center;
    animation: lxpTimelineIn var(--lxp-motion-slow) var(--lxp-motion-ease-out) both;
}

.lxp-page .lxp-timeline-row::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: -16px;
    width: 2px;
    background: linear-gradient(180deg, rgba(31, 111, 235, .55), rgba(15, 118, 110, .18));
    transform-origin: top center;
    animation: lxpTimelineDraw var(--lxp-motion-slow) var(--lxp-motion-ease-out) both;
}

.lxp-page .lxp-timeline-row:last-child::before {
    display: none;
}

.lxp-page .lxp-export-loading {
    pointer-events: none;
    opacity: .72;
}

.lxp-page .lxp-export-loading i {
    animation: lxpSpin .75s linear infinite;
}

.lxp-page .lxp-player,
.lxp-page .lxp-player-shell,
.lxp-page .lxp-theatre,
.lxp-page .lxp-reading-surface,
.lxp-page .lxp-resource-shelf {
    transition:
        grid-template-columns var(--lxp-motion) var(--lxp-motion-ease),
        background-color var(--lxp-motion) var(--lxp-motion-ease),
        border-color var(--lxp-motion) var(--lxp-motion-ease),
        transform var(--lxp-motion) var(--lxp-motion-ease);
}

.lxp-page .lxp-lesson-link.is-active {
    animation: lxpActiveLesson var(--lxp-motion-slow) var(--lxp-motion-ease-out) both;
}

@keyframes lxpProgressFill {
    from { transform: scaleX(.08); }
    to { transform: scaleX(1); }
}

@keyframes lxpStatusPulse {
    0% { opacity: .25; transform: scale(.96); }
    55% { opacity: 0; transform: scale(1.18); }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes lxpTimelineIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes lxpTimelineDraw {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes lxpActiveLesson {
    from { box-shadow: inset 0 0 0 0 rgba(31, 111, 235, 0); }
    to { box-shadow: inset 4px 0 0 rgba(31, 111, 235, .75); }
}

@keyframes lxpSpin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lxp-page *,
    .lxp-page *::before,
    .lxp-page *::after,
    .lxc-page *,
    .lxc-page *::before,
    .lxc-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }

    .lxp-page [data-lxp-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}