/* motion.css — Wave 5 "Animations" (Kevin, 2026-10-02). Loaded after
   stones-layout.css. Only movement lives here: no colors, sizes or layout.
   prefers-reduced-motion turns all of it off. */

/* ---------- 1. opening: stones settle in, left, middle, right ---------- */
body.stones-on #home-view.boot-in > .picker,
body.stones-on #home-view.boot-in > .board,
body.stones-on #home-view.boot-in > .ready-pane { animation: none !important; }
body.mo-enter #home-view .picker > *,
body.mo-enter #home-view #activeBoard > *,
body.mo-enter #home-view .ready-pane > * {
  animation: moRise .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--mo-i, 0) * 70ms + 120ms);
}
body.mo-enter #home-view .app-banner-logo { animation: moMark 1s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes moRise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes moMark { 0% { opacity: 0; transform: scale(.6) rotate(-14deg); } 60% { opacity: 1; transform: scale(1.08) rotate(3deg); } 100% { transform: none; } }

/* ---------- 2. progress that moves ---------- */
[id$="ProgressFill"], [id$="progressFill"], .progress-fill, .splash-loader-fill,
#ciBar, #obsFT, #obsFP, .al-job-fill, .stones-ring-dial circle {
  transition-property: width, stroke-dashoffset, transform !important;
  transition-duration: .7s !important;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important;
}
#readyDialFill, #railDialFill { transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1) !important; }
progress::-webkit-progress-value { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
#automataMergeOverlay progress::-webkit-progress-value {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%; animation: moSheen 1.6s linear infinite;
}
@keyframes moSheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- 3. buttons wake up ---------- */
button.mo-wake { animation: moWake .85s cubic-bezier(.2, 1.4, .35, 1) both !important; }
@keyframes moWake { 0% { transform: translateY(2px) scale(.97); filter: saturate(.15) brightness(.92); } 45% { transform: translateY(-3px) scale(1.035); filter: saturate(1.25) brightness(1.18); } 100% { transform: none; filter: none; } }
button.mo-ran { animation: moRan 1.05s ease-out both !important; }
@keyframes moRan { 0% { box-shadow: 0 0 0 0 rgba(43, 40, 44, .45); transform: scale(.97); } 35% { transform: scale(1.03); } 100% { box-shadow: 0 0 0 14px rgba(43, 40, 44, 0); transform: none; } }

@media (prefers-reduced-motion: reduce) {
  body.mo-enter #home-view *, button.mo-wake, button.mo-ran { animation: none !important; }
  [id$="ProgressFill"], .progress-fill, progress::-webkit-progress-value { transition: none !important; }
}