/* ============================================================
   The Lens — styles for the theory walk (lens.html).
   Base scrollytelling classes (.scrolly, .step, .figure-stage,
   capbox/network phases) come from css/style.css; this file adds
   the states that exist only on this page plus small page bits.
   ============================================================ */

/* chapter tag above a step's number */
.step-chapter {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-text);
  margin-bottom: 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* hero hint for presenter controls */
.lens-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-faint);
}

/* ---------- break-bulk quay: the crane load swings gently ---------- */
.figure-stage [data-state] .bb-swing {
  transform-box: fill-box;
  transform-origin: top center;
}
.figure-stage [data-state].fig-on .bb-swing {
  animation: lensSwing 5.2s ease-in-out infinite;
}
@keyframes lensSwing {
  0%,
  100% {
    transform: rotate(2.6deg);
  }
  50% {
    transform: rotate(-2.6deg);
  }
}

/* ---------- four maps: hand-carried routes crawl between sheets ---------- */
.figure-stage [data-state] .tg-flow {
  animation: lensFlow 2.6s linear infinite;
}
@keyframes lensFlow {
  to {
    stroke-dashoffset: -14;
  }
}
.figure-stage [data-state] .tg-q {
  opacity: 0;
}
.figure-stage [data-state].fig-on .tg-q {
  animation: lensBlink 3.4s ease-in-out infinite;
}
@keyframes lensBlink {
  0%,
  22% {
    opacity: 0;
  }
  38%,
  72% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0;
  }
}

/* ---------- value-stream chain: boxes pop in, flow runs to the outcome ---------- */
.figure-stage [data-state] .ch-box {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: translateY(4px);
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
  transition-delay: var(--d, 0s);
}
.figure-stage [data-state].fig-on .ch-box {
  opacity: 1;
  transform: none;
}
.figure-stage [data-state] .ch-out {
  opacity: 0;
  transition: opacity 0.5s ease 0.7s;
}
.figure-stage [data-state].fig-on .ch-out {
  opacity: 1;
}
.figure-stage [data-state].fig-on .ch-flow {
  animation: lensFlow 1.4s linear infinite;
}

/* ---------- three layers: one capability, its levers, their numbers ---------- */
.figure-stage [data-state] .ly-cap rect,
.figure-stage [data-state] .ly-cap line {
  transition: stroke 0.5s ease;
}
.figure-stage [data-state] .ly-cap.ly-on rect,
.figure-stage [data-state] .ly-cap.ly-on line {
  stroke: var(--signal);
}
.figure-stage [data-state] .ly-needle {
  stroke: var(--fig-line);
  stroke-width: 1;
  transform-box: view-box;
  transform: rotate(-30deg);
  transition:
    transform 0.7s cubic-bezier(0.34, 1.3, 0.5, 1) 0.25s,
    stroke 0.5s ease;
}
.figure-stage [data-state] .ly-lev.ly-on .ly-needle {
  stroke: var(--signal);
  transform: rotate(22deg);
}
.figure-stage [data-state] .ly-fill {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.3);
  opacity: 0.5;
  transition:
    transform 0.7s cubic-bezier(0.5, 0, 0.25, 1) 0.45s,
    opacity 0.5s ease 0.45s;
}
.figure-stage [data-state] .ly-met.ly-on .ly-fill {
  transform: scaleX(0.9);
  opacity: 1;
}
.figure-stage [data-state] .ly-l1,
.figure-stage [data-state] .ly-l2 {
  transition:
    stroke 0.5s ease,
    stroke-opacity 0.5s ease;
}
.figure-stage [data-state] .ly-l1.ly-on,
.figure-stage [data-state] .ly-l2.ly-on {
  stroke: var(--signal);
  animation: lensFlow 1.6s linear infinite;
}
.figure-stage [data-state] .ly-l2.ly-on {
  animation-delay: 0.3s;
}

/* ---------- levers: needles settle, pushes flow upward ---------- */
.figure-stage [data-state] .lv-needle {
  transform-box: view-box;
  transform: rotate(-38deg);
  transition: transform 0.9s cubic-bezier(0.34, 1.4, 0.5, 1) var(--d, 0s);
}
.figure-stage [data-state].fig-on .lv-needle {
  transform: rotate(var(--rot, 20deg));
}
.figure-stage [data-state].fig-on .lv-push {
  animation: lensFlow 1.4s linear infinite;
}
.figure-stage [data-state] .lv-bar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition:
    transform 0.8s cubic-bezier(0.5, 0, 0.25, 1) var(--d, 1.2s),
    opacity 0.4s ease var(--d, 1.2s);
}
.figure-stage [data-state].fig-on .lv-bar {
  transform: scaleX(0.72);
  opacity: 1;
}

/* ---------- golf swing: you swing, the outside eye sees the flaw ---------- */
.figure-stage [data-state] .gf-swing {
  transform-box: view-box;
  transform-origin: 40px 57px;
}
.figure-stage [data-state].fig-on .gf-swing {
  animation: gfSwing 3.6s ease-in-out infinite;
}
@keyframes gfSwing {
  0%,
  100% {
    transform: rotate(-52deg);
  }
  45%,
  58% {
    transform: rotate(16deg);
  }
}
/* the golfer's head: eyes on the ball at the bottom of the swing, lifting
   towards the coach at the top — the classic flaw, made visible */
.figure-stage [data-state] .gf-head {
  transform-box: view-box;
  transform-origin: 40px 50px;
  transform: rotate(22deg);
}
.figure-stage [data-state].fig-on .gf-head {
  animation: gfHead 3.6s ease-in-out infinite;
}
@keyframes gfHead {
  0%,
  100% {
    transform: rotate(-12deg);
  }
  45%,
  58% {
    transform: rotate(22deg);
  }
}
.figure-stage [data-state] .gf-flaw {
  opacity: 0;
}
.figure-stage [data-state].fig-on .gf-flaw {
  animation: lensBlink 3.6s ease-in-out infinite;
}
.figure-stage [data-state].fig-on .gf-sight {
  animation: lensFlow 1.8s linear infinite;
}

/* ---------- maturity ladder: base / rungs / climb phases ---------- */
.figure-stage [data-state] .ld-lab,
.figure-stage [data-state] .ld-tgt,
.figure-stage [data-state] .ld-chip,
.figure-stage [data-state] .ld-dial,
.figure-stage [data-state] .ld-cap {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.figure-stage [data-state].phase-base .ld-lab-now,
.figure-stage [data-state].phase-base .ld-cap-base {
  opacity: 1;
}
.figure-stage [data-state].phase-rungs .ld-lab,
.figure-stage [data-state].phase-rungs .ld-tgt,
.figure-stage [data-state].phase-rungs .ld-cap-rungs,
.figure-stage [data-state].phase-climb .ld-lab,
.figure-stage [data-state].phase-climb .ld-tgt,
.figure-stage [data-state].phase-climb .ld-dial,
.figure-stage [data-state].phase-climb .ld-chip,
.figure-stage [data-state].phase-climb .ld-cap-climb {
  opacity: 1;
}
.figure-stage [data-state] .ld-box {
  transform-box: fill-box;
  transition: transform 0.9s cubic-bezier(0.5, 0, 0.25, 1) 0.7s;
}
.figure-stage [data-state].phase-climb .ld-box {
  transform: translateY(-18px);
}
.figure-stage [data-state] .ld-chip {
  transform: translateX(-8px);
  transition:
    opacity 0.45s ease 0.15s,
    transform 0.55s cubic-bezier(0.34, 1.3, 0.5, 1) 0.15s;
}
.figure-stage [data-state].phase-climb .ld-chip {
  transform: none;
}
.figure-stage [data-state] .ld-lab {
  fill: var(--paper-faint);
  transition:
    opacity 0.5s ease var(--d, 0s),
    fill 0.5s ease 1.1s;
}
.figure-stage [data-state] .ld-lab-now {
  fill: var(--signal-text);
}
.figure-stage [data-state].phase-climb .ld-lab-now {
  fill: var(--paper-faint);
}
.figure-stage [data-state].phase-climb .ld-lab-next {
  fill: var(--signal-text);
}
.figure-stage [data-state] .ld-needle {
  transform-box: view-box;
  transform-origin: 104px 30px;
  transform: rotate(-42deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.3, 0.5, 1) 1.5s;
}
.figure-stage [data-state].phase-climb .ld-needle {
  transform: rotate(30deg);
}

/* ---------- portfolio board: one bet lights at a time ---------- */
.figure-stage [data-state] .pf-chip rect {
  transition:
    stroke 0.5s ease,
    fill 0.5s ease;
}
.figure-stage [data-state] .pf-chip text {
  transition: fill 0.5s ease;
}
.figure-stage [data-state] .pf-chip.pf-on rect {
  stroke: var(--signal);
}
.figure-stage [data-state] .pf-chip.pf-on text {
  fill: var(--signal-text);
}
.figure-stage [data-state] .pf-tgt {
  opacity: 0.12;
  transition: opacity 0.5s ease;
}
.figure-stage [data-state] .pf-tgt.pf-on {
  opacity: 1;
}
.figure-stage [data-state] .pf-bar {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.32);
  opacity: 0.55;
  transition:
    transform 0.7s cubic-bezier(0.5, 0, 0.25, 1),
    opacity 0.5s ease;
}
.figure-stage [data-state] .pf-bar.pf-on {
  transform: scaleX(0.85);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .figure-stage [data-state].fig-on .bb-swing,
  .figure-stage [data-state] .tg-flow,
  .figure-stage [data-state].fig-on .tg-q,
  .figure-stage [data-state].fig-on .ch-flow,
  .figure-stage [data-state] .ly-l1.ly-on,
  .figure-stage [data-state] .ly-l2.ly-on,
  .figure-stage [data-state].fig-on .lv-push,
  .figure-stage [data-state].fig-on .gf-swing,
  .figure-stage [data-state].fig-on .gf-head,
  .figure-stage [data-state].fig-on .gf-flaw,
  .figure-stage [data-state].fig-on .gf-sight {
    animation: none;
  }
  .figure-stage [data-state] .tg-q,
  .figure-stage [data-state].fig-on .gf-flaw {
    opacity: 1;
  }
}