/* Managed Flows: motion. CSS only (the site runs no JavaScript). Everything here is
   decoration on top of a complete static page, and all of it is off for visitors who
   ask their system for reduced motion. */

/* ---- Small product illustrations in the engine cards (static base) ---- */

.mf-vis {
    position: relative;
    height: 88px;
    margin-bottom: 22px;
    padding: 14px;
    border-radius: 12px;
    background: var(--mf-mist);
    overflow: hidden;
}

.mf-vis-form { display: grid; align-content: start; gap: 7px; }

.mf-vis-form span {
    display: block;
    height: 10px;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--mf-line);
}

.mf-vis-form span:nth-child(1) { width: 70%; }
.mf-vis-form span:nth-child(2) { width: 90%; }
.mf-vis-form span:nth-child(4) { width: 55%; }
.mf-vis-form .mf-vis-cond { width: 80%; background: var(--mf-coral-tint); box-shadow: inset 0 0 0 1px var(--mf-coral); }

.mf-vis-route { display: flex; align-items: center; justify-content: space-between; padding-inline: 22px; }

.mf-vis-route::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    height: 2px;
    background: var(--mf-line-strong);
}

.mf-vis-route span {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--mf-line-strong);
}

.mf-vis-route span:nth-child(-n + 2) { background: var(--mf-green); box-shadow: none; }

.mf-vis-route i {
    position: absolute;
    top: calc(50% - 9px);
    left: calc(22px + (100% - 58px) * 0.667);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mf-coral);
    box-shadow: 0 0 0 5px rgba(224, 80, 88, 0.2);
}

.mf-vis-due { display: flex; align-items: center; gap: 18px; }

@property --mf-due {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 70%;
}

.mf-vis-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--mf-amber) var(--mf-due), var(--mf-mist-deep) 0);
    -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px);
    mask: radial-gradient(circle, transparent 17px, #000 18px);
}

.mf-vis-bell {
    width: 44%;
    height: 12px;
    border-radius: 6px;
    background: var(--mf-amber-tint);
    box-shadow: inset 0 0 0 1px var(--mf-amber);
}

.mf-vis-bars { display: flex; align-items: flex-end; gap: 10px; }

.mf-vis-bars span {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: var(--mf-ink);
    transform-origin: bottom;
}

.mf-vis-bars span:nth-child(1) { height: 40%; }
.mf-vis-bars span:nth-child(2) { height: 70%; background: var(--mf-coral); }
.mf-vis-bars span:nth-child(3) { height: 55%; }
.mf-vis-bars span:nth-child(4) { height: 85%; }
.mf-vis-bars span:nth-child(5) { height: 30%; background: var(--mf-green); }

/* ---- Keyframes ---- */

@keyframes mf-rise {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}

/* One 20-second cycle shows four dossiers for five seconds each. */
@keyframes mf-morph-cycle {
    0% { opacity: 0; translate: 0 16px; }
    2.5%, 22.5% { opacity: 1; translate: 0 0; }
    25%, 100% { opacity: 0; translate: 0 -12px; }
}

@keyframes mf-tab-cycle {
    0%, 24% { background: var(--mf-ink); border-color: var(--mf-ink); color: #fff; }
    25%, 100% { background: var(--mf-paper); border-color: var(--mf-line); color: var(--mf-muted); }
}

/* Dossier card: 20-second cycle, each dossier owns the first 25% of its own timeline. */
@keyframes mf-app-tick {
    0%, 10% { border-color: #adb5bd; background-color: #fff; }
    11%, 100% { border-color: #0d6efd; background-color: #0d6efd; }
}

@keyframes mf-app-complete {
    0%, 11% { width: 67%; background-color: #ffc107; }
    13%, 100% { width: 100%; background-color: #198754; }
}

@keyframes mf-app-count-old {
    0%, 11% { opacity: 1; }
    11.5%, 100% { opacity: 0; }
}

@keyframes mf-app-count-new {
    0%, 11% { opacity: 0; }
    11.5%, 100% { opacity: 1; }
}

@keyframes mf-app-enable {
    0%, 12% { border-color: #0d6efd; color: #0d6efd; opacity: 0.6; }
    13.5%, 100% { border-color: #d63b47; color: #d63b47; opacity: 1; }
}

@keyframes mf-app-choose {
    0%, 12% { border-color: #0d6efd; background-color: transparent; color: #0d6efd; opacity: 0.6; }
    13.5%, 17% { border-color: #d63b47; background-color: transparent; color: #d63b47; opacity: 1; }
    18%, 23% { border-color: #d63b47; background-color: #d63b47; color: #fff; opacity: 1; }
    25%, 100% { border-color: #d63b47; background-color: transparent; color: #d63b47; opacity: 1; }
}

@keyframes mf-cond-field {
    0%, 20% { opacity: 0; height: 0; margin-block: -3.5px; }
    35%, 80% { opacity: 1; height: 10px; margin-block: 0; }
    95%, 100% { opacity: 0; height: 0; margin-block: -3.5px; }
}

@keyframes mf-route-token {
    0%, 8% { left: 22px; }
    30%, 38% { left: calc(22px + (100% - 58px) * 0.333); }
    60%, 68% { left: calc(22px + (100% - 58px) * 0.667); }
    90%, 100% { left: calc(100% - 40px); }
}

@keyframes mf-route-dot {
    0%, 100% { background: #fff; box-shadow: inset 0 0 0 2px var(--mf-line-strong); }
}

@keyframes mf-due-count {
    0% { --mf-due: 10%; }
    85%, 100% { --mf-due: 92%; }
}

@keyframes mf-bell {
    0%, 70%, 100% { opacity: 0.35; }
    80%, 95% { opacity: 1; }
}

@keyframes mf-bar-grow {
    from { scale: 1 0.1; }
    to { scale: 1 1; }
}

@keyframes mf-rail-done {
    from { scale: 0 1; }
    to { scale: 1 1; }
}

@keyframes mf-rail-current {
    from { translate: 0 0; }
    to { translate: 700% 0; }
}

@keyframes mf-rail-label {
    0%, 14% { color: var(--mf-rail-on, #fff); }
    14.3%, 100% { color: var(--mf-rail-off, var(--mf-ink-muted)); }
}

/* ---- Subsidy phase rail: static base for the moving overlay ---- */

.mf-rail { position: relative; gap: 0; }
.mf-rail li::before { right: 3px; left: 3px; }

/* ---- Motion, only for visitors who have not asked for less ---- */

@media (prefers-reduced-motion: no-preference) {
    .mf-hero-copy > * { animation: mf-rise 0.9s var(--mf-ease) both; }
    .mf-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
    .mf-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
    .mf-hero-copy > :nth-child(4) { animation-delay: 0.24s; }
    .mf-hero-copy > :nth-child(5) { animation-delay: 0.32s; }
    .mf-morph { animation: mf-rise 1.1s 0.2s var(--mf-ease) both; }

    .mf-morph-stack > *,
    .mf-morph-stack > :not(:first-child) {
        visibility: visible;
        animation: mf-morph-cycle 20s linear infinite both;
        animation-delay: var(--mf-d, 0s);
    }
    .mf-morph-stack > :nth-child(2),
    .mf-morph-tab:nth-child(2) { --mf-d: 5s; }
    .mf-morph-stack > :nth-child(3),
    .mf-morph-tab:nth-child(3) { --mf-d: 10s; }
    .mf-morph-stack > :nth-child(4),
    .mf-morph-tab:nth-child(4) { --mf-d: 15s; }
    .mf-morph-tab { animation: mf-tab-cycle 20s linear infinite none; animation-delay: var(--mf-d, 0s); }

    /* In each dossier's 5 seconds: the last checklist item is ticked, the checklist completes and
       the actions become available, then the first action is chosen. The phase does not move:
       in the application a workflow step does not change the phase. */
    .mf-app-late::before,
    .mf-app-progress i,
    .mf-app-count > span,
    .mf-app-action {
        animation-duration: 20s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
        animation-delay: var(--mf-d, 0s);
    }
    .mf-app-late::before { animation-name: mf-app-tick; }
    .mf-app-progress i { animation-name: mf-app-complete; }
    .mf-app-count > span:first-child { animation-name: mf-app-count-old; }
    .mf-app-count > span:last-child { animation-name: mf-app-count-new; }
    .mf-app-action { animation-name: mf-app-enable; }
    .mf-app-action:first-of-type { animation-name: mf-app-choose; }

    .mf-vis-form .mf-vis-cond { animation: mf-cond-field 6s var(--mf-ease) infinite; }
    .mf-vis-route i { animation: mf-route-token 8s var(--mf-ease) infinite; }
    .mf-vis-route span:nth-child(-n + 2) { background: #fff; box-shadow: inset 0 0 0 2px var(--mf-line-strong); }
    .mf-vis-ring { animation: mf-due-count 7s linear infinite; }
    .mf-vis-bell { animation: mf-bell 7s linear infinite; }

    .mf-rail::before,
    .mf-rail::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 8px;
        z-index: 1;
    }
    .mf-rail::before {
        width: 100%;
        background: var(--mf-green);
        transform-origin: left;
        animation: mf-rail-done 14s steps(7, end) infinite;
    }
    .mf-rail::after {
        width: calc(100% / 7);
        background: var(--mf-coral);
        animation: mf-rail-current 14s steps(7, end) infinite;
    }
    .mf-rail li + li::after {
        content: "";
        position: absolute;
        top: 0;
        left: -3px;
        width: 6px;
        height: 8px;
        z-index: 2;
        background: var(--mf-ink);
    }
    .mf-rail li { animation: mf-rail-label 14s linear infinite none; }
    .mf-rail li:nth-child(2) { animation-delay: 2s; }
    .mf-rail li:nth-child(3) { animation-delay: 4s; }
    .mf-rail li:nth-child(4) { animation-delay: 6s; }
    .mf-rail li:nth-child(5) { animation-delay: 8s; }
    .mf-rail li:nth-child(6) { animation-delay: 10s; }
    .mf-rail li:nth-child(7) { animation-delay: 12s; }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .mf-reveal {
            animation: mf-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 22%;
        }
        .mf-vis-bars span {
            animation: mf-bar-grow linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 40%;
        }
    }
}

/* ---- Product videos: a still image replaces the video for reduced motion ---- */

.mf-media-still { display: none; }

@media (prefers-reduced-motion: reduce) {
    .mf-media video { display: none; }
    .mf-media-still { display: block; }
}