/* scratch.css -- the date plate's scratch-off cover (PSD "Group 4", hidden in the PSD). */
.scratch {
  position: absolute;
  touch-action: none;
  cursor: grab;
  transition: opacity 0.7s ease, transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  border-radius: calc(30 * var(--u));
}
.scratch:active { cursor: grabbing; }
/* dissolve: fade + a small lift, as if the foil let go */
.scratch.is-done { opacity: 0; transform: scale(1.035); pointer-events: none; }

/* Entrance: until the scene is entered the cover stays hidden, so it never pops in
   ahead of the card it sits on. scratch.js then fades it in (WAAPI). Motion only. */
html.motion [data-scene="scratch"]:not(.is-entered) .scratch { opacity: 0; transition: none; }

/* Countdown numbers: inline-block so the lock "settle" scale applies to the run span
   (a transform does nothing on a plain inline box). Baseline is unchanged. */
[data-countdown] {
  display: inline-block;
  transform-origin: 50% 60%;
}

/* Overlays sitting exactly on the scratch rect (cover sheen, plate foil sweep, dust).
   Clipped to the cover's rounded shape; only the inner bar's transform animates. */
.scratch-fx {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  border-radius: calc(33 * var(--u));
  clip-path: inset(0 round calc(33 * var(--u)));
  isolation: isolate;
}
.scratch-fx > i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 252, 238, 0.62) 50%, transparent 100%);
}
.scratch-fx--foil > i {
  width: 46%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(234, 192, 104, 0.6) 38%,
    rgba(255, 249, 226, 0.95) 50%,
    rgba(234, 192, 104, 0.6) 62%,
    transparent 100%
  );
}

.scratch-dust {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u));
  border-radius: 50%;
  background: #e6c36a;
  box-shadow: 0 0 calc(7 * var(--u)) rgba(232, 190, 90, 0.85);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scratch { transition: none; }
  .scratch.is-done { transform: none; }
  .scratch-fx, .scratch-dust { display: none; }
}