/* idem UNIVERSAL · the "What we do" stack · the scene "systems" (7 Oct 2026). Loads after anim.css. Built into site/anim/ by build.mjs. */
.tiles{display:flex;flex-direction:column;gap:12px;flex:none}
.tile{position:relative;display:flex;align-items:center;gap:11px;width:200px;height:52px;padding:0 12px;border-radius:13px;background:var(--card);border:1px solid var(--line);opacity:.5;transition:opacity .45s var(--ease),border-color .45s}
.tile.on{opacity:1;border-color:var(--line2)}
.tile.sent{border-color:rgba(34,197,94,.55)}
.tile>i{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#1b2130}
.tile>i svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tile b{display:block;font-size:13px;line-height:16px;font-weight:600;white-space:nowrap}
.tile small{display:block;color:var(--mut);font-size:11px;line-height:15px;white-space:nowrap}
/* a count that changes: the old text and the new one share one place */
.sw{position:relative;height:15px;min-width:120px}
.sw>span{position:absolute;left:0;top:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sw>.v2{opacity:0;transform:translateY(5px);color:var(--green);font-weight:500}
.sw.v2>.v1{opacity:0;transform:translateY(-5px)}.sw.v2>.v2{opacity:1;transform:none}
.sm{display:none}
.tile .ck{position:absolute;right:11px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:rgba(34,197,94,.16);display:grid;place-items:center;opacity:0;transform:scale(.5);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tile .ck.on{opacity:1;transform:none}
.tile .ck svg{width:10px;height:10px;fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.fan{flex:none;width:74px;height:244px;margin:0 6px 22px;position:relative}
.fan svg{display:block;width:100%;height:100%;overflow:visible}
.fan path{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:4 5}
.fan circle{fill:var(--red);opacity:0;filter:drop-shadow(0 0 6px rgba(225,6,0,.9))}
.fan.on circle.f{animation:ride 1s var(--ease) forwards}
.fan.on circle.f2{animation-delay:.15s}.fan.on circle.f3{animation-delay:.3s}.fan.on circle.f4{animation-delay:.45s}
.fan.back circle.b{animation:ride 1s var(--ease) forwards}
.fan.back circle.b2{animation-delay:.15s}
@keyframes ride{0%{opacity:0;offset-distance:0%}15%{opacity:1}85%{opacity:1}100%{opacity:0;offset-distance:100%}}

/* idem in the middle: a red arc turns while it acts, a green ring stays while it runs */
.node{flex:none;position:relative;width:104px;height:104px;margin-bottom:22px}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--line2);transition:border-color .45s,box-shadow .45s}
.ring:before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--red);border-right-color:var(--red);opacity:0;transition:opacity .3s}
.ring.on:before{opacity:1;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ring.go{border-color:var(--green);box-shadow:0 0 22px rgba(34,197,94,.35)}
.node .av{position:absolute;left:10px;top:10px;width:84px;height:84px}
.st{position:absolute;left:50%;bottom:100%;margin-bottom:12px;transform:translateX(-50%);height:14px;font-size:10px;line-height:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.st span{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:0;transition:opacity .35s}
.st span.on{opacity:1}
.st .r{color:#ff5a55}.st .g{color:var(--green)}
.clock{position:absolute;left:50%;top:100%;margin-top:12px;transform:translateX(-50%);height:30px;padding:0 12px;border-radius:9px;background:var(--card);border:1px solid var(--line2);font-size:12.5px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;white-space:nowrap}
.clock i{width:8px;height:8px;border-radius:50%;background:var(--dim);transition:background .3s,box-shadow .3s}
.clock.go i{background:var(--green);box-shadow:0 0 10px rgba(34,197,94,.8)}
.clock .tt{position:relative;display:block;width:62px;height:18px;line-height:18px;overflow:hidden}
.clock .tt span{position:absolute;left:0;top:0;transition:transform .45s var(--ease),opacity .45s}
.clock .tt .t2{transform:translateY(18px);opacity:0}
.clock.go .tt .t1{transform:translateY(-18px);opacity:0}.clock.go .tt .t2{transform:none;opacity:1}

/* the chat: the messages have their places from second 0; the chat rolls up like a real one */
.phone{width:208px;height:350px}
.scr{display:flex;flex-direction:column;gap:8px;transition:transform .5s var(--ease)}
.scr.s2{transform:translateY(-12px)}
.bub.wk{max-width:100%}
.wk ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.wk li{display:flex;align-items:center;gap:7px;height:16px;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap}
.wk li.on{opacity:1;transform:none}
.wk li:before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--green);transition:background .4s}
.wk li.todo:before{background:var(--red)}
.scr.s2 .wk li.todo:before{background:var(--green)}
.wk .q{display:block;margin-top:7px;font-weight:600}

body.narrow .stage{gap:4px}
body.narrow .lg{display:none}body.narrow .sm{display:inline}
body.narrow .conn{margin-right:190px}
body.narrow .tiles{flex-direction:row;gap:6px}
body.narrow .tile{width:92px;height:42px;padding:0 7px;gap:6px;border-radius:11px}
body.narrow .tile>i{width:22px;height:22px;border-radius:7px}body.narrow .tile>i svg{width:12px;height:12px}
body.narrow .tile b{font-size:11px;line-height:14px}body.narrow .tile small{font-size:9px;line-height:12px}
body.narrow .sw{height:12px;min-width:50px}
body.narrow .tile .ck{right:auto;left:22px;top:5px;width:12px;height:12px;margin:0;background:#12331f}body.narrow .tile .ck svg{width:7px;height:7px}
body.narrow .fan{display:none}
.nw{display:none}body.narrow .nw{display:block}
body.narrow .node{width:56px;height:56px;margin:0 190px 0 0}
body.narrow .node .av{left:7px;top:7px;width:42px;height:42px}
body.narrow .st{left:100%;bottom:auto;top:4px;margin:0 0 0 12px;transform:none}body.narrow .st span{left:0;transform:none}
body.narrow .clock{left:100%;top:24px;margin:0 0 0 12px;transform:none;height:26px;font-size:11.5px}
body.narrow .pw{width:300px;height:173px;overflow:hidden;border-radius:26px 26px 0 0}
body.narrow .phone{width:300px;height:240px;border-radius:26px;padding-top:8px}
body.narrow .phone .hd{height:34px;padding-top:8px}
body.narrow .chat{padding-top:8px}
body.narrow .wk .hi,body.narrow .wk .mk{display:none}body.narrow .wk ul{margin-top:0;gap:3px}
body.narrow .scr.s1{transform:translateY(-32px)}body.narrow .scr.s2{transform:translateY(-80px)}