/* Shared by every illustration (templates/art/*.php): the colour classes the SVGs use,
   the interactive bumpers, the drifting sparks and the click bursts. Loaded on every page
   that has a section with art (see PageMeta::stylesheets). */

/* ---------- art palette: k-* classes inside the frozen SVGs ---------- */
.k-shadow { fill: var(--kv-shadow); } .k-dark { fill: var(--kv-dark); } .k-panel { fill: var(--kv-panel); }
.k-red { fill: var(--color-accent); } .k-red2 { fill: var(--kv-red-2); } .k-red-hi { fill: var(--kv-red-hi); }
.k-cream { fill: var(--color-ink); } .k-cream3 { fill: var(--kv-cream-3); } .k-cream-hi { fill: var(--kv-cream-hi); }
.k-steel1 { fill: var(--kv-steel-1); } .k-steel2 { fill: var(--kv-steel-2); } .k-steel3 { fill: var(--kv-steel-3); }
.k-accent { fill: var(--color-cream-red); } .k-ochre { fill: var(--color-ochre); } .k-paper-c { fill: var(--color-cream); }
.k-line-dark { stroke: var(--kv-dark); } .k-line-red { stroke: var(--color-accent); } .k-line-red2 { stroke: var(--kv-red-2); }
.k-line-cream { stroke: var(--color-ink); } .k-line-cream3 { stroke: var(--kv-cream-3); }
.k-line-steel1 { stroke: var(--kv-steel-1); } .k-line-steel2 { stroke: var(--kv-steel-2); }
.k-line-red-hi { stroke: var(--kv-red-hi); }

/* ---------- bumpers: light up as the pointer comes near (--near, 0 to 1, set by bumpers.js), pop when hit ---------- */
.kv-bumper { --near: 0; }
[data-bumper-field] .kv-bumper { pointer-events: auto; cursor: pointer; }
.b-lit { opacity: var(--near); }
.b-cap { transform-box: fill-box; transform-origin: 50% 100%; }
.b-wave { opacity: 0; transform-box: fill-box; transform-origin: center; }
.kv-bumper.is-hit .b-lit { opacity: 1; }

/* ---------- sparks (sparks.js) and bursts (effects.js): four-point stars ---------- */
.sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.spark { position: absolute; width: var(--s, 14px); height: var(--s, 14px); opacity: var(--o, 0.8); }
.spark svg, .burst svg { width: 100%; height: 100%; fill: var(--c, var(--color-ink)); }
.burst {
  position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none;
  /* centred on the click point */
  width: var(--s, 16px); height: var(--s, 16px); margin: calc(var(--s, 16px) / -2) 0 0 calc(var(--s, 16px) / -2);
}

/* ---------- stars drawn into the illustrations (.kv-star): a slow, small twinkle ---------- */
.kv-star { transform-box: fill-box; transform-origin: center; }

/* ---------- arrow lamps (.kv-lamp): they light up one after another, bottom to top ---------- */
/* Each lit arrow gets a bright copy on top and a blurred glow behind it (SVG filter). Both are
   invisible at rest, so without animation the arrows look exactly as drawn. */
.kv-lamp { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .kv-star { animation: kv-twinkle 3.6s var(--ease-in-out) var(--tw-delay, 0s) infinite; }
  /* --lamp-i: 0 for the bottom arrow, 1 for the next … each one lights 160 ms after the one below */
  .kv-lamp { animation: kv-lamp 3.2s var(--ease-out) calc(var(--lamp-i, 0) * 160ms) infinite; }
  /* nothing to animate while the picture is off screen (set by sparks.js / pinball-game.js) */
  .is-offscreen .kv-star, .is-offscreen .kv-lamp { animation-play-state: paused; }

  .spark { animation: drift var(--d, 18s) var(--ease-in-out) var(--delay, 0s) infinite alternate; }
  .spark svg { animation: twirl calc(var(--d, 18s) * 0.75) linear infinite; }
  /* paused while off screen */
  .is-offscreen .spark, .is-offscreen .spark svg { animation-play-state: paused; }

  .kv-bumper .b-lit { transition: opacity 180ms var(--ease-out); }
  .kv-bumper .b-cap { transform: translateY(calc(var(--near) * -2%)); transition: transform 180ms var(--ease-out); }
  .kv-bumper.is-hit .b-cap { animation: pop 420ms var(--ease-out); }
  .kv-bumper.is-hit .b-wave { animation: wave 700ms var(--ease-out); }
  .burst { animation: burst 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
}

@keyframes kv-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.78) rotate(12deg); opacity: 0.7; } }
/* per round of 3.2 s: on in 0.14 s, hold until 0.72 s, faded out at 1.34 s, then dark until the next round */
@keyframes kv-lamp { 0% { opacity: 0; } 4.4%, 22.5% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 40px), var(--dy, 120px)); } }
@keyframes twirl { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: translateY(7%) scaleY(0.9); } 45% { transform: translateY(-3%); } 100% { transform: translateY(calc(var(--near) * -2%)); } }
@keyframes wave { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(0.5); }
}