/* AlloTech homepage hero, "the living AI workforce" (v1). Built by stage_hero.py; spec in MOTION.md.
   Static state (no JS / reduced motion) is data-step="5": the draft waiting for your approval.
   The scene is normal grid flow (cards can never overlap); connectors are 2px bars drawn with
   scale transforms. Only transform and opacity animate. Classes are hx-prefixed (.ring etc. exist). */

/* ---------- layout ---------- */
.hero-home{min-height:auto;padding-bottom:clamp(40px,6vw,88px)}
.hx-grid{display:grid;gap:clamp(36px,5vw,56px);align-items:center}
.hx-grid .hero-copy{max-width:720px}
.hx-stage{width:100%;max-width:540px;margin-inline:auto}
@media (min-width:1024px){
  .hx-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,4.5vw,72px);min-height:calc(100svh - var(--nav-h) - 150px)}
  .hero-home .hx-grid .hero-copy{text-align:left;justify-items:start;margin-inline:0}
  .hero-home .hx-grid .cta-row,.hero-home .hx-grid .hero-trust{justify-content:flex-start}
  .hx-grid h1{font-size:clamp(2.9rem,4.7vw,4.6rem)}
  .hx-stage{margin-inline:0 auto}
}
@media (max-width:1023px){ .hero-home .hx-grid .hero-copy{margin-inline:auto} }
.hx-advisor{padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(24px,4vw,56px)}
.hx-advisor .bb-scene{margin-top:0}

/* ---------- frame ---------- */
.hx-stage{position:relative;margin-block:0;padding:14px 16px 16px;border-radius:var(--r-xl);
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,24,41,.84),rgba(7,11,20,.94));box-shadow:var(--shadow)}
.hx-cap{display:flex;align-items:center;gap:8px;min-height:28px;padding:0 84px 12px 2px;font:500 .72rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hx-cap2{color:var(--dim);text-transform:none;letter-spacing:.02em}
.hx-stage{container-type:inline-size}
@container (max-width:470px){.hx-cap2{display:none}}
.hx-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none}
.hx-toggle{position:absolute;right:14px;top:12px;min-height:28px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);
  background:rgba(4,6,12,.7);color:var(--muted);font:500 .72rem/1 var(--mono);letter-spacing:.06em;cursor:pointer;transition:color .2s,border-color .2s}
.hx-toggle:hover{color:var(--text);border-color:var(--iris)}
.hx-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- scene grid ---------- */
.hx-scene{--gap:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);justify-items:center;transition:opacity .45s var(--ease)}
.hx-req,.hx-hub,.hx-gate,.hx-fork,.hx-v.v0,.hx-v.v4{grid-column:1/-1}
.hx-req,.hx-hub,.hx-emp,.hx-gate{background:rgba(11,17,30,.96);border:1px solid var(--line-2);border-radius:var(--r);text-align:center;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),border-color .35s var(--ease)}
.hx-req small,.hx-gate small{display:block;font:500 .68rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.hx-req{width:min(86%,340px);padding:9px 14px}
.hx-req b{display:block;margin-top:3px;font:600 .95rem/1.3 var(--display);color:var(--text)}

.hx-hub{position:relative;width:min(56%,220px);padding:12px 10px 10px;border-color:rgba(43,212,240,.42)}
.hx-hub img,.hx-emp img{display:block;margin:0 auto 7px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.hx-hub img{width:76px;height:76px;border:2px solid var(--cyan)}
.hx-hub b{display:block;font:600 1rem/1.2 var(--display)}
.hx-hub > span:not(.hx-ring),.hx-emp span{display:block;color:var(--muted);font-size:.78rem;line-height:1.3}
.hx-ring{position:absolute;left:50%;top:12px;width:76px;height:76px;margin-left:-38px;border-radius:50%;border:2px solid var(--cyan);opacity:0;pointer-events:none}
@keyframes hx-ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}

.hx-emp{width:100%;align-self:stretch;padding:10px 6px 9px}
.hx-emp img{width:52px;height:52px;border:1px solid var(--line-2)}
.hx-emp b{display:block;font:600 .88rem/1.2 var(--display)}
.hx-emp span{font-size:.74rem;margin-top:2px}
.hx-emp em{display:grid;justify-items:center;margin-top:7px;font:500 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;transition:opacity .3s var(--ease)}
.hx-emp em i{grid-area:1/1;padding:4px 8px;border-radius:999px;font-style:normal;transition:opacity .3s var(--ease)}
.hx-wk{color:var(--warn);background:rgba(246,196,83,.12);opacity:0}
.hx-dn{color:var(--ok);background:rgba(61,220,151,.12)}

.hx-gate{width:100%;display:grid;padding:12px 14px;text-align:left;border-color:rgba(246,196,83,.45)}
.hx-ask,.hx-res{grid-area:1/1;transition:opacity .18s var(--ease)}
.hx-stage:is([data-step="6"],[data-step="7"]) .hx-res{transition:opacity .3s var(--ease-out) .12s}
.hx-gate small{color:var(--warn)}
.hx-gate b{display:block;margin-top:3px;font:600 .95rem/1.3 var(--display)}
.hx-ask > span{display:block;color:var(--dim);font-size:.76rem;margin-top:2px}
.hx-btns{display:flex;gap:8px;margin-top:9px}
.hx-btns i{font:600 .78rem/1 var(--body);font-style:normal;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);transition:transform .16s var(--ease),box-shadow .3s var(--ease)}
.hx-btns .hx-ok{background:#fff;color:#04060c;border-color:#fff}
.hx-res{margin:0;align-self:center;display:flex;align-items:center;gap:10px;color:var(--ok);font:600 .92rem/1.35 var(--display);opacity:0}
.hx-tick{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(61,220,151,.16);position:relative}
.hx-tick::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:9px;border:solid var(--ok);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- connectors: 2px bars, drawn by scale, with a travelling dot ---------- */
.hx-v,.hx-h,.hx-d{display:block;position:relative;background:rgba(127,178,255,.42);transition:transform .45s var(--ease)}
.hx-v,.hx-d{width:2px;transform-origin:top}
.hx-v{height:22px}
.hx-v.v0,.hx-v.v4{--len:22px}
.hx-fork{position:relative;width:100%;height:32px}
.hx-fork .hx-v.v1{position:absolute;left:50%;top:0;height:16px;margin-left:-1px;--len:16px}
.hx-h{position:absolute;top:15px;height:2px;left:calc((100% - 2 * var(--gap)) / 6);right:calc((100% - 2 * var(--gap)) / 6);transform-origin:center}
.hx-d{position:absolute;top:15px;height:17px;margin-left:-1px;--len:17px}
.hx-d.d1{left:calc((100% - 2 * var(--gap)) / 6)}.hx-d.d2{left:50%}.hx-d.d3{left:calc(100% - (100% - 2 * var(--gap)) / 6)}
.hx-v::after,.hx-d::after{content:"";position:absolute;left:-2px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--cyan);opacity:0}
@keyframes hx-drop{0%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(var(--len))}}

/* ---------- steps: lower steps hide what has not happened yet ---------- */
.hx-stage[data-step="0"] .hx-req{opacity:0;transform:translateY(-12px)}
.hx-stage:is([data-step="0"],[data-step="1"]) .hx-hub{opacity:.35;transform:scale(.96)}
.hx-stage:is([data-step="0"],[data-step="1"]) .hx-v.v0,
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"]) :is(.hx-fork .hx-v,.hx-d){transform:scaleY(0)}
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"]) .hx-h{transform:scaleX(0)}
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"]) .hx-emp{opacity:.32;transform:scale(.95)}
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"]) .hx-emp em{opacity:0}
.hx-stage[data-step="3"] .hx-wk{opacity:1}
.hx-stage[data-step="3"] .hx-dn{opacity:0}
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .hx-v.v4{transform:scaleY(0)}
.hx-stage:is([data-step="0"],[data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .hx-gate{opacity:0;transform:translateY(12px)}
.hx-stage:is([data-step="6"],[data-step="7"]) .hx-ask{opacity:0}
.hx-stage:is([data-step="6"],[data-step="7"]) .hx-res{opacity:1}
.hx-stage:is([data-step="6"],[data-step="7"]) .hx-gate{border-color:rgba(61,220,151,.5)}
.hx-stage[data-step="7"] .hx-scene{opacity:0}
.hx-stage.hx-press .hx-ok{transform:scale(.96);box-shadow:0 0 0 5px rgba(255,255,255,.14)}
/* sequence inside a step: fork trunk -> bar -> drops -> cards, left to right */
.hx-stage .hx-h{transition-delay:.12s}
.hx-stage .hx-d{transition-delay:.26s}
.hx-stage .hx-emp{transition-delay:.3s}
.hx-stage .hx-emp.e2{transition-delay:.42s}.hx-stage .hx-emp.e3{transition-delay:.54s}

/* one-shot travelling dots, only while the narrative runs */
.hx-stage[data-step="2"] .hx-v.v0::after{animation:hx-drop .7s var(--ease) .25s both}
.hx-stage[data-step="2"] .hx-ring{animation:hx-ring .9s var(--ease-out) .5s both}
.hx-stage[data-step="3"] .hx-d::after{animation:hx-drop .6s var(--ease) .45s both}
.hx-stage[data-step="5"].hx-run .hx-v.v4::after{animation:hx-drop .6s var(--ease) .2s both}
.hx-stage.hx-paused *,.hx-stage.hx-paused *::after{animation-play-state:paused !important}
.hx-stage.hx-reset,.hx-stage.hx-reset *{transition:none !important}

/* ---------- small screens ---------- */
@media (max-width:600px){
  .hx-stage{padding:12px 10px 12px;border-radius:var(--r-lg)}
  .hx-scene{--gap:6px}
  .hx-req{width:94%;padding:8px 10px}
  .hx-req b,.hx-gate b{font-size:.86rem}
  .hx-hub{width:62%;padding:10px 8px 8px}
  .hx-hub img,.hx-ring{width:58px;height:58px}
  .hx-ring{top:10px;margin-left:-29px}
  .hx-hub b{font-size:.9rem}
  .hx-emp{padding:8px 4px 8px}
  .hx-emp img{width:42px;height:42px}
  .hx-emp b{font-size:.8rem}
  .hx-emp span{font-size:.7rem}
  .hx-gate{padding:10px 11px}
  .hx-ask > span{font-size:.7rem}
  .hx-btns i{padding:7px 12px}
  .hx-res{font-size:.84rem}
}