/* ============================ THE DRILL ============================
   The bit, its animation and the cut it leaves. Paired with drillbit.js, which
   owns the one drawing and the one set of timings.

   ORDER MATTERS. This is file 9 of 10 and the cascade is the order
   pages/app.html links them in:
     base.css · layout.css · board.css · screens.css · home.css · editor.css · helper.css · panels.css · drill.css · class.css
   Later files override earlier ones on purpose. Moving a rule between files
   without keeping that order is how a Chinese override or a `won` state
   quietly stops applying. */

/* ============================ THE DRILL ============================
   Same vocabulary as the rest of the board: chunky ink-outlined slabs, warm
   dust, nothing glowing in the dark. The rig is ONE overlay spanning BOLTZ's
   square and the rock square, rotated about BOLTZ's tile centre, so all four
   headings are the same drawing.

   Ordinary rock breaks and becomes ground; bedrock (.hard) rings and throws
   sparks — the bounce rules are at the end.
*/
/* ONE bit, built by drillbit.js and used by the board and the intro card. The
   rig positions and rotates it; everything below is the bit itself, so the two
   cannot drift apart again. */
.drillrig{position:absolute;z-index:6;pointer-events:none}
.drillrig svg{display:block;width:100%;height:100%;overflow:visible}
.d-shaft{fill:#eef0f4;stroke:var(--ink);stroke-width:3}
.d-mount{fill:#5b626d;stroke:var(--ink);stroke-width:2.6}
.d-tip{fill:var(--terracotta);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
/* the flights. They are straight bands sliding DOWN the shaft under a clip --
   which is exactly what a turning auger looks like from above, and costs one
   keyframe instead of a 3D helix. */
/* The flutes were four LEVEL rungs sliding down a clipped shaft -- read
   literally that is a ladder, and nothing about a horizontal band says the
   thing is turning. A helix seen side-on is a set of SLANTED bands, and the
   slant is the only cue that it rotates rather than slides. It has to be
   skewY: skewX slides a horizontal line along itself and leaves it level.
   The skew is repeated in the keyframes because `transform` in a keyframe
   REPLACES the transform, it does not add to it -- without it the bit
   un-skewed itself the moment it started cutting. */
.d-flute{stroke:#98a0ad;stroke-width:3.4;stroke-linecap:round;fill:none;
  transform-box:fill-box;transform-origin:center;transform:skewY(-22deg)}
.d-bit.cutting .d-flute{animation:dflute .17s linear infinite}
@keyframes dflute{  /* one flute gap */
  from{transform:translateY(-6px) skewY(-22deg)}
  to  {transform:translateY(0)    skewY(-22deg)}}

/* the bit itself: tucked under the plow, out, hammering, then away again.
   --tuck is the distance back to "hidden behind the plow", in user units,
   so it scales with the board like everything else in the SVG. */
/* THE CARD'S MOTION, not a second reading of it. The card deploys with a short
   ease-out, jitters steadily while the bit is in, and eases back; the board used
   to run a scripted hammer with discrete beats and a lurch on break, which read
   as a different tool doing a different job. Driven by classes from drillFX so
   the two timelines are the same three phases. */
.d-bit{opacity:0;transform:translateY(var(--tuck));
  transition:opacity .16s,transform .26s ease-out}   /* RETRACT in drillbit.js */
.d-bit.out{opacity:1;transform:translateY(0)}
.d-bit.out.cutting{animation:dbitwork .1s linear infinite}
@keyframes dbitwork{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}

/* BOLTZ braces. `translate`, not `transform` -- paintRover owns transform
   (position + heading) and the two must not fight. --kx/--ky are the heading
   as a unit vector, so he judders along the axis he is pushing on. */
#rover.bracing,#dRover.bracing,.drov.bracing{animation:dbrace .1s linear infinite}
@keyframes dbrace{
  0%,100%{translate:0 0}
  50%{translate:calc(var(--kx,0)*1.6px) calc(var(--ky,0)*1.6px)}
}

/* the rock rattles, then gives */
.tile.cracking,.dtrack i.cracking{animation:drattle .09s linear infinite}
@keyframes drattle{0%,100%{translate:0 0}25%{translate:1.4px -1px}75%{translate:-1.4px 1px}}
.tile.breaking,.dtrack i.breaking{animation:dbreak .16s ease-out}
@keyframes dbreak{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* debris: little dark shards thrown out and settling, same dust family as
   .puff so it belongs to the same weather. Named .dchip, not .chip — the
   plan badge (css/home.css) is .chip too, and drill.css loads after home.css
   in the cascade, so the shared name was silently overriding the badge's
   layout (position:absolute, 9px square) on the hub screen. */
.dchip{position:absolute;width:9px;height:9px;border-radius:1px 3px 1px 3px;z-index:7;pointer-events:none;
  /* basalt, not the warm brown they used to be: they come off a blue-grey
     boulder, so each shard gets a lit face and a dark face on the same diagonal
     the rock's own facets use. Angular, because a shard is not a pebble. */
  background:linear-gradient(138deg,#8d94a2 0 46%,#565c68 46%);
  box-shadow:0 1px 2px -1px rgba(20,22,26,.55);
  animation:dchip .55s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes dchip{
  0%  {transform:translate(0,0) scale(1) rotate(0)}
  70% {opacity:1}
  100%{transform:translate(var(--ax,0),var(--ay,0)) scale(.55) rotate(var(--sp,60deg));opacity:0}
}
.puff.big{background:rgba(186,164,148,.62);z-index:7}

/* ---------- THE BOUNCE (bedrock) ----------
   drillbit.js bounceMoment: whirl spins the flutes after `cutting` is gone,
   clang knocks the bit back toward its mount, BOLTZ recoils, the vein rings. */
.d-bit.whirl .d-flute{animation:dflute .17s linear infinite}
.d-bit.out.clang{animation:dbitclang .42s cubic-bezier(.2,.8,.3,1)}
@keyframes dbitclang{0%{transform:translateY(0)}16%{transform:translateY(7px)}
  48%{transform:translateY(-1.2px)}100%{transform:translateY(0)}}
#rover.recoil,#dRover.recoil,.drov.recoil{animation:drecoil .46s cubic-bezier(.2,.8,.3,1)}
@keyframes drecoil{0%,100%{translate:0 0}
  22%{translate:calc(var(--kx,0)*-4px) calc(var(--ky,0)*-4px)}
  60%{translate:calc(var(--kx,0)*.8px) calc(var(--ky,0)*.8px)}}
/* the rock does not move; its whole face flashes once */
.tile.rock.hard.ringing::before,.drock .dtrack i.rk.hard.ringing::before{animation:dface .5s ease-out}
@keyframes dface{0%{filter:brightness(2.2) saturate(1.3)}100%{filter:brightness(1)}}
.dring{position:absolute;z-index:7;pointer-events:none;border-radius:50%;
  border:2px solid rgba(214,234,255,.95);box-shadow:0 0 6px rgba(160,205,255,.6);
  animation:dring .45s ease-out forwards}
@keyframes dring{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.35);opacity:0}}
/* sparks are streaks: rotated to their flight line, flown with `translate` so
   the rotation doesn't bend the path */
.spark{position:absolute;z-index:7;pointer-events:none;width:2px;height:6px;margin:-3px 0 0 -1px;
  border-radius:2px;background:linear-gradient(#fffbe6,#ffd466 60%,#ff9a3c);
  box-shadow:0 0 3px rgba(255,196,90,.85);animation:spark .36s cubic-bezier(.15,.7,.35,1) forwards}
.spark.big{width:2.5px;height:9px;margin:-4.5px 0 0 -1.25px;animation-duration:.48s}
@keyframes spark{0%{translate:0 0;opacity:1;scale:1 1.5}
  100%{translate:var(--ax,0) var(--ay,0);opacity:0;scale:.6 .5}}

@media(prefers-reduced-motion:reduce){
  .d-bit,.d-flute,.bracing,.tile.cracking,.tile.breaking,.dtrack i.cracking,.dtrack i.breaking,.dchip,.puff,
  .recoil,.ringing::before,.dring,.spark{animation:none}
}