/*
 * Shared RoomPlay game motion layer (docs/NEW_GAME_GUIDELINES.md, «Анимации»).
 * The same light motion the older games carry in their own theme files (fs-, td-, wm-, hk-…):
 * springy button press/settle, active dot, onboarding character arrive, pack pop/nod, dialogs
 * arriving, plus utility classes for game blocks. Blocks that the game re-renders on every state
 * update get the classes from shared/client/motion-once.ts, so they play once per round, not on
 * every vote. Everything sits inside prefers-reduced-motion: no-preference.
 *
 * Utility classes (added by motionOnce() or written in the markup of a block shown once):
 *   .rp-m-arrive   card/panel slides up into place («paper arrive»)
 *   .rp-m-stagger  its children pop in one after another (answers, options, board rows)
 *   .rp-m-stamp    lands like a stamp (verdicts, room code, «верно/неверно»)
 *   .rp-m-nod      a short nod (winner art, an icon that just changed)
 *   .rp-m-answer   a chosen answer button gives a small bounce
 */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --rp-m-press: 100ms;
    --rp-m-settle: 240ms;
    --rp-m-spring: cubic-bezier(.2, .9, .3, 1.25);
  }

  /* Buttons: press in, spring back. */
  body[data-rp-game] button:not(:disabled) {
    transition: scale var(--rp-m-settle) var(--rp-m-spring), translate var(--rp-m-settle) var(--rp-m-spring), transform var(--rp-m-settle) var(--rp-m-spring),
      background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
  }
  body[data-rp-game] button:not(:disabled):active { scale: .96; translate: 0 2px; transition-duration: var(--rp-m-press); }
  body[data-rp-game] .btn-back:not(:disabled):active { scale: .88; translate: none; }
  body[data-rp-game] .dot { transition: background-color 180ms ease, width 300ms ease, scale 180ms var(--rp-m-spring); }
  body[data-rp-game] .dot.active { scale: 1.12; }

  /* Onboarding: the scene arrives on every slide change. */
  body[data-rp-game] .onboarding-slide.active .slide-icon { animation: rp-m-character-arrive 380ms var(--rp-m-spring) both; }

  /* Packs: the touch classes from packs.js. */
  body[data-rp-game] .pack-card { transition: transform var(--rp-m-settle) var(--rp-m-spring), border-color 150ms ease; }
  body[data-rp-game] .pack-card.packs-touch-press:not(.locked) { transform: scale(.965); transition-duration: var(--rp-m-press); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) { animation: rp-m-pop 320ms var(--rp-m-spring); }
  body[data-rp-game] .pack-card.packs-touch-pop:not(.locked) .pack-art { animation: rp-m-nod 360ms ease-out; }

  /* Screens and dialogs. */
  body[data-rp-game] .screen.active { animation: rp-m-fade 220ms ease-out both; }
  body[data-rp-game] .confirm-dialog-overlay.active .confirm-dialog-modal,
  body[data-rp-game] .settings-popup-overlay.active .settings-popup-modal { animation: rp-m-paper-arrive 280ms var(--rp-m-spring); }

  /* Utility classes. */
  .rp-m-arrive { animation: rp-m-paper-arrive 300ms var(--rp-m-spring) both; }
  .rp-m-stamp { animation: rp-m-stamp-in 360ms var(--rp-m-spring) both; }
  .rp-m-nod { animation: rp-m-nod 420ms ease-out both; }
  .rp-m-answer { animation: rp-m-answer-stamp 260ms var(--rp-m-spring); }
  .rp-m-stagger > * { animation: rp-m-pop-in 280ms var(--rp-m-spring) both; }
  .rp-m-stagger > :nth-child(2) { animation-delay: 50ms; }
  .rp-m-stagger > :nth-child(3) { animation-delay: 100ms; }
  .rp-m-stagger > :nth-child(4) { animation-delay: 150ms; }
  .rp-m-stagger > :nth-child(5) { animation-delay: 200ms; }
  .rp-m-stagger > :nth-child(n+6) { animation-delay: 250ms; }
}

@keyframes rp-m-character-arrive { from { opacity: 0; scale: .82; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes rp-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rp-m-pop { 0% { transform: scale(.965); } 55% { transform: scale(1.018); } 100% { transform: scale(1); } }
@keyframes rp-m-pop-in { from { opacity: 0; scale: .8; translate: 0 6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rp-m-nod { 0%, 100% { rotate: 0deg; } 35% { rotate: -8deg; } 70% { rotate: 5deg; } }
@keyframes rp-m-paper-arrive { from { opacity: 0; translate: 0 14px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes rp-m-stamp-in { from { opacity: 0; scale: 1.45; } to { opacity: 1; scale: 1; } }
@keyframes rp-m-answer-stamp { 0% { scale: .94; } 65% { scale: 1.025; } 100% { scale: 1; } }