/* Ghost example on the empty plate (14 Nov). In use in the preview (index.html loads it with ghost-example.js).
   Each round: every tile fades in from left to right, a faint random letter or number or the bar of a blank
   (unknown) tile, whichever it is; they hold, fade out from left to right the same way, and the next round
   puts a new mix in new places. ghost-example.js runs the rounds by setting these attributes:
     data-ghost="K"   on a tile that shows a ghost letter (::before)
     data-ghost-bar   on a blank tile that shows its bar (::after, the same "_" as the normal placeholder)
     .ghost-on        fades that tile's letter or bar in; taking it off fades it out
     --ghost-delay    the left-to-right stagger, by the tile's place (fading in and out)
   It stops for good as soon as the plate is touched. Off under prefers-reduced-motion (rule in site.css). */

/* While the ghost plays it draws every tile's bar itself, so the normal placeholders are hidden. */
.plate-input--ghost .cell__input::placeholder { color: transparent; }

.plate-input--ghost .cell[data-ghost]::before,
.plate-input--ghost .cell[data-ghost-bar]::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-plate);
  font-weight: 700;
  font-size: calc(var(--tile) * 1.15);
  font-stretch: 78%;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 450ms ease var(--ghost-delay, 0s);
}
.plate-input--ghost .cell[data-ghost]::before { content: attr(data-ghost); color: var(--plate-ink); }
.plate-input--ghost .cell[data-ghost-bar]::after { content: "_"; color: rgb(0 0 0 / 0.2); }   /* as .cell__input::placeholder */

.plate-input--ghost .cell[data-ghost].ghost-on::before { opacity: 0.35; }
.plate-input--ghost .cell[data-ghost-bar].ghost-on::after { opacity: 1; }