/* =====================================================================
   STORXIE NEXUS — SERVICE SIMULATIONS
   Three lightweight animated illustrations that explain the services:
     1. .sx-sim-audit    a website being inspected
     2. .sx-sim-search   how a site becomes discoverable
     3. .sx-sim-agent    an AI agent working through a workflow

   Rules held throughout:
     - CSS transitions and transforms only, plus one small JS sequencer
     - no external libraries, no images, no web fonts
     - every element readable with animation off
     - reduced motion gives the finished state immediately
     - light for audit and search, dark navy for the agent
   ===================================================================== */

/* ---------- shared frame ---------- */
.sx-sim{
  --sx-ink:#0B0D10; --sx-body:#47505E; --sx-muted:#6E7683;
  --sx-line:#E4E8EF; --sx-soft:#F7F9FC; --sx-brand:#4570B7;
  --sx-brand-2:#32568F; --sx-ok:#0E9F6E; --sx-warn:#B45309; --sx-mid:#C9821C;
  position:relative; width:100%; box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--sx-ink); -webkit-font-smoothing:antialiased;
}
.sx-sim *,.sx-sim *::before,.sx-sim *::after{box-sizing:border-box}
.sx-sim p,.sx-sim h3,.sx-sim h4,.sx-sim ol,.sx-sim ul,.sx-sim li{margin:0;padding:0}
.sx-sim ol,.sx-sim ul{list-style:none}
.sx-sim__card{
  border:1px solid var(--sx-line); border-radius:18px; background:#fff;
  box-shadow:0 1px 2px rgba(11,13,16,.04), 0 6px 20px rgba(11,13,16,.055);
  overflow:hidden;
}
.sx-sim__caption{
  display:flex; align-items:center; gap:7px; margin-top:10px;
  font-size:12px; color:var(--sx-muted); line-height:1.45;
}
.sx-sim__caption svg{flex:0 0 12px; width:12px; height:12px; opacity:.7}

/* ---------- 1. AUDIT ==================================================== */
.sx-sim-audit__browser{display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--sx-line); background:var(--sx-soft)}
.sx-sim-audit__browser i{width:8px; height:8px; border-radius:50%; background:#D5DBE4; display:block}
.sx-sim-audit__url{margin-left:8px; flex:1 1 0; min-width:0; font-size:10.5px; color:var(--sx-muted);
  background:#fff; border:1px solid var(--sx-line); border-radius:5px; padding:3px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-sim-audit__body{position:relative; height:196px; overflow:hidden; background:#fff}
.sx-sim-audit__page{position:absolute; inset:0; padding:14px 16px; transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.sx-sim-audit__bar{height:8px; border-radius:3px; background:#E9EDF3; margin-bottom:7px}
.sx-sim-audit__bar.w70{width:70%} .sx-sim-audit__bar.w45{width:45%} .sx-sim-audit__bar.w88{width:88%}
.sx-sim-audit__bar.w60{width:60%} .sx-sim-audit__bar.w33{width:33%}
.sx-sim-audit__h{height:11px; width:66%; border-radius:3px; background:#C9D3E0; margin:2px 0 9px}
.sx-sim-audit__blocks{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0}
.sx-sim-audit__blocks span{height:34px; border-radius:5px; background:#EEF2F7; display:block}
.sx-sim-audit__btn{height:16px; width:78px; border-radius:4px; background:var(--sx-brand); opacity:.85; margin-top:8px}
.sx-sim-audit__scan{
  position:absolute; left:0; right:0; top:0; height:34px; pointer-events:none;
  background:linear-gradient(180deg, rgba(69,112,183,0) 0%, rgba(69,112,183,.16) 55%, rgba(69,112,183,.34) 100%);
  border-bottom:2px solid rgba(69,112,183,.55);
  transform:translateY(-40px); opacity:0;
}
.sx-sim-audit__panel{border-top:1px solid var(--sx-line); padding:12px 14px 14px; background:#fff}
.sx-sim-audit__panel h4{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--sx-muted); font-weight:700; margin-bottom:9px}
.sx-sim-audit__row{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12px; color:var(--sx-body);
  opacity:0; transform:translateX(-5px); transition:opacity .3s ease, transform .3s ease}
.sx-sim-audit__row .dot{width:14px; height:14px; flex:0 0 14px; border-radius:50%; display:grid; place-items:center; font-size:8px; font-weight:700; color:#fff; background:#D5DBE4}
.sx-sim-audit__row .lb{flex:1 1 auto; min-width:0}
.sx-sim-audit__row .st{font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--sx-muted); white-space:nowrap}
.sx-sim-audit__row.is-ok .dot{background:var(--sx-ok)}
.sx-sim-audit__row.is-mid .dot{background:var(--sx-mid)}
.sx-sim-audit__row.is-warn .dot{background:var(--sx-warn)}
.sx-sim-audit__report{
  margin:12px 14px 14px; border:1px solid var(--sx-line); border-radius:11px; background:var(--sx-soft);
  padding:11px 12px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;
}
.sx-sim-audit__report b{display:block; font-size:12px; margin-bottom:4px}
.sx-sim-audit__report span{font-size:11.5px; color:var(--sx-muted); line-height:1.5; display:block}

/* ---------- 2. SEARCH VISIBILITY ======================================== */
.sx-sim-search__stage{position:relative; padding:14px; background:var(--sx-soft); min-height:200px}
.sx-sim-search__pages{display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:11px}
.sx-sim-search__node{
  width:34px; height:26px; border-radius:5px; border:1.5px solid #C9D3E0; background:#fff;
  display:grid; place-items:center; font-size:8.5px; color:var(--sx-muted); transition:all .3s ease; flex:0 0 auto;
}
.sx-sim-search__node.is-live{border-color:var(--sx-brand); background:#EFF4FA; color:var(--sx-brand-2); font-weight:700}
.sx-sim-search__node.is-blocked{border-color:#E0C3A6; background:#FDF6EE; color:var(--sx-warn)}
.sx-sim-search__wire{height:1.5px; width:14px; background:#D5DBE4; position:relative; flex:0 0 14px}
.sx-sim-search__crawler{
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--sx-brand);
  box-shadow:0 0 0 3px rgba(69,112,183,.18); top:27px; left:14px; opacity:0;
  transition:left .55s cubic-bezier(.3,.8,.3,1), opacity .2s ease;
}
.sx-sim-search__map{
  border:1px dashed #C9D3E0; border-radius:8px; padding:7px 9px; margin-bottom:10px; background:#fff;
  font-size:10px; color:var(--sx-muted); display:flex; align-items:center; gap:7px;
}
.sx-sim-search__map b{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--sx-body)}
.sx-sim-search__map .ok{color:var(--sx-ok); font-weight:700}
.sx-sim-search__checks{display:flex; flex-wrap:wrap; gap:5px}
.sx-sim-search__checks span{
  font-size:9.5px; padding:3px 7px; border-radius:99px; border:1px solid var(--sx-line);
  background:#fff; color:var(--sx-muted); opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
}
.sx-sim-search__checks span.pass{border-color:#BFE3D2; color:var(--sx-ok); background:#F0FAF5}
.sx-sim-search__query{
  margin-top:11px; display:flex; align-items:center; gap:7px; border:1.5px solid var(--sx-line);
  border-radius:8px; background:#fff; padding:7px 10px; font-size:11.5px; color:var(--sx-body);
}
.sx-sim-search__query svg{width:12px; height:12px; flex:0 0 12px; opacity:.55}
.sx-sim-search__typed{border-right:1.5px solid var(--sx-brand); padding-right:1px}
.sx-sim-search__results{margin-top:8px; border:1px solid var(--sx-line); border-radius:8px; background:#fff; padding:9px 11px;
  opacity:0; transform:translateY(5px); transition:opacity .4s ease, transform .4s ease}
.sx-sim-search__results .line{height:6px; border-radius:3px; background:#EEF2F7; margin-bottom:5px}
.sx-sim-search__results .line.w70{width:70%} .sx-sim-search__results .line.w50{width:50%}
.sx-sim-search__results .you{
  display:flex; align-items:center; gap:7px; margin-top:7px; padding:6px 8px; border-radius:6px;
  background:#EFF4FA; border:1px solid #D6E1EF; font-size:10.5px; color:var(--sx-brand-2); font-weight:600;
}
.sx-sim-search__results .you i{width:12px; height:12px; border-radius:2px; background:var(--sx-brand); display:block; flex:0 0 12px}

/* SEO / AEO / GEO cards */
.sx-concepts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px}
.sx-concept{border:1px solid var(--sx-line); border-radius:11px; padding:11px 12px; background:#fff}
.sx-concept b{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--sx-brand-2); margin-bottom:5px}
.sx-concept span{font-size:11.5px; color:var(--sx-body); line-height:1.5; display:block}

/* ---------- 3. AI AGENT ================================================ */
.sx-sim-agent{--sx-dark:#0F1729; --sx-dark-2:#16213A; --sx-ink:#F4F7FC; --sx-body:#C3CCDB; --sx-muted:#8794A8;
  --sx-line:rgba(255,255,255,.12); --sx-soft:rgba(255,255,255,.04); background:transparent}
.sx-sim-agent .sx-sim__card{
  background:linear-gradient(165deg, var(--sx-dark-2), var(--sx-dark) 60%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 24px 60px -28px rgba(6,10,20,.9);
}
.sx-sim-agent__head{display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--sx-line)}
.sx-sim-agent__avatar{
  width:24px; height:24px; border-radius:50%; flex:0 0 24px;
  background:linear-gradient(140deg,#4570B7,#6E96D6); display:grid; place-items:center;
  font-size:10px; font-weight:700; color:#fff;
}
.sx-sim-agent__head b{font-size:12px; color:var(--sx-ink)}
.sx-sim-agent__head .state{margin-left:auto; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase;
  color:#6FD3A4; display:inline-flex; align-items:center; gap:5px; white-space:nowrap}
.sx-sim-agent__head .state i{width:5px; height:5px; border-radius:50%; background:#6FD3A4; display:block}
.sx-sim-agent__track{padding:12px 14px 14px; position:relative}
.sx-sim-agent__step{
  display:grid; grid-template-columns:18px 1fr auto; align-items:center; gap:9px;
  padding:6px 0; position:relative; opacity:.32; transition:opacity .35s ease;
}
.sx-sim-agent__step .bullet{
  width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(255,255,255,.28);
  display:grid; place-items:center; font-size:8px; color:#0F1729; background:transparent;
  transition:background .3s ease, border-color .3s ease, color .3s ease; position:relative; z-index:1;
}
.sx-sim-agent__step .lbl{font-size:11.5px; color:var(--sx-body); line-height:1.35}
.sx-sim-agent__step .tag{
  font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--sx-muted);
  border:1px solid var(--sx-line); border-radius:99px; padding:2px 6px; white-space:nowrap;
}
.sx-sim-agent__step.is-done{opacity:1}
.sx-sim-agent__step.is-done .bullet{background:#6FD3A4; border-color:#6FD3A4; color:#0F1729}
.sx-sim-agent__step.is-done .lbl{color:#EAF0FA}
.sx-sim-agent__step.is-active{opacity:1}
.sx-sim-agent__step.is-active .bullet{border-color:#7FA6E0; background:rgba(127,166,224,.22); box-shadow:0 0 0 4px rgba(127,166,224,.12)}
.sx-sim-agent__step.is-active .lbl{color:#fff; font-weight:600}
/* the vertical rail */
.sx-sim-agent__track::before{
  content:""; position:absolute; left:22.5px; top:20px; bottom:20px; width:1.5px;
  background:rgba(255,255,255,.14);
}
.sx-sim-agent__track::after{
  content:""; position:absolute; left:22.5px; top:20px; width:1.5px; height:0;
  background:linear-gradient(180deg,#6FD3A4,#7FA6E0); transition:height .5s ease;
}
.sx-sim-agent__foot{
  border-top:1px solid var(--sx-line); padding:10px 14px; font-size:10.5px; color:var(--sx-muted);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.sx-sim-agent__foot .pill{border:1px solid var(--sx-line); border-radius:99px; padding:2px 8px; font-size:9.5px; color:var(--sx-body)}
.sx-sim-agent .sx-sim__caption{color:#8794A8}

/* ---------- motion off: everything finished ---------- */
.sx-sim.is-static .sx-sim-audit__row,
.sx-sim.is-static .sx-sim-audit__report,
.sx-sim.is-static .sx-sim-search__checks span,
.sx-sim.is-static .sx-sim-search__results{opacity:1; transform:none}
.sx-sim.is-static .sx-sim-audit__scan{opacity:0}
.sx-sim.is-static .sx-sim-agent__step{opacity:1}

@media (prefers-reduced-motion:reduce){
  .sx-sim *, .sx-sim *::before, .sx-sim *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .sx-sim-audit__body{height:168px}
  .sx-sim-audit__blocks{grid-template-columns:1fr 1fr}
  .sx-sim-search__pages{gap:6px}
  .sx-sim-search__node{width:29px; height:23px; font-size:7.5px}
  .sx-sim-search__wire{width:9px; flex-basis:9px}
  .sx-concepts{grid-template-columns:1fr; gap:8px}
  .sx-sim-agent__step .tag{display:none}
  .sx-sim-agent__step{grid-template-columns:18px 1fr}
}
@media (max-width:380px){
  .sx-sim-search__pages{flex-wrap:wrap; justify-content:flex-start}
  .sx-sim-audit__panel{padding:10px 11px 12px}
}