:root {
    --fractaw-motion-fast: 140ms;
    --fractaw-motion-page: 180ms;
    --fractaw-motion-slow: 240ms;
    --fractaw-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fractaw-motion-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --fractaw-motion-ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
}

body > main {
    animation: fractaw-page-enter var(--fractaw-motion-page)
        var(--fractaw-motion-ease-out) backwards;
}

html.is-motion-leaving body > main {
    opacity: 0.98;
    transform: translateY(-2px);
    transition:
        opacity var(--fractaw-motion-fast) var(--fractaw-motion-ease-in),
        transform var(--fractaw-motion-fast) var(--fractaw-motion-ease-in);
}

.fractaw-progress {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fractaw-motion-fast) var(--fractaw-motion-ease-out);
}

.fractaw-progress.is-active {
    opacity: 1;
}

.fractaw-progress__bar {
    width: 35%;
    height: 100%;
    background: var(--fractaw-primary);
    box-shadow: 0 0 0.75rem rgba(var(--fractaw-primary-rgb, 244, 185, 66), 0.42);
    transform: translateX(-120%);
    animation: fractaw-progress-track 1.1s linear infinite;
}

[data-motion-skeleton] {
    position: relative;
    isolation: isolate;
}

[data-motion-skeleton].is-motion-loading {
    overflow: hidden;
}

[data-motion-skeleton].is-motion-loading::before,
[data-motion-skeleton].is-motion-loading::after {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    content: "";
}

[data-motion-skeleton].is-motion-loading::before {
    inset: 0;
    border: 1px solid rgba(var(--fractaw-accent-rgb, 79, 167, 163), 0.2);
    border-radius: inherit;
    background: color-mix(in srgb, var(--fractaw-card-bg) 94%, transparent);
}

[data-motion-skeleton].is-motion-loading::after {
    inset-block: 0;
    left: -55%;
    width: 45%;
    background: linear-gradient(
        105deg,
        transparent,
        rgba(var(--fractaw-text-rgb, 231, 236, 239), 0.14),
        transparent
    );
    transform: translateX(0);
    animation: fractaw-skeleton-shift 1.1s linear infinite;
}

form.is-motion-submitting [type="submit"] {
    cursor: progress;
    filter: saturate(0.72);
    opacity: 0.78;
    transition:
        filter var(--fractaw-motion-fast) var(--fractaw-motion-ease-standard),
        opacity var(--fractaw-motion-fast) var(--fractaw-motion-ease-standard);
}

.app-message {
    animation: fractaw-feedback-enter var(--fractaw-motion-fast)
        var(--fractaw-motion-ease-out) backwards;
}

@keyframes fractaw-page-enter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fractaw-feedback-enter {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fractaw-progress-track {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(410%);
    }
}

@keyframes fractaw-skeleton-shift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(350%);
    }
}

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

    html.is-motion-leaving body > main {
        opacity: 1;
        transform: none;
    }

    [data-motion-skeleton].is-motion-loading::after {
        transform: translateX(140%);
    }
}