/* ═══════════════════════════════════════════════════════════════════════════
   MUNIMO — the three signature animations.
     1. ASSEMBLE   a client's sentence becomes running software
     2. ENGINES    modules snap together into one system (scroll-scrubbed)
     3. SHIFT      legacy screen transforms into custom software (scroll-scrubbed)
   Transform/opacity only. Every one is inert under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1 · ASSEMBLE ─────────────────────────── */
.stage{position:relative;perspective:1700px}
.prompt{display:flex;align-items:center;gap:13px;background:rgba(12,20,17,.94);border:1px solid var(--hair2);
        border-radius:15px;padding:15px 19px;box-shadow:0 22px 60px rgba(0,0,0,.6);
        max-width:620px;margin:0 auto 26px;position:relative;z-index:5}
.prompt-dot{width:9px;height:9px;border-radius:50%;background:var(--em);flex-shrink:0;
            box-shadow:0 0 14px var(--em);animation:blink 1.9s infinite}
.typer-text{font-size:clamp(14px,1.9vw,17px);font-weight:600;color:var(--t);line-height:1.4}
.typer-text::after{content:'';display:inline-block;width:2px;height:1.05em;background:var(--em2);
                   margin-left:3px;vertical-align:-.16em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.prompt-tag{margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--f);
            text-transform:uppercase;flex-shrink:0}
@media(max-width:600px){.prompt-tag{display:none}}

/* the software that builds itself */
.assemble{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:11px;
          transform-style:preserve-3d;min-height:330px}
.ab{background:linear-gradient(160deg,var(--surface),var(--ink2));border:1px solid var(--hair);
    border-radius:13px;padding:15px 17px;opacity:0;
    transform:translate3d(var(--dx,0),var(--dy,42px),-190px) rotateX(14deg) scale(.94);
    transition:opacity .62s var(--ease),transform .78s var(--ease)}
.assemble.built .ab{opacity:1;transform:none}
.assemble.built .ab:nth-child(1){transition-delay:.02s}
.assemble.built .ab:nth-child(2){transition-delay:.10s}
.assemble.built .ab:nth-child(3){transition-delay:.18s}
.assemble.built .ab:nth-child(4){transition-delay:.26s}
.assemble.built .ab:nth-child(5){transition-delay:.34s}
.assemble.built .ab:nth-child(6){transition-delay:.42s}
.ab-k{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--f);margin-bottom:9px}
.ab-v{font-size:clamp(17px,2.4vw,24px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ab-s{font-size:12px;color:var(--m);margin-top:5px;font-weight:600}
.ab-em .ab-v{color:var(--em2)}.ab-gold .ab-v{color:var(--gold)}.ab-red .ab-v{color:var(--red)}
.ab-w3{grid-column:span 3}.ab-w4{grid-column:span 4}.ab-w5{grid-column:span 5}
.ab-w6{grid-column:span 6}.ab-w7{grid-column:span 7}.ab-w8{grid-column:span 8}.ab-w12{grid-column:span 12}
@media(max-width:760px){
  .assemble{grid-template-columns:repeat(6,1fr);min-height:0}
  .ab-w3,.ab-w4{grid-column:span 3}.ab-w5,.ab-w6,.ab-w7,.ab-w8{grid-column:span 6}
}
/* rows inside the wide block */
.ab-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
        border-top:1px solid var(--hair)}
.ab-row:first-of-type{border-top:0}
.ab-row span{font-size:13.5px;color:var(--m);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-row b{font-size:14px;font-weight:800;flex-shrink:0}
.ab-bar{height:5px;border-radius:3px;background:var(--hair2);overflow:hidden;margin-top:11px}
.ab-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--em),var(--em3));
          width:0;transition:width 1.1s var(--ease) .5s}
.assemble.built .ab-bar i{width:var(--w,72%)}

/* ─────────────────────────── 2 · ENGINES ──────────────────────────── */
/* Modules drift apart, then snap into one system as you scroll through. */
.engines{--p:0;position:relative;perspective:1500px;padding:14px 0 0}
.eng-core{position:relative;margin:0 auto;max-width:760px;transform-style:preserve-3d}
.eng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform-style:preserve-3d}
@media(max-width:700px){.eng-grid{grid-template-columns:repeat(2,1fr)}}
.eng{background:linear-gradient(160deg,var(--surface),var(--ink2));border:1px solid var(--hair2);
     border-radius:15px;padding:19px 17px;text-align:left;position:relative;
     /* at p=0 the modules are scattered in depth; at p=1 they are one unit */
     transform:translate3d(calc(var(--ex,0px) * (1 - var(--p))), calc(var(--ey,0px) * (1 - var(--p))),
                           calc(-240px * (1 - var(--p))))
               rotateY(calc(var(--er,0deg) * (1 - var(--p))));
     opacity:calc(.25 + .75 * var(--p));
     box-shadow:0 calc(30px * var(--p)) calc(60px * var(--p)) rgba(0,0,0,.45)}
.eng h4{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:5px}
.eng p{font-size:12.5px;color:var(--m);line-height:1.45}
.eng .ico{width:36px;height:36px;border-radius:10px;margin-bottom:13px}
.eng .ico svg{width:17px;height:17px}
/* the seam that "welds" them together at the end */
.eng-weld{position:absolute;inset:-9px;border:1px solid var(--em);border-radius:22px;pointer-events:none;
          opacity:calc(max(0, var(--p) - .72) * 3.6);
          box-shadow:0 0 60px rgba(18,185,129,.28) inset}
.eng-label{text-align:center;margin-top:26px;font-size:13px;font-weight:700;color:var(--em2);
           opacity:calc(max(0, var(--p) - .78) * 4.5)}

/* ─────────────────────── 3 · BEFORE / AFTER ───────────────────────── */
/* The old wipe was clever and unreadable on a phone. This is two labelled
   panels — red chaos, green calm — that anyone understands at a glance.
   On desktop they sit side by side; on mobile they stack, still labelled. */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px);align-items:stretch}
@media(max-width:760px){.ba{grid-template-columns:1fr}}
.ba-col{border-radius:17px;overflow:hidden;border:1px solid var(--hair);display:flex;flex-direction:column}
.ba-col.bad{background:linear-gradient(168deg,#171410,#100e0c);border-color:rgba(248,113,113,.24)}
.ba-col.good{background:linear-gradient(168deg,#0e1a15,#0a1210);border-color:rgba(18,185,129,.3);
             box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 70px rgba(18,185,129,.08)}
.ba-hd{padding:clamp(17px,2vw,23px) clamp(18px,2.2vw,25px);border-bottom:1px solid var(--hair)}
.ba-tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.14em;
        text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:13px}
.ba-col.bad .ba-tag{background:rgba(248,113,113,.13);border:1px solid rgba(248,113,113,.36);color:#fca5a5}
.ba-col.good .ba-tag{background:rgba(18,185,129,.13);border:1px solid rgba(18,185,129,.4);color:var(--em2)}
.ba-hd h3{font-size:clamp(19px,2.4vw,26px);font-weight:800;letter-spacing:-.024em;line-height:1.2}
.ba-col.good .ba-hd h3{color:var(--em3)}
.ba-hd p{font-size:13.5px;color:var(--m);margin-top:8px}
.ba-list{padding:clamp(14px,1.8vw,20px) clamp(18px,2.2vw,25px) clamp(20px,2.4vw,26px);
         display:grid;gap:2px;flex:1}
.ba-li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--hair)}
.ba-li:last-child{border-bottom:0}
.ba-ico{width:21px;height:21px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
        justify-content:center;margin-top:1px}
.ba-col.bad .ba-ico{background:rgba(248,113,113,.15)}
.ba-col.good .ba-ico{background:rgba(18,185,129,.16)}
.ba-ico svg{width:11px;height:11px;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba-col.bad .ba-ico svg{stroke:#fca5a5}
.ba-col.good .ba-ico svg{stroke:var(--em2)}
.ba-li span{font-size:14.5px;line-height:1.45;font-weight:600}
.ba-col.bad .ba-li span{color:#a8a49a}
.ba-col.good .ba-li span{color:var(--t)}
.ba-foot{padding:15px clamp(18px,2.2vw,25px);border-top:1px solid var(--hair);font-size:13px;
         font-weight:800;letter-spacing:-.01em}
.ba-col.bad .ba-foot{color:#fca5a5;background:rgba(248,113,113,.05)}
.ba-col.good .ba-foot{color:var(--em2);background:rgba(18,185,129,.06)}

/* ── comparison table (legacy vs custom) ── */
.vs{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;border:1px solid var(--hair);
    border-radius:16px;overflow:hidden;font-size:14.5px}
@media(max-width:760px){.vs{grid-template-columns:1fr;font-size:14px}}
.vs>div{padding:15px 18px;border-bottom:1px solid var(--hair)}
.vs .vh{background:var(--s2);font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--f)}
.vs .vh.old{color:#fca5a5}.vs .vh.new{color:var(--em2)}
.vs .vq{font-weight:700;color:var(--t);background:rgba(255,255,255,.012)}
.vs .vo{color:var(--m)}
.vs .vn{color:var(--t);background:rgba(18,185,129,.045)}
@media(max-width:760px){
  .vs .vh{display:none}
  .vs .vq{background:var(--s2);border-bottom:0}
  .vs .vo::before{content:'Legacy / off-the-shelf — ';color:#fca5a5;font-weight:800;font-size:11.5px;letter-spacing:.04em}
  .vs .vn::before{content:'Custom-built — ';color:var(--em2);font-weight:800;font-size:11.5px;letter-spacing:.04em}
}

@media(prefers-reduced-motion:reduce){
  .assemble .ab{opacity:1;transform:none}
  .eng{transform:none;opacity:1}
  .eng-weld,.eng-label{opacity:1}
  .shift-old{clip-path:inset(0 50% 0 0)}
  .shift-new{clip-path:inset(0 0 0 50%)}
  .shift-seam{left:50%;opacity:1}
  .shift-cap .a,.shift-cap .b{opacity:1}
  .typer-text::after{animation:none}
  .prompt-dot{animation:none}
}