/* ============================================================
   Diagram-specific styling and animation.
   One block per figure, numbered to match the page.
   ============================================================ */

/* ---------- Fig 1 : the robot ---------- */
[data-fig="fig-robot"] .noise text { opacity: .18; transition: opacity .3s; }
[data-fig="fig-robot"] .shell { stroke: var(--ink); }
[data-fig="fig-robot"] .knob { fill: var(--ink-faint); }

[data-fig="fig-robot"].playing .noise text { animation: noiseIn 3.4s ease-in-out infinite; }
[data-fig="fig-robot"].playing .shell { animation: shellFlash 3.4s ease-in-out infinite; }
[data-fig="fig-robot"].playing .lever .knob { animation: knobOn 3.4s ease-in-out infinite; }
[data-fig="fig-robot"].playing .lever[data-i="0"] .knob { animation-delay: 1.55s; }
[data-fig="fig-robot"].playing .lever[data-i="1"] .knob { animation-delay: 1.73s; }
[data-fig="fig-robot"].playing .lever[data-i="2"] .knob { animation-delay: 1.91s; }
[data-fig="fig-robot"].playing .lever[data-i="3"] .knob { animation-delay: 2.09s; }
[data-fig="fig-robot"].playing .lever[data-i="4"] .knob { animation-delay: 2.27s; }

.n1 { --dx:  128px; --dy:   86px; animation-delay: 0s;    }
.n2 { --dx: -104px; --dy:   92px; animation-delay: .55s;  }
.n3 { --dx:  144px; --dy:    2px; animation-delay: 1.1s;  }
.n4 { --dx:  -34px; --dy:   -4px; animation-delay: 1.65s; }
.n5 { --dx:  108px; --dy: -104px; animation-delay: 2.2s;  }
.n6 { --dx:  -98px; --dy: -110px; animation-delay: 2.75s; }

@keyframes noiseIn {
  0%   { transform: translate(0,0); opacity: .16; }
  34%  { transform: translate(var(--dx), var(--dy)); opacity: .72; }
  42%  { transform: translate(calc(var(--dx) * .78), calc(var(--dy) * .78)); opacity: .72; }
  70%  { transform: translate(0,0); opacity: .16; }
  100% { transform: translate(0,0); opacity: .16; }
}
@keyframes shellFlash {
  0%, 30%, 50%, 100% { stroke: var(--ink); }
  38%                { stroke: var(--red); }
}
@keyframes knobOn {
  0%, 100% { fill: var(--ink-faint); }
  14%, 42% { fill: var(--green); }
}

/* ---------- Fig 2 : the two seconds ---------- */
.secBall  { fill: var(--red); }
.secMeter { fill: var(--green); }
.secBands line { stroke: var(--ink-faint); stroke-width: 1.4; }
.secOn, .secOff { transition: opacity .2s; }

/* ---------- Fig 3 : three questions ---------- */
.qBall { fill: var(--red); }
.qbox .qrect { transition: stroke .25s ease, stroke-width .25s ease; }
.qbox.on .qrect { stroke: var(--red); stroke-width: 2.8; }
.qAns, .qOut { transition: opacity .3s ease; }
.qBody { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
[data-fig="fig-questions"] .btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- Fig 4 : the box ---------- */
.boxZone rect { stroke: var(--ink-faint); transition: stroke .3s ease; }
.boxZone .boxLabel { fill: var(--ink-faint); transition: fill .3s ease; }
[data-fig="fig-box"].mode-bad  .boxZone rect { stroke: var(--red); }
[data-fig="fig-box"].mode-bad  .boxZone .boxLabel { fill: var(--red); }
[data-fig="fig-box"].mode-good .boxZone rect { stroke: var(--green); }
[data-fig="fig-box"].mode-good .boxZone .boxLabel { fill: var(--green); }
.boxPathBad  { stroke: var(--red); }
.boxPathGood { stroke: var(--green); }
.boxBall { fill: var(--ink); }
.boxVerdict { transition: opacity .35s ease; }

/* ---------- Fig 4 : the bat ---------- */
.boxBat { stroke: var(--ink); fill: none; transition: d .35s cubic-bezier(.3,.8,.4,1); }
[data-fig="fig-box"].mode-bad  .boxBat { stroke: var(--red); }
[data-fig="fig-box"].mode-good .boxBat { stroke: var(--green); }

/* ---------- Fig 5 : length map ---------- */
.lenSeps line { stroke: var(--rule); stroke-width: 1; }
.lenBand rect { fill: transparent; transition: fill .28s ease; }
.lenBand.on rect { fill: color-mix(in srgb, var(--amber) 34%, transparent); }
.lenBand .lenName, .lenBand .lenShot { transition: fill .28s ease; }
.lenBand.on .lenName { fill: var(--ink); }
.lenBand.on .lenShot { fill: var(--ink-soft); }
.lenBall { fill: var(--red); }

/* ---------- Fig 6 : still head ---------- */
.hdTraceBad { stroke: var(--red); transition: opacity .3s; }
.hdDot { fill: var(--green); transition: opacity .3s; }
[data-fig="fig-head"].playing .hdGroup[data-side="bad"] .hdBody { animation: wobble .58s ease-in-out 6; }
@keyframes wobble {
  0%, 100% { transform: translate(0, 0); }
  22%      { transform: translate(7px, -5px); }
  61%      { transform: translate(-6px, 4px); }
}

/* ---------- Fig 7 : gaps vs fielders ---------- */
.gapWedges path { fill: var(--green); opacity: 0; transition: opacity .45s ease; }
[data-fig="fig-gaps"].mode-gaps .gapWedges path { opacity: .2; }
.gapFielders circle { fill: var(--ink-faint); transition: fill .3s ease; }
[data-fig="fig-gaps"].mode-fielders .gapFielders circle { fill: var(--red); }
[data-fig="fig-gaps"].mode-gaps     .gapFielders circle { fill: var(--ink-faint); opacity: .45; }
.gapCaption { fill: var(--ink-faint); transition: fill .3s ease; }
[data-fig="fig-gaps"].mode-fielders .gapCaption { fill: var(--red); }
[data-fig="fig-gaps"].mode-gaps     .gapCaption { fill: var(--green); }

/* ---------- Fig 8 : flight ---------- */
.flEye { stroke: var(--blue); }
.flFlat { stroke: var(--red); }
.flLoop { stroke: var(--green); }
.flBall { fill: var(--ink); }
.flVerdict { transition: opacity .35s ease; }

/* Fig 10: lbw from above, and the three questions. */
.lwStump { stroke: var(--ink); fill: var(--paper-2); }
.lwLine { stroke: var(--blue); }
.lwPad { fill: var(--paper-2); stroke: var(--ink); stroke-width: 2.4; transition: opacity .35s ease; }
.lwPitch { fill: var(--ink-faint); }
.lwPitch, .lwPitchT, .lwOn, .lwV { transition: opacity .3s ease; }
.lwOn { stroke: var(--red); }
/* Only the out case has a "going on to hit" line, and leaving it to the JS to
   hide meant it survived a mode change and sat there in the not out cases. */
[data-fig="fig-lbw"]:not(.mode-out) .lwOn { opacity: 0 !important; }
[data-fig="fig-lbw"].mode-leg .lwPleg,
[data-fig="fig-lbw"].mode-off .lwPoff,
[data-fig="fig-lbw"].mode-out .lwPout { opacity: 1; }
[data-fig="fig-lbw"].mode-leg .lwLleg,
[data-fig="fig-lbw"].mode-off .lwLoff { stroke: var(--green); }
[data-fig="fig-lbw"].mode-out .lwLout { stroke: var(--red); }

/* Bowling Fig 6: the length bands in metres, from the bowler's side. */
.lnStump { stroke: var(--ink); }
.lnTick { stroke: var(--ink-faint); }
.lnBall { fill: var(--ink); }
.lnBand { fill: var(--ink-faint); opacity: .08; }
.lnName, .lnV, .lnBand { transition: opacity .35s ease; }
[data-fig="fig-lengths"].mode-full  .lnFull,
[data-fig="fig-lengths"].mode-short .lnShort { fill: var(--red); opacity: .17; }
[data-fig="fig-lengths"].mode-good  .lnGood { fill: var(--green); opacity: .17; }
[data-fig="fig-lengths"].mode-full  .lnNfull,
[data-fig="fig-lengths"].mode-short .lnNshort { fill: var(--red); }
[data-fig="fig-lengths"].mode-good  .lnNgood { fill: var(--green); }
[data-fig="fig-lengths"].mode-full  .lnPfull,
[data-fig="fig-lengths"].mode-short .lnPshort { stroke: var(--red); }
[data-fig="fig-lengths"].mode-good  .lnPgood { stroke: var(--green); }

/* Fig 9: one spinning ball, three places to put your front foot.
   Only the batter moves between modes, which is the whole point of it. */
.spCrease, .spStump { stroke: var(--ink); }
.spPitch { fill: var(--ink-faint); }
.spBat { stroke: var(--ink); fill: none; stroke-linecap: round; }
.spBall { fill: var(--ink); }
.spDanger { fill: var(--red); }
.spMan, .spVerdict, .spDanger, .spDangerT { transition: opacity .35s ease; }
[data-fig="fig-spin"].mode-fwd  .spFwd,
[data-fig="fig-spin"].mode-half .spHalf,
[data-fig="fig-spin"].mode-back .spBack { opacity: 1; }
[data-fig="fig-spin"].mode-half .spDanger { opacity: .16; }
[data-fig="fig-spin"].mode-half .spDangerT { opacity: 1; }
[data-fig="fig-spin"].mode-fwd  .spPfwd  { stroke: var(--green); }
[data-fig="fig-spin"].mode-half .spPhalf { stroke: var(--red); }
[data-fig="fig-spin"].mode-back .spPback { stroke: var(--green); }

/* ---------- Fig 9 : outswing ---------- */
.swPath { stroke: var(--blue); }
.swBall { fill: var(--red); }
.swSlip { fill: none; stroke: var(--ink); stroke-width: 2.2; transition: opacity .3s; }
.swSlipLabel, .swLate, .swLate2 { transition: opacity .3s; }

/* ---------- Fig 10 : field positions ---------- */
.fldPositions g { cursor: pointer; opacity: 0; transition: opacity .3s ease; }
.fldPositions g.shown { opacity: 1; }
.fldPositions circle { fill: var(--ink-faint); transition: fill .2s ease; }
.fldPositions text { font-size: 14px; fill: var(--ink-soft); transition: fill .2s ease; }
.fldPositions g:hover circle, .fldPositions g.on circle { fill: var(--red); }
.fldPositions g:hover text,   .fldPositions g.on text   { fill: var(--ink); }
#fldNote { min-height: 2.6em; }

/* ---------- Fig 11 : the wall ---------- */
.wlBarBad  { fill: var(--red); }
.wlBarGood { fill: var(--green); }
.wlTicks line { stroke: var(--ink-faint); stroke-width: 1.2; }
.wlTicks text { font-size: 13px; fill: var(--ink-faint); }

/* ---------- Fig: form as a bush track ---------- */
.trkPath { stroke: var(--green); transition: stroke .4s ease; }
.trkLine { stroke: var(--ink-faint); fill: none; }
.trkScrub line { stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }
.trkScrub line.on { opacity: .55; }
.trkWalker { fill: var(--ink); }
.trkZone { opacity: .28; transition: opacity .4s ease; }
.trkZone.on { opacity: 1; }

/* ---------- Fig: the bowling action ---------- */
.actPose .actFig path, .actPose .actFig circle { stroke: var(--ink-faint); transition: stroke .3s ease; }
.actPose .actLabel { fill: var(--ink-faint); transition: fill .3s ease; }
.actPose.on .actFig circle, .actPose.on .actFig path { stroke: var(--ink); }
.actPose.on .actFig .actArmF { stroke: var(--red); }
.actPose.on .actFig .actArmB { stroke: var(--teal); }
.actPose.on .actLabel { fill: var(--ink); }
.actBall { fill: var(--red); opacity: 0; transition: opacity .25s ease; }
.actPose.on .actBall { opacity: 1; }

/* ---------- Fig: the yorker band ---------- */
.ykZone { fill: color-mix(in srgb, var(--green) 26%, transparent); }
.ykBalls circle { fill: var(--ink); }
.ykBalls circle.good { fill: var(--green); }
.ykBalls circle.bad  { fill: var(--red); }
.ykBalls text { font-family: var(--font-hand); font-style: italic; font-size: 15px; }
.ykScore { fill: var(--ink); }

/* ---------- Fig: running between the wickets ---------- */
.runA { fill: var(--red); }
.runB { fill: var(--blue); }
.runALabel, .runBLabel { fill: var(--ink-faint); }
.runBeat { fill: var(--red); }

/* ---------- Fig: keeper up or back ---------- */
.kpFig { transition: transform .55s cubic-bezier(.3,.8,.4,1); }
.kpGlove { stroke: var(--green); fill: var(--paper-card); }
.kpBall { fill: var(--red); }
.kpTitle { fill: var(--ink); }

/* teal-railed idea card, to match the bowling accents */
.idea--teal { border-left-color: var(--teal); }

/* keeper: both are drawn, the chosen one comes forward */
.kpFig { opacity: .3; transition: opacity .35s ease; }
.kpFig.on { opacity: 1; }
.kpFig .kpArm { stroke: var(--ink); fill: none; }
.kpFig[data-kp="up"].on .kpArm, .kpFig[data-kp="up"].on .kpGlove { stroke: var(--green); }
.kpFig[data-kp="back"].on .kpArm, .kpFig[data-kp="back"].on .kpGlove { stroke: var(--blue); }
.kpGlove { stroke: var(--ink); fill: var(--paper-card); }
.kpTag { fill: var(--ink-faint); }
.kpFig.on .kpTag { fill: var(--ink); }
.ykLast { fill: var(--ink-soft); }

/* ---------- Fig 5: where the bat travels, from above ---------- */
.opStump { fill: var(--ink); }
.opFoot  { fill: none; stroke: var(--ink); stroke-width: 2; }
.opHead  { fill: var(--paper); stroke: var(--ink); stroke-width: 2.2; }
.opLine  { stroke: var(--ink-faint); }
.opBall  { fill: var(--red); }
.opPanel[data-side="open"]   .opOut { stroke: var(--red); }
.opPanel[data-side="sideon"] .opOut { stroke: var(--green); }
.opCross { fill: var(--red); }
.opCrossT, .opOutT, .opVerdict, .opCross { transition: opacity .3s ease; }

/* ---------- Fig 6: the gate ---------- */
.gtStump { stroke: var(--ink); }
.gtPad   { fill: var(--paper-2); stroke: var(--ink); }
/* Both bat positions are drawn with real coordinates and swapped by opacity
   rather than rotated in CSS. The gate polygon has to match the bat's edge
   exactly, and a transform makes that a guess. */
.gtBatBad, .gtBatGood { fill: none; transition: opacity .35s ease; }
.gtBatBad  { stroke: var(--red); }
.gtBatGood { stroke: var(--green); }
[data-fig="fig-gate"] .gtBatBad, [data-fig="fig-gate"] .gtBatGood { opacity: 0; }
[data-fig="fig-gate"].mode-bad  .gtBatBad  { opacity: 1; }
[data-fig="fig-gate"].mode-good .gtBatGood { opacity: 1; }
.gtGate  { fill: var(--red); opacity: 0; transition: opacity .35s ease; }
.gtGateT, .gtGateLead { opacity: 0; transition: opacity .35s ease; }
[data-fig="fig-gate"].mode-bad .gtGate { opacity: .2; }
[data-fig="fig-gate"].mode-bad .gtGateT, [data-fig="fig-gate"].mode-bad .gtGateLead { opacity: 1; }
.gtBall  { fill: var(--red); }
[data-fig="fig-gate"].mode-bad  .gtPathBad  { stroke: var(--red); }
[data-fig="fig-gate"].mode-good .gtPathGood { stroke: var(--green); }
.gtVerdict, .gtSub { transition: opacity .3s ease; }
[data-fig="fig-gate"].mode-bad  .gtVerdict { fill: var(--red); }
[data-fig="fig-gate"].mode-good .gtVerdict { fill: var(--green); }
[data-fig="fig-gate"].mode-bad  .gtStump { stroke: var(--red); }

/* ------------------------------------------------------------------
   Fig - the band a bowler can safely aim at

   The band is a plain <rect> whose y and height are tweened, not a
   scaled group: a transform would stretch the stroke and the corner
   radius with it, and the whole point of the figure is that you read
   the band's depth off the metre scale beside it.
   ------------------------------------------------------------------ */
.bdScale line { stroke: var(--ink-faint); stroke-width: 1.2; }
.bdScale text { fill: var(--ink-faint); }
.bdBand { fill: color-mix(in srgb, var(--amber) 34%, transparent);
          stroke: var(--amber); stroke-width: 1.6; }
[data-fig="fig-band"].mode-both .bdBand { fill: color-mix(in srgb, var(--green) 26%, transparent);
                              stroke: var(--green); }
.bdNum { font-size: 30px; font-weight: 600; fill: var(--amber); }
[data-fig="fig-band"].mode-both .bdNum { fill: var(--green); }
.bdMetres { fill: var(--ink-soft); }
.bdCap, .bdCap2 { transition: opacity .3s ease; }
[data-fig="fig-band"].mode-both .bdCap  { opacity: 0; }
[data-fig="fig-band"].mode-both .bdCap2 { opacity: 1; }
.bdBall { fill: var(--ink-faint); transition: fill .3s ease; }
.bdShot.hit .bdBall { fill: var(--red); }
.bdOut { fill: var(--ink-faint); transition: fill .3s ease; }
.bdShot.hit .bdOut { fill: var(--red); font-weight: 600; }
.bdVerdict { fill: var(--ink-soft); transition: opacity .3s ease; }
[data-fig="fig-band"].mode-both .bdVerdict { fill: var(--green); font-weight: 600; }