/* The bike hero: two line drawings (chopper and flat tracker) with clickable parts. Built in /hero-lab, drawings in hero-bikes-art.js */
.stage { --red: #dc0101; --blue: #1e50c8; --head: "Bebas Neue", Impact, sans-serif; --mono: "Saira Condensed", "Arial Narrow", sans-serif;
  --bw: min(94vw, calc((100vh - 215px) / .665)); --headroom: .065;
  width: 100vw; margin-left: calc(50% - 50vw); border-bottom: 3px solid #111; }
.stage, .stage * { box-sizing: border-box; }
.stage button { margin: 0; border-radius: 0; box-shadow: none; min-height: 0; }
html { overflow-x: clip; }
.bh-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 26px 0 8px; }
.bh-cta .sub { margin: 0; max-width: 60ch; }
.job.bh-flash { outline: 5px solid var(--bh-flash, #dc0101); outline-offset: 3px; }
  /* ---------- the hero ---------- */
  .stage { position: relative; overflow: hidden; overflow: clip; height: calc(var(--bw) * (.6 + var(--headroom)) + 64px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
    background-color: #fff; background-image: linear-gradient(#0000000d 1px, transparent 1px), linear-gradient(90deg, #0000000d 1px, transparent 1px); background-size: 40px 40px; }
  .stage.dragging { cursor: grabbing; }
  .ground { position: absolute; left: 0; right: 0; bottom: calc(64px + var(--bw) * .004); border-top: 2px solid #111; }
  /* a rig = a bike and its title; both rigs sit on the same ground line and slide sideways together */
  .rig { position: absolute; left: 0; bottom: 64px; width: var(--bw); transform: translateX(calc(var(--pos) + var(--drag, 0px)));
    transition: transform .8s cubic-bezier(.7, 0, .2, 1), opacity .5s ease; will-change: transform; }
  .stage.dragging .rig, .stage.dragging .title { transition: none; }
  .rig svg { display: block; width: 100%; height: auto; overflow: visible; }
  .rig.chopper { --pos: min(0px, calc(50vw - var(--bw))); }                              /* front half showing on the left */
  .rig.tracker { --pos: max(calc(100vw - var(--bw)), 50vw); }                       /* rear half showing on the right */
  .stage[data-view="chopper"] .rig.chopper, .stage[data-view="tracker"] .rig.tracker { --pos: calc(50vw - var(--bw) * .5); }
  .stage[data-view="chopper"] .rig.tracker { --pos: calc(100vw + var(--bw) * .06); }
  .stage[data-view="tracker"] .rig.chopper { --pos: calc(var(--bw) * -1.06); }
  /* wide screens: the other bike's wheel peeks in at the edge */
  @media (min-width: 761px) and (min-aspect-ratio: 5/4) {
    .stage[data-view="chopper"] .rig.tracker { --pos: calc(100vw - var(--bw) * .10); }
    .stage[data-view="tracker"] .rig.chopper { --pos: calc(var(--bw) * -.90); }
  }
  .stage[data-view="chopper"] .rig.tracker svg, .stage[data-view="tracker"] .rig.chopper svg { opacity: .45; transition: opacity .5s; }

  .title { position: absolute; top: calc(var(--bw) * var(--headroom) * -1 + 12px); z-index: 4; font: 400 calc(var(--bw) * .062)/.9 var(--head); letter-spacing: .01em; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer;
    transition: left .8s cubic-bezier(.7, 0, .2, 1), right .8s cubic-bezier(.7, 0, .2, 1), transform .8s cubic-bezier(.7, 0, .2, 1); }
  .title small { display: block; font: 700 calc(var(--bw) * .015 + 4px) var(--mono); letter-spacing: .1em; color: #111; margin-top: .25em; text-transform: uppercase; }
  /* each title keeps to its own corner of the screen wherever its bike is, so the other bike's title stays in view */
  .rig.chopper .title { left: calc(3.5vw - var(--pos)); color: var(--red); text-align: left; transform-origin: 0 0; }
  .rig.tracker .title { right: calc(var(--bw) + var(--pos) - 96.5vw); color: var(--blue); text-align: right; transform-origin: 100% 0; }
  .stage[data-view="chopper"] .rig.tracker .title, .stage[data-view="tracker"] .rig.chopper .title { transform: scale(.5); opacity: .6; }
  .title { transition-property: left, right, transform, opacity; }
  /* once a bike is fully in, its title sits in the middle */
  .stage[data-view="chopper"] .rig.chopper .title { left: 50%; transform: translateX(-50%); text-align: center; }
  .stage[data-view="tracker"] .rig.tracker .title { right: 50%; transform: translateX(50%); text-align: center; }
  .stage:not([data-view="both"]) .title small { visibility: hidden; }
  .bhtag { position: absolute; left: 50%; top: 3.5%; transform: translateX(-50%); margin: 0; font: 700 clamp(12px, 1.25vw, 17px) var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: center; line-height: 1.7; transition: opacity .3s; pointer-events: none; }
  .bhtag br { display: none; }
  .stage:not([data-view="both"]) .bhtag { opacity: 0; }
  .foot { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 14px; font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #555; }
  .dots { display: flex; gap: 8px; } .dots button { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #111; background: #fff; padding: 0; cursor: pointer; }
  .dots button.on { background: #111; } .dots button[data-go="chopper"].on { background: var(--red); border-color: var(--red); } .dots button[data-go="tracker"].on { background: var(--blue); border-color: var(--blue); }

  /* ---------- the drawings: one vector path per bike; each part is that path seen through the part's own outline ---------- */
  .rig.chopper svg { color: var(--red); --wash: #fff1f1; --tint: #fbd0d0; } .rig.tracker svg { color: var(--blue); --wash: #eef3fe; --tint: #cfdcf9; }
  .rig svg .ink { fill: currentColor; fill-rule: evenodd; stroke: none; transition: stroke-width .15s; }
  .part { cursor: pointer; outline: none; }
  .part .wash { fill: transparent; transition: fill .18s; }                 /* the whole drawing is one strength; a part is shaded when hovered */
  .occ { fill: #fff; }                                                      /* forks, pipes and frame in front of the wheels */
  .wheel { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; transition: transform .8s cubic-bezier(.7, 0, .2, 1); }
  .wheel .thin { stroke-width: 4; } .wheel .spoke { stroke-width: 3; } .wheel .hub { fill: none; }
  .stage.dragging .wheel { transition: none; }
  .probe { position: absolute; left: 0; top: 0; width: 0; height: 0; margin-left: var(--pos); }
  .part .hit { fill: transparent; pointer-events: all; }
  .bgpart .hit { fill: transparent; pointer-events: all; cursor: pointer; }
  .part.hot .wash, .part.pin .wash { fill: var(--tint); }
  /* the part names float loosely round the bike, each with a fine line to its part; click one to shade its part (click again to clear) */
  .plabel { position: absolute; left: 0; top: 0; z-index: 3; font: 700 calc(var(--bw) * .0105 + 3px) var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; will-change: transform;
    background: none; border: 1px solid currentColor; padding: 3px 7px; cursor: pointer; opacity: .7; transition: opacity .15s, background .15s, color .15s; }
  .rig.chopper .plabel { color: var(--red); } .rig.tracker .plabel { color: var(--blue); }
  .plabel:hover { opacity: 1; }
  .rig .plabel.on { opacity: 1; color: #fff; } .rig.chopper .plabel.on { background: var(--red); border-color: var(--red); } .rig.tracker .plabel.on { background: var(--blue); border-color: var(--blue); }
  .rig svg.leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
  .leaders line { stroke: currentColor; stroke-width: 1; opacity: .5; transition: opacity .15s; } .leaders circle { fill: currentColor; opacity: .55; transition: opacity .15s; }
  .plabel.big { font-size: calc(var(--bw) * .0135 + 4px); padding: 4px 9px; border-width: 2px; opacity: .85; }
  .sil { fill: transparent; transition: fill .18s; pointer-events: none; mix-blend-mode: multiply; } svg.all .sil { fill: var(--tint); }
  .leaders .on { opacity: 1; } .leaders line.on { stroke-width: 1.5; }
  .stage[data-view="chopper"] .rig.tracker .plabel, .stage[data-view="tracker"] .rig.chopper .plabel, .stage[data-view="chopper"] .rig.tracker .leaders, .stage[data-view="tracker"] .rig.chopper .leaders { display: none; }
  .stage.dragging .plabel { pointer-events: none; }
  .label { position: absolute; z-index: 4; transform: translate(-50%, -100%); font: 700 17px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #fff; padding: 7px 12px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; border: 0; }
  .label.show { opacity: 1; } .label.tap { pointer-events: auto; cursor: pointer; }
  .label.chopper { background: var(--red); } .label.tracker { background: var(--blue); }

  /* ---------- stand-in for the rest of the page ---------- */
  @media (max-width: 760px) {
    .stage { --bw: 96vw; --headroom: .2; }
    .bhtag { display: none; } .title { font-size: calc(var(--bw) * .072); }
    .rig.chopper { --pos: calc(var(--bw) * -.5); } .rig.tracker { --pos: calc(100vw - var(--bw) * .5); } .title small { font-size: 11px; }
    .rig svg .ink { stroke: currentColor; stroke-width: 2; } .wheel { stroke-width: 8; } .wheel .thin { stroke-width: 5; } .wheel .spoke { stroke-width: 4; }
    
  }
  @media (prefers-reduced-motion: reduce) { .rig, .title, .wheel { transition: none; } }

.bh-cta .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .bh-cta .ctas .btn { margin: 0; }

/* ---------- the third bike (a second flat tracker): one more step to the right. It shares the flat tracker's colours ---------- */
.stage .rig.tracker.tracker2 { --pos: calc(100vw + var(--bw) * .3); }
.stage[data-view="tracker"] .rig.tracker.tracker2 { --pos: calc(100vw + var(--bw) * .06); }
.stage[data-view="tracker2"] .rig.tracker.tracker2 { --pos: calc(50vw - var(--bw) * .5); }
.stage[data-view="tracker2"] .rig.tracker:not(.tracker2) { --pos: calc(var(--bw) * -1.06); }
.stage[data-view="tracker2"] .rig.chopper { --pos: calc(var(--bw) * -2.3); }
@media (min-width: 761px) and (min-aspect-ratio: 5/4) {
  .stage[data-view="tracker"] .rig.tracker.tracker2 { --pos: calc(100vw - var(--bw) * .10); }
  .stage[data-view="tracker2"] .rig.tracker:not(.tracker2) { --pos: calc(var(--bw) * -.90); }
}
.stage[data-view="tracker"] .rig.tracker2 svg, .stage[data-view="tracker2"] .rig.tracker:not(.tracker2) svg { opacity: .45; transition: opacity .5s; }
.stage[data-view="tracker2"] .rig.tracker2 svg { opacity: 1; }
/* titles: the centred bike's in the middle, its neighbours' small in the corners, the rest hidden */
.stage .rig.tracker.tracker2 .title { right: calc(var(--bw) + var(--pos) - 96.5vw); transform: scale(.5); transform-origin: 100% 0; text-align: right; opacity: 0; pointer-events: none; }
.stage[data-view="tracker"] .rig.tracker.tracker2 .title { opacity: .6; pointer-events: auto; }
.stage[data-view="tracker2"] .rig.tracker.tracker2 .title { right: 50%; transform: translateX(50%); text-align: center; opacity: 1; pointer-events: auto; }
.stage[data-view="tracker2"] .rig.tracker:not(.tracker2) .title { right: auto; left: calc(3.5vw - var(--pos)); transform: scale(.5); transform-origin: 0 0; text-align: left; opacity: .6; }
.stage[data-view="tracker2"] .rig.chopper .title { opacity: 0; pointer-events: none; }
.stage:not([data-view="tracker2"]) .rig.tracker2 .plabel, .stage:not([data-view="tracker2"]) .rig.tracker2 .leaders,
.stage[data-view="tracker2"] .rig:not(.tracker2) .plabel, .stage[data-view="tracker2"] .rig:not(.tracker2) .leaders { display: none; }
.dots button[data-go="tracker2"].on { background: var(--blue); border-color: var(--blue); }