/* "What's your typical job?" picker. Markup: section.jp in index.html; art built by assets/job-picker.js. */

.jp { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); background: var(--bg); }
.jp__head { max-width: 760px; }
.jp__head .lead { margin-top: 16px; }

.jp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 3.5vw, 40px);
}
.jp__tile {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0 0 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  overflow: hidden;
  transition: border-color .2s ease;
}
.jp__tile:hover, .jp__tile:focus-visible { border-color: var(--ink); }
.jp__tile:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 3px; }

.jp__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 240 / 110;
  background: #f6f2ea;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.jp__soil { fill: #ebe3d4; }
.jp__hatch-line { stroke: #a2937c; stroke-width: 1; }
.jp__fill { fill: rgba(40, 140, 39, .16); }
.jp__ground { fill: none; stroke: #8b8172; stroke-width: 2; stroke-linejoin: round; }
.jp__design {
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.jp__design--tile { stroke-width: 5; }
.jp__edge { opacity: 0; }
.jp__edge-dot { fill: var(--brand-orange); }
.jp__shank { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.jp__bucket { fill: var(--ink); }

/* armed: lines wait hidden until the grid scrolls in, then each tile runs one pass */
.jp__grid.is-armed .jp__tile:not(.is-run) .jp__design { stroke-dashoffset: 1; }
/* one pass: the design draws in behind the moving edge */
.jp__tile.is-run .jp__design { animation: jp-draw 1.7s cubic-bezier(.45, 0, .3, 1) both; }
.jp__tile.is-run .jp__edge { animation: jp-edge 1.7s linear both; }
@keyframes jp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes jp-edge { 0% { opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }

.jp__name, .jp__line, .jp__kits { padding: 0 16px; }
.jp__name { font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; }
.jp__line { margin-top: 5px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); flex: 1; }
.jp__kits { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.jp__kits i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1ebe0;
  color: var(--ink);
}
.jp__kits i.is-dig { background: #fdf1d3; }
.jp__go {
  position: absolute; right: 14px; top: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 15px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.jp__tile:hover .jp__go, .jp__tile:focus-visible .jp__go { opacity: 1; transform: none; }

.jp__foot { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); max-width: 760px; }
.jp__foot a { white-space: nowrap; }

@media (max-width: 1100px) { .jp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .jp__grid { grid-template-columns: 1fr; gap: 10px; }
  .jp__tile { display: grid; grid-template-columns: 42% 1fr; column-gap: 12px; padding: 0; align-items: center; }
  .jp__art { grid-row: 1 / span 3; height: 100%; aspect-ratio: auto; margin: 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .jp__name, .jp__line, .jp__kits { padding: 0 12px 0 0; }
  .jp__name { padding-top: 12px; font-size: 17px; }
  .jp__line { font-size: 13.5px; }
  .jp__kits { padding-bottom: 12px; margin-top: 8px; }
  .jp__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jp__tile.is-run .jp__design, .jp__tile.is-run .jp__edge { animation: none; }
}

/* grade breaks, soil moving across, the excavator bucket */
.jp__break { fill: #fff; stroke: var(--brand-green); stroke-width: 2; opacity: 1; transition: opacity .3s ease; }
.jp__grid.is-armed .jp__break:not(.is-on) { opacity: 0; }
.jp__soil-bit { fill: #8a6f55; }
.jp__stick { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; fill: none; }
/* terrace / levee: driving along it, the cut empties and the berm or levee fills */
.jp__grid.is-armed .jp__art--transfer .jp__fill { opacity: 0; }
.jp__tile.is-run .jp__art--transfer .jp__fill { animation: jp-fill 1.7s ease .3s both; }
.jp__tile.is-run .jp__art--transfer .jp__cut { animation: jp-empty 1.7s ease .1s both; }
@keyframes jp-fill { from { opacity: 0; } to { opacity: 1; } }
@keyframes jp-empty { from { opacity: 1; } to { opacity: .18; } }
@media (prefers-reduced-motion: reduce) {
  .jp__tile.is-run .jp__art--transfer .jp__fill, .jp__tile.is-run .jp__art--transfer .jp__cut { animation: none; }
}

/* dug-out ground becomes open air (terrace channel, levee borrow, excavator trench) */
.jp__air { fill: #f6f2ea; }
.jp__grid.is-armed .jp__art--transfer .jp__air { opacity: 0; }
.jp__tile.is-run .jp__art--transfer .jp__air { animation: jp-fill 1.5s ease .15s both; }
@media (prefers-reduced-motion: reduce) { .jp__tile.is-run .jp__art--transfer .jp__air { animation: none; } }
.jp__stick-cyl { stroke: #8b8172; stroke-width: 2; stroke-linecap: round; fill: none; }
.jp__pin { fill: #f6f2ea; }

/* the excavator on the bank (DIG yellow body, ink arms) */
.jp__exc-track { fill: var(--ink); }
.jp__exc-roller { fill: #5a524a; }
.jp__exc-body { fill: var(--brand-yellow); stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.jp__exc-glass { fill: #2b2620; }
.jp__exc-boom { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; }
.jp__exc-stick { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }