/* Animations (Phase 4.3). Scoped to .motion, the container the site's {{motion:ID}} token renders.
   Source of truth (was docs/phase3/mockups/animations-lot{1,2}.html). */
/* SVG text styles (fixed brand colours on the light stage) */
.motion .m{font-family:"IBM Plex Mono",monospace;font-size:12.5px;fill:#4a5f80;letter-spacing:.5px}
.motion .mb{font-family:"IBM Plex Mono",monospace;font-size:12.5px;fill:#283960;font-weight:600;letter-spacing:.5px}
.motion .t{font-family:"Figtree",sans-serif;font-size:14px;fill:#283960}
/* ---------- Reveal mechanics: final state is the default; .play replays the build ---------- */
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes lightblue{0%,100%{fill:#ffffff}30%,80%{fill:rgba(47,143,206,.28)}}
@keyframes lightyellow{0%,100%{fill:#ffffff}30%,80%{fill:rgba(255,213,74,.55)}}
@keyframes nodeon{from{fill:#ffffff}to{fill:#2f8fce}}
.motion .draw{stroke-dasharray:1;stroke-dashoffset:0}
.motion .fx{transform-box:fill-box;transform-origin:center}
.play .motion .draw{animation:draw .9s ease-out both}
.play .motion .fade{animation:fadein .5s ease-out both}
.play .motion .pop{animation:pop .45s ease-out both}
.motion .d1{animation-delay:.2s!important}
.motion .d2{animation-delay:1.1s!important}
.motion .d3{animation-delay:2s!important}
.motion .d4{animation-delay:2.9s!important}
.motion .d5{animation-delay:3.8s!important}
.motion .d6{animation-delay:4.7s!important}
.motion .d7{animation-delay:5.6s!important}
/* B3: the history blocks appear one by one, then give way to the single consolidated building (the resting image) */
.motion .hist{opacity:0}
@keyframes fadeout{to{opacity:0}}
.play .motion .h1{animation:fadein .5s ease-out .2s both,fadeout .6s ease-in 6.6s forwards}
.play .motion .h2{animation:fadein .5s ease-out 1.5s both,fadeout .6s ease-in 6.6s forwards}
.play .motion .h3{animation:fadein .5s ease-out 2.8s both,fadeout .6s ease-in 6.6s forwards}
.play .motion .h4{animation:fadein .5s ease-out 4.1s both,fadeout .6s ease-in 6.6s forwards}
.play .motion .uni{animation:fadein .8s ease-out 7.1s both}
/* C3 cycle counts */
.motion .cell{fill:#ffffff;stroke:#c9dcee;stroke-width:1}
.play .motion .busy{animation:lightblue 2.4s ease-in-out .4s both}
.play .motion .low{animation:lightyellow 2.4s ease-in-out 1.2s both}
.motion .done{opacity:1}
.play .motion .done{animation:pop .4s ease-out both}
@media (prefers-reduced-motion:reduce){.play .motion *{animation:none!important}}
/* ---------- A2 v3: the packing station. A screen, an « Expédier ! » button, rates computed, cheapest chosen ---------- */
.motion .rs-cap{font-size:16.5px;font-weight:600;min-height:1.6em}
.motion .rs-foot{font-size:13px;color:var(--muted)}
.motion .dots{display:flex;gap:6px;align-items:center}
.motion .dots button{font:inherit;font-family:var(--mono);font-size:12px;font-weight:600;width:32px;height:32px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.motion .dots button[aria-pressed="true"]{background:#283960;color:#fff;border-color:#283960}
.motion .dots button:focus-visible,.motion .ship:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.motion .station{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:18px;align-items:center;width:100%;background:#f7fbfe;border-radius:6px;box-shadow:inset 0 0 0 1px #dfeaf4;padding:16px 16px 28px;color:#1d2a45}
.motion .bench svg{display:block;width:100%;height:auto}
.motion .monitor{background:#283960;border-radius:10px;padding:7px;position:relative}
.motion .monitor::after{content:"";position:absolute;left:50%;bottom:-12px;width:84px;height:12px;transform:translateX(-50%);background:#283960;border-radius:0 0 8px 8px}
.motion .screen{background:#ffffff;border-radius:4px;padding:12px;display:grid;gap:8px;height:322px;overflow:hidden;align-content:start}
.motion .sc-head{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between}
.motion .sc-n{font-family:var(--mono);font-size:11.5px;color:#6f7f99;letter-spacing:.05em}
.motion .sc-head>div{min-width:0}
.motion .sc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);font-weight:800;font-size:17px;color:#283960;letter-spacing:-.015em}
.motion .sc-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.motion .sc-meta span{font-family:var(--mono);font-size:11.5px;background:#eef6fc;border-radius:3px;padding:3px 7px;color:#4a5f80}
.motion .ship{font:inherit;font-family:var(--display);font-weight:800;font-size:14.5px;background:#2f8fce;color:#fff;border:0;border-radius:6px;padding:9px 16px;cursor:pointer;transition:transform .12s,background .12s;white-space:nowrap}
.motion .ship.press{transform:scale(.94);background:#2379b3}
.motion .calc{font-family:var(--mono);font-size:11.5px;color:#6f7f99;min-height:1.2em}
.motion .rates{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.motion .rates li{display:grid;grid-template-columns:minmax(0,1fr) auto 66px;gap:10px;align-items:center;padding:4px 10px;border-radius:4px;border:1px solid #e3edf6;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,background .3s,border-color .3s;font-size:13.5px}
.motion .rates li.in{opacity:1;transform:none}
.motion .rates .nm{font-weight:700;color:#283960}
.motion .rates .pr{font-family:var(--mono);font-weight:600;color:#283960;font-variant-numeric:tabular-nums}
.motion .rates .tg{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#6f7f99;text-align:right}
.motion .rates li.win{background:#fff6cf;border-color:#ffd54a}
.motion .rates li.win .tg{color:#283960;font-weight:600}
.motion .rates li.off.in{opacity:.45}
.motion .rates li.off .nm{text-decoration:line-through}
.motion .done{font-family:var(--mono);font-size:11.5px;font-weight:600;color:#1e9e5a;min-height:1.4em}
.motion #bx-move{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.7,0,1,.6),opacity .45s ease-in}
.motion #bx-move.go{transform:translateX(150px) skewX(-16deg);opacity:0}
.motion #bx-move.pre{transform:translateX(-150px);opacity:0;transition:none}
.motion #bx-move.in{transition:transform .5s cubic-bezier(.15,.7,.3,1),opacity .2s}
.motion #bx-speed{opacity:0}
.motion #bx-speed.go{animation:bxspeed .5s ease-out}
@keyframes bxspeed{0%{opacity:0;transform:translateX(-10px)}35%{opacity:1}100%{opacity:0;transform:translateX(70px)}}
.motion .item{opacity:0;transform:translate(var(--fx,0px),var(--fy,-78px))}
.motion .item.drop{opacity:1;transform:translate(var(--tx,0px),var(--ty,13px));transition:transform .5s cubic-bezier(.5,0,.8,.6),opacity .12s}
.motion .item.in{opacity:0;transform:translate(var(--tx,0px),var(--ty,13px))}
.motion .flap-under{display:none}
.motion .is-open .flap-under{display:inline}
.motion .is-open .flap.over{visibility:hidden}
.motion #bx-m:not(.is-open) .opening{fill:#e7eaee}
.motion .bx-label{opacity:0;transition:opacity .4s}
.motion .bx-label.on{opacity:1}
.motion .pm{display:none}
.motion .pacmode .pm{display:inline}
.motion .pacmode .ct,.motion .pacmode .walker,.motion .pacmode .ghost{display:none}
@media (max-width:960px){.motion .station{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
@media (max-width:700px){.motion .rs-cap{min-height:3.2em}}
@media (max-width:780px){.motion .station{grid-template-columns:1fr}
.motion .bench{max-width:300px;margin-inline:auto}
.motion .sc-title{white-space:normal}
.motion .screen{height:352px}}
@media (prefers-reduced-motion:reduce){.motion .rates li,.motion .ship,.motion .bx-label,.motion #bx-move,.motion #bx-move.in,.motion .item.drop{transition:none}
.motion #bx-speed.go{animation:none}}