/* hw-app.css - P2-07 motion for NurseSim's web app (loaded after sim.css by tools/build_web.py; web edition only).
   Transform and opacity only, 150-400 ms ease-out; prefers-reduced-motion = opacity only. The shared moments live in
   factory/08-Website/design/motion.css + motion.js (copied to app/hw/). */
:root{--hw-ease:cubic-bezier(.2,.7,.2,1)}
/* 3. an answer: the chosen option eases to right (green) or wrong; the reason expands */
/* :root[data-motion="on"] = the app's own "effects" setting; it also outranks sim.css main>*{animation:rise} */
:root[data-motion="on"] .opt.right,:root[data-motion="on"] .opt.wrong{animation:hw-opt 280ms var(--hw-ease) both}
:root[data-motion="on"] .why{animation:hw-why 280ms var(--hw-ease) both}
@keyframes hw-opt{from{opacity:.55;transform:scale(.985)}}
@keyframes hw-why{from{opacity:0;transform:translateY(-6px)}}
/* 10. progress bars fill from the start */
.bar i{transform-origin:0 50%}
:root[data-motion="on"] .bar i{animation:hw-fill 400ms var(--hw-ease) both}
[dir="rtl"] .bar i{transform-origin:100% 50%}
@keyframes hw-fill{from{transform:scaleX(0)}}
/* sound toggle in the app header */
.top .hw-snd{flex:none;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:var(--sunk);color:var(--ink);cursor:pointer;padding:0}
.top .hw-snd svg{width:1.2rem;height:1.2rem}
.top .hw-snd[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.hw-snd .on{display:none}.hw-snd[aria-pressed="true"] .on{display:inline}.hw-snd[aria-pressed="true"] .off{display:none}
.hw-snd[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  @keyframes hw-opt{from{opacity:.55}}
  @keyframes hw-why{from{opacity:0}}
  @keyframes hw-fill{from{opacity:0}}
}