/* idem UNIVERSAL — the four "What we do" animations. Shared look. 7 Oct 2026 (second pass).
   Source: site-build/stack/anim.css. build.mjs copies it to site/anim/. Edit it here, never there.
   One scene = one HTML page (site/anim/<lang>/<scene>.html, written by build.mjs from site-build/stack.mjs).
   The stage is a fixed drawing (760×400 wide, 400×313 narrow) scaled to fit the pane.
   Beats are driven by anim.js: data-at / data-off add and remove the class "on"; data-seq swaps classes by time;
   data-type types a sentence; data-cur moves the cursor to an element.
   Rule of this pass: nothing moves the layout. Every actor has its place from second 0; a beat changes only
   opacity, transform or colour. */
/* the site's own Outfit, both ranges (the second one carries ă â î ș ț), as css/legacy.css declares them */
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#0b0d12;--fg:#f5f6f3;--mut:#9aa0aa;--dim:#6b7280;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.17);--red:#e10600;--green:#22c55e;--card:#141820;--card2:#1c212b;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--fg);font-family:Outfit,system-ui,"Segoe UI",sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.stage{position:absolute;left:50%;top:50%;width:760px;height:400px;transform:translate(-50%,-50%) scale(var(--s,1));display:flex;align-items:center;justify-content:center;transition:opacity .32s ease}
body.narrow .stage{width:400px;height:313px;flex-direction:column}
body.out .stage{opacity:0}
body.rs *,body.rs *:before,body.rs *:after{transition:none!important;animation:none!important}

/* an actor and the small label under it */
/* every actor stands in a column of one height, so the labels sit on one line */
.act{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;height:372px;padding-bottom:22px}
body.narrow .act{height:auto;padding:0}
.lb{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:12px;font-size:9.5px;line-height:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500;white-space:nowrap}
body.narrow .lb{display:none}

/* the pop-in used by most actors: the place is kept, only opacity and transform change */
.a{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.a.on{opacity:1;transform:none}
.fd{opacity:0;transition:opacity .35s var(--ease)}
.fd.on{opacity:1}

/* a connector: a dotted line with one dot that travels along it */
.conn{position:relative;width:44px;height:2px;flex:none;margin:0 10px 22px;--tx:44px;--ty:0px;background:repeating-linear-gradient(90deg,var(--line2) 0 4px,transparent 4px 9px)}
.conn .dot{position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(225,6,0,.8);opacity:0}
.conn.on .dot{animation:travel .9s var(--ease) forwards}
@keyframes travel{0%{opacity:0;transform:none}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty))}}
body.narrow .conn{width:2px;height:14px;margin:0;--tx:0px;--ty:14px;background:repeating-linear-gradient(180deg,var(--line2) 0 4px,transparent 4px 8px)}
body.narrow .conn .dot{left:-4px;top:-5px}
/* the way back: a second dot that travels from the end to the start */
.conn .dot.rv,.conn.on .dot.rv{animation:none}
.conn.bk .dot.rv{animation:travelb .9s var(--ease) forwards}
@keyframes travelb{0%{opacity:0;transform:translate(var(--tx),var(--ty))}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:none}}

/* the idem profile picture (printed by the build into every .av) */
.av{flex:none;display:block;width:28px;height:28px;border-radius:50%}
.av svg{display:block;width:100%;height:100%}

/* the phone */
.pw{flex:none;position:relative}
.phone{position:relative;width:190px;height:336px;border-radius:28px;background:#05070b;border:2px solid #2b303b;box-shadow:0 24px 60px rgba(0,0,0,.6);padding:12px 9px 10px;display:flex;flex-direction:column;overflow:hidden}
.phone:before{content:"";position:absolute;left:50%;top:8px;width:56px;height:6px;border-radius:3px;background:#1a1e26;transform:translateX(-50%)}
.phone.on{animation:buzz .42s ease-in-out}
@keyframes buzz{0%,100%{transform:none}20%{transform:translateX(-2px) rotate(-.4deg)}40%{transform:translateX(2px) rotate(.4deg)}60%{transform:translateX(-1.5px)}80%{transform:translateX(1px)}}
.phone .hd{flex:none;display:flex;align-items:center;gap:8px;height:46px;padding:12px 5px 6px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.15}
.phone .hd b{display:block;font-weight:600;white-space:nowrap}
.phone .hd small{display:block;color:var(--mut);font-size:10.5px;margin-top:1px;white-space:nowrap}
.chat{flex:1;display:flex;flex-direction:column;gap:8px;padding:10px 3px 8px;overflow:hidden;min-height:0}
.bub{max-width:92%;padding:8px 10px;border-radius:14px;font-size:12px;line-height:1.35}
.bub.me{align-self:flex-end;background:#2b5278;border-bottom-right-radius:4px}
.bub.ai{align-self:flex-start;background:var(--card2);border-bottom-left-radius:4px}
/* an answer that may use the whole width of the chat (the longest language decides, not English) */
.bub.w{max-width:100%}
.bub .mk{display:block;margin-top:5px;font-size:10px;line-height:13px;color:var(--mut)}
/* the answer's place: the three dots and the answer share it, so no hole is left when the dots go */
.slot{position:relative;align-self:stretch;display:flex;flex-direction:column}
.typing{position:absolute;left:0;top:0;display:flex;gap:4px;padding:10px 12px;border-radius:14px;border-bottom-left-radius:4px;background:var(--card2);opacity:0;transition:opacity .25s}
.typing.on{opacity:1}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.inp{flex:none;display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);padding:8px 2px 0}
.inp .f{flex:1;min-width:0;display:flex;height:30px;border-radius:15px;background:#161a22;border:1px solid var(--line2);padding:0 11px;font-size:12px;line-height:28px;color:var(--fg)}
.inp .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.inp .tx:empty:before{content:attr(data-ph);color:var(--dim)}
.inp .tx:not(:empty):after{content:"";display:inline-block;width:1.5px;height:14px;margin-left:1px;vertical-align:-3px;background:var(--fg);animation:blink .9s infinite}
.inp .s{flex:none;width:30px;height:30px;border-radius:50%;background:#2c313d;display:grid;place-items:center;transition:background .25s,transform .25s}
.inp .s.on{background:var(--red);transform:scale(1.12)}
.inp .s svg{width:14px;height:14px;fill:#fff}

/* the lock screen and its notices */
.lock{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:30px;gap:3px}
.lock .tm{font-size:42px;font-weight:300;letter-spacing:-.02em;line-height:1}
.lock .dt{font-size:11px;color:var(--mut)}
.noti{position:absolute;left:9px;right:9px;padding:9px 11px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid var(--line2);font-size:11.5px;line-height:16px;opacity:0;transform:translateY(-12px) scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.noti.on{opacity:1;transform:none}
.noti .nh{display:flex;align-items:center;gap:6px;height:14px;margin-bottom:3px;font-size:9.5px;line-height:14px;color:var(--mut)}
.noti .nh i{flex:none;width:12px;height:12px;border-radius:4px;background:#0f4c48}
.noti .nh em{margin-left:auto;font-style:normal}
.noti b{display:block;font-weight:600}
.noti span{display:block;color:#c3c8cf}

/* a small table */
.tb{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:11.5px;line-height:16px;margin-top:5px}
.tb span:nth-child(2n){text-align:right;font-variant-numeric:tabular-nums}
.tb .t{border-top:1px solid var(--line2);padding-top:3px;margin-top:1px;font-weight:600}
.tb .s{color:var(--mut)}
.tb span{opacity:0;transition:opacity .3s}
.on>.tb span,.tb.on span{opacity:1}
.tb span:nth-child(n+3){transition-delay:.2s}.tb span:nth-child(n+5){transition-delay:.4s}.tb span:nth-child(n+7){transition-delay:.6s}
.file{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:7px;height:24px;padding:0 8px;border-radius:8px;background:#0f1218;border:1px solid var(--line2);font-size:11px;white-space:nowrap}
.file i{flex:none;width:10px;height:12px;border:1.5px solid var(--green);border-radius:2px}

/* a card on the dark side */
.card{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.card h4{margin:0;font-size:13.5px;line-height:18px;font-weight:600;white-space:nowrap}
.card small{color:var(--mut);font-size:10.5px;line-height:14px}

/* a button that acts (red) and then runs (green) */
.btn{position:relative;display:flex;align-items:center;justify-content:center;height:34px;border-radius:9px;background:var(--red);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;transition:background .35s,transform .15s}
.btn.done{background:var(--green)}
.btn .t2{display:none}.btn.done .t1{display:none}.btn.done .t2{display:inline}

/* a tap of a finger (white) and a click of a mouse (dark): a ring, centred on its parent */
.tap,.rp{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none}
.rp{border-color:#10302e}
.tap.on,.rp.on{animation:tap .55s var(--ease) forwards}
@keyframes tap{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.5)}}

/* the mouse cursor: anim.js moves it to the middle of the element named in data-cur */
.cur{position:absolute;left:0;top:0;width:17px;height:21px;opacity:0;transition:transform .7s var(--ease),opacity .3s;z-index:9;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));pointer-events:none}
.cur svg{display:block;width:100%;height:100%}

@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}