/* AlloTech — AI employees page: the team at work (stage_team.py).
   Direction, from the owner's two mock-ups, mapped onto the APEX tokens:
   - a coordinator at the centre with the team around it (control-tower mock-up) -> Boss Brain at
     the hub of the hero ring;
   - a left-to-right pipeline of glass stage cards, one accent colour per stage, a status line,
     a live work preview, glowing connectors with light travelling along them, and a final human
     decision card (pipeline mock-up).
   Not taken: generic robots, invented charts and figures. Prefix tm- / tf- only (".ring" and
   ".steps" already exist in the APEX sheet). Static by default; motion only on .is-live, stopped
   by the pause button and by prefers-reduced-motion. */

/* ---------- 1. Hero: the ring orbits Boss Brain ---------- */
.tm-scene{-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.tm-scene .ring .tm-path{position:absolute;left:calc(var(--R) * -1);top:calc(var(--R) * -1);width:calc(var(--R) * 2);height:calc(var(--R) * 2);border-radius:50%;border:1px solid rgba(127,178,255,.22);box-shadow:0 0 60px rgba(43,212,240,.14),inset 0 0 60px rgba(124,140,255,.12);transform:rotateX(90deg);pointer-events:none}
/* The ring turns by half a seat (--off, 360/18/2) so its front centre is a gap and never hides
   Boss Brain; the hub counter-rotates by exactly the ring's angle so it always faces the visitor. */
.tm-scene .ring{--off:10deg;transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(var(--off));animation:tm-ring 80s linear infinite}
@keyframes tm-ring{from{transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(var(--off))}to{transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(calc(var(--off) + 360deg))}}
.tm-scene .ring .tm-hub{--hs:clamp(230px,27vw,390px);position:absolute;left:calc(var(--hs) / -2);top:calc(var(--hs) / -2);width:var(--hs);height:var(--hs);transform:rotateY(calc(var(--off) * -1)) rotateX(8deg);animation:tm-hub 80s linear infinite}
@keyframes tm-hub{from{transform:rotateY(calc(var(--off) * -1)) rotateX(8deg)}to{transform:rotateY(calc(var(--off) * -1 - 360deg)) rotateX(8deg)}}
.tm-scene .ring .tm-hub img.tm-face{position:relative;left:auto;top:auto;width:100%;height:100%;border-radius:50%;object-fit:cover;transform:none;backface-visibility:visible;box-shadow:0 0 0 2px rgba(124,140,255,.75),0 0 0 10px rgba(124,140,255,.12),0 30px 80px -10px rgba(75,141,255,.7)}
.tm-glow{position:absolute;inset:-34%;border-radius:50%;background:radial-gradient(closest-side,rgba(124,140,255,.42),rgba(43,212,240,.16) 55%,transparent 72%);animation:tm-breathe 5s ease-in-out infinite;pointer-events:none}
@keyframes tm-breathe{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
.tm-tag{position:absolute;left:50%;top:calc(100% + 12px);translate:-50% 0;display:grid;justify-items:center;gap:2px;white-space:nowrap;padding:6px 14px;border-radius:999px;background:rgba(9,14,28,.82);border:1px solid rgba(124,140,255,.45);box-shadow:0 10px 30px -12px rgba(0,0,0,.9)}
.tm-tag b{font:600 .95rem/1.1 var(--display);color:var(--text)}
.tm-tag small{font:500 .72rem/1.1 var(--body);color:var(--muted)}
/* the scene's fade mask clips anything outside its box: give the hub room above the ring's centre */
/* Boss Brain is about twice the size of the teammates: the hub sits at the ring's centre, pushed back
   by R, so perspective shrinks it to ~0.68 (desktop) / ~0.8 (phone) of --hs. --cy = hub centre. */
.tm-scene{--cy:clamp(150px,16vw,228px);position:relative;display:flow-root;height:clamp(420px,46vw,580px);margin-top:clamp(-24px,-2vw,0px)}
.tm-scene .ring{margin-top:var(--cy)}

/* Boss Brain speaking: a soft ripple */
.tm-ripple{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(124,140,255,.7);opacity:0;animation:tm-rip 2.4s var(--ease-out) infinite;pointer-events:none}
@keyframes tm-rip{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.32);opacity:0}}

/* The conversation: one bubble at a time, typing dots first, 16 s loop. Flat layer above the 3D ring. */
.tm-talk{position:absolute;inset:0;pointer-events:none;z-index:2}
.tm-b{--bc:#7c8cff;position:absolute;display:flex;align-items:flex-start;gap:10px;width:max-content;max-width:min(270px,40vw);padding:10px 14px 11px 10px;border-radius:16px;
  background:rgba(9,14,28,.9);border:1px solid color-mix(in srgb,var(--bc) 60%,transparent);box-shadow:0 18px 40px -18px rgba(0,0,0,.9),0 0 24px -8px color-mix(in srgb,var(--bc) 70%,transparent);
  opacity:0;animation:tm-say 16s var(--ease) infinite;animation-delay:calc(var(--k) * 4s)}
.tm-b img{flex:none;width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--bc) 70%,transparent)}
.tm-b>div{display:grid;gap:3px;text-align:left}
.tm-b b{font:600 .74rem/1.1 var(--display);color:color-mix(in srgb,var(--bc) 80%,#fff)}
.tm-say,.tm-dots{grid-area:2/1}
.tm-say{font:500 .84rem/1.4 var(--body);color:var(--text);animation:tm-text 16s linear infinite;animation-delay:calc(var(--k) * 4s)}
.tm-dots{display:flex;gap:4px;align-self:center;opacity:0;animation:tm-typing 16s linear infinite;animation-delay:calc(var(--k) * 4s)}
.tm-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:tm-bounce .9s ease-in-out infinite}
.tm-dots i:nth-child(2){animation-delay:.15s}.tm-dots i:nth-child(3){animation-delay:.3s}
/* tails point at the hub */
.tm-b::after{content:"";position:absolute;width:12px;height:12px;background:inherit;border:inherit;border-width:0 0 1px 1px;transform:rotate(45deg)}
.tm-b.k0,.tm-b.k3{--bc:#7c8cff}.tm-b.k1{--bc:#ff7ac6}.tm-b.k2{--bc:#ffb454}
.tm-b.k0{left:calc(50% + clamp(120px,10vw,150px));top:calc(var(--cy) - clamp(150px,11vw,175px))}
.tm-b.k1{right:calc(50% + clamp(120px,10vw,150px));top:calc(var(--cy) - clamp(110px,8vw,130px))}
.tm-b.k2{right:calc(50% + clamp(130px,11vw,170px));top:calc(var(--cy) + clamp(70px,6vw,95px))}
.tm-b.k3{left:calc(50% + clamp(130px,11vw,170px));top:calc(var(--cy) + clamp(55px,5vw,80px))}
.tm-b.k0::after,.tm-b.k3::after{left:-7px;top:22px}
.tm-b.k1::after,.tm-b.k2::after{right:-7px;top:22px;transform:rotate(225deg)}
/* each line stays ~6 s and the next starts every 4 s, so a reply appears while the last line is still up */
@keyframes tm-say{0%{opacity:0;transform:translateY(10px) scale(.96)}3%,38%{opacity:1;transform:none}42%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tm-say-m{0%{opacity:0;transform:translateY(10px) scale(.96)}3%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes tm-typing{0%,1%{opacity:0}2%,8%{opacity:1}9%,100%{opacity:0}}
@keyframes tm-text{0%,8%{opacity:0}10%,100%{opacity:1}}
@keyframes tm-bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.tm-ctl{display:flex;justify-content:flex-end;width:min(100% - 32px,var(--wrap));margin:-52px auto 12px;position:relative;z-index:3}
.tm-ctl .tm-pause{position:static}
.tm-scene.is-paused .ring,.tm-scene.is-paused .ring *,.tm-scene.is-paused .tm-talk *,.tm-scene.is-paused .tm-talk *::after{animation-play-state:paused !important}
@media (max-width:699px){
  .tm-b{animation-name:tm-say-m;left:50% !important;right:auto !important;top:calc(var(--cy) + 150px) !important;translate:-50% 0;max-width:min(300px,86vw)}
  .tm-b::after{left:calc(50% - 6px) !important;right:auto !important;top:-7px !important;transform:rotate(135deg) !important}
  .tm-ctl{margin:-44px auto 8px}
}

/* ---------- 2. How the team works ---------- */
.team-flow{position:relative;padding:clamp(64px,9vw,120px) 0;overflow:clip;isolation:isolate;
  background:radial-gradient(60% 50% at 50% 0%,rgba(75,141,255,.14),transparent 70%),
             linear-gradient(rgba(150,180,255,.05) 1px,transparent 1px) 0 0/48px 48px,
             linear-gradient(90deg,rgba(150,180,255,.05) 1px,transparent 1px) 0 0/48px 48px,var(--bg)}
.team-flow::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 55%,transparent 40%,var(--bg) 100%);pointer-events:none}
.team-flow .wrap{display:grid;gap:var(--s3)}
.team-flow h2{max-width:none;text-wrap:balance}
.team-flow .section-lede{max-width:62ch}
.tf-stage{position:relative;margin-top:clamp(28px,4vw,48px)}
.tf-track{--gap:clamp(18px,2vw,30px);position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);counter-reset:none}
/* the wire every hand-off travels along, and the light on it */
.tf-track::before{content:"";position:absolute;left:4%;right:4%;top:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,#7c8cff,#ff7ac6 35%,#2bd4f0 65%,#3ddc97);opacity:.55;box-shadow:0 0 16px rgba(43,212,240,.45)}
.tf-track::after{content:"";position:absolute;top:41px;left:4%;width:70px;height:12px;border-radius:12px;background:radial-gradient(closest-side,#fff,rgba(43,212,240,.95) 45%,transparent);filter:blur(1px);opacity:0}
.tf-card{--c:#7c8cff;position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px 20px 20px;border-radius:var(--r-lg);
  background:linear-gradient(165deg,rgba(22,34,64,.86),rgba(8,13,26,.92));border:1px solid color-mix(in srgb,var(--c) 42%,transparent);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 30px 70px -40px color-mix(in srgb,var(--c) 70%,transparent);backdrop-filter:blur(6px)}
.tf-card::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:2px;border-radius:2px;background:var(--c);box-shadow:0 0 18px var(--c)}
.tf-card.c-plan{--c:#7c8cff}.tf-card.c-work{--c:#ff7ac6}.tf-card.c-review{--c:#2bd4f0}.tf-card.c-you{--c:#3ddc97}
.tf-n{position:absolute;top:14px;right:16px;font:600 .72rem/1 var(--mono);letter-spacing:.08em;color:color-mix(in srgb,var(--c) 75%,#fff)}
.tf-head{display:flex;align-items:center;gap:10px;min-width:0;padding-right:26px}
.tf-face{display:inline-flex;flex:none}
.tf-face img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 70%,transparent)}
.tf-pair img+img{margin-left:-12px}
.tf-you{width:40px;height:40px;border-radius:50%;place-items:center;display:grid;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 60%,transparent)}
.tf-id{display:grid;min-width:0}
.tf-id b{font:600 .95rem/1.2 var(--display);color:var(--text);overflow-wrap:anywhere}
.tf-id small{font:500 .74rem/1.25 var(--body);color:var(--muted)}
.tf-st{display:inline-flex;align-items:center;gap:6px;width:max-content;font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 85%,#fff)}
.tf-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tf-st i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.tf-badge{font:600 .68rem/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;color:var(--muted);border:1px solid var(--line-2)}
.tf-card h3{margin:2px 0 0;font:600 clamp(1.02rem,1.25vw,1.14rem)/1.25 var(--display);letter-spacing:-.01em;color:var(--text)}
.tf-card>p{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted)}
/* the work preview at the bottom of each card */
.tf-card>div[aria-hidden]{margin-top:auto;padding-top:4px}
.tf-panel{padding:12px;border-radius:var(--r);background:rgba(4,7,14,.55);border:1px solid var(--line);display:grid;gap:10px}
.tf-k{margin:0;font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.tf-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tf-chips li{font-size:.76rem;padding:5px 9px;border-radius:999px;color:var(--text);background:color-mix(in srgb,var(--c) 16%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.tf-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tf-split span{height:6px;border-radius:6px;background:linear-gradient(90deg,#ff7ac6,rgba(255,122,198,.25))}
.tf-split span+span{opacity:.6}
.tf-tasks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tf-task{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 10px;align-items:center}
.tf-task img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.tf-task b{display:block;font:600 .78rem/1.2 var(--display);color:var(--text)}
.tf-task small{display:block;font-size:.74rem;color:var(--muted)}
.tf-task em{grid-column:2;font:600 .64rem/1 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.tf-bar{display:block;height:5px;margin-top:6px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}
.tf-bar i{display:block;height:100%;width:100%;border-radius:5px;background:linear-gradient(90deg,#ff7ac6,#ffb454)}
.tf-task.t1 .tf-bar i{width:62%}
.tf-check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tf-check li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--text)}
.tf-ok{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;color:#04121a;background:var(--c)}
.tf-loop{margin:0;display:flex;align-items:center;gap:8px;font-size:.74rem;color:var(--dim)}
.tf-loop span{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--c) 70%,transparent);border-right-color:transparent}
.tf-acts{display:flex;flex-wrap:wrap;gap:6px}
.tf-acts span{font:600 .74rem/1 var(--body);padding:7px 10px;border-radius:8px;border:1px solid var(--line-2);color:var(--muted)}
.tf-acts .a0{color:#04120c;background:var(--c);border-color:var(--c)}
.tf-proof{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tf-proof li{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:var(--muted);padding-top:6px;border-top:1px solid var(--line)}
.tf-proof li:first-child{padding-top:0;border-top:0}
.tf-proof b{color:var(--text);font-weight:600;text-align:right;white-space:nowrap}
.tf-cap{margin:var(--s3) 0 0;font-size:.82rem;color:var(--dim)}
.tf-promise{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.tf-promise li{display:grid;gap:6px;padding:16px 18px;border-radius:var(--r);border:1px solid var(--line);background:rgba(11,17,30,.6)}
.tf-promise b{font:600 .95rem/1.3 var(--display);color:var(--text)}
.tf-promise span{font-size:.86rem;line-height:1.5;color:var(--muted)}
.tf-pause{position:absolute;right:0;top:calc(-1 * clamp(28px,4vw,48px) + 2px);display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px;border-radius:999px;font:500 .78rem/1 var(--body);color:var(--muted);background:rgba(9,14,28,.8);border:1px solid var(--line-2);cursor:pointer}
.tf-pause:hover{color:var(--text);border-color:rgba(43,212,240,.5)}
.tf-pause:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.tf-pause-i{width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.tf-pause[aria-pressed="true"] .tf-pause-i{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- motion: only while visible, never under reduced motion ---------- */
.tf-stage.is-live .tf-card{animation:tf-on 12s var(--ease) infinite;animation-delay:calc(var(--i) * 3s)}
.tf-stage.is-live .tf-card .tf-st i{animation:tf-dot 12s ease-in-out infinite;animation-delay:calc(var(--i) * 3s)}
.tf-stage.is-live .tf-track::after{animation:tf-run 12s linear infinite}
.tf-stage.is-live .tf-task.t0 .tf-bar i{animation:tf-fill0 12s var(--ease-out) infinite}
.tf-stage.is-live .tf-task.t1 .tf-bar i{animation:tf-fill1 12s var(--ease-out) infinite}
.tf-stage.is-live .tf-loop span{animation:tf-spin 1.6s linear infinite}
.tf-stage.is-paused *,.tf-stage.is-paused *::before,.tf-stage.is-paused *::after,.tf-stage.is-paused .tf-track::after{animation-play-state:paused !important}
@keyframes tf-on{0%,26%,100%{border-color:color-mix(in srgb,var(--c) 42%,transparent);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 30px 70px -40px color-mix(in srgb,var(--c) 70%,transparent);transform:translateY(0)}
  6%,20%{border-color:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent) inset,0 0 44px -6px color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-4px)}}
@keyframes tf-dot{0%,26%,100%{transform:scale(1);opacity:.7}8%,18%{transform:scale(1.6);opacity:1}}
@keyframes tf-run{0%{left:4%;opacity:0}4%{opacity:1}92%{opacity:1}100%{left:calc(96% - 70px);opacity:0}}
@keyframes tf-fill0{0%,25%{width:0}45%,100%{width:100%}}
@keyframes tf-fill1{0%,40%{width:0}62%,100%{width:62%}}
@keyframes tf-spin{to{transform:rotate(360deg)}}

/* ---------- layout below desktop: one column, the wire runs down the middle ---------- */
@media (max-width:1099px){
  .tf-track{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}
  .tf-track::before{left:50%;right:auto;top:2%;bottom:2%;width:2px;height:auto;background:linear-gradient(180deg,#7c8cff,#ff7ac6 35%,#2bd4f0 65%,#3ddc97)}
  .tf-track::after{left:calc(50% - 6px);top:2%;width:12px;height:60px;background:radial-gradient(closest-side,#fff,rgba(43,212,240,.95) 45%,transparent)}
  @keyframes tf-run{0%{top:2%;opacity:0}4%{opacity:1}92%{opacity:1}100%{top:calc(98% - 60px);opacity:0}}
  .tf-promise{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto;width:100%}
  .tf-pause{position:static;order:-1;justify-self:end;margin:0 0 12px auto;display:flex}
  .tf-stage{display:grid}
}
@media (max-width:520px){
  .tf-card{padding:20px 16px 16px}
  .tm-tag small{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tm-scene .ring{animation:none !important;transform:translateZ(calc(var(--R) * -1)) rotateX(-8deg) rotateY(var(--off)) !important}
  .tm-scene .ring .tm-hub{animation:none;transform:rotateY(calc(var(--off) * -1)) rotateX(8deg)}
  .tm-ripple,.tm-dots,.tm-ctl{display:none !important}
  .tm-b,.tm-say{animation:none !important}
  .tm-b.k0,.tm-b.k1{opacity:1}
  .tm-say{opacity:1}
  .tm-glow,.tf-stage .tf-card,.tf-stage .tf-st i,.tf-track::after,.tf-bar i,.tf-loop span{animation:none !important}
  .tf-track::after{display:none}
  .tf-pause{display:none !important}
}
@media (prefers-reduced-motion:reduce) and (max-width:699px){.tm-b.k1{opacity:0 !important}}