/* OWNER: Charlie, booking lane, release six. Scoped under .ob-root (booking only, defined by
   js/booking.js) so nothing here can ever touch another screen. Transform, opacity, colour and
   background-color only (plus SVG stroke-dasharray/offset for the check mark, paint only, no
   layout). Every animation-name below has a matching @keyframes block. */

/* Moment 1: each step arrives once, tagged by js/motion-booking.js on step change, including the
   first mount, never on an unrelated re render of the same step. */
.ob-root .mo-step-fwd { animation: ob-step-fwd var(--mo-base) var(--mo-ease-out); }
.ob-root .mo-step-back { animation: ob-step-back var(--mo-base) var(--mo-ease-out); }
.ob-root .mo-step-rise { animation: ob-step-rise var(--mo-base) var(--mo-ease-out); }
@keyframes ob-step-fwd { from { opacity: 0; transform: translateX(calc(var(--mo-rise) * 1.6)); } to { opacity: 1; transform: translateX(0); } }
@keyframes ob-step-back { from { opacity: 0; transform: translateX(calc(var(--mo-rise) * -1.6)); } to { opacity: 1; transform: translateX(0); } }
@keyframes ob-step-rise { from { opacity: 0; transform: translateY(var(--mo-rise)); } to { opacity: 1; transform: translateY(0); } }

/* Moment 2: service and stylist picks are replaced the instant they are tapped (the app advances
   the step on click), so their only honest feedback is an immediate press. The day chip is the
   one choice that survives its own re render, so it gets the settle pop plus a colour fade from
   transparent to its real fill (the 100% keyframe omits background-color on purpose, so it
   resolves to whatever colour the button's own rule already gives it; no value is hardcoded). */
.ob-root .ob-pick:active,
.ob-root [data-act="slot"]:active { transform: scale(.97); transition: transform var(--mo-instant) var(--mo-ease); }
.ob-root [data-act="day"].btn-primary { animation: ob-pop var(--mo-fast) var(--mo-spring); }
@keyframes ob-pop { 0% { transform: scale(.92); background-color: transparent; } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* Moment 3: the confirmation card rises in (mo-step-rise above) and js/motion-booking.js appends
   an aria hidden, pointer-events none check mark into it; this draws the stroke. */
.ob-root .ob-check { animation: ob-check-in var(--mo-fast) var(--mo-ease-out); }
.ob-root .ob-check-path { stroke-dasharray: 18; stroke-dashoffset: 18; animation: ob-check-draw var(--mo-base) var(--mo-ease-out) forwards; }
@keyframes ob-check-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ob-check-draw { to { stroke-dashoffset: 0; } }