/* build 84efa6d · main · 2026-09-06T09:14:24Z · 04722def */
/* The sponsor board: the client's own page render, with invisible hit targets. */

.board {
  position: absolute;
  inset: 0;
}

.board__render {
  width: 100%;
  height: 100%;
  object-fit: fill;   /* the render IS the page, so it maps 1:1 by construction */
}

.board__targets { position: absolute; inset: 0; }

/* One transparent button per mark, positioned in page units from layout.json.
 *
 * The hit area is inflated by --touch-pad beyond the mark's own rect: a 138pt
 * logo on a 50" panel is a small target for a thumb. The padding grows the
 * button, never the artwork — the visible mark stays exactly where the client
 * put it, because the artwork is in the render underneath and this element
 * draws nothing. */
.board__target {
  position: absolute;
  background: transparent;
  border-radius: calc(var(--u) * 8);
  transition: transform 90ms ease-out, background-color 90ms ease-out;
}

/* Press feedback. Deliberately understated: a big flashy state competes with
   the celebration that is about to run. */
.board__target:active,
.board__target[data-pressed] {
  transform: scale(0.965);
  background-color: rgb(0 0 0 / 0.055);
}

@media (prefers-reduced-motion: reduce) {
  .board__target { transition: none; }
  .board__target:active, .board__target[data-pressed] { transform: none; }
}

/* Attract mode: a slow shimmer travelling across the marks, inviting a touch.
   Transform and opacity only, so it stays on the compositor. */
.board--attract .board__target {
  animation: board-attract 2.4s ease-in-out var(--attract-delay, 0s) infinite;
}
@keyframes board-attract {
  0%, 88%, 100% { transform: scale(1);     opacity: 1; }
  94%           { transform: scale(1.035); opacity: .82; }
}
@media (prefers-reduced-motion: reduce) {
  .board--attract .board__target { animation: none; }
}