/* ===========================================================================
   «Guardala lavorare» — the section where the AI does the work in front of you.
   Three acts that play by themselves, taken from the three most visible rows
   of the BEFORE/NOW table: the receipt, the anomalies, the rule in words.

   Two constraints that keep the section honest:
   · without JavaScript the three acts stay in the flow, one under the other,
     already in their final state. The form is filled in, the anomalies are
     marked, the rule is there. Nothing is lost, only the motion.
   · no invented numbers. What shows on the stage matches the receipt drawn
     next to it, and the sentences do not promise minutes saved.
   =========================================================================== */

/* ── THE TEST BENCH, and it shows it is a bench ─────────────────────────
   It used to span the full page width on a white background like the rest:
   seven buttons and a box that read as «more content», instead of as
   something to WATCH while it works.

   Two changes, and they are the same thought. NARROWER: a bench as wide as
   the page is not a bench, it is the page; at 1000px the stage and its
   controls fit in a single glance. And on a SURFACE OF ITS OWN: the faint
   blue background sets the bench off the page, and the white cards inside
   become objects resting on it instead of boxes drawn on nothing. The blue
   is the accent's (`--lp-accent-tint`) and not a second colour: here a
   credit is spent, and across the product that is the colour of whoever
   spends it. */
.mg {
    display: grid; grid-template-columns: minmax(240px, 310px) 1fr;
    gap: clamp(18px, 2.4vw, 30px); align-items: start;

    max-width: 1000px;
    margin-inline: auto;
    padding: clamp(18px, 2.4vw, 30px);
    background: var(--lp-accent-tint);
    border: 1px solid var(--bbx-blue-100);
    border-radius: calc(var(--lp-radius-card) + 6px);
}

/* The section header follows the bench: a 1200-wide title above a
   1000-wide bench reads as a crooked bench. */
#ai .sec__head { max-width: 1000px; margin-inline: auto; }

@media (max-width: 900px) {
    .mg { grid-template-columns: 1fr; }
}

/* Below 560 the blue box costs more than it gives: it eats the gutters
   and leaves the cards in a very narrow column. The background stays,
   without a frame and without an inset. */
@media (max-width: 560px) {
    .mg { padding: 0; background: transparent; border: 0; }
}

/* --- the acts, on the left ----------------------------------------------- */
.mg__acts { display: grid; gap: 6px; }
.mg__act {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 26px 1fr; gap: 12px; width: 100%;
    text-align: left; background: var(--lp-surface);
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius-card);
    padding: 10px 14px;
    transition: border-color var(--mo-fast, 120ms) ease, background-color var(--mo-fast, 120ms) ease;
}
.mg__act:hover { border-color: var(--bbx-gray-300); }
.mg__act.is-on { border-color: var(--lp-accent); }
.mg__n {
    grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: var(--lp-radius-pill);
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: var(--lp-accent-tint); color: var(--lp-accent-press);
}
.mg__act.is-on .mg__n { background: var(--lp-accent); color: #fff; }
.mg__t { min-width: 0; }
.mg__t b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.mg__t i { display: block; font-style: normal; font-size: 14px; line-height: 1.35; color: var(--lp-ink-soft); margin-top: 2px; }
/* The timer is no longer a row of the button: it sits on the bottom edge,
   out of the flow, so it costs no height. The track stays transparent
   because seven idle buttons with seven grey lines would seem to have a
   second border; the fill is darker than the accent so it stands off the lit border. */
.mg__bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    display: block; background: transparent; overflow: hidden;
}
.mg__bar span { display: block; height: 100%; width: 0; background: var(--lp-accent-press); }
.mg__act.is-on .mg__bar span { width: 100%; }

/* --- the stage, on the right --------------------------------------------- */
.mg__stage {
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); box-shadow: var(--bbx-shadow-sm);
    padding: clamp(18px, 2.4vw, 26px);
}
.mg__scene + .mg__scene { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--lp-border); }
.mg__head {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--bbx-gray-500); margin-bottom: 16px;
}
.mg__pair { display: grid; grid-template-columns: 190px 1fr; gap: clamp(18px, 2.5vw, 30px); align-items: start; }
@media (max-width: 620px) { .mg__pair { grid-template-columns: 1fr; } }

/* act 1 · the receipt ----------------------------------------------------- */
.mg__receipt { position: relative; overflow: hidden; border-radius: 10px; }
.mg__slip {
    background: var(--bbx-gray-25); border: 1px solid var(--lp-border); border-radius: 10px;
    padding: 14px 16px; font-size: 12.5px; line-height: 1.7; color: var(--lp-ink-soft);
    font-variant-numeric: tabular-nums;
}
.mg__slip b { display: block; font-size: 13px; font-weight: 700; color: var(--lp-ink); letter-spacing: .04em; }
.mg__slip span { display: flex; justify-content: space-between; gap: 10px; }
.mg__slip i { font-style: normal; }
.mg__slip hr { border: 0; border-top: 1px dashed var(--bbx-gray-200); margin: 8px 0; }
.mg__slip .mg__total { font-weight: 700; color: var(--lp-ink); }
/* The sharp edge is the scanner head, the gradient is the trail. Without the
   edge it reads as a smudge; with a coloured shadow it reads as a toy, and
   the guidelines forbid it. */
.mg__scan {
    position: absolute; left: 0; right: 0; top: 0; height: 34%;
    background: linear-gradient(to bottom, rgba(0,128,246,0) 0%, rgba(0,128,246,.18) 100%);
    border-bottom: 2px solid var(--lp-accent);
    pointer-events: none;
}

.mg__form { min-width: 0; }
.mg__field {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 10px 0; border-bottom: 1px solid var(--lp-border);
}
.mg__k { font-size: 14px; color: var(--lp-ink-soft); flex: none; }
.mg__v { font-size: 16px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.mg__outcome {
    margin-top: 14px; padding-top: 13px; border-top: 2px solid var(--lp-accent);
    font-size: 16px; font-weight: 700; line-height: 1.35;
}

/* act 2 · the anomalies --------------------------------------------------- */
/* Fifteen by two: thirty timesheets read as «thirty» even when small, and
   the stage does not become a tower. */
.mg__tiles { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; margin-bottom: 18px; }
@media (max-width: 620px) { .mg__tiles { grid-template-columns: repeat(10, 1fr); } }
.mg__tiles i {
    display: block; aspect-ratio: 3 / 4; border-radius: 4px;
    background: var(--bbx-gray-150);
}
.mg__tiles i.is-bad { background: var(--lp-accent); }
.mg__found { display: grid; gap: 8px; }
.mg__hit {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    background: var(--lp-accent-tint); border-radius: 10px; padding: 11px 14px;
    font-size: 15px; line-height: 1.35;
}
.mg__hit b { font-weight: 700; color: var(--lp-ink); }
.mg__hit span { color: var(--bbx-blue-700); }
.mg__hit em { font-style: normal; color: var(--lp-ink-soft); font-size: 14px; }

/* act 3 · the rule in words ---------------------------------------------- */
.mg__prompt {
    background: var(--lp-page); border: 1px solid var(--lp-border); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 16px;
}
.mg__sentence { font-size: 17px; line-height: 1.45; }
.mg__caret {
    display: none; width: 2px; height: 1.05em; background: var(--lp-accent);
    vertical-align: -.16em; margin-left: 2px;
}
.mg__thinking { font-size: 14px; color: var(--lp-ink-soft); margin-bottom: 14px; }
.mg__thinking::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
    border-radius: var(--lp-radius-pill); background: var(--lp-accent); vertical-align: 1px;
}
.mg__box { border: 1px solid var(--lp-border); border-radius: 12px; overflow: hidden; }
.mg__rt {
    background: var(--lp-page); border-bottom: 1px solid var(--lp-border); padding: 9px 14px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bbx-gray-500);
}
.mg__row {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    padding: 12px 14px; font-size: 15px; line-height: 1.4; color: var(--lp-ink-soft);
    border-bottom: 1px solid var(--lp-border);
}
.mg__row b { font-weight: 700; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.mg__if {
    background: var(--lp-dark); color: #fff; border-radius: 5px; padding: 1px 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.mg__then { color: var(--lp-accent); font-weight: 700; }
.mg__box .mg__outcome { margin: 0; padding: 13px 14px; border-top: 0; border-bottom: 0; }

/* act 7 · the cost items reuse the form field of act 1: it is the same
   shape — a label on the left, a number on the right — and there is no point
   inventing a second one. Only the total changes, as it must carry weight. */
.mg__box .mg__field { padding: 11px 14px; }
.mg__field--total { background: var(--lp-accent-tint); border-bottom: 0; }
.mg__field--total .mg__k { font-weight: 700; color: var(--bbx-blue-800); }
.mg__field--total .mg__v { font-size: 20px; color: var(--bbx-blue-800); }


/* act 4 · the dictated automation ----------------------------------------- */
.mg__run {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 12px 14px; font-size: 15px; line-height: 1.4;
    border-bottom: 1px solid var(--lp-border);
}
.mg__when { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; min-width: 7.5em; }
.mg__what { color: var(--lp-ink-soft); flex: 1 1 12em; min-width: 0; }
.mg__done {
    flex: none; background: var(--lp-accent-tint); color: var(--bbx-blue-700);
    border-radius: var(--lp-radius-pill); padding: 3px 11px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.mg__done--waiting { background: var(--lp-page); color: var(--bbx-gray-500); }

/* act 5 · the recognised file layout -------------------------------------- */
/* A single family, even for a file name and a CSV column: monospace would
   be the page's second typeface, and the guidelines allow only one. Weight
   and background are enough to say «this is data». */
.mg__file {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    background: var(--lp-page); border: 1px solid var(--lp-border); border-radius: 10px;
    padding: 13px 16px; margin-bottom: 14px;
}
.mg__file b { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.mg__file span { font-size: 14px; color: var(--lp-ink-soft); }
.mg__reading { font-size: 14px; color: var(--lp-ink-soft); margin-bottom: 14px; }
.mg__reading::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
    border-radius: var(--lp-radius-pill); background: var(--lp-accent); vertical-align: 1px;
}
.mg__map {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    padding: 11px 14px; font-size: 15px; line-height: 1.4;
    border-bottom: 1px solid var(--lp-border);
}
.mg__col {
    flex: none; min-width: 8.5em; text-align: center;
    background: var(--lp-page); border-radius: 5px; padding: 3px 9px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--lp-ink-soft);
}
.mg__map b { font-weight: 600; color: var(--lp-ink); }


/* --- narrow screens ---------------------------------------------------------
   Seven stacked acts are six hundred pixels of index before reaching the
   demo: on the phone the index becomes a strip that scrolls sideways and the
   stage stays right under the title. The act description disappears — it
   shows on the stage anyway — and the title stays on a single line. */
@media (max-width: 900px) {
    .mg { grid-template-columns: 1fr; }
    .mg__acts {
        display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; padding-bottom: 6px;
    }
    .mg__acts li { flex: 0 0 auto; scroll-snap-align: start; max-width: 68vw; }
    .mg__act { padding: 9px 13px; gap: 10px; }
    .mg__t i { display: none; }
    .mg__t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 460px) {
    .mg__run, .mg__map, .mg__row { padding: 11px 12px; font-size: 14px; }
    .mg__when { min-width: 6.5em; }
    .mg__col { min-width: 7.5em; font-size: 11px; padding: 3px 7px; }
    .mg__box .mg__field { padding: 10px 12px; }
    .mg__field--total .mg__v { font-size: 18px; }
    .mg__file { padding: 11px 13px; }
    .mg__sentence { font-size: 16px; }
}


/* ===========================================================================
   THE MOTION — all gated on html.js.mo-magic.
   Without the class (or without JavaScript) the design above stays, still and
   complete: that is also the right behaviour for whoever asked for less motion.
   =========================================================================== */

/* The height is measured by magic.js, and it is no longer a single one: the
   stage FOLLOWS the current scene, which varies by more than 180px between
   the shortest and the tallest. Fixed at the tallest it left half a white box
   under the other six. Written by hand it would break at the first change of
   text, language or width — here there is only the starting value, so the
   stage does not jump before the measurement.

   The SPACE, though, stays that of the tallest scene: what the current scene
   does not use is taken by the margins, which are transparent and so cannot
   be seen. The sum of the three measures is `--mg-max` at every instant — and
   that is why they move with THE SAME duration and the same curve: two
   different timings and the sum would no longer be constant in between, so
   the row below would jump for a quarter of a second at every act. It is the
   margin that makes this independent of the acts column: it would hold even
   where that column is shorter, or is a horizontal strip (the phone).

   HALF ABOVE AND HALF BELOW, not all below: a white card anchored at the top
   of a column taller than itself reads as a card missing a piece; the same
   card in the middle reads as an object resting on the bench — which is
   what it is.

   The transition lasts as long as the fade between scenes: so the box does
   not move BEFORE or AFTER the content, but together with it, and reads as
   one thing. Under `prefers-reduced-motion` the stage goes back to static (at
   the end of the file) and the transition has nothing to move. */
html.js.mo-magic .mg__stage {
    position: relative;
    min-height: var(--mg-h, 430px);

    /* `max(0px, …)` and the two fallbacks at ZERO, and they are the same care:
       before magic.js measures, the two variables do not exist yet. With a
       different fallback for each, the subtraction gave a NEGATIVE margin of
       half a stage, the page below rose by four hundred pixels and fell back
       at the first breath — a jump nobody sees while looking at the section,
       because by then the measurement has already arrived, but which hits
       anyone landing further down (a link with an anchor, a back navigation)
       or measuring the page while it loads. With both variables missing the
       sum is zero, which means «compensate nothing»: the space is held by the
       stage itself, as before the measurement. */
    margin-block: max(0px, calc((var(--mg-max, 0px) - var(--mg-h, 0px)) / 2));

    transition: min-height  var(--mo-base, 240ms) var(--mo-ease, ease),
                margin-block var(--mo-base, 240ms) var(--mo-ease, ease);
}

/* And the reserved space is in turn centred against the acts column: it is
   the same idea one level up. Only side by side — stacked, «in the middle of
   what» means nothing, and there the stage is the only thing in its row. */
@media (min-width: 901px) {
    html.js.mo-magic .mg__stage { align-self: center; }

    /* ── THE ACTS COLUMN DOES NOT DRIVE THE BENCH HEIGHT ──────────
       The stage drives it. With act titles two or three lines long the
       column had reached twelve hundred pixels against the stage's five
       hundred, and the bench had become a blue corridor with the scene
       small in the middle. Now the column is at most as tall as the space
       reserved for the stage (`--mg-max`, the tallest scene, written by
       magic.js on the container) and SCROLLS: the script brings the current
       act to the centre, and whoever wants another one scrolls on their own.

       Without `--mg-max` — that is without javascript, or before the
       measurement — the cap is `none` and the column is whole: nothing is cut
       for someone who does not have the script that would scroll it. */
    html.js.mo-magic .mg__acts {
        max-height: var(--mg-max, none);
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scrollbar-width: thin;
        /* An act's dot and lit border must not end up clipped
           against the limit: a breath of air inside the scrolling box. */
        padding: 1px;
    }

    /* The fades say there is MORE — only on the side where there is. The black
       here is not a colour: it is the alpha channel of the mask. */
    html.js.mo-magic .mg__acts.is-below {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
    }
    html.js.mo-magic .mg__acts.is-above {
        -webkit-mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
                mask-image: linear-gradient(to top, #000 calc(100% - 56px), transparent);
    }
    html.js.mo-magic .mg__acts.is-above.is-below {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
                mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    }
}

html.js.mo-magic .mg__scene {
    position: absolute; left: clamp(18px, 2.4vw, 26px); right: clamp(18px, 2.4vw, 26px);
    top: clamp(18px, 2.4vw, 26px);
    opacity: 0; visibility: hidden;
    transition: opacity var(--mo-base, 240ms) var(--mo-ease, ease), visibility var(--mo-base, 240ms);
}
html.js.mo-magic .mg__scene + .mg__scene { margin: 0; padding: 0; border-top: 0; }
html.js.mo-magic .mg__scene.is-on { opacity: 1; visibility: visible; }

html.js.mo-magic .mg__act.is-on .mg__bar span { width: 0; }
html.js.mo-magic .mg__act.is-on.is-play .mg__bar span {
    animation: mg-bar var(--mg-dur, 8200ms) linear both;
}
@keyframes mg-bar { from { width: 0; } to { width: 100%; } }

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

/* act 1 */
html.js.mo-magic .mg__scan { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__scan { animation: mg-scan 1700ms var(--mo-ease, ease) both; }
@keyframes mg-scan {
      0% { opacity: 0; transform: translateY(-100%); }
     12% { opacity: 1; }
     82% { opacity: 1; }
    100% { opacity: 0; transform: translateY(300%); }
}
html.js.mo-magic .mg__field, html.js.mo-magic .mg__outcome { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__field {
    animation: mg-in 400ms var(--mo-ease, ease) both;
    animation-delay: calc(1500ms + var(--i, 0) * 380ms);
}
html.js.mo-magic .mg__scene[data-scene="0"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 3500ms;
}

/* act 2 · the sweep over the thirty timesheets, then the three that do not add up */
html.js.mo-magic .mg__tiles i { opacity: .3; }
html.js.mo-magic .mg__scene.is-play .mg__tiles i {
    animation: mg-tile 800ms var(--mo-ease, ease) both;
    animation-delay: calc(var(--i, 0) * 42ms);
}
html.js.mo-magic .mg__scene.is-play .mg__tiles i.is-bad { animation-name: mg-tile-bad; }
@keyframes mg-tile     {   0% { opacity: .12; transform: scale(.84); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: .3;  transform: scale(1); } }
@keyframes mg-tile-bad {   0% { opacity: .12; transform: scale(.84); } 40% { opacity: 1; transform: scale(1.14); } 100% { opacity: 1; transform: scale(1); } }
html.js.mo-magic .mg__hit { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__hit {
    animation: mg-in 420ms var(--mo-ease, ease) both;
    animation-delay: calc(1700ms + var(--i, 0) * 420ms);
}
html.js.mo-magic .mg__scene[data-scene="1"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 3400ms;
}

/* act 3 · the sentence types itself, then becomes a calculation */
html.js.mo-magic .mg__sentence span { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__sentence span {
    animation: mg-word 1ms linear both;
    animation-delay: calc(300ms + var(--i, 0) * 88ms);
}
@keyframes mg-word { to { opacity: 1; } }
html.js.mo-magic .mg__caret { display: inline-block; opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__caret { animation: mg-caret 2600ms steps(1) both; }
@keyframes mg-caret {
    0%, 47% { opacity: 1; } 50%, 97% { opacity: 0; } 98%, 100% { opacity: 0; }
}
html.js.mo-magic .mg__thinking, html.js.mo-magic .mg__box { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__thinking { animation: mg-think 1500ms var(--mo-ease, ease) 2500ms both; }
@keyframes mg-think { 0% { opacity: 0; } 15%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* The box now has three owners: the delay goes per scene, not shared. */
html.js.mo-magic .mg__scene[data-scene="2"].is-play .mg__box { animation: mg-in 460ms var(--mo-ease, ease) 3700ms both; }
html.js.mo-magic .mg__scene[data-scene="3"].is-play .mg__box { animation: mg-in 460ms var(--mo-ease, ease) 2600ms both; }
html.js.mo-magic .mg__scene[data-scene="4"].is-play .mg__box { animation: mg-in 460ms var(--mo-ease, ease) 2200ms both; }
html.js.mo-magic .mg__scene[data-scene="5"].is-play .mg__box { animation: mg-in 460ms var(--mo-ease, ease) 2200ms both; }
html.js.mo-magic .mg__scene[data-scene="6"].is-play .mg__box { animation: mg-in 460ms var(--mo-ease, ease) 2200ms both; }
html.js.mo-magic .mg__row { opacity: 0; }
html.js.mo-magic .mg__scene.is-play .mg__row {
    animation: mg-in 380ms var(--mo-ease, ease) both;
    animation-delay: calc(3900ms + var(--i, 0) * 340ms);
}
html.js.mo-magic .mg__scene[data-scene="2"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 5100ms;
}

/* act 4 · the sentence types itself, the automation appears, then the runs
   pop up one at a time: that is what makes it read as «runs by itself». */
html.js.mo-magic .mg__run { opacity: 0; }
html.js.mo-magic .mg__scene[data-scene="3"].is-play .mg__run {
    animation: mg-in 400ms var(--mo-ease, ease) both;
    animation-delay: calc(3100ms + var(--i, 0) * 760ms);
}
html.js.mo-magic .mg__scene[data-scene="3"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 5500ms;
}

/* act 5 · the file arrives, it is read, and the matches settle in a row */
html.js.mo-magic .mg__file, html.js.mo-magic .mg__map, html.js.mo-magic .mg__reading { opacity: 0; }
html.js.mo-magic .mg__scene[data-scene="4"].is-play .mg__file {
    animation: mg-in 420ms var(--mo-ease, ease) 300ms both;
}
html.js.mo-magic .mg__scene[data-scene="4"].is-play .mg__reading {
    animation: mg-think 1500ms var(--mo-ease, ease) 900ms both;
}
html.js.mo-magic .mg__scene[data-scene="4"].is-play .mg__map {
    animation: mg-in 380ms var(--mo-ease, ease) both;
    animation-delay: calc(2500ms + var(--i, 0) * 400ms);
}
html.js.mo-magic .mg__scene[data-scene="4"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 4700ms;
}

/* act 6 · the person arriving, then the onboarding path that writes itself */
html.js.mo-magic .mg__scene[data-scene="5"].is-play .mg__file  { animation: mg-in 420ms var(--mo-ease, ease) 300ms both; }
html.js.mo-magic .mg__scene[data-scene="5"].is-play .mg__reading { animation: mg-think 1500ms var(--mo-ease, ease) 900ms both; }
html.js.mo-magic .mg__scene[data-scene="5"].is-play .mg__run {
    animation: mg-in 400ms var(--mo-ease, ease) both;
    animation-delay: calc(2600ms + var(--i, 0) * 520ms);
}
html.js.mo-magic .mg__scene[data-scene="5"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 5300ms;
}

/* act 7 · the contract read, then the cost items one under the other */
html.js.mo-magic .mg__scene[data-scene="6"].is-play .mg__file  { animation: mg-in 420ms var(--mo-ease, ease) 300ms both; }
html.js.mo-magic .mg__scene[data-scene="6"].is-play .mg__reading { animation: mg-think 1500ms var(--mo-ease, ease) 900ms both; }
html.js.mo-magic .mg__scene[data-scene="6"].is-play .mg__field {
    animation: mg-in 380ms var(--mo-ease, ease) both;
    animation-delay: calc(2600ms + var(--i, 0) * 330ms);
}
html.js.mo-magic .mg__scene[data-scene="6"].is-play .mg__outcome {
    animation: mg-in 420ms var(--mo-ease, ease) both; animation-delay: 4900ms;
}

/* whoever asked for less motion sees the seven acts still and complete */
@media (prefers-reduced-motion: reduce) {
    html.js .mg__scene, html.js .mg__field, html.js .mg__outcome, html.js .mg__hit,
    html.js .mg__row, html.js .mg__box, html.js .mg__sentence span, html.js .mg__tiles i,
    html.js .mg__run, html.js .mg__map, html.js .mg__file {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
    html.js .mg__scan, html.js .mg__thinking, html.js .mg__reading,
    html.js .mg__caret { display: none !important; }
    html.js .mg__stage { position: static !important; min-height: 0 !important; margin-block: 0 !important; }
    html.js .mg__acts { max-height: none !important; overflow: visible !important;
                        -webkit-mask-image: none !important; mask-image: none !important; }
    html.js .mg__scene { position: static !important; visibility: visible !important; }
    html.js .mg__scene + .mg__scene { margin-top: 26px !important; padding-top: 26px !important; border-top: 1px solid var(--lp-border) !important; }
}