/* =================================================================
   GembaOps — lanes.css
   Industries page + lane infographic scenes. Loaded ONLY by
   industries.html and the shorts capture stage (a documented
   deviation from the one-stylesheet rule so the other pages'
   payload is untouched). Depends on styles.css tokens.

   Scene system: every .lane-scene is an inline SVG whose motion is
   pure CSS keyframes on a shared 14s master loop. Without the .run
   class the scene sits in its finished state (no-JS / SEO / print
   safe); lanes.js adds .run when the scene scrolls into view.
   Timing vocabulary (percent of the 14s loop):
     .k1–.k8  appear-and-hold beats (problem side k1–k4, fix k6–k8)
     .agent   the amber GembaOps chip pops at ~45%
     .okpop   the green payoff at ~85%
     .bad     red trouble pulse during the problem beat
     .shake   jitter during the problem beat
     .swap1/2/3  sequential text swaps (counters, statuses)
     .draw    line draws itself during the handoff
     .grow    bar grows during the fix beat
   ================================================================= */

/* ---------- SCENE PANEL ---------- */
.lane-scene{background:linear-gradient(160deg,var(--navy),var(--navy-soft));border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);padding:clamp(16px,2.4vw,26px);position:relative;overflow:hidden;
  box-shadow:0 24px 60px rgba(8,15,26,.30)}
.lane-scene::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 80% 10%,#000,transparent 78%);pointer-events:none}
.lane-scene>*{position:relative}
.lane-scene .ls-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;
  font-family:var(--font-head);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400)}
.lane-scene .ls-live{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-weight:700}
.lane-scene .ls-live i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.lane-scene.run .ls-live i{animation:lsBlink 1.6s ease-in-out infinite}
@keyframes lsBlink{0%,100%{opacity:1}50%{opacity:.25}}
.ls-svg{width:100%;height:auto;display:block}
.ls-svg text{font-family:var(--font-head)}
.ls-caption{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.82rem}
.ls-caption .leak{color:#e2857c;font-weight:600}
.ls-caption .leak::before{content:"\2715  ";font-weight:700}
.ls-caption .fix{color:var(--ok);font-weight:600}
.ls-caption .fix::before{content:"\2192  ";font-weight:700}
.ls-replay{background:none;border:1px solid var(--line-dark);color:var(--slate-400);font-family:var(--font-head);
  font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;border-radius:16px;padding:4px 12px}
.ls-replay:hover{border-color:var(--amber);color:var(--amber)}

/* ---------- SVG VOCABULARY (shared element styles) ---------- */
.ls-svg .box{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.16);stroke-width:1.4;rx:10}
.ls-svg .box-dark{fill:rgba(8,15,26,.55);stroke:rgba(255,255,255,.14);stroke-width:1.4}
.ls-svg .lbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;fill:var(--slate-400)}
.ls-svg .lbl-lg{font-size:12px;font-weight:700;fill:var(--slate-300);letter-spacing:.05em}
.ls-svg .big{font-size:19px;font-weight:700;fill:var(--amber)}
.ls-svg .bad-txt{fill:#e2857c}
.ls-svg .ok-txt{fill:#2fc98c}
.ls-svg .ic-line{stroke:var(--slate-300);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ls-svg .ic-bad{stroke:#e2857c;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ls-svg .ic-ok{stroke:#2fc98c;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ls-svg .ic-amber{stroke:var(--amber);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ls-svg .chip{fill:var(--amber)}
.ls-svg .chip-txt{font-size:9px;font-weight:700;fill:var(--navy);letter-spacing:.08em;text-transform:uppercase}
.ls-svg .bubble{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.2);stroke-width:1.2}
.ls-svg .bubble-amber{fill:rgba(245,166,35,.16);stroke:rgba(245,166,35,.55);stroke-width:1.2}
.ls-svg .bubble-txt{font-size:9.5px;fill:var(--slate-300);font-family:var(--font-body)}
.ls-svg .slot{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.15);stroke-width:1.2}
.ls-svg .slot-bad{fill:rgba(226,87,76,.22);stroke:#e2574c;stroke-width:1.4}
.ls-svg .slot-ok{fill:rgba(31,157,107,.24);stroke:#2fc98c;stroke-width:1.4}
.ls-svg .halo{fill:none;stroke:#e2574c;stroke-width:2}
.ls-svg .conn{stroke:rgba(255,255,255,.18);stroke-width:2;stroke-dasharray:3 6;stroke-linecap:round}

/* ---------- MASTER TIMELINE ----------
   Default (no .run): finished state — everything visible, trouble
   elements dimmed, payoff shown. With .run: the 14s loop plays. */
.lane-scene:not(.run) .swap1,
.lane-scene:not(.run) .swap2{opacity:0}
.lane-scene:not(.run) .halo{opacity:0}
.lane-scene:not(.run) .gone{opacity:.25}

/* appear-and-hold beats */
.lane-scene.run .k1{animation:lnK1 14s linear infinite}
.lane-scene.run .k2{animation:lnK2 14s linear infinite}
.lane-scene.run .k3{animation:lnK3 14s linear infinite}
.lane-scene.run .k4{animation:lnK4 14s linear infinite}
.lane-scene.run .k6{animation:lnK6 14s linear infinite}
.lane-scene.run .k7{animation:lnK7 14s linear infinite}
.lane-scene.run .k8{animation:lnK8 14s linear infinite}
@keyframes lnK1{0%,2%{opacity:0;transform:translateY(7px)}6%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK2{0%,8%{opacity:0;transform:translateY(7px)}12%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK3{0%,15%{opacity:0;transform:translateY(7px)}19%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK4{0%,23%{opacity:0;transform:translateY(7px)}27%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK6{0%,54%{opacity:0;transform:translateY(7px)}58%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK7{0%,65%{opacity:0;transform:translateY(7px)}69%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes lnK8{0%,75%{opacity:0;transform:translateY(7px)}79%{opacity:1;transform:none}96%{opacity:1;transform:none}100%{opacity:0}}

/* the amber agent chip: pops in at the turn */
.lane-scene.run .agent{animation:lnAgent 14s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnAgent{0%,44%{opacity:0;transform:scale(.5)}48%{opacity:1;transform:scale(1.08)}50%{transform:scale(1)}96%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* the green payoff */
.lane-scene.run .okpop{animation:lnOk 14s cubic-bezier(.34,1.56,.64,1) infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnOk{0%,84%{opacity:0;transform:scale(.4)}88%{opacity:1;transform:scale(1.12)}90%{transform:scale(1)}96%{opacity:1;transform:scale(1)}100%{opacity:0}}

/* trouble pulse: red halo rings during the problem beat */
.lane-scene.run .halo{animation:lnHalo 14s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnHalo{0%,9%{opacity:0;transform:scale(.6)}12%{opacity:.9;transform:scale(1)}17%{opacity:0;transform:scale(1.5)}
  20%{opacity:.9;transform:scale(1)}25%{opacity:0;transform:scale(1.5)}
  28%{opacity:.9;transform:scale(1)}33%{opacity:0;transform:scale(1.5)}
  36%{opacity:.9;transform:scale(1)}41%{opacity:0;transform:scale(1.5)}100%{opacity:0}}

/* jitter during the problem beat */
.lane-scene.run .shake{animation:lnShake 14s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnShake{0%,10%{transform:translateX(0)}11%{transform:translateX(-2px)}13%{transform:translateX(2px)}
  15%{transform:translateX(-2px)}17%{transform:translateX(2px)}19%{transform:translateX(-1px)}21%{transform:translateX(1px)}
  23%{transform:translateX(-2px)}25%{transform:translateX(2px)}27%{transform:translateX(-1px)}29%{transform:translateX(1px)}
  31%{transform:translateX(-2px)}33%{transform:translateX(2px)}35%{transform:translateX(0)}100%{transform:translateX(0)}}

/* elements that dim/leave when the fix lands (the competitor, the pile) */
.lane-scene.run .gone{animation:lnGone 14s linear infinite}
@keyframes lnGone{0%,55%{opacity:1}62%,96%{opacity:.25}100%{opacity:0}}

/* combined classes — CSS animation doesn't compose across rules, so any
   element carrying two timing classes needs its own merged keyframes */
.lane-scene.run .k4.gone{animation:lnK4Gone 14s linear infinite}
@keyframes lnK4Gone{0%,23%{opacity:0;transform:translateY(7px)}27%{opacity:1;transform:none}
  55%{opacity:1}62%{opacity:.25}96%{opacity:.25}100%{opacity:0}}
.lane-scene.run .k1.shake{animation:lnK1Shake 14s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnK1Shake{0%,2%{opacity:0;transform:translateY(7px)}6%{opacity:1;transform:none}
  11%{transform:translateX(-2px)}13%{transform:translateX(2px)}15%{transform:translateX(-2px)}
  17%{transform:translateX(2px)}19%{transform:translateX(-1px)}21%{transform:translateX(1px)}
  23%{transform:translateX(-2px)}25%{transform:translateX(2px)}27%{transform:translateX(-1px)}
  29%{transform:translateX(1px)}31%{transform:translateX(-2px)}33%{transform:translateX(2px)}
  35%{transform:translateX(0)}96%{opacity:1}100%{opacity:0}}
.lane-scene.run .k2.shake{animation:lnK2Shake 14s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lnK2Shake{0%,8%{opacity:0;transform:translateY(7px)}12%{opacity:1;transform:none}
  14%{transform:translateX(-2px)}16%{transform:translateX(2px)}18%{transform:translateX(-2px)}
  20%{transform:translateX(2px)}22%{transform:translateX(-1px)}24%{transform:translateX(1px)}
  26%{transform:translateX(-2px)}28%{transform:translateX(2px)}30%{transform:translateX(-1px)}
  32%{transform:translateX(1px)}34%{transform:translateX(0)}96%{opacity:1}100%{opacity:0}}

/* sequential text swaps (counters, statuses). swap3 = final, holds. */
.lane-scene.run .swap1{animation:lnSwap1 14s linear infinite}
.lane-scene.run .swap2{animation:lnSwap2 14s linear infinite}
.lane-scene.run .swap3{animation:lnSwap3 14s linear infinite}
@keyframes lnSwap1{0%,10%{opacity:0}13%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes lnSwap2{0%,25%{opacity:0}28%,37%{opacity:1}40%,100%{opacity:0}}
@keyframes lnSwap3{0%,40%{opacity:0}43%{opacity:1}96%{opacity:1}100%{opacity:0}}

/* connection line draws itself at the handoff */
.lane-scene.run .draw{stroke-dasharray:220;stroke-dashoffset:220;animation:lnDraw 14s linear infinite}
@keyframes lnDraw{0%,48%{stroke-dashoffset:220;opacity:1}58%{stroke-dashoffset:0}96%{stroke-dashoffset:0;opacity:1}100%{opacity:0}}

/* bar grows during the fix beat (scaleX from left) */
.lane-scene.run .grow{animation:lnGrow 14s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes lnGrow{0%,58%{transform:scaleX(.06)}80%,100%{transform:scaleX(1)}}
.lane-scene.run .grow2{animation:lnGrow2 14s ease-in-out infinite;transform-box:fill-box;transform-origin:left center}
@keyframes lnGrow2{0%{transform:scaleX(.5)}20%,100%{transform:scaleX(.72)}}

/* reduced motion: no loop, finished state (matches :not(.run) rules) */
@media(prefers-reduced-motion:reduce){
  .lane-scene.run *{animation:none !important}
  .lane-scene.run .swap1,.lane-scene.run .swap2,.lane-scene.run .halo{opacity:0}
  .lane-scene.run .gone{opacity:.25}
}

/* ---------- INDUSTRY PICKER ---------- */
.picker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:980px){.picker-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.picker-grid{grid-template-columns:repeat(2,1fr)}}
.picker-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;font-family:var(--font-body);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.picker-btn:hover,.picker-btn:focus-visible{border-color:var(--amber);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.picker-btn[aria-pressed=true]{border-color:var(--amber);background:var(--amber-soft);box-shadow:var(--shadow-sm)}
.picker-btn .ic{width:38px;height:38px;border-radius:10px;background:var(--amber-soft);display:grid;place-items:center}
.picker-btn[aria-pressed=true] .ic{background:var(--amber)}
.picker-btn .ic svg{width:20px;height:20px;stroke:var(--amber-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.picker-btn[aria-pressed=true] .ic svg{stroke:var(--navy)}
.picker-btn b{font-family:var(--font-head);font-size:.94rem;color:var(--ink);line-height:1.25}
.picker-btn small{color:var(--muted);font-size:.78rem;line-height:1.35}
.picker-status{display:none;align-items:center;justify-content:center;gap:12px;margin-top:20px;
  font-size:.92rem;color:var(--slate-700);flex-wrap:wrap;text-align:center}
.picker-status.on{display:flex}
.picker-status b{color:var(--amber-deep);font-family:var(--font-head)}
.picker-reset{background:none;border:1px solid var(--line);border-radius:16px;padding:5px 14px;
  font-size:.82rem;font-weight:600;color:var(--muted)}
.picker-reset:hover{border-color:var(--amber);color:var(--amber-deep)}

/* ---------- LANE SECTIONS ---------- */
.lane-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.lane-head .lane-no{font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep)}
.bg-navy .lane-head .lane-no{color:var(--amber)}
.lane-tagline{font-style:italic;color:var(--muted);font-size:var(--fs-lead);margin-bottom:22px;max-width:56ch}
.bg-navy .lane-tagline{color:var(--slate-300)}
.lane-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,48px);align-items:center}
@media(max-width:900px){.lane-grid{grid-template-columns:1fr}}
.lane-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
@media(max-width:560px){.lane-stats{grid-template-columns:1fr}}
.lane-stats .stat{text-align:left}
.lane-stats .stat .big{font-size:clamp(1.5rem,2.6vw,2rem);display:block;margin-bottom:4px}
.lane-stats .stat .lbl{display:block}
.lane-attr{font-size:.78rem;color:var(--slate-400);margin-top:2px}
.lane-build{background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:12px;
  padding:18px 20px;margin-top:18px}
.bg-navy .lane-build{background:rgba(255,255,255,.05);border-color:var(--line-dark);border-left-color:var(--amber)}
.lane-build b{font-family:var(--font-head);color:var(--amber-deep);display:block;margin-bottom:5px;
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase}
.bg-navy .lane-build b{color:var(--amber)}
.lane-build p{margin:0;font-size:.96rem;color:var(--muted)}
.bg-navy .lane-build p{color:var(--slate-300)}

/* who it hits: compact industry cards */
.hits{margin-top:26px}
.hits h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-400);margin-bottom:12px;font-family:var(--font-head)}
.hits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.hits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hits-grid{grid-template-columns:1fr}}
.hit{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  transition:opacity .25s,border-color .25s,box-shadow .25s}
.bg-navy .hit{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.hit b{font-family:var(--font-head);font-size:.92rem;color:var(--ink);display:block;margin-bottom:3px}
.bg-navy .hit b{color:#fff}
.hit p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.45}
.bg-navy .hit p{color:var(--slate-300)}
/* picker filtering states */
body.filtered .hit{opacity:.28}
body.filtered .hit.hl{opacity:1;border-color:var(--amber);box-shadow:var(--shadow-sm)}

/* ---------- REPUTATION BAND ---------- */
.rep-band{background:linear-gradient(160deg,var(--navy-deep),var(--navy));color:#fff;border-radius:var(--radius-lg);
  padding:clamp(30px,4.5vw,52px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,48px);align-items:center;
  position:relative;overflow:hidden}
@media(max-width:840px){.rep-band{grid-template-columns:1fr}}
.rep-band::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:46px 46px;pointer-events:none}
.rep-band>*{position:relative}
.rep-stars{display:inline-flex;gap:4px;margin-bottom:14px}
.rep-stars svg{width:26px;height:26px;fill:var(--amber)}
.rep-band.run .rep-stars svg{opacity:0;animation:repStar .5s ease forwards}
.rep-band.run .rep-stars svg:nth-child(1){animation-delay:.1s}
.rep-band.run .rep-stars svg:nth-child(2){animation-delay:.3s}
.rep-band.run .rep-stars svg:nth-child(3){animation-delay:.5s}
.rep-band.run .rep-stars svg:nth-child(4){animation-delay:.7s}
.rep-band.run .rep-stars svg:nth-child(5){animation-delay:.9s}
@keyframes repStar{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.rep-facts{display:grid;gap:10px}
.rep-facts li{display:flex;gap:10px;align-items:baseline;color:var(--slate-300);font-size:.95rem}
.rep-facts b{color:var(--amber);font-family:var(--font-head);font-size:1.15rem;min-width:64px;text-align:right}

/* ---------- OFFER BLOCK ---------- */
.offer-note{max-width:640px;margin:18px auto 0;font-size:.85rem;color:var(--muted);text-align:center}