/*
 * Purpose: Motion primitives for the Kinetic design system.
 *          Phase 0 ships the fade-in keyframe. Phase 17 expands this with
 *          the marquee keyframes (sub-step 17.1), the scroll-
 *          trigger helpers (sub-step 17.3), the sticky-stack
 *          helpers (sub-step 17.4).
 *
 * Load order: Loaded LAST in the kinetic/* chain so the motion
 *             rules can reference components defined in
 *             `kinetic/components.css`.
 *
 * Accessibility: Every animation is wrapped in
 *                `@media (prefers-reduced-motion: no-preference)`
 *                so users who request reduced motion get a static
 *                page. `kinetic/theme.js` also sets
 *                `data-motion="off"` on `<html>` when the user
 *                has `prefers-reduced-motion: reduce` so JS-driven
 *                scroll triggers can also be guarded.
 */

/* ---- 1. Marquee keyframes ------------------------------------------ */

/* Phase 17.1 — the prompt's two marquee patterns. `.k-marquee-fast`
   is the default; `.k-marquee-slow` is the relaxed pace for
   higher-density strips (e.g. the system dashboard stat hero). The
   keyframes translate the track by -50% over one full pass; the
   track itself duplicates its children so the seam is invisible
   (the second copy is what shows as the track wraps back to
   translateX(0)). The legacy `k-marquee-left` / `k-marquee-right`
   aliases remain so any existing markup that targets them still
   works (the Phase 2 placements used them). */
@keyframes k-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes k-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@keyframes kinetic-marquee-fast {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes kinetic-marquee-slow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.k-marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    min-height: 6rem;
    align-items: center;
    position: relative;
    background: var(--gp-bg);
}

.k-marquee__track {
    display: flex;
    flex: 0 0 auto;
    gap: var(--gp-sp-12);
    min-width: 100%;
    align-items: center;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .k-marquee__track--left  { animation: k-marquee-left  30s linear infinite; }
    .k-marquee__track--right { animation: k-marquee-right 30s linear infinite; }
    .k-marquee--fast .k-marquee__track { animation: kinetic-marquee-fast 30s linear infinite; }
    .k-marquee--slow .k-marquee__track { animation: kinetic-marquee-slow 60s linear infinite; }
    .k-marquee--reverse .k-marquee__track { animation-direction: reverse; }
    .k-marquee--paused .k-marquee__track { animation-play-state: paused; }
}

/* Per-track content cells. Used by the login page tool-name strip,
   the DadDev widget status marquee, the 403/404/500 error pages,
   and the system dashboard hero (when promoted to a real marquee
   in Phase 5 follow-up). Each cell is 1/4 width on desktop and
   full-width on mobile; the track duplicates the children so the
   scroll loop is seamless. */
.k-marquee__cell {
    flex: 0 0 auto;
    min-width: 12rem;
    text-align: center;
    font-family: var(--gp-font-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.875rem;
    color: var(--gp-fg);
    padding: 0 var(--gp-sp-4);
}

.k-marquee__cell--accent {
    color: var(--gp-accent);
    font-weight: 700;
}

.k-marquee__cell--muted {
    color: var(--gp-muted-foreground);
}

.k-marquee__cell--strong {
    font-weight: 700;
    color: var(--gp-accent);
}

/* ---- 3. Sidebar treeview transitions ------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .kinetic-sidebar__group .kinetic-sidebar__group-children {
        overflow: hidden;
        max-height: 0;
        transition: max-height var(--gp-dur-slow) var(--gp-ease);
    }
    .kinetic-sidebar__group.is-open > .kinetic-sidebar__group-children {
        max-height: 100rem;
    }
    .kinetic-sidebar__group .kinetic-sidebar__group-toggle .kinetic-sidebar__chevron {
        transition: transform var(--gp-dur) var(--gp-ease);
    }
    .kinetic-sidebar__group.is-open .kinetic-sidebar__chevron {
        transform: rotate(90deg);
    }
    .kinetic-sidebar__link {
        transition: background-color var(--gp-dur) var(--gp-ease),
                    color var(--gp-dur) var(--gp-ease);
    }
    .kinetic-sidebar__link:hover {
        background: var(--gp-muted);
        color: var(--gp-accent);
    }
    .kinetic-sidebar__link.is-active {
        background: var(--gp-accent);
        color: var(--gp-accent-fg);
    }
}

/* ---- 4. Micro-interactions (Phase 2) --------------------------------- */

/*
 * Color flood: the prompt's hard color inversion (yellow bg + black
 * text) for the `.k-card--hover` and any element tagged with
 * `.k-color-flood` (or `data-kinetic-flood`). The keyframe
 * supplements the CSS `transition` rules in `components.css`; the
 * transition handles the steady-state hover, the keyframe adds a
 * subtle scale-flicker on enter that the transition alone can't
 * produce.
 */
@keyframes k-color-flood {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .k-card--hover:hover,
    .k-card--group:hover,
    .k-color-flood:hover,
    [data-kinetic-flood]:hover {
        animation: k-color-flood var(--gp-dur-slow) var(--gp-ease);
    }
}

/*
 * Toast enter/exit: slide up 12px + fade in (200ms), slide right
 * 12px + fade out (200ms). The Bootstrap `.toast.showing` and
 * `.toast.hide` lifecycle classes are already in place; the
 * keyframes are wired by the `gp-toast` shim and by the new
 * `kinetic/components.js` helper. The transitions on the rule
 * itself provide the fallback for users with reduced motion.
 */
@keyframes k-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes k-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}

@media (prefers-reduced-motion: no-preference) {
    .k-toast,
    .gp-toast.toast {
        animation: k-toast-in var(--gp-dur) var(--gp-ease) both;
    }
    .k-toast.is-leaving,
    .gp-toast.toast.hide {
        animation: k-toast-out var(--gp-dur) var(--gp-ease) both;
    }
}

/*
 * Modal enter: scale up from 0.95 to 1.0 + fade in (200ms). The
 * Bootstrap `.modal.fade .modal-dialog` lifecycle already animates
 * the dialog; the keyframe is wired to `.k-modal.is-open` and to
 * the new `.k-modal` panel as a fallback when the JS bus doesn't
 * apply the `is-open` class on time.
 */
@keyframes k-modal-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .k-modal.is-open .k-modal__panel,
    .modal.fade.show .modal-dialog,
    .modal.show .modal-dialog {
        animation: k-modal-in var(--gp-dur) var(--gp-ease) both;
    }
}

/*
 * Button press: a 150ms scale-down to 0.95 on `:active`. The
 * `components.css` rules already do the scale; the keyframe adds
 * a tiny downward translation on press for kinetic snap.
 */
@keyframes k-btn-press {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(1px) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .k-btn:active,
    .btn:not(.btn-link):active {
        animation: k-btn-press var(--gp-dur) var(--gp-ease);
    }
}

/*
 * Pulse (used by inline save indicators, the DadDev FAB badge,
 * and the `gpToast` success tick). Subtle 2.4s box-shadow pulse
 * in the accent color. The `.kinetic-topbar .dadkit-sync-dot`
 * rule already has its own pulse; this is the standalone helper.
 */
@keyframes k-pulse-accent {
    0%   { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0.55); }
    70%  { box-shadow: 0 0 0 0.6rem rgba(223, 225, 4, 0); }
    100% { box-shadow: 0 0 0 0 rgba(223, 225, 4, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    .k-pulse,
    [data-kinetic-pulse] {
        animation: k-pulse-accent 2.4s ease-out infinite;
    }
}

/*
 * Fade-in (also defined in components.css for the `.k-fade-in`
 * hook; duplicated here so the keyframe is reachable from the
 * `kinetic/components.js` helper without depending on
 * components.css being parsed first).
 */
@keyframes k-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 5. Scroll-triggered animations (Phase 17.3) --------------------- */

/*
 * The prompt's scroll-triggered scale / parallax / fade helpers.
 * The kinetic/components.js `kineticOnScroll(el, options)` helper
 * wires `[data-kinetic-scroll]` elements to an
 * IntersectionObserver + requestAnimationFrame that interpolates
 * a CSS custom property `--kinetic-scroll` (0 to 1) from element
 * entry (top hits the viewport top) to element exit (bottom hits
 * the viewport bottom). The CSS rules below consume the property
 * via the helper classes `.k-scroll-scale`, `.k-scroll-fade`, and
 * `.k-scroll-translate`. The helpers compose with the static
 * `k-fade-in` keyframe (Phase 2 surface) so a card can fade in
 * AND scale on scroll.
 */
@keyframes k-scroll-pulse {
    0%   { transform: scale(var(--kinetic-scroll-from, 0.9)); opacity: 0; }
    100% { transform: scale(var(--kinetic-scroll-to, 1));   opacity: 1; }
}

/*
 * Default state is FULLY VISIBLE. The JS sets --kinetic-scroll
 * (0..1) based on scroll position; the CSS interpolates the
 * visual effect from that variable. If JS doesn't run, the
 * element stays fully visible (no flash, no invisible content).
 *
 * Previously these rules hardcoded opacity: 0 + transform:
 * scale(--kinetic-scroll-from) which made the element invisible
 * until the JS added `.is-in`. That broke any element that was
 * already in the viewport on page load (e.g. the login card
 * centered in the viewport) because the IntersectionObserver
 * value never reached the 0.999 threshold required to add
 * `.is-in`. The fix is to derive opacity and transform from
 * --kinetic-scroll directly (with a fallback of 1 = fully
 * visible) so the element is always visible, and the scroll
 * trigger is purely additive motion.
 */
.k-scroll-scale,
[data-kinetic-scroll="scale"] {
    transform: scale(var(--kinetic-scroll, 1));
    opacity: var(--kinetic-scroll, 1);
    will-change: transform, opacity;
}

.k-scroll-fade,
[data-kinetic-scroll="fade"] {
    opacity: var(--kinetic-scroll, 1);
    transform: translateY(
        calc((1 - var(--kinetic-scroll, 1)) * var(--kinetic-scroll-from, 0.5) * 1rem)
    );
    will-change: transform, opacity;
}

.k-scroll-translate,
[data-kinetic-scroll="translate"] {
    transform: translate3d(
        0,
        calc((1 - var(--kinetic-scroll, 1)) * 1rem),
        0
    );
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .k-scroll-scale,
    html:not([data-motion="off"]) [data-kinetic-scroll="scale"] {
        transition: transform 50ms linear, opacity 50ms linear;
    }
    html:not([data-motion="off"]) .k-scroll-fade,
    html:not([data-motion="off"]) [data-kinetic-scroll="fade"] {
        transition: transform 50ms linear, opacity 50ms linear;
    }
    html:not([data-motion="off"]) .k-scroll-translate,
    html:not([data-motion="off"]) [data-kinetic-scroll="translate"] {
        transition: transform 50ms linear;
    }
}

/*
 * Apply the helpers in their "fully visible" state when the user
 * has `prefers-reduced-motion: reduce` (or when theme.js sets
 * `data-motion="off"`). The transition is still 50ms so a layout
 * shift (e.g. opening a drawer) doesn't make the element jump.
 */
.k-scroll-scale.is-in,
.k-scroll-fade.is-in,
.k-scroll-translate.is-in,
[data-kinetic-scroll].is-in {
    transform: scale(1);
    opacity: 1;
}

/* ---- 6. Sticky card stack (Phase 17.4) -------------------------------- */

/*
 * Sticky-stacked cards. The first child is `position: sticky; top: 96px`
 * (80px topbar + 16px breathing room). Subsequent children appear
 * to slide over the sticky card as the page scrolls. Used by the
 * wholesale admin lead detail right column and the system
 * dashboard historical section. `top: 96px` accommodates the
 * topbar height (clamp(64px, 5vw, 80px) + 16px).
 */
.k-sticky-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gp-sp-4);
}

.k-sticky-stack__item {
    border: var(--gp-border-w) solid var(--gp-border);
    background: var(--gp-bg);
    padding: var(--gp-sp-6);
    /* The stack container needs room for the sticky child to
       stay in view as later children scroll past. The
       `min-height` ensures the container is tall enough that
       the sticky child has somewhere to stick. */
}

.k-sticky-stack__item--sticky {
    position: sticky;
    top: calc(var(--gp-topbar-h, 80px) + var(--gp-sp-4));
    z-index: 5;
    background: var(--gp-muted);
}

/* Mobile: drop the sticky behavior — small viewports benefit
   from a normal flow more than from a card that doesn't
   scroll out of the way. */
@media (max-width: 768px) {
    .k-sticky-stack__item--sticky {
        position: static;
    }
}

/* ---- 7. Optional module motion modifiers ----------------------------- */

/* Bounded table-row entrance; rows after twelve remain static. */
.k-table--motion-rows tbody tr { --k-table-motion-delay: 0ms; }
.k-table--motion-rows tbody tr:nth-child(2) { --k-table-motion-delay: 35ms; }
.k-table--motion-rows tbody tr:nth-child(3) { --k-table-motion-delay: 70ms; }
.k-table--motion-rows tbody tr:nth-child(4) { --k-table-motion-delay: 105ms; }
.k-table--motion-rows tbody tr:nth-child(5) { --k-table-motion-delay: 140ms; }
.k-table--motion-rows tbody tr:nth-child(6) { --k-table-motion-delay: 175ms; }
.k-table--motion-rows tbody tr:nth-child(7) { --k-table-motion-delay: 210ms; }
.k-table--motion-rows tbody tr:nth-child(8) { --k-table-motion-delay: 245ms; }
.k-table--motion-rows tbody tr:nth-child(9) { --k-table-motion-delay: 280ms; }
.k-table--motion-rows tbody tr:nth-child(10) { --k-table-motion-delay: 315ms; }
.k-table--motion-rows tbody tr:nth-child(11) { --k-table-motion-delay: 350ms; }
.k-table--motion-rows tbody tr:nth-child(12) { --k-table-motion-delay: 385ms; }

@keyframes k-collapse-motion-reveal {
    from { opacity: 0; transform: translate3d(0, -0.35rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
details.k-collapse--motion-reveal[open] > .k-collapse__body {
    display: block;
}

.k-timeline--motion-draw .k-timeline__item { --k-timeline-motion-delay: 0ms; }
.k-timeline--motion-draw .k-timeline__item:nth-child(2) { --k-timeline-motion-delay: 65ms; }
.k-timeline--motion-draw .k-timeline__item:nth-child(3) { --k-timeline-motion-delay: 130ms; }
.k-timeline--motion-draw .k-timeline__item:nth-child(4) { --k-timeline-motion-delay: 195ms; }
.k-timeline--motion-draw .k-timeline__item:nth-child(5) { --k-timeline-motion-delay: 260ms; }
.k-timeline--motion-draw .k-timeline__item:nth-child(n+6) { --k-timeline-motion-delay: 325ms; }

.k-stat-list--motion-stagger .k-stat-list__item { --k-stat-motion-delay: 0ms; }
.k-stat-list--motion-stagger .k-stat-list__item:nth-child(2) { --k-stat-motion-delay: 45ms; }
.k-stat-list--motion-stagger .k-stat-list__item:nth-child(3) { --k-stat-motion-delay: 90ms; }
.k-stat-list--motion-stagger .k-stat-list__item:nth-child(4) { --k-stat-motion-delay: 135ms; }
.k-stat-list--motion-stagger .k-stat-list__item:nth-child(5) { --k-stat-motion-delay: 180ms; }
.k-stat-list--motion-stagger .k-stat-list__item:nth-child(n+6) { --k-stat-motion-delay: 225ms; }

.k-filterbar--motion-stagger .k-filterbar__control { --k-filterbar-motion-delay: 0ms; }
.k-filterbar--motion-stagger .k-filterbar__control:nth-child(2) { --k-filterbar-motion-delay: 70ms; }
.k-filterbar--motion-stagger .k-filterbar__control:nth-child(3) { --k-filterbar-motion-delay: 140ms; }
.k-filterbar--motion-stagger .k-filterbar__control:nth-child(n+4) { --k-filterbar-motion-delay: 210ms; }

.k-kpi-row--motion-stagger .k-kpi { --k-kpi-motion-delay: 0ms; }
.k-kpi-row--motion-stagger .k-kpi:nth-child(2) { --k-kpi-motion-delay: 80ms; }
.k-kpi-row--motion-stagger .k-kpi:nth-child(3) { --k-kpi-motion-delay: 160ms; }
.k-kpi-row--motion-stagger .k-kpi:nth-child(n+4) { --k-kpi-motion-delay: 240ms; }

@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-table--motion-rows.is-motion-ready tbody tr:nth-child(-n+12) > * {
        opacity: 0;
        transform: translate3d(0, 0.3rem, 0);
        transition: opacity 220ms var(--gp-ease), transform 220ms var(--gp-ease);
        transition-delay: var(--k-table-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-table--motion-rows.is-motion-ready.is-motion-visible tbody tr:nth-child(-n+12) > * {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-collapse--motion-reveal.is-open .k-collapse__body,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) details.k-collapse--motion-reveal[open] > .k-collapse__body {
        animation: k-collapse-motion-reveal 220ms var(--gp-ease) both;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready .k-timeline__item:not(:last-child)::before {
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 360ms var(--gp-ease);
        transition-delay: var(--k-timeline-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready .k-timeline__marker {
        opacity: 0;
        transform: scale(0.72);
        transition: opacity 200ms var(--gp-ease), transform 200ms var(--gp-ease);
        transition-delay: var(--k-timeline-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready .k-timeline__content {
        opacity: 0;
        transform: translate3d(-0.35rem, 0, 0);
        transition: opacity 240ms var(--gp-ease), transform 240ms var(--gp-ease);
        transition-delay: var(--k-timeline-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready.is-motion-visible .k-timeline__item:not(:last-child)::before {
        transform: scaleY(1);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready.is-motion-visible .k-timeline__marker {
        opacity: 1;
        transform: scale(1);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-timeline--motion-draw.is-motion-ready.is-motion-visible .k-timeline__content {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-stat-list--motion-stagger.is-motion-ready .k-stat-list__item {
        opacity: 0;
        transform: translate3d(0, 0.3rem, 0);
        transition: opacity 220ms var(--gp-ease), transform 220ms var(--gp-ease);
        transition-delay: var(--k-stat-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-stat-list--motion-stagger.is-motion-ready.is-motion-visible .k-stat-list__item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift {
        transition: transform var(--gp-dur-fast) var(--gp-ease),
                    border-color var(--gp-dur-fast) var(--gp-ease),
                    background-color var(--gp-dur-fast) var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift .k-media-preview,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift .k-media-empty {
        transition: transform var(--gp-dur) var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:hover,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:focus-within,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.k-dropzone--active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.dadkit-dropzone--active {
        transform: translate3d(0, -2px, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:hover .k-media-preview,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:hover .k-media-empty,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:focus-within .k-media-preview,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift:focus-within .k-media-empty,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.k-dropzone--active .k-media-preview,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.k-dropzone--active .k-media-empty,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.dadkit-dropzone--active .k-media-preview,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-main.k-media-main.k-media-main--motion-lift.dadkit-dropzone--active .k-media-empty {
        transform: scale(1.015);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-filterbar--motion-stagger.is-motion-ready .k-filterbar__control {
        opacity: 0;
        transform: translate3d(0, 0.3rem, 0);
        transition: opacity 220ms var(--gp-ease), transform 220ms var(--gp-ease);
        transition-delay: var(--k-filterbar-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-filterbar--motion-stagger.is-motion-ready.is-motion-visible .k-filterbar__control {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-kpi-row--motion-stagger.is-motion-ready .k-kpi {
        opacity: 0;
        transform: translate3d(0, 0.45rem, 0);
        transition: opacity 260ms var(--gp-ease), transform 260ms var(--gp-ease);
        transition-delay: var(--k-kpi-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-kpi-row--motion-stagger.is-motion-ready.is-motion-visible .k-kpi {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ---- 8. Optional selection feedback ---------------------------------- */

/*
 * Choice and preset groups may opt into a brief transform-only settle
 * when a selection becomes active. The modifier is never part of the
 * base controls; use it only when the extra feedback improves clarity.
 */
@keyframes k-selection-motion-settle {
    0% { transform: scale(0.96); }
    60% { transform: scale(1.025); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-choice-buttons--motion-selection button[aria-pressed="true"],
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-choice-buttons--motion-selection button.is-active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-choice-buttons--motion-selection .k-btn[aria-pressed="true"],
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-choice-buttons--motion-selection .k-btn.is-active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-preset-buttons--motion-selection button[aria-pressed="true"],
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-preset-buttons--motion-selection button.is-active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-preset-buttons--motion-selection .k-btn[aria-pressed="true"],
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-preset-buttons--motion-selection .k-btn.is-active {
        animation: k-selection-motion-settle 220ms var(--gp-ease) both;
    }
}

/* ---- 9. Additional optional module motion ---------------------------- */

.k-detail-list--motion-stagger .k-detail-list__item { --k-detail-motion-delay: 0ms; }
.k-detail-list--motion-stagger .k-detail-list__item:nth-child(2) { --k-detail-motion-delay: 45ms; }
.k-detail-list--motion-stagger .k-detail-list__item:nth-child(3) { --k-detail-motion-delay: 90ms; }
.k-detail-list--motion-stagger .k-detail-list__item:nth-child(4) { --k-detail-motion-delay: 135ms; }
.k-detail-list--motion-stagger .k-detail-list__item:nth-child(5) { --k-detail-motion-delay: 180ms; }
.k-detail-list--motion-stagger .k-detail-list__item:nth-child(n+6) { --k-detail-motion-delay: 225ms; }

.k-top-toolbar--motion-stagger > * { --k-toolbar-motion-delay: 0ms; }
.k-top-toolbar--motion-stagger > :nth-child(2) { --k-toolbar-motion-delay: 80ms; }
.k-top-toolbar--motion-stagger > :nth-child(3) { --k-toolbar-motion-delay: 160ms; }
.k-top-toolbar--motion-stagger > :nth-child(n+4) { --k-toolbar-motion-delay: 240ms; }

.k-media-variants--motion-stagger > .k-variant-zone { --k-variant-strip-motion-delay: 0ms; }
.k-media-variants--motion-stagger > .k-variant-zone:nth-child(2) { --k-variant-strip-motion-delay: 45ms; }
.k-media-variants--motion-stagger > .k-variant-zone:nth-child(3) { --k-variant-strip-motion-delay: 90ms; }
.k-media-variants--motion-stagger > .k-variant-zone:nth-child(4) { --k-variant-strip-motion-delay: 135ms; }
.k-media-variants--motion-stagger > .k-variant-zone:nth-child(5) { --k-variant-strip-motion-delay: 180ms; }
.k-media-variants--motion-stagger > .k-variant-zone:nth-child(n+6) { --k-variant-strip-motion-delay: 225ms; }

@keyframes k-social-account-row-enter {
    from { opacity: 0; transform: translate3d(0, 0.35rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-detail-list--motion-stagger.is-motion-ready .k-detail-list__item {
        opacity: 0;
        transform: translate3d(0, 0.3rem, 0);
        transition: opacity 220ms var(--gp-ease), transform 220ms var(--gp-ease);
        transition-delay: var(--k-detail-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-detail-list--motion-stagger.is-motion-ready.is-motion-visible .k-detail-list__item {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready .kinetic-page-title__primary {
        opacity: 0;
        transform: translate3d(-0.5rem, 0, 0);
        transition: opacity 280ms var(--gp-ease), transform 280ms var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready .kinetic-page-title__action {
        opacity: 0;
        transform: translate3d(0.5rem, 0, 0);
        transition: opacity 260ms var(--gp-ease) 90ms, transform 260ms var(--gp-ease) 90ms;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready .kinetic-page-title__watermark {
        opacity: 0;
        transform: translateY(-56%) scale(0.96);
        transition: opacity 360ms var(--gp-ease) 80ms, transform 360ms var(--gp-ease) 80ms;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready.is-motion-visible .kinetic-page-title__primary,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready.is-motion-visible .kinetic-page-title__action {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .kinetic-page-title--motion-reveal.is-motion-ready.is-motion-visible .kinetic-page-title__watermark {
        opacity: 0.6;
        transform: translateY(-56%) scale(1);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-card.k-card--motion-lift {
        transition: transform var(--gp-dur-fast) var(--gp-ease),
                    background-color var(--gp-dur) var(--gp-ease),
                    border-color var(--gp-dur) var(--gp-ease),
                    color var(--gp-dur) var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-card.k-card--motion-lift:hover,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-card.k-card--motion-lift:focus-within {
        transform: translate3d(0, -3px, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-page-title-controls--motion-selection .k-page-title-controls__btn.is-active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-page-title-controls--motion-selection .k-page-title-controls__btn[aria-pressed="true"] {
        animation: k-selection-motion-settle 220ms var(--gp-ease) both;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-top-toolbar--motion-stagger.is-motion-ready > * {
        opacity: 0;
        transform: translate3d(0, 0.35rem, 0);
        transition: opacity 230ms var(--gp-ease), transform 230ms var(--gp-ease);
        transition-delay: var(--k-toolbar-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-top-toolbar--motion-stagger.is-motion-ready.is-motion-visible > * {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-social-accounts--motion-rows .k-social-accounts__row {
        animation: k-social-account-row-enter 220ms var(--gp-ease) both;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-block.k-media-block.k-media-block--motion-reveal.is-motion-ready .k-media-main {
        opacity: 0;
        transform: scale(0.985);
        transition: opacity 260ms var(--gp-ease), transform 260ms var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-block.k-media-block.k-media-block--motion-reveal.is-motion-ready .k-media-variants {
        opacity: 0;
        transform: translate3d(0, 0.35rem, 0);
        transition: opacity 240ms var(--gp-ease) 100ms, transform 240ms var(--gp-ease) 100ms;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-block.k-media-block.k-media-block--motion-reveal.is-motion-ready.is-motion-visible .k-media-main,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-media-block.k-media-block.k-media-block--motion-reveal.is-motion-ready.is-motion-visible .k-media-variants {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-media-variants--motion-stagger.is-motion-ready > .k-variant-zone {
        opacity: 0;
        transform: translate3d(0, 0.25rem, 0) scale(0.96);
        transition: opacity 210ms var(--gp-ease), transform 210ms var(--gp-ease);
        transition-delay: var(--k-variant-strip-motion-delay);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-media-variants--motion-stagger.is-motion-ready.is-motion-visible > .k-variant-zone {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-variant-zone.k-variant-zone.k-variant-zone--motion-lift {
        transition: transform var(--gp-dur-fast) var(--gp-ease),
                    border-color var(--gp-dur-fast) var(--gp-ease),
                    background-color var(--gp-dur-fast) var(--gp-ease),
                    color var(--gp-dur-fast) var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-variant-zone.k-variant-zone.k-variant-zone--motion-lift:hover,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-variant-zone.k-variant-zone.k-variant-zone--motion-lift:focus-visible,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-variant-zone.k-variant-zone.k-variant-zone--motion-lift.k-dropzone--active,
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .dadkit-variant-zone.k-variant-zone.k-variant-zone--motion-lift.dadkit-dropzone--active {
        transform: translate3d(0, -2px, 0) scale(1.035);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-alert--motion-reveal.is-motion-ready {
        opacity: 0;
        transform: translate3d(0, -0.35rem, 0);
        transition: opacity 240ms var(--gp-ease), transform 240ms var(--gp-ease);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-alert--motion-reveal.is-motion-ready .k-alert__icon {
        transform: scale(0.82);
        transition: transform 260ms var(--gp-ease) 60ms;
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-alert--motion-reveal.is-motion-ready.is-motion-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    html:not([data-motion="off"]) body:not(.wholesale-portal-body) .k-alert--motion-reveal.is-motion-ready.is-motion-visible .k-alert__icon {
        transform: scale(1);
    }
}

/* ---- 10. prefers-reduced-motion guard helpers ------------------------ */

/*
 * Belt-and-suspenders motion guards. The base.css global
 * `prefers-reduced-motion: reduce` rule already kills every
 * transition / animation / marquee / noise overlay in the
 * kinetic/* chain. These helpers let per-element overrides
 * opt back into a no-motion state without changing the
 * `<html>` data attribute. The `data-motion="off"` attribute
 * is set by kinetic/theme.js when reduced motion is on so
 * JS-driven scroll triggers can be guarded at the source.
 */
.k-no-motion,
[data-kinetic-no-motion] {
    animation: none !important;
    transition: none !important;
}