/* Lets Roam motion: onboarding scene, step sync, press feedback and celebrate burst.
   Scoped to .rm-* classes and data-motion-* attributes so it never restyles app.css. */
:root{
  --rm-paper:var(--paper,#F7F5F0);
  --rm-grid:var(--grid,#E9E5DB);
  --rm-line:var(--line,#E6E2D9);
  --rm-ink:var(--ink,#121214);
  --rm-ink2:var(--ink2,#55535C);
  --rm-lime:var(--lime,#D6FF3D);
  --rm-red:var(--red,#E5484D);
  --rm-white:var(--white,#FFFFFF);
  --rm-blueT:var(--blueT,#E7EDFF);
  --rm-display:var(--font-display,'Anton',Impact,sans-serif);
  --rm-ui:var(--font-ui,'Bricolage Grotesque',system-ui,sans-serif);
  --rm-out:cubic-bezier(.2,.8,.2,1);
  --rm-spr:cubic-bezier(.34,1.56,.64,1);
}

/* scene */
[data-motion-scene]{position:relative}
.rm-scene{display:block;width:100%;max-width:100%;height:auto;overflow:visible}
.rm-scene [data-rm],.rm-scene .rm-t{transform-box:fill-box;transform-origin:50% 50%}
.rm-scene .rm-t-left{transform-box:fill-box;transform-origin:0 50%}
.rm-scene .rm-t-base{transform-box:fill-box;transform-origin:50% 100%}
.rm-scene text{font-family:var(--rm-ui);fill:var(--rm-ink)}
.rm-scene .rm-display{font-family:var(--rm-display);letter-spacing:.02em}
.rm-scene .rm-muted{fill:var(--rm-ink2)}
.rm-armed [data-rm]:not(.rm-on){opacity:0}
.rm-scene [data-rm]{transition:opacity 220ms var(--rm-out)}
.rm-scene.rm-focus [data-rm]:not(.rm-focused){opacity:.32}

/* step elements in landing markup */
[data-motion-step]{transition:opacity 220ms var(--rm-out),transform 220ms var(--rm-out)}
[data-motion-state="playing"] [data-motion-step]:not(.is-motion-active):not(.is-motion-done){opacity:.45}
[data-motion-step].is-motion-active{opacity:1}
[data-motion-step].is-motion-active .rm-step-mark,
[data-motion-step].is-motion-active [data-motion-mark]{background:var(--rm-lime);color:var(--rm-ink)}

/* press feedback (opt-in) */
[data-motion-press]{transition:transform 120ms var(--rm-out)}
[data-motion-press]:active{transform:scale(.97)}

/* celebrate burst */
.rm-burst{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;z-index:20;overflow:visible}
.rm-burst *{transform-box:fill-box;transform-origin:50% 50%}

@media (prefers-reduced-motion: reduce){
  .rm-scene [data-rm],[data-motion-step],[data-motion-press]{transition:none}
  [data-motion-press]:active{transform:none}
  .rm-armed [data-rm]:not(.rm-on){opacity:1}
}