/* =====================================================================
   Motion lab — [cts_motion] (staging experiments). Uses the Signal tokens (--sig-*).
   Timing lives in lab.js; this file holds the looks and the transitions.
   ===================================================================== */
.sig-m{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--sig-font);color:var(--sig-ink)}
.sig-m-stage{position:relative;width:100%;max-width:1040px;box-sizing:border-box}
.sig-m-card{background:var(--sig-white);border:1px solid var(--sig-line);border-radius:var(--sig-r-lg);box-shadow:var(--sig-shadow-md);padding:24px;box-sizing:border-box}
.sig-m-card>em,.sig-m-card em:first-child{font-style:normal}
.sig-m-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--sig-r-md);background:var(--sig-white);border:1px solid var(--sig-line);color:var(--c,var(--sig-blue));box-sizing:border-box}
.sig-m-mark svg{width:58%;height:58%;display:block}
.sig-m-mark .sig-orb-word{font:800 var(--sig-text-2xs)/1 var(--sig-display);letter-spacing:-.02em;color:var(--c)}
.sig-m-pause{appearance:none;background:transparent;border:1px solid var(--sig-line);color:var(--sig-muted);border-radius:var(--sig-r-pill);padding:8px 16px;font:600 var(--sig-text-sm)/1 var(--sig-font);cursor:pointer}
.sig-m-pause:hover{background:var(--sig-soft)}
.sig-m-pause:focus-visible{outline:3px solid var(--sig-sky);outline-offset:2px}
.sig-alt .sig-m-pause{border-color:var(--sig-line-strong)}

/* ---------- swap ---------- */
.sig-m-swap .sig-m-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:center}
.sig-m-browser{border-radius:var(--sig-r-lg);overflow:hidden;background:var(--sig-white);border:1px solid var(--sig-line);box-shadow:var(--sig-shadow-lg)}
.sig-m-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--sig-soft);border-bottom:1px solid var(--sig-line)}
.sig-m-bar i{width:10px;height:10px;border-radius:50%;background:var(--sig-line-strong)}
.sig-m-bar span{margin-left:10px;flex:1;background:var(--sig-white);border-radius:var(--sig-r-pill);padding:5px 14px;font-size:var(--sig-text-sm);color:var(--sig-faint)}
.sig-m-site{display:flex;flex-direction:column;gap:10px;padding:26px 28px 30px;background:linear-gradient(180deg,var(--sig-white),var(--sig-soft))}
.sig-m-from{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:var(--sig-text-sm);font-weight:600;color:var(--sig-faint);margin-bottom:8px}
.sig-m-chip{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:var(--sig-r-pill);background:var(--sig-tint);border:1px solid var(--sig-tint-line);color:var(--sig-ink);font-size:var(--sig-text-md)}
.sig-m-chip .sig-m-mark{width:28px;height:28px;border-radius:50%}
.sig-m-chip.is-in{animation:sig-m-pop .4s ease-out}
@keyframes sig-m-pop{from{opacity:0;transform:translateX(-10px) scale(.96)}to{opacity:1;transform:none}}
.sig-m-site>strong{font:800 clamp(22px,2.6vw,30px)/1.1 var(--sig-display);letter-spacing:-.02em}
.sig-m-site>span{font-size:var(--sig-text-lg);color:var(--sig-muted)}
.sig-m-callbtn{align-self:flex-start;display:flex;align-items:center;gap:12px;margin-top:8px;padding:14px 22px;border-radius:var(--sig-r-md);background:var(--sig-blue);color:var(--sig-white);box-shadow:0 0 0 6px rgba(31,91,216,.12)}
.sig-m-callbtn em{font-style:normal;font-size:var(--sig-text-md);font-weight:600;opacity:.85}
.sig-m-callbtn b{font-size:clamp(20px,2.4vw,26px);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.sig-m-callbtn b span{display:inline-block}
.sig-m-callbtn b.is-in span{animation:sig-m-flip .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*28ms)}
@keyframes sig-m-flip{from{opacity:0;transform:translateY(70%) rotateX(-70deg)}to{opacity:1;transform:none}}
.sig-m-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.sig-m-skel i{height:54px;border-radius:var(--sig-r-md);background:var(--sig-track)}
.sig-m-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sig-m-legend li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:10px 14px;border-radius:var(--sig-r-md);border:1px solid transparent;font-size:var(--sig-text-lg);font-weight:600;color:var(--sig-muted);transition:background .3s,border-color .3s,box-shadow .3s,transform .3s}
.sig-m-legend li b{font-variant-numeric:tabular-nums;color:var(--sig-faint);font-weight:600}
.sig-m-legend li.is-on{background:var(--sig-white);border-color:var(--sig-tint-line);box-shadow:var(--sig-shadow-sm);color:var(--sig-ink);transform:translateX(-6px)}
.sig-m-legend li.is-on b{color:var(--sig-blue);font-weight:700}

/* ---------- night ---------- */
.sig-m-night .sig-m-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:stretch}
.sig-m-sky{position:relative;overflow:hidden;border-radius:var(--sig-r-xl);padding:28px;min-height:430px;box-sizing:border-box;color:var(--sig-on-navy);background:var(--sig-navy-deep);display:flex;flex-direction:column;gap:6px;--dawn:0}
.sig-m-sky::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--sig-blue),var(--sig-sky-lt) 70%,var(--sig-dawn));opacity:var(--dawn)}
.sig-m-stars{position:absolute;inset:0;opacity:calc(1 - var(--dawn));background-image:radial-gradient(circle,var(--sig-white) 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.5px);background-size:90px 70px,140px 110px;background-position:12px 18px,60px 44px}
.sig-m-sky>*:not(.sig-m-stars){position:relative}
.sig-m-clock{display:flex;align-items:baseline;gap:6px}
.sig-m-clock b{font:800 clamp(44px,6vw,68px)/1 var(--sig-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sig-m-clock span{font-size:var(--sig-text-h3);font-weight:700;opacity:.8}
.sig-m-state{align-self:flex-start;padding:4px 12px;border-radius:var(--sig-r-pill);background:rgba(7,18,42,.55);border:1px solid rgba(255,255,255,.25);font-size:var(--sig-text-sm);font-weight:700;color:var(--sig-white)}
.sig-m-toasts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sig-m-toasts li{display:flex;align-items:center;gap:10px;margin:0;padding:8px 12px;border-radius:var(--sig-r-md);background:rgba(7,18,42,.78);border:1px solid rgba(127,216,255,.3);opacity:0;transform:translateY(10px) scale(.97);transition:opacity .35s,transform .35s}
.sig-m-toasts li.is-on{opacity:1;transform:none}
.sig-m-toasts .sig-m-mark{width:32px;height:32px;border:0}
.sig-m-toasts li>span:not(.sig-m-mark){display:flex;flex-direction:column;font-size:var(--sig-text-sm);line-height:1.35;color:var(--sig-on-navy-2)}
.sig-m-toasts b{color:var(--sig-amber-on-navy);font-size:var(--sig-text-sm)}
.sig-m-mail{background:var(--sig-white);border:1px solid var(--sig-line);border-radius:var(--sig-r-xl);box-shadow:var(--sig-shadow-md);padding:24px;box-sizing:border-box;opacity:.0;transform:translateY(26px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.sig-m-mail.is-on{opacity:1;transform:none}
.sig-m-mail-head{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--sig-line)}
.sig-m-mail-head span{font-size:var(--sig-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sig-blue)}
.sig-m-mail-head strong{font:800 24px/1.15 var(--sig-display);letter-spacing:-.02em}
.sig-m-mail-head em{font-style:normal;font-size:var(--sig-text-sm);color:var(--sig-faint)}
.sig-m-mail ul{list-style:none;margin:0;padding:0}
.sig-m-mail li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:11px 0;border-bottom:1px solid var(--sig-line)}
.sig-m-mail li:last-child{border-bottom:0}
.sig-m-mail li>span:not(.sig-m-mark){display:flex;flex-direction:column;font-size:var(--sig-text-sm);color:var(--sig-faint)}
.sig-m-mail li b{font-size:var(--sig-text-lg);color:var(--sig-ink);font-variant-numeric:tabular-nums}
.sig-m-mail li i{font-style:normal;font-size:var(--sig-text-sm);font-weight:700;color:var(--sig-blue);border:1px solid var(--sig-tint-line);border-radius:var(--sig-r-pill);padding:5px 12px;white-space:nowrap}

/* ---------- gap ---------- */
.sig-m-gap .sig-m-stage{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.25fr);gap:16px;align-items:center}
.sig-m-gap .sig-m-card>em{display:block;font-size:var(--sig-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sig-faint);margin-bottom:16px}
.sig-m-kpis{display:flex;flex-direction:column;gap:14px}
.sig-m-kpis div{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:var(--sig-r-md);background:var(--sig-soft)}
.sig-m-kpis b,.sig-m-total b{font:800 34px/1 var(--sig-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sig-m-kpis span,.sig-m-total span{font-size:var(--sig-text-md);color:var(--sig-muted)}
.sig-m-unknown{border:1px dashed var(--sig-amber-line);background:var(--sig-warn-bg)!important;transition:box-shadow .3s}
.sig-m-unknown b{color:var(--sig-amber)}
.sig-m-unknown.is-ask{box-shadow:0 0 0 6px rgba(179,92,0,.14)}
.sig-m-unknown.is-ask b{animation:sig-m-ask .5s ease-in-out 3}
@keyframes sig-m-ask{50%{transform:scale(1.35) rotate(8deg)}}
.sig-m-kpis b{display:inline-block}
.sig-m-arrow{height:2px;background:var(--sig-blue);position:relative;opacity:.5}
.sig-m-arrow::after{content:"";position:absolute;right:0;top:-5px;width:10px;height:10px;border-top:2px solid var(--sig-blue);border-right:2px solid var(--sig-blue);transform:rotate(45deg)}
.sig-m-after{opacity:.35;transform:scale(.98);transition:opacity .5s,transform .5s,border-color .5s,box-shadow .5s}
.sig-m-after.is-on{opacity:1;transform:none;border-color:var(--sig-tint-line);box-shadow:var(--sig-shadow-blue-lg)}
.sig-m-total{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.sig-m-total b{color:var(--sig-blue)}
.sig-m-bar-row{display:grid;grid-template-columns:30px 130px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:6px 0;font-size:var(--sig-text-md);font-weight:600}
.sig-m-bar-row .sig-m-mark{width:30px;height:30px;border-radius:var(--sig-r-sm)}
.sig-m-bar-row>span:not(.sig-m-mark){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sig-m-bar-row i{height:12px;border-radius:var(--sig-r-pill);background:var(--sig-track);overflow:hidden}
.sig-m-bar-row u{display:block;height:100%;width:var(--w);border-radius:var(--sig-r-pill);background:var(--sig-sky);transform-origin:left;text-decoration:none;transition:background .3s}
.sig-m-bar-row b{text-align:right;font-variant-numeric:tabular-nums}
.sig-m-bar-row.is-best u{background:var(--sig-blue)}
.sig-m-best{margin:12px 0 0!important;font-size:var(--sig-text-md);color:var(--sig-muted);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.sig-m-best.is-on{opacity:1;transform:none}
.sig-m-best strong{color:var(--sig-blue)}

/* ---------- sync ---------- */
.sig-m-sync .sig-m-stage{display:grid;grid-template-columns:minmax(0,300px) minmax(0,380px);justify-content:space-between;gap:40px;align-items:center;max-width:920px}
.sig-m-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sig-m-wire{fill:none;stroke:var(--sig-line-strong);stroke-width:1.5;stroke-dasharray:3 6;transition:stroke .3s}
.sig-m-wire.is-live{stroke:var(--sig-blue)}
.sig-m-dot{fill:var(--sig-sky);filter:drop-shadow(0 0 6px rgba(26,179,240,.9));opacity:0}
.sig-m-dot.is-live{opacity:1}
.sig-m-call{position:relative;display:flex;flex-direction:column;gap:4px;transition:box-shadow .4s}
.sig-m-call.is-ring{box-shadow:0 0 0 8px rgba(26,179,240,.18),var(--sig-shadow-md)}
.sig-m-call .sig-m-mark{width:44px;height:44px;border-radius:var(--sig-r-md);margin-bottom:8px}
.sig-m-call em{font-size:var(--sig-text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sig-ok)}
.sig-m-call strong{font:800 26px/1.1 var(--sig-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sig-m-call>span:not(.sig-m-mark){font-size:var(--sig-text-md);color:var(--sig-muted)}
.sig-m-kw{align-self:flex-start;margin-top:8px;padding:4px 10px;border-radius:var(--sig-r-pill);background:var(--sig-soft);font-size:var(--sig-text-sm)!important;font-weight:600}
.sig-m-dests{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sig-m-dests li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;margin:0;padding:12px 16px;border-radius:var(--sig-r-lg);background:var(--sig-white);border:1px solid var(--sig-line);transition:border-color .3s,box-shadow .3s,transform .3s}
.sig-m-dests li>span:not(.sig-m-mark){display:flex;flex-direction:column;line-height:1.35}
.sig-m-dests b{font-size:var(--sig-text-lg)}
.sig-m-dests small{font-size:var(--sig-text-sm);color:var(--sig-faint);opacity:.0;transition:opacity .3s}
.sig-m-dests i{font-style:normal;min-width:30px;text-align:center;padding:4px 8px;border-radius:var(--sig-r-pill);background:var(--sig-soft);font-size:var(--sig-text-sm);font-weight:700;font-variant-numeric:tabular-nums;transition:background .3s,color .3s}
.sig-m-dests li.is-on{border-color:var(--sig-tint-line);box-shadow:var(--sig-shadow-blue-sm);transform:translateX(4px)}
.sig-m-dests li.is-on small{opacity:1}
.sig-m-dests li.is-on i{background:var(--sig-blue);color:var(--sig-white)}

/* ---------- listen ---------- */
.sig-m-listen .sig-m-stage{max-width:720px}
.sig-m-player{display:flex;flex-direction:column;gap:18px}
.sig-m-player-head{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center}
.sig-m-player-head>span:not(.sig-m-mark){display:flex;flex-direction:column;font-size:var(--sig-text-sm);color:var(--sig-faint)}
.sig-m-player-head b{font-size:var(--sig-text-body);color:var(--sig-ink);font-variant-numeric:tabular-nums}
.sig-m-player-head em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sig-blue)}
.sig-m-wave{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--sig-r-lg);background:var(--sig-soft)}
.sig-m-play{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sig-blue);position:relative}
.sig-m-play::after{content:"";position:absolute;left:16px;top:12px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--sig-white)}
.sig-m-wave>div{flex:1;min-width:0;height:56px;display:flex;align-items:center;gap:3px}
.sig-m-wave i{flex:1;min-width:2px;height:var(--h);border-radius:var(--sig-r-xs);background:var(--sig-line-strong);transition:background .2s,transform .2s}
.sig-m-wave i.is-done{background:var(--sig-blue)}
.sig-m-wave i.is-now{background:var(--sig-sky);transform:scaleY(1.25)}
.sig-m-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-height:190px}
.sig-m-lines li{max-width:82%;margin:0;padding:10px 14px;border-radius:var(--sig-r-lg) var(--sig-r-lg) var(--sig-r-lg) var(--sig-r-xs);background:var(--sig-soft);font-size:var(--sig-text-lg);line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.sig-m-lines li.is-us{align-self:flex-end;border-radius:var(--sig-r-lg) var(--sig-r-lg) var(--sig-r-xs) var(--sig-r-lg);background:var(--sig-tint)}
.sig-m-lines li.is-on{opacity:1;transform:none}
.sig-m-lines b{display:block;font-size:var(--sig-text-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--sig-faint)}
.sig-m-lines mark{background:var(--sig-mark);color:inherit;padding:0 1px;border-radius:var(--sig-r-xs);box-shadow:0 0 0 2px var(--sig-mark)}
.sig-m-tags{display:flex;flex-wrap:wrap;gap:8px}
.sig-m-tags i{font-style:normal;font-size:var(--sig-text-sm);font-weight:700;padding:5px 12px;border-radius:var(--sig-r-pill);background:var(--sig-ok-bg);color:var(--sig-ok);opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.sig-m-tags i:nth-child(2){transition-delay:.12s;background:var(--sig-tint);color:var(--sig-blue-dk)}
.sig-m-tags i:nth-child(3){transition-delay:.24s;background:var(--sig-warn-bg);color:var(--sig-warn)}
.sig-m-tags.is-on i{opacity:1;transform:none}

@media (max-width:820px){
	.sig-m-swap .sig-m-stage,.sig-m-night .sig-m-stage,.sig-m-sync .sig-m-stage{grid-template-columns:minmax(0,1fr);gap:22px}
	.sig-m-gap .sig-m-stage{grid-template-columns:minmax(0,1fr)}
	.sig-m-arrow{width:2px;height:28px;justify-self:center}
	.sig-m-arrow::after{right:-4px;top:auto;bottom:0;transform:rotate(135deg)}
	.sig-m-legend li.is-on{transform:none}
	.sig-m-sky{min-height:0}
	.sig-m-site{padding:20px 18px 24px}
	.sig-m-card,.sig-m-mail{padding:18px}
	.sig-m-bar-row{grid-template-columns:30px 118px minmax(0,1fr) 26px}
	.sig-m-sync .sig-m-stage{gap:34px}
	.sig-m-dests li.is-on{transform:none}
	.sig-m-lines li{max-width:92%}
	.sig-m-wave{gap:10px;padding:12px}
	.sig-m-wave>div{gap:2px;overflow:hidden}
	.sig-m-wave i{min-width:1px}
}
@media (prefers-reduced-motion:reduce){
	.sig-m *{animation:none!important;transition:none!important}
}

/* ---------- page helpers used with the visuals ---------- */
.sig-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.sig-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sig-grid--4{grid-template-columns:minmax(0,1fr)}}

/* ---------- section icon ([cts_icon]) ---------- */
.sig-ico{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--sig-r-lg);background:var(--sig-tint);border:1px solid var(--sig-tint-line);color:var(--sig-blue)}
.sig-ico svg{width:30px;height:30px;display:block}
.sig-alt .sig-ico{background:var(--sig-white)}