/* Positioning for the scratch-off countdown panels -- see
   /js/scratch-reveal.js. A design's own stylesheet sizes and colours
   .scratch-tick / .scratch-tick-n / .scratch-tick-w; this only places the
   canvas each one is scratched off, and the confetti canvas over the whole
   clock, so neither has to be repeated per design. */

.scratch-clock { position: relative; }

.scratch-tick { position: relative; overflow: hidden; }

.scratch-rub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  border-radius: inherit;
  transition: opacity 480ms ease;
}

.scratch-clock.is-rubbed .scratch-rub { opacity: 0; pointer-events: none; }

.scratch-burst {
  position: absolute;
  inset: -40% -20%;
  width: 140%;
  height: 180%;
  pointer-events: none;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .scratch-rub { transition: none; }
}

/* While there is still something to scratch, a finger on the clock scratches
   rather than scrolls -- the whole clock is the scratching surface now, not
   only the panels (see /js/scratch-reveal.js). */
.scratch-clock:not(.is-rubbed) { touch-action: none; }
/* Scratching is a drag across text; it must not select the numbers. */
.scratch-clock { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }