/* =============================================================================
   home-archive.css — what the Gurudev Archive says back.

   js/home-archive.js decides whether a click found the photograph the card
   asked for. A wrong one makes the card flash red and shake side to side,
   gently, and leaves the prompt as it was; a right one outlines the
   photograph in gold before the card moves on.

   The shake is on `translate`, not `transform`. The card is already placed
   with a transform (translateX(-50%) on a desktop, none on a phone, both
   with !important in places), and an animation of `transform` would replace
   that rather than add to it — the card would jump half its width sideways
   for the length of the shake. `translate` is a property of its own and
   composes with whatever transform is there.
   ========================================================================== */

/* The collage is full-screen; the card gets out of the way instead. When
   the pointer comes near it, js/home-archive.js sets its `top` to the other
   end of the wall, in pixels at both ends, and it rises (or sinks) there
   on this transition, slow to start and slow to stop. */
.void-game-card {
  transition: top .85s cubic-bezier(.65, 0, .35, 1), border-color .4s ease, box-shadow .4s ease !important;
}

.void-game-card.is-wrong { animation: vgWrong .46s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes vgWrong {
  0%   { translate: 0 0;    border-color: rgba(212, 175, 55, .42); background-color: rgba(4, 4, 4, .72); box-shadow: 0 12px 45px rgba(0, 0, 0, .4); }
  12%  { translate: -7px 0; border-color: rgba(232, 84, 72, .95);  background-color: rgba(58, 10, 8, .78); box-shadow: 0 0 0 1px rgba(232, 84, 72, .35), 0 0 34px rgba(232, 84, 72, .32); }
  30%  { translate: 6px 0; }
  48%  { translate: -4px 0; }
  66%  { translate: 2px 0;  border-color: rgba(232, 84, 72, .7);   background-color: rgba(40, 8, 6, .76); }
  84%  { translate: -1px 0; }
  100% { translate: 0 0;    border-color: rgba(212, 175, 55, .42); background-color: rgba(4, 4, 4, .72); box-shadow: 0 12px 45px rgba(0, 0, 0, .4); }
}

.void-game-card.is-right {
  border-color: rgba(246, 217, 138, .95) !important;
  box-shadow: 0 0 0 1px rgba(246, 217, 138, .4), 0 0 40px rgba(232, 190, 90, .35) !important;
}

/* the photograph that was found */
.void-found {
  position: absolute; z-index: 5; pointer-events: none;
  border: 2px solid rgba(246, 217, 138, .95); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 26px rgba(232, 190, 90, .55), inset 0 0 22px rgba(232, 190, 90, .25);
  opacity: 0;
}
.void-found.is-on { animation: vgFound 1.3s ease-out both; }
@keyframes vgFound {
  0%   { opacity: 0; scale: 1.06; }
  18%  { opacity: 1; scale: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

/* the prompt changing: out, and in again with the next one */
.void-game-question { transition: opacity .22s ease, translate .22s ease; }
.void-game-question.is-changing { opacity: 0; translate: 0 5px; }

@media (prefers-reduced-motion: reduce) {
  /* the red stays; the shake does not */
  @keyframes vgWrong {
    0%, 100% { border-color: rgba(212, 175, 55, .42); background-color: rgba(4, 4, 4, .72); }
    20%, 70% { border-color: rgba(232, 84, 72, .95); background-color: rgba(58, 10, 8, .78); }
  }
  .void-found.is-on { animation-duration: .7s; }
}