/*
 * XION UI Kit V1.0
 * Sistema visual reutilizable para XION LAB / XION OS.
 *
 * Ruta sugerida:
 * assets/css/xion-ui-kit.css
 *
 * Este archivo NO reemplaza xion-app.css ni los estilos actuales.
 * Funciona como capa progresiva para nuevos módulos:
 * Performance, Nutrición, Journal, Finanzas, Workout Mode, etc.
 */

/* ==========================================================
   1. TOKENS BASE
========================================================== */

:root {
    --xion-bg: #050009;
    --xion-bg-deep: #020004;
    --xion-bg-soft: #0b0612;
    --xion-bg-elevated: #11081c;

    --xion-card: rgba(255, 255, 255, .065);
    --xion-card-soft: rgba(255, 255, 255, .045);
    --xion-card-strong: rgba(255, 255, 255, .095);

    --xion-purple: #8d5cff;
    --xion-purple-soft: #b98cff;
    --xion-purple-deep: #5c2dff;

    --xion-orange: #ff713d;
    --xion-orange-soft: #ffad7a;
    --xion-orange-deep: #ff4d1d;

    --xion-success: #54f2a6;
    --xion-warning: #ffd36b;
    --xion-danger: #ff5d75;
    --xion-info: #8fd6ff;

    --xion-text: #ffffff;
    --xion-muted: rgba(255, 255, 255, .68);
    --xion-soft: rgba(255, 255, 255, .54);
    --xion-dim: rgba(255, 255, 255, .42);
    --xion-faint: rgba(255, 255, 255, .24);

    --xion-border: rgba(255, 255, 255, .11);
    --xion-border-soft: rgba(255, 255, 255, .075);
    --xion-border-strong: rgba(255, 255, 255, .20);

    --xion-radius-xs: 10px;
    --xion-radius-sm: 14px;
    --xion-radius-md: 20px;
    --xion-radius-lg: 28px;
    --xion-radius-xl: 36px;
    --xion-radius-2xl: 44px;
    --xion-radius-pill: 999px;

    --xion-space-1: 4px;
    --xion-space-2: 8px;
    --xion-space-3: 12px;
    --xion-space-4: 16px;
    --xion-space-5: 20px;
    --xion-space-6: 24px;
    --xion-space-7: 28px;
    --xion-space-8: 32px;
    --xion-space-10: 40px;
    --xion-space-12: 48px;
    --xion-space-16: 64px;

    --xion-title-xl: clamp(42px, 7vw, 92px);
    --xion-title-lg: clamp(34px, 5vw, 72px);
    --xion-title-md: clamp(26px, 3vw, 42px);
    --xion-title-sm: clamp(22px, 2.4vw, 32px);
    --xion-body: 16px;
    --xion-small: 13px;
    --xion-micro: 11px;

    --xion-shadow-card: 0 24px 90px rgba(0, 0, 0, .35);
    --xion-shadow-card-strong: 0 34px 120px rgba(0, 0, 0, .48);
    --xion-shadow-purple: 0 24px 70px rgba(141, 92, 255, .22);
    --xion-shadow-orange: 0 24px 70px rgba(255, 113, 61, .16);

    --xion-blur: blur(22px);
    --xion-blur-strong: blur(34px);

    --xion-transition-fast: 180ms ease;
    --xion-transition: 260ms ease;
    --xion-transition-slow: 420ms ease;

    --xion-gradient-bg:
        radial-gradient(circle at 15% 0%, rgba(141, 92, 255, .22), transparent 34%),
        radial-gradient(circle at 90% 20%, rgba(255, 113, 61, .14), transparent 32%),
        #050009;

    --xion-gradient-bg-strong:
        radial-gradient(circle at 12% 0%, rgba(141, 92, 255, .30), transparent 38%),
        radial-gradient(circle at 90% 16%, rgba(255, 113, 61, .20), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(120, 47, 255, .10), transparent 38%),
        #050009;

    --xion-gradient-card:
        linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));

    --xion-gradient-card-strong:
        linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035));

    --xion-gradient-primary:
        linear-gradient(135deg, #ffffff, #d8c7ff 45%, #ff9b6f);

    --xion-gradient-purple-orange:
        linear-gradient(135deg, rgba(141, 92, 255, .92), rgba(255, 113, 61, .86));
}

/* ==========================================================
   2. BASE HELPERS
========================================================== */

.xion-ui-root,
.xion-ui-screen,
.xion-ui-section,
.xion-ui-card {
    box-sizing: border-box;
}

.xion-ui-root *,
.xion-ui-screen *,
.xion-ui-section *,
.xion-ui-card * {
    box-sizing: border-box;
}

.xion-ui-bg {
    background: var(--xion-gradient-bg);
}

.xion-ui-bg-strong {
    background: var(--xion-gradient-bg-strong);
}

.xion-ui-no-scrollbar {
    scrollbar-width: none;
}

.xion-ui-no-scrollbar::-webkit-scrollbar {
    display: none;
}

.xion-ui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================
   3. TYPOGRAPHY
========================================================== */

.xion-ui-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--xion-purple-soft);
    font-size: var(--xion-micro);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.xion-ui-title-xl,
.xion-ui-title-lg,
.xion-ui-title-md,
.xion-ui-title-sm {
    margin: 0;
    color: var(--xion-text);
    font-weight: 800;
    letter-spacing: -0.055em;
}

.xion-ui-title-xl {
    font-size: var(--xion-title-xl);
    line-height: .90;
}

.xion-ui-title-lg {
    font-size: var(--xion-title-lg);
    line-height: .92;
}

.xion-ui-title-md {
    font-size: var(--xion-title-md);
    line-height: 1;
}

.xion-ui-title-sm {
    font-size: var(--xion-title-sm);
    line-height: 1.05;
}

.xion-ui-copy {
    margin: 0;
    color: var(--xion-muted);
    font-size: var(--xion-body);
    line-height: 1.65;
}

.xion-ui-copy-sm {
    margin: 0;
    color: var(--xion-soft);
    font-size: var(--xion-small);
    line-height: 1.55;
}

.xion-ui-dim {
    color: var(--xion-dim);
}

.xion-ui-gradient-text {
    color: transparent;
    background: var(--xion-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
}

/* ==========================================================
   4. LAYOUT / SCREENS
========================================================== */

.xion-ui-section {
    position: relative;
    width: 100%;
}

.xion-ui-screen {
    position: relative;
    width: 100%;
    min-height: min(760px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 5vw, 56px);
    overflow: hidden;
    border: 1px solid var(--xion-border);
    border-radius: var(--xion-radius-xl);
    background:
        radial-gradient(circle at top left, rgba(141, 92, 255, .20), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 113, 61, .14), transparent 34%),
        var(--xion-gradient-card);
    box-shadow: var(--xion-shadow-card);
    backdrop-filter: var(--xion-blur);
}

.xion-ui-screen-full {
    min-height: calc(100vh - 48px);
}

.xion-ui-screen-center {
    align-items: center;
    text-align: center;
}

.xion-ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--xion-space-5);
}

.xion-ui-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--xion-space-3);
}

.xion-ui-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--xion-space-8);
}

.xion-ui-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xion-space-5);
}

.xion-ui-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--xion-space-5);
}

.xion-ui-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--xion-space-5);
}

/* ==========================================================
   5. CARDS
========================================================== */

.xion-ui-card,
.xion-ui-hero-card,
.xion-ui-mission-card,
.xion-ui-metric-card,
.xion-ui-coach-card,
.xion-ui-cta-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xion-border);
    border-radius: var(--xion-radius-lg);
    background: var(--xion-gradient-card);
    box-shadow: var(--xion-shadow-card);
    backdrop-filter: var(--xion-blur);
}

.xion-ui-card {
    padding: var(--xion-space-6);
}

.xion-ui-card-compact {
    padding: var(--xion-space-5);
    border-radius: var(--xion-radius-md);
}

.xion-ui-hero-card {
    padding: clamp(28px, 5vw, 56px);
}

.xion-ui-mission-card {
    padding: var(--xion-space-7);
    background:
        radial-gradient(circle at top left, rgba(141, 92, 255, .22), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 113, 61, .15), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-metric-card {
    padding: var(--xion-space-5);
}

.xion-ui-metric-card strong {
    display: block;
    margin-top: 8px;
    color: var(--xion-text);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.05em;
}

.xion-ui-metric-card span {
    display: block;
    color: var(--xion-soft);
    font-size: var(--xion-small);
}

.xion-ui-coach-card {
    padding: var(--xion-space-6);
    border-color: rgba(185, 140, 255, .26);
    background:
        radial-gradient(circle at 0% 0%, rgba(141, 92, 255, .22), transparent 34%),
        var(--xion-gradient-card);
}

.xion-ui-cta-card {
    padding: var(--xion-space-7);
    border-color: rgba(255, 173, 122, .26);
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 113, 61, .22), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-card-hover {
    transition:
        transform var(--xion-transition),
        border-color var(--xion-transition),
        box-shadow var(--xion-transition),
        background var(--xion-transition);
}

.xion-ui-card-hover:hover {
    transform: translateY(-3px);
    border-color: var(--xion-border-strong);
    box-shadow: var(--xion-shadow-card-strong), var(--xion-shadow-purple);
}

/* ==========================================================
   6. BUTTONS
========================================================== */

.xion-ui-button,
.xion-ui-button-primary,
.xion-ui-button-secondary,
.xion-ui-button-ghost,
.xion-ui-button-danger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 14px 22px;
    border-radius: var(--xion-radius-pill);
    border: 1px solid var(--xion-border);
    cursor: pointer;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    transition:
        transform var(--xion-transition-fast),
        border-color var(--xion-transition-fast),
        background var(--xion-transition-fast),
        box-shadow var(--xion-transition-fast),
        opacity var(--xion-transition-fast);
}

.xion-ui-button:hover,
.xion-ui-button-primary:hover,
.xion-ui-button-secondary:hover,
.xion-ui-button-ghost:hover,
.xion-ui-button-danger:hover {
    transform: translateY(-2px);
}

.xion-ui-button:disabled,
.xion-ui-button-primary:disabled,
.xion-ui-button-secondary:disabled,
.xion-ui-button-ghost:disabled,
.xion-ui-button-danger:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.xion-ui-button-primary {
    color: #0b0310 !important;
    background: var(--xion-gradient-primary);
    box-shadow: 0 18px 52px rgba(141, 92, 255, .28);
}

.xion-ui-button-secondary {
    color: var(--xion-text) !important;
    background: rgba(255, 255, 255, .075);
}

.xion-ui-button-ghost {
    color: var(--xion-text) !important;
    background: transparent;
}

.xion-ui-button-danger {
    color: #ffffff !important;
    border-color: rgba(255, 93, 117, .32);
    background: rgba(255, 93, 117, .10);
}

.xion-ui-button-block {
    width: 100%;
}

.xion-ui-button-icon {
    width: 50px;
    min-width: 50px;
    padding: 0;
}

/* ==========================================================
   7. OPTIONS / CHIPS
========================================================== */

.xion-ui-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xion-space-4);
}

.xion-ui-option {
    appearance: none;
    width: 100%;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border-radius: var(--xion-radius-md);
    border: 1px solid var(--xion-border);
    color: var(--xion-text);
    background: rgba(255, 255, 255, .055);
    cursor: pointer;
    text-align: left;
    transition:
        transform var(--xion-transition-fast),
        border-color var(--xion-transition-fast),
        background var(--xion-transition-fast),
        box-shadow var(--xion-transition-fast);
}

.xion-ui-option:hover {
    transform: translateY(-2px);
    border-color: var(--xion-border-strong);
    background: rgba(255, 255, 255, .075);
}

.xion-ui-option.is-active,
.xion-ui-option.is-selected {
    border-color: rgba(255, 137, 79, .85);
    background: linear-gradient(135deg, rgba(141, 92, 255, .24), rgba(255, 113, 61, .16));
    box-shadow: 0 18px 46px rgba(120, 67, 255, .18);
}

.xion-ui-option.is-disabled {
    opacity: .38;
    cursor: not-allowed;
    pointer-events: none;
}

.xion-ui-option strong {
    color: var(--xion-text);
    font-size: 17px;
    line-height: 1.2;
}

.xion-ui-option span {
    color: var(--xion-soft);
    font-size: var(--xion-small);
    line-height: 1.45;
}

.xion-ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.xion-ui-chip {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 10px 14px;
    border-radius: var(--xion-radius-pill);
    border: 1px solid var(--xion-border);
    color: var(--xion-text);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    font-size: var(--xion-small);
    font-weight: 800;
    transition:
        transform var(--xion-transition-fast),
        border-color var(--xion-transition-fast),
        background var(--xion-transition-fast);
}

.xion-ui-chip:hover {
    transform: translateY(-1px);
    border-color: var(--xion-border-strong);
}

.xion-ui-chip.is-active,
.xion-ui-chip.is-selected {
    color: #0b0310;
    border-color: transparent;
    background: var(--xion-gradient-primary);
}

/* ==========================================================
   8. FORMS
========================================================== */

.xion-ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--xion-space-4);
}

.xion-ui-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xion-ui-field label {
    color: var(--xion-soft);
    font-size: var(--xion-micro);
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.xion-ui-input,
.xion-ui-select,
.xion-ui-textarea,
.xion-ui-field input,
.xion-ui-field select,
.xion-ui-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    border-radius: var(--xion-radius-sm);
    border: 1px solid var(--xion-border);
    color: var(--xion-text);
    background: rgba(0, 0, 0, .25);
    outline: none;
    font-size: 15px;
    transition:
        border-color var(--xion-transition-fast),
        box-shadow var(--xion-transition-fast),
        background var(--xion-transition-fast);
}

.xion-ui-textarea,
.xion-ui-field textarea {
    min-height: 116px;
    resize: vertical;
}

.xion-ui-input:focus,
.xion-ui-select:focus,
.xion-ui-textarea:focus,
.xion-ui-field input:focus,
.xion-ui-field select:focus,
.xion-ui-field textarea:focus {
    border-color: rgba(185, 140, 255, .56);
    box-shadow: 0 0 0 4px rgba(141, 92, 255, .12);
    background: rgba(0, 0, 0, .34);
}

.xion-ui-input::placeholder,
.xion-ui-textarea::placeholder,
.xion-ui-field input::placeholder,
.xion-ui-field textarea::placeholder {
    color: rgba(255, 255, 255, .30);
}

/* ==========================================================
   9. PROGRESS / WIZARDS
========================================================== */

.xion-ui-progress {
    position: relative;
    width: 100%;
    height: 5px;
    overflow: hidden;
    border-radius: var(--xion-radius-pill);
    background: rgba(255, 255, 255, .08);
}

.xion-ui-progress span {
    display: block;
    width: var(--xion-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--xion-purple), var(--xion-orange));
    box-shadow: 0 0 28px rgba(185, 140, 255, .65);
    transition: width var(--xion-transition-slow);
}

.xion-ui-wizard {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--xion-border);
    border-radius: var(--xion-radius-xl);
    background:
        radial-gradient(circle at top left, rgba(141, 92, 255, .18), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255, 113, 61, .13), transparent 34%),
        var(--xion-gradient-card);
    box-shadow: var(--xion-shadow-card);
    backdrop-filter: var(--xion-blur);
}

.xion-ui-wizard-step {
    min-height: min(760px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--xion-space-7);
    padding: clamp(24px, 5vw, 56px);
    animation: xionUiFadeBlur .42s ease both;
}

.xion-ui-wizard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--xion-space-3);
    align-items: center;
}

/* ==========================================================
   10. STATES
========================================================== */

.xion-ui-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--xion-space-4);
    padding: var(--xion-space-7);
    border-radius: var(--xion-radius-lg);
    border: 1px solid var(--xion-border);
    background: var(--xion-gradient-card);
}

.xion-ui-state-success {
    border-color: rgba(84, 242, 166, .32);
    background:
        radial-gradient(circle at top left, rgba(84, 242, 166, .14), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-state-warning {
    border-color: rgba(255, 211, 107, .34);
    background:
        radial-gradient(circle at top left, rgba(255, 211, 107, .14), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-state-error {
    border-color: rgba(255, 93, 117, .38);
    background:
        radial-gradient(circle at top left, rgba(255, 93, 117, .15), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-state-thinking {
    border-color: rgba(185, 140, 255, .34);
    background:
        radial-gradient(circle at top left, rgba(141, 92, 255, .18), transparent 36%),
        var(--xion-gradient-card);
}

.xion-ui-pulse-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--xion-purple-soft);
    box-shadow: 0 0 22px rgba(185, 140, 255, .85);
    animation: xionUiSoftPulse 1.15s ease infinite;
}

.xion-ui-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ==========================================================
   11. COACH / AI
========================================================== */

.xion-ui-coach-bubble {
    position: relative;
    padding: var(--xion-space-5);
    border-radius: var(--xion-radius-lg);
    border: 1px solid rgba(185, 140, 255, .26);
    background:
        radial-gradient(circle at 0% 0%, rgba(141, 92, 255, .20), transparent 34%),
        rgba(255, 255, 255, .055);
}

.xion-ui-coach-bubble::before {
    content: "";
    position: absolute;
    left: 24px;
    top: -7px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    border-left: 1px solid rgba(185, 140, 255, .26);
    border-top: 1px solid rgba(185, 140, 255, .26);
    background: rgba(255, 255, 255, .055);
    backdrop-filter: var(--xion-blur);
}

.xion-ui-coach-message {
    color: var(--xion-muted);
    font-size: var(--xion-body);
    line-height: 1.65;
}

/* ==========================================================
   12. MOBILE / PWA PATTERNS
========================================================== */

.xion-ui-bottom-actions {
    display: flex;
    gap: var(--xion-space-3);
    align-items: center;
}

.xion-ui-safe-bottom {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
}

@media (max-width: 860px) {
    .xion-ui-screen,
    .xion-ui-wizard-step {
        min-height: calc(100vh - 120px);
        padding: 24px;
        border-radius: var(--xion-radius-lg);
    }

    .xion-ui-grid,
    .xion-ui-grid-3,
    .xion-ui-grid-auto,
    .xion-ui-options,
    .xion-ui-form-grid {
        grid-template-columns: 1fr;
    }

    .xion-ui-wizard-actions,
    .xion-ui-bottom-actions {
        position: sticky;
        bottom: 0;
        z-index: 8;
        margin: 12px -24px -24px;
        padding: 16px 24px max(18px, env(safe-area-inset-bottom));
        background: linear-gradient(
            to top,
            rgba(5, 0, 9, .98),
            rgba(5, 0, 9, .78),
            transparent
        );
    }

    .xion-ui-button,
    .xion-ui-button-primary,
    .xion-ui-button-secondary,
    .xion-ui-button-ghost,
    .xion-ui-button-danger {
        width: 100%;
        min-height: 54px;
    }

    .xion-ui-title-xl {
        font-size: clamp(42px, 13vw, 68px);
    }

    .xion-ui-title-lg {
        font-size: clamp(36px, 11vw, 58px);
    }

    .xion-ui-copy {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .xion-ui-card,
    .xion-ui-hero-card,
    .xion-ui-mission-card,
    .xion-ui-coach-card,
    .xion-ui-cta-card {
        border-radius: var(--xion-radius-md);
    }

    .xion-ui-card {
        padding: 20px;
    }

    .xion-ui-option {
        min-height: 86px;
        padding: 16px;
    }
}

/* ==========================================================
   13. ANIMATIONS
========================================================== */

.xion-ui-animate-fade-up {
    animation: xionUiFadeUp .38s ease both;
}

.xion-ui-animate-fade-blur {
    animation: xionUiFadeBlur .42s ease both;
}

.xion-ui-animate-scale-in {
    animation: xionUiScaleIn .32s ease both;
}

.xion-ui-animate-soft-pulse {
    animation: xionUiSoftPulse 1.35s ease infinite;
}

.xion-ui-animate-glow-scan::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 36%,
        rgba(255, 255, 255, .12) 50%,
        transparent 64%,
        transparent 100%
    );
    transform: translateX(-120%);
    animation: xionUiGlowScan 2.8s ease infinite;
}

@keyframes xionUiFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes xionUiFadeBlur {
    from {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes xionUiScaleIn {
    from {
        opacity: 0;
        transform: scale(.965);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes xionUiSoftPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .58;
        transform: scale(1.18);
    }
}

@keyframes xionUiGlowScan {
    0% {
        transform: translateX(-120%);
    }
    58%, 100% {
        transform: translateX(120%);
    }
}

/* ==========================================================
   14. ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .xion-ui-animate-fade-up,
    .xion-ui-animate-fade-blur,
    .xion-ui-animate-scale-in,
    .xion-ui-animate-soft-pulse,
    .xion-ui-animate-glow-scan::after,
    .xion-ui-wizard-step,
    .xion-ui-pulse-dot {
        animation: none !important;
    }

    .xion-ui-button,
    .xion-ui-button-primary,
    .xion-ui-button-secondary,
    .xion-ui-button-ghost,
    .xion-ui-button-danger,
    .xion-ui-card-hover,
    .xion-ui-option,
    .xion-ui-chip,
    .xion-ui-progress span {
        transition: none !important;
    }
}