/* Short, readable transitions. The first frame is never blank, and game
   state never waits for an animation to finish. Do not animate whole pages. */
@keyframes paper-surface-in {
  from { opacity: .75; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes paper-result-in { from { opacity: .65; } to { opacity: 1; } }
@keyframes paper-bar-in { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
/* One countdown effect for every game. No transforms, padding or border
   changes: entering the last five seconds cannot resize a clock or map. */
:is(#round-clock, #study-countdown, #count, #hunt-clock, #round-chip, #solo-clock).countdown-urgent {
  color: var(--red, #b74630);
  background: #b7463020;
  outline: 2px solid var(--red, #b74630);
  outline-offset: -2px;
  animation: game-countdown-pulse 1s ease-in-out infinite;
}
@keyframes game-countdown-pulse {
  50% { background: #b7463040; box-shadow: 0 0 0 3px #b7463030; }
}
.countdown-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 0 3px #bd5540, inset 0 0 28px #bd554025;
  animation: game-countdown-frame 1s ease-in-out infinite;
}
@keyframes game-countdown-frame { 50% { opacity: .3; } }
@media (prefers-reduced-motion: no-preference) {
  #settings-pop:not([hidden]), #menu-settings-pop:not([hidden]),
  #suggestions:not([hidden]), #country-options:not([hidden]), #set-menu:not([hidden]) {
    animation: paper-surface-in 180ms ease-out;
  }
  #briefing:not([hidden]) .sheet, .info-content,
  #verdict:not([hidden]), #round-result:not([hidden]), #result:not([hidden]),
  .backdrop, #modal-backdrop:not([hidden]), #help-backdrop:not([hidden]) {
    animation: paper-result-in 280ms ease-out;
  }
  .bar-compare .fill, .signal.latest .signal-fill {
    transform-origin: left center;
    animation: paper-bar-in 520ms cubic-bezier(.22,.61,.36,1);
  }
}
/* Also cover older game-specific effects, including City Limits, Flag Sprint
   and Sort It. Reduced motion changes presentation, never game timing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}