/* One illustrative timeline; controls remain operable without motion. */
.motion-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.motion-toolbar[hidden]{display:none}.motion-toolbar>div{display:flex;gap:10px}.motion-toolbar button{cursor:pointer}.motion-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.motion-scene{display:grid;grid-template-columns:1fr 32px 1.45fr 32px 1.15fr;align-items:center;padding:24px;background:white;border:1px solid var(--line);border-radius:8px;min-height:260px;overflow:hidden;gap:8px}
.motion-column{min-width:0}.motion-column h4{font-size:14px;margin:0 0 18px;color:var(--muted);font-weight:500}.motion-sources{display:grid;gap:12px}.motion-source{display:flex;gap:10px;align-items:center;font-size:12px}.motion-source>div{display:flex;gap:4px}.motion-source img{width:34px;height:42px;object-fit:cover;border-radius:4px}.motion-source-column{transition:opacity .4s}
.motion-connector{position:relative;color:#8597b4;text-align:center}.motion-connector i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--blue);left:0;top:50%;opacity:0}
.motion-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}.motion-video{min-width:0;transition:opacity .5s,transform .5s}.motion-film{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:62px;overflow:hidden;border-radius:4px;background:var(--soft)}.motion-film img{height:62px;width:100%;object-fit:cover;border-right:1px solid white}.motion-film>span{position:absolute;bottom:4px;left:5px;border-radius:3px;background:#17243dc9;color:white;font-size:11px;padding:1px 4px}.motion-video>small{display:block;font-size:10px;color:var(--muted);margin-top:5px}
.motion-accounts{display:grid;gap:10px}.motion-account{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:5px;padding:8px;background:#f7f9fc;min-height:54px}.motion-avatar{height:28px;width:28px;flex-shrink:0;display:grid;place-items:center;background:var(--light);border-radius:50%;font-size:12px;color:var(--blue)}.motion-account-body{display:flex;align-items:center;gap:8px;flex:1;min-width:0;justify-content:space-between}.motion-account strong{font-size:11px;font-weight:500}.motion-deliveries{display:flex;gap:5px}.motion-deliveries>span{position:relative;transition:opacity .5s,transform .5s}.motion-deliveries img{width:23px;height:32px;object-fit:cover;border-radius:3px}.motion-deliveries small{font-size:8px;position:absolute;bottom:0;left:0;color:white;background:#17243dbb;padding:0 2px}.motion-queue-label{font-size:11px;color:var(--muted);margin-top:10px}
.motion-progress{height:3px;background:#ced9eb;margin:20px 0 16px;overflow:hidden}.motion-progress>span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(var(--demo-progress,0));transform-origin:left}
.motion-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.motion-steps button{display:flex;align-items:center;gap:8px;padding:9px 10px;min-height:44px;text-align:left;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;border-radius:5px}.motion-steps button span{display:grid;place-items:center;flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#d4def0;font-size:11px}.motion-steps button[aria-pressed=true]{background:white;border-color:#b9cbed;color:var(--blue)}.motion-steps button[aria-pressed=true] span{background:var(--blue);color:white}.batch-motion button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.motion-status{margin-top:16px;min-height:48px;font-size:14px;color:var(--ink)}.motion-status p[hidden]{display:none}.batch-motion .batch-foot{margin-top:10px}
.batch-motion[data-enhanced=true][data-phase="0"] .motion-video{opacity:.12;transform:translateX(-10px)}
.batch-motion[data-enhanced=true][data-phase="0"] .motion-deliveries>span,.batch-motion[data-enhanced=true][data-phase="1"] .motion-deliveries>span{opacity:0;transform:translateX(-20px)}
.batch-motion[data-enhanced=true][data-phase="1"] .motion-video{animation:assemble 1s both;animation-delay:calc(var(--i)*.34s)}
.batch-motion[data-enhanced=true][data-phase="2"] .motion-deliveries>span{animation:deliver .7s both;animation-delay:calc(var(--i)*.32s)}
.batch-motion[data-enhanced=true][data-phase="1"] .motion-connector:nth-child(2) i,.batch-motion[data-enhanced=true][data-phase="2"] .motion-connector:nth-child(4) i{animation:transfer 1.2s infinite}
.batch-motion[data-phase="1"] .motion-source{animation:source-pick 1.6s infinite;animation-delay:calc(var(--i)*.35s)}
.batch-motion[data-phase="3"] .motion-account{border-color:#9cb5df;background:#edf3fc}.batch-motion[data-phase="3"] .motion-queue-label{color:var(--blue)}
.batch-motion[data-running=false] *{animation-play-state:paused!important}
@keyframes assemble{from{opacity:.1;transform:translateX(-24px) scale(.85)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes deliver{from{opacity:0;transform:translateX(-25px)}to{opacity:1;transform:translateX(0)}}
@keyframes transfer{0%{opacity:0;transform:translateX(0)}25%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
@keyframes source-pick{50%{transform:translateX(6px);opacity:.6}}
@media(max-width:900px){.motion-scene{grid-template-columns:1fr 24px 1.3fr;gap:10px;padding:20px}.motion-account-column{grid-column:1/-1}.motion-account-column h4{margin:16px 0 10px}.motion-accounts{grid-template-columns:repeat(3,minmax(0,1fr))}.motion-connector:nth-child(4){display:none}.motion-account-body{flex-wrap:wrap}.motion-account{align-items:flex-start}.motion-queue-label{margin-top:8px}}
@media(max-width:600px){.motion-toolbar{align-items:flex-start}.motion-toolbar>div{gap:7px}.motion-toolbar button{font-size:12px;padding:9px 12px}.motion-time{font-size:10px;padding-top:14px}.motion-scene{grid-template-columns:1fr;padding:16px;gap:12px}.motion-connector{display:none}.motion-column h4{margin:0 0 10px;font-size:13px}.motion-sources{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.motion-source{display:block}.motion-source img{width:calc(50% - 2px);height:36px}.motion-source>span{font-size:10px;display:block;margin-top:4px}.motion-videos{gap:8px}.motion-film,.motion-film img{height:45px}.motion-account-column h4{margin-top:0}.motion-accounts{gap:6px}.motion-account{display:block;padding:7px;min-height:92px}.motion-avatar{width:20px;height:20px;font-size:10px;margin-bottom:5px}.motion-account-body{gap:5px}.motion-account strong{font-size:10px}.motion-deliveries img{width:20px;height:27px}.motion-steps{grid-template-columns:1fr 1fr;gap:6px}.motion-steps button{font-size:12px;padding:8px}.motion-status{font-size:13px;min-height:66px}.batch-heading>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.batch-motion *{animation:none!important;transition:none!important}.batch-motion .motion-connector i{display:none}}

.batch-motion.motion-seek *{animation:none!important;transition:none!important}

/* Pure vector replacement: no photos, thumbnails or prerecorded video. */
.motion-scene.motion-vector{display:block;padding:16px 12px;min-height:0;overflow:hidden}
.vector-canvas{display:block;width:100%;height:auto;overflow:visible}
.vector-title{font:500 13px "Helvetica Neue",Arial,"PingFang SC",sans-serif;fill:#52617a}
.vector-label{font:500 12px "Helvetica Neue",Arial,"PingFang SC",sans-serif;fill:#344c72}
.vector-video-id{font:9px Arial,sans-serif;fill:#52617a}
.vector-pending{font:11px "Helvetica Neue",Arial,"PingFang SC",sans-serif;fill:#52617a}
.batch-motion[data-phase="3"] .vector-account-frame{stroke:#85a6e2;fill:#edf3fc}
@media(max-width:600px){.motion-scene.motion-vector{padding:8px 0}.vector-canvas{min-width:640px}.motion-scene.motion-vector{overflow-x:auto}.motion-scene.motion-vector:focus-visible{outline:2px solid var(--blue)}}

@media(max-width:600px){.vector-canvas{min-width:0}.motion-scene.motion-vector{overflow:hidden;padding:12px 6px}.vector-label{font-size:16px}.vector-title{font-size:15px}.vector-pending{font-size:13px}}

.motion-toolbar button[hidden]{display:none}