/* scratch.css — the "scratch to reveal the date & location" coins + plate on slice 0.
 *
 * Three date coins (DD / MM / YY) and a location plate are baked into body/slice-00.
 * build.cjs places the reveal text (26 / 08 / 26, Udaipur) inside them as real HTML,
 * and a single <canvas> foil overlay (js/scratch.js) covers only the coins + plate
 * until the guest scratches it away.
 *
 * The reveal text is always in the DOM, so no-JS visitors and screen readers get the
 * date + location regardless — the foil is a purely visual gate. prefers-reduced-motion
 * skips the foil entirely (js reveals on load). */

/* revealed glyphs — .bline (centre-anchored) under the foil canvas */
.pp-coin {
  z-index: 1;
  font-variant-numeric: lining-nums;
}
.pp-plate {
  z-index: 1;
  letter-spacing: 0.05em;
}

/* foil overlay — transparent except the painted coins + plate (js) */
.pp-scratch-canvas {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto; /* re-enable inside pointer-events:none .slice-text */
  touch-action: none;   /* the canvas owns the drag gesture on touch */
  cursor: pointer;
}

.pp-scratch-canvas:focus-visible {
  outline: 3px solid #8a7138;
  outline-offset: 4px;
  border-radius: 14px;
}

/* fully scratched (or auto-revealed): foil cleared, canvas inert */
.pp-scratch-canvas.is-done {
  pointer-events: none;
  cursor: default;
}