/* Keyframes + their animation classes; timings come from motion tokens in css/tokens.css. */

@keyframes pj-rise {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pj-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pj-ripple {
  from { opacity: 0.55; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.8); }
}

@keyframes pj-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-0.5rem); }
  40%, 80% { transform: translateX(0.5rem); }
}

@keyframes pj-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.pj-anim-rise   { animation: pj-rise var(--pj-duration-slow) var(--pj-ease-out) both; }
.pj-anim-fade   { animation: pj-fade var(--pj-duration-slow) var(--pj-ease-out) both; }
.pj-anim-ripple { animation: pj-ripple calc(var(--pj-duration-slow) * 3) var(--pj-ease-out) infinite; }
.pj-anim-shake  { animation: pj-shake var(--pj-duration-base) var(--pj-ease-standard); }
.pj-anim-pop    { animation: pj-pop var(--pj-duration-base) var(--pj-ease-out) both; }

/* Reduced motion is handled globally in css/base.css. */

/* PrototypeBanner: countdown bar shrinks over the 4s auto-hide window. */
@keyframes pj-banner-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.pj-banner-countdown { animation: pj-banner-countdown 4s linear forwards; }