/* Replay control — floating pill that clears the session and starts the
   visitor over at the sketch gate. Built by scripts/lib/partials.mjs, wired by
   assets/js/replay.js. */

.replay {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: var(--z-nav);

  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--cream-line);
  border-radius: var(--radius-pill);

  background: var(--cream);
  color: var(--green);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: 0 6px 20px rgb(2 28 21 / 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.replay svg { width: 1.05em; height: 1.05em; flex: none; }
.replay:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgb(2 28 21 / 0.22);
}
.replay:active { transform: translateY(0); }
.replay:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* It floats: a slow idle drift so it reads as an affordance rather than
   furniture. Two seconds of travel over six, and only a few pixels. */
@media (prefers-reduced-motion: no-preference) {
  .replay { animation: replay-float 6s ease-in-out infinite; }
  .replay:hover, .replay:focus-visible { animation-play-state: paused; }
}
@keyframes replay-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

/* The gate IS the beginning — offering to restart it there is noise. */
body:has(.gate) .replay { opacity: 0; pointer-events: none; }

/* Out of the way of the consent banner on small screens, where both sit low. */
@media (max-width: 640px) {
  .replay { padding: 0.6rem 0.75rem; }
  .replay span { display: none; }   /* icon only — the title/aria-label carries the meaning */
}