.sec-flow{--bg:#011614; --raised:#0b292d; --text:#ffffff; --body:#b4cdd1; --neon:#7aff9b; --turquoise:#84ffda; --hair:rgba(255,255,255,.14); --sans:'DM Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,monospace; --ease:cubic-bezier(.22,.7,.28,1); --spring:cubic-bezier(.22,1.06,.32,1)} .sec-flow *{box-sizing:border-box;margin:0;padding:0} /* NO overflow-x on body: it makes anime's ScrollObserver adopt as the scroll container, and since body does not scroll both thresholds compute to 0 and the observer never enters. Clip on the section instead. */ .sec-flow .mf{position:relative;isolation:isolate;overflow-x:clip;padding:120px 40px} .sec-flow #flow-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .sec-flow .wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto} .sec-flow .head{max-width:640px;margin:0 0 56px} .sec-flow .head h2{font-size:46px;line-height:1.12;font-weight:500;letter-spacing:-.02em} .sec-flow .head h2 em{font-style:normal;color:var(--neon)} .sec-flow .head p{margin-top:14px;font-size:18px;line-height:1.45;color:var(--body)} .sec-flow .cols{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:56px;align-items:center} /* ── left: the loop ───────────────────────────────────────────────────── */ .sec-flow .flow{position:relative;width:560px;height:520px;margin:0 auto} .sec-flow .flow svg.rig{position:absolute;inset:0;width:560px;height:520px;overflow:visible} .sec-flow .rig .track{fill:none;stroke:var(--turquoise);stroke-opacity:.42;stroke-width:1.5;stroke-linecap:round} .sec-flow .rig .feed{fill:none;stroke:var(--neon);stroke-opacity:.55;stroke-width:1.5;stroke-linecap:round} .sec-flow .rig .orbit{fill:none;stroke:var(--turquoise);stroke-opacity:.18;stroke-width:1;stroke-dasharray:2 7} .sec-flow .bub{position:absolute;border-radius:50%;display:grid;place-items:center;overflow:hidden; background:#06201d;border:1.5px solid rgba(122,255,155,.34);will-change:transform,opacity} .sec-flow .bub img{width:100%;height:100%;object-fit:cover;display:block} .sec-flow .eng{width:88px;height:88px;left:236px;top:14px;border-color:var(--turquoise); box-shadow:0 0 0 6px rgba(132,255,218,.07)} .sec-flow .hub{width:64px;height:64px;left:248px;top:328px;border-style:dashed;border-color:rgba(122,255,155,.4); background:rgba(6,32,29,.9)} .sec-flow .hub span{font-family:var(--mono);font-size:8.5px;line-height:1.25;letter-spacing:.04em; color:var(--neon);text-align:center;padding:0 4px} .sec-flow .ring{position:absolute;left:0;top:0;width:560px;height:520px;transform-origin:280px 360px} .sec-flow .agent{position:absolute;width:44px;height:44px;will-change:transform,opacity} .sec-flow .agent .spin{width:100%;height:100%;border-radius:50%;overflow:hidden; background:#06201d;border:1.5px solid rgba(122,255,155,.30)} .sec-flow .agent .spin img{width:100%;height:100%;object-fit:cover;display:block} /* the two words ride the arcs ABOVE the agent ring, the way the deck slide places them — down at the arcs' widest point they collide with the six */ .sec-flow .pill{position:absolute;translate:-50% -50%; padding:8px 14px;border-radius:100px;white-space:nowrap; background:var(--bg);border:1px solid var(--hair); font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--body);opacity:0} .sec-flow .pill--strategy{left:467px;top:215px} .sec-flow .pill--decisions{left:93px;top:215px} /* ── right: the three clips, as a deck ────────────────────────────────── */ .sec-flow .slack{position:relative} .sec-flow .deck{position:relative;width:100%;max-width:576px;margin:0 auto;height:452px} .sec-flow .pnl{ position:absolute;left:0;top:22px;width:calc(100% - 92px); border-radius:16px;overflow:hidden; background:var(--raised);border:1px solid var(--hair); box-shadow:0 40px 80px -46px #000; will-change:transform,opacity; } .sec-flow .pnl .media{position:relative;width:100%;aspect-ratio:16/10;background:#06201d} .sec-flow .pnl .copy{padding:17px 20px 19px} .sec-flow .pnl .copy h4{font-size:16px;font-weight:500;letter-spacing:-.01em} .sec-flow .pnl .copy p{margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--body)} .sec-flow .pnl video, .sec-flow .pnl img{width:100%;height:100%;object-fit:cover;display:block} /* the frosted skin only exists while the deck is shut, exactly like the nav pill */ .sec-flow .pnl::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:2; background:rgba(255,255,255,calc(var(--shut,1) * .2)); backdrop-filter:blur(calc(var(--shut,1) * 12px)); -webkit-backdrop-filter:blur(calc(var(--shut,1) * 12px)); } .sec-flow .meta{display:flex;align-items:center;gap:14px;margin-top:20px;justify-content:center} .sec-flow .tabs{display:flex;gap:7px} .sec-flow .tabs i{width:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);cursor:pointer; transition:width .4s var(--spring),background .4s var(--ease)} .sec-flow .tabs i.on{width:40px;background:var(--neon)} .sec-flow .cliplabel{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--body);opacity:.75} /* next-card control — white chevron on a neon circle, riding the deck's right edge */ .sec-flow .deck-next{ position:absolute;z-index:40; right:-8px;top:205px;transform:translateY(-50%); width:46px;height:46px;border-radius:50%; display:grid;place-items:center; background:var(--neon);border:none;cursor:pointer; box-shadow:0 10px 24px -12px rgba(0,0,0,.5),0 0 18px 3px rgba(122,255,155,.28),0 0 42px 10px rgba(122,255,155,.13); transition:transform .28s var(--spring),box-shadow .28s var(--ease); } .sec-flow .deck-next:hover{transform:translateY(-50%) scale(1.09);box-shadow:0 14px 28px -12px rgba(0,0,0,.55),0 0 24px 5px rgba(122,255,155,.36),0 0 56px 14px rgba(122,255,155,.18)} .sec-flow .deck-next:active{transform:translateY(-50%) scale(.95)} .sec-flow .deck-next svg{width:21px;height:21px;display:block;margin-left:2px} .sec-flow .deck-next svg path{stroke:#fff} @media (max-width:1080px){.sec-flow .cols{grid-template-columns:1fr;gap:56px} .sec-flow .head h2{font-size:34px} .sec-flow .flow{transform:scale(.86);transform-origin:top center;height:412px}} @media (prefers-reduced-motion:reduce){.sec-flow .pill{opacity:1}}