/* Strata "live scan" hero animation. Drop-in component: an .sx-stage element.
   Namespaced with sx- to avoid collisions with the site's Tailwind classes.
   Used on the R&D grid (rd/index.html, .sx-inset variant) and the Strata page hero. */
.sx-stage{
  --sx-cyan:#2a9db8; --sx-cyan-bright:#4fbcd9; --sx-cyan-dim:#1a6b80;
  --sx-alert:#f2856b; --sx-text:#eaf6fb; --sx-text2:rgba(206,235,245,.68);
  --sx-dim:rgba(199,234,245,.40); --sx-line:rgba(120,200,222,.12);
  --sx-sans:"Inter",system-ui,-apple-system,sans-serif;
  --sx-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#0b323d 0%, #072a33 100%);
  border:1px solid var(--sx-line);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  padding:clamp(14px,2.4vw,26px); display:flex; flex-direction:column;
  font-family:var(--sx-sans); color:var(--sx-text);
}
/* fill a fixed-size parent (the R&D grid's aspect-[16/10] link) instead of setting our own aspect */
.sx-stage.sx-inset{position:absolute; inset:0; aspect-ratio:auto; height:100%; width:100%; border:0; border-radius:inherit; box-shadow:none}
.sx-stage *{box-sizing:border-box}
.sx-stage::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(120,200,222,.11) 1px, transparent 1px);
  background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%); pointer-events:none}
.sx-tag{position:absolute; top:clamp(12px,2vw,20px); right:clamp(12px,2vw,22px);
  font-family:var(--sx-mono); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sx-dim); text-align:right; line-height:1.5; z-index:2}
.sx-tag b{display:block; color:var(--sx-text); font-size:1.55rem; font-weight:600; letter-spacing:.04em}
.sx-cmd{font-family:var(--sx-mono); font-size:clamp(.72rem,1.5vw,.9rem); color:var(--sx-text2); display:flex; align-items:center; gap:.55em; position:relative; z-index:2}
.sx-cmd .p{color:var(--sx-cyan-bright)}
.sx-cmd .f{color:var(--sx-text); white-space:nowrap; overflow:hidden}
.sx-stage.play .sx-cmd .f{animation:sx-type 1.1s steps(12) both}
.sx-cur{width:8px;height:1.05em;background:var(--sx-cyan-bright);display:inline-block;translate:0 2px;animation:sx-blink 1s steps(1) infinite}
@keyframes sx-type{from{width:0}to{width:8.3em}}
@keyframes sx-blink{50%{opacity:0}}
.sx-sweep{position:absolute; left:0; right:0; height:70px; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(79,188,217,.16) 45%, rgba(79,188,217,.38) 50%, rgba(79,188,217,.16) 55%, transparent);
  mix-blend-mode:screen}
.sx-stage.play .sx-sweep{animation:sx-sweep 1.5s cubic-bezier(.4,0,.2,1) both}
@keyframes sx-sweep{0%{opacity:0;top:8%}12%{opacity:1}88%{opacity:1}100%{opacity:0;top:96%}}
.sx-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:clamp(5px,.9vw,9px); position:relative; z-index:2; flex:1}
.sx-row{display:grid; grid-template-columns:14px minmax(0,1fr) auto; align-items:center; gap:clamp(8px,1.4vw,14px);
  padding:clamp(5px,.9vw,9px) clamp(8px,1.2vw,12px); border:1px solid var(--sx-line); border-radius:10px;
  background:rgba(255,255,255,.015); opacity:0; translate:0 8px}
.sx-stage.play .sx-row{animation:sx-rowin .6s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d,0s)}
@keyframes sx-rowin{to{opacity:1; translate:0 0}}
.sx-led{width:8px;height:8px;border-radius:50%;background:var(--sx-cyan-dim);justify-self:center}
.sx-stage.play .sx-row .sx-led{animation:sx-led .5s ease both; animation-delay:var(--d,0s)}
@keyframes sx-led{to{background:var(--sx-cyan-bright); box-shadow:0 0 10px var(--sx-cyan-bright)}}
.sx-name{display:flex; align-items:baseline; gap:.6em; min-width:0}
.sx-lib{font-weight:600; font-size:clamp(.8rem,1.6vw,.98rem); letter-spacing:-.01em}
.sx-ver{font-family:var(--sx-mono); font-size:.68rem; color:var(--sx-text2); background:rgba(120,200,222,.08); border:1px solid var(--sx-line); padding:.05em .5em; border-radius:5px; white-space:nowrap}
.sx-ev{font-family:var(--sx-mono); font-size:.6rem; color:var(--sx-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-right{display:flex; align-items:center; gap:clamp(8px,1.4vw,14px)}
.sx-meter{width:clamp(58px,11vw,130px); height:7px; border-radius:4px; background:rgba(120,200,222,.2); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(120,200,222,.08)}
/* The fill is driven from JS: strata-scan.js sets each fill's width to its row's
   percentage, and this CSS transition animates the grow. A pure @keyframes approach
   does NOT work here because var() does not resolve inside @keyframes, so the per-row
   target (var(--c)) is invisible to the animation. A direct width + transition resolves
   the percentage normally and holds it. */
.sx-fill{display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--sx-cyan),var(--sx-cyan-bright)); box-shadow:0 0 10px -1px var(--sx-cyan); transition:width 1.1s cubic-bezier(.25,.9,.3,1)}
.sx-pct{font-family:var(--sx-mono); font-size:.78rem; font-weight:500; font-variant-numeric:tabular-nums; color:var(--sx-text); width:3.4em; text-align:right}
.sx-pill{font-family:var(--sx-mono); font-size:.6rem; font-weight:600; letter-spacing:.02em; padding:.12em .5em; border-radius:5px; white-space:nowrap;
  color:var(--sx-alert); background:rgba(242,133,107,.12); border:1px solid rgba(242,133,107,.4)}
.sx-stage.play .sx-cve .sx-pill{animation:sx-pulse 2s ease-in-out infinite; animation-delay:2.4s}
@keyframes sx-pulse{50%{background:rgba(242,133,107,.24)}}
.sx-low .sx-fill{background:linear-gradient(90deg,#3a6f7d,var(--sx-cyan))}
.sx-foot{margin-top:12px; padding-top:12px; border-top:1px solid var(--sx-line);
  font-family:var(--sx-mono); font-size:clamp(.58rem,1.2vw,.7rem); color:var(--sx-dim);
  display:flex; flex-wrap:wrap; gap:.4em 1.4em; align-items:center; position:relative; z-index:2}
.sx-foot b{color:var(--sx-text2); font-weight:500}
.sx-foot .hot{color:var(--sx-alert)}
.sx-foot .grow{flex:1}
@media (prefers-reduced-motion:reduce){
  .sx-cmd .f{width:8.3em} .sx-cur{display:none} .sx-sweep{display:none}
  .sx-row{opacity:1; translate:0 0}
  .sx-led{background:var(--sx-cyan-bright); box-shadow:0 0 10px var(--sx-cyan-bright)}
  .sx-fill{transition:none}
}