/* Industries · by role: the project lifecycle seen from each role.
   The Cybereum mark rolls along the stage track and lights each stage as it
   arrives, rests on the last one, then the cycle begins again.
   role-lifecycle.js measures the node centres so the track, the roll and the
   moment each stage lights follow the real layout: across in wide rows, down
   when the stages stack. */
.rl{margin-top:var(--s-7);padding:var(--s-6);border:1px solid var(--cyb-line);border-radius:var(--cyb-radius-lg);background:color-mix(in srgb,var(--cyb-bg-2) 72%,transparent)}
.rl__title{margin:0 0 var(--s-5);text-align:center;font:400 var(--t-lg)/1.3 var(--cyb-display)}
.rl__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-bottom:var(--s-6)}
.rl__tab{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1.1rem;border:1px solid var(--cyb-line);border-radius:var(--cyb-radius-pill);background:transparent;color:var(--cyb-fg-2);font:500 var(--t-sm)/1 var(--cyb-body);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.rl__tab:hover{border-color:var(--cyb-line-strong);color:var(--cyb-fg)}
.rl__tab[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--cyb-fg)}
.rl__tab:focus-visible,.rl__panel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:40rem){.rl{padding:var(--s-5) var(--s-4)}}
.rl__panel{--x0:0px;--y0:0px;--dx:0px;--dy:0px;position:relative;padding-left:2rem;border-radius:var(--cyb-radius-md)}
.rl__panel[hidden]{display:none}
.rl__stages{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);margin:0;padding:0;list-style:none}
.rl__stage{position:relative;will-change:opacity,transform;padding:var(--s-4);border:1px solid var(--cyb-line);border-radius:var(--cyb-radius-md);background:var(--cyb-surface-subtle)}
.rl__num{display:block;margin-bottom:var(--s-2);font:500 var(--t-xs)/1 var(--cyb-mono);letter-spacing:.12em;color:var(--accent)}
.rl__stage h4{margin:0;font:600 var(--t-sm)/1.3 var(--cyb-body);color:var(--cyb-fg)}
.rl__stage p{margin:var(--s-2) 0 0;font-size:var(--t-xs);line-height:1.55;color:var(--cyb-fg-2)}
.rl__node{position:absolute;left:-1.25rem;top:calc(var(--s-4) + .35rem);width:7px;height:7px;border:1px solid var(--cyb-line-strong);border-radius:50%;background:var(--cyb-bg);box-shadow:0 0 0 3px var(--cyb-bg);transform:translate(-50%,-50%);z-index:1}

@media (min-width:60rem){
  .rl__panel{padding-left:0;padding-top:2.75rem}
  .rl__stages{grid-template-columns:repeat(5,minmax(0,1fr))}
  .rl__node{left:50%;top:-1.375rem}
}

.rl__glow{position:absolute;inset:-1px;border:1px solid color-mix(in srgb,var(--green) 40%,var(--accent));border-radius:inherit;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 9%,transparent),color-mix(in srgb,var(--green) 4%,transparent));box-shadow:0 12px 28px -22px color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;pointer-events:none}
.rl__dot{position:absolute;inset:-1px;border-radius:50%;background:var(--green);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent);opacity:0}

/* Track, progress and mark: shown once the script has measured the nodes. */
.rl__track,.rl__progress,.rl__runner{position:absolute;left:var(--x0);top:var(--y0);display:none;pointer-events:none}
.rl__panel[data-axis] :is(.rl__track,.rl__progress,.rl__runner){display:block}
.rl__track{background:var(--cyb-line)}
.rl__progress{transform-origin:0 0;background:linear-gradient(var(--rl-dir,90deg),var(--accent-2),var(--accent),var(--green))}
.rl__panel[data-axis="x"] :is(.rl__track,.rl__progress){width:var(--dx);height:1px}
.rl__panel[data-axis="y"] :is(.rl__track,.rl__progress){width:1px;height:var(--dy);--rl-dir:180deg}
.rl__runner{width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:url("/assets/images/blue-logo-256.png") center/cover no-repeat;box-shadow:0 0 0 3px var(--cyb-bg),0 0 16px color-mix(in srgb,var(--accent) 45%,transparent);z-index:2;will-change:transform,opacity}

/* Before the loop starts, and whenever motion is reduced, the panel shows its
   finished state: every stage lit and the mark resting on the last node. */
.rl__panel[data-axis] .rl__glow,.rl__panel[data-axis] .rl__dot{opacity:1}
.rl__panel[data-axis] .rl__runner{transform:translate(var(--dx),var(--dy))}