/* Shared interface motion. Content remains visible until motion.js initializes. */
:root {
    --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
    --motion-ease-spring: cubic-bezier(.2, .85, .3, 1.2);
    --motion-fast: 160ms;
    --motion-base: 420ms;
    --motion-slow: 680ms;
}

html {
    scroll-behavior: smooth;
}

body.motion-page-enter {
    opacity: .01;
}

body.motion-page-enter.motion-page-visible {
    opacity: 1;
    transition: opacity 260ms ease-out;
}

body.motion-page-leaving {
    opacity: 0;
    transition: opacity 140ms ease-in !important;
    pointer-events: none;
}

body.motion-page-leaving::after {
    content: '';
    position: fixed;
    z-index: 100000;
    inset: 0 auto auto 0;
    width: 72%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 0 16px rgb(var(--color-primary-rgb) / .45);
    animation: motion-progress 420ms var(--motion-ease-out) both;
}

body.motion-ready [data-motion]:not([data-motion="none"]) {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity var(--motion-base) var(--motion-ease-out),
        transform var(--motion-slow) var(--motion-ease-out),
        filter var(--motion-base) ease;
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

/* A motion opt-out must never be hidden while JavaScript intentionally skips it. */
body.motion-ready [data-motion="none"],
body.motion-ready [data-motion="none"] [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    visibility: visible !important;
}

body.motion-ready [data-motion="fade"] {
    transform: none;
}

body.motion-ready [data-motion="slide-left"] {
    transform: translate3d(-20px, 0, 0);
}

body.motion-ready [data-motion="slide-right"] {
    transform: translate3d(20px, 0, 0);
}

body.motion-ready [data-motion="scale"] {
    transform: scale(.975);
    filter: saturate(.86);
}

body.motion-ready [data-motion].motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: none;
}

.motion-card {
    transform-origin: 50% 70%;
    transition:
        transform var(--motion-fast) var(--motion-ease-out),
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        background-color var(--motion-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
    .motion-card:hover {
        transform: translateY(-3px);
    }

    .motion-card:hover .motion-icon {
        transform: translateY(-1px) scale(1.06) rotate(-2deg);
    }

    .motion-link:hover svg:last-child,
    .motion-link:hover .fa-arrow-right,
    .motion-link:hover [data-lucide="arrow-right"] {
        transform: translateX(3px);
    }
}

.motion-icon,
.motion-link svg:last-child,
.motion-link .fa-arrow-right,
.motion-link [data-lucide="arrow-right"] {
    transition: transform var(--motion-fast) var(--motion-ease-spring);
}

.motion-press {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 120ms ease,
        box-shadow var(--motion-fast) ease,
        filter var(--motion-fast) ease !important;
}

.motion-press:active {
    transform: scale(.975);
}

.motion-ripple-dot {
    position: absolute;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 999px;
    pointer-events: none;
    background: currentColor;
    opacity: .15;
    transform: translate(-50%, -50%);
    animation: motion-ripple 560ms ease-out forwards;
}

.motion-submitting {
    cursor: wait !important;
    filter: saturate(.72);
}

.motion-submitting::after {
    content: '';
    width: .85rem;
    height: .85rem;
    margin-left: .55rem;
    display: inline-block;
    vertical-align: -.12rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: motion-spin 650ms linear infinite;
}

.motion-row {
    transition:
        background-color var(--motion-fast) ease,
        transform var(--motion-fast) var(--motion-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .motion-row:hover {
        transform: translateX(2px);
    }
}

.motion-flash {
    animation: motion-toast-in 520ms var(--motion-ease-spring) both;
}

dialog.motion-dialog[open],
.motion-dialog.motion-dialog-active {
    animation: motion-overlay-in 220ms ease-out both;
}

.motion-dialog.motion-dialog-active .motion-dialog-panel {
    animation: motion-dialog-in 320ms var(--motion-ease-spring) both;
}

.motion-tab-active {
    animation: motion-tab-in 340ms var(--motion-ease-out) both;
}

.motion-details-open > :not(summary) {
    animation: motion-details-in 300ms var(--motion-ease-out) both;
    transform-origin: top center;
}

[data-mobile-sidebar-root] > [data-mobile-sidebar-close] {
    opacity: 0;
    transition: opacity 260ms ease !important;
}

[data-mobile-sidebar-root].motion-sidebar-open > [data-mobile-sidebar-close] {
    opacity: 1;
}

[data-mobile-sidebar-panel] {
    transition-duration: 340ms !important;
    transition-timing-function: var(--motion-ease-out) !important;
}

.mobile-nav {
    animation: motion-nav-in 480ms var(--motion-ease-spring);
}

.motion-card .motion-icon {
    transform-origin: center;
}

.member-hero::before {
    animation: motion-hero-glow 10s ease-in-out infinite alternate;
}

.member-balance-amount,
[data-motion-number] {
    transform-origin: left center;
}

@keyframes motion-ripple {
    to { width: 28rem; height: 28rem; opacity: 0; }
}

@keyframes motion-spin {
    to { transform: rotate(360deg); }
}

@keyframes motion-toast-in {
    from { opacity: 0; transform: translate3d(16px, -8px, 0) scale(.97); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes motion-dialog-in {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes motion-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes motion-tab-in {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-details-in {
    from { opacity: 0; transform: translateY(-7px) scaleY(.97); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes motion-nav-in {
    from { opacity: 0; filter: blur(5px); }
    to { opacity: 1; filter: blur(0); }
}

@keyframes motion-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-page-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes motion-progress {
    from { width: 0; opacity: .6; }
    to { width: 92%; opacity: 1; }
}

@keyframes motion-hero-glow {
    from { transform: translate3d(-1.5%, 0, 0) scale(1.02); opacity: .68; }
    to { transform: translate3d(1.5%, 0, 0) scale(1.05); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    body.motion-ready [data-motion] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    body.motion-page-enter,
    body.motion-page-leaving {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media print {
    [data-motion] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}