/* Marketing-site motion: slide-up reveals as content enters the
   viewport (the latasys.com feel), plus the live hero fees demo.
   Elements are only hidden once JS tags them, so no-JS visitors see
   everything instantly. */

.rv { opacity: 0; transform: translateY(22px);
  transition: opacity .65s cubic-bezier(.22,.7,.3,1), transform .65s cubic-bezier(.22,.7,.3,1); }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* hero fees demo - the whole card plays as a sequence: rows land one
   after another, the tonnage and fee count up, checks pop */
.panel.demo-live > * { opacity: 0; transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.22,.7,.3,1), transform .45s cubic-bezier(.22,.7,.3,1); }
.panel.demo-live > *.on { opacity: 1; transform: none; }
.pill-pop-once { animation: pill-pop .45s cubic-bezier(.34,1.56,.64,1); }
.demo-phase .ob-small { display: inline-flex; align-items: center; gap: 8px; }
.demo-spin { width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 2px solid var(--ob-line); border-top-color: var(--ob-leaf);
  animation: demo-spin .8s linear infinite; }
@keyframes demo-spin { to { transform: rotate(360deg); } }
.panel.demo-live .demo-phase { transition: opacity .35s; }
.panel.demo-live .demo-phase.off { opacity: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .demo-spin { animation: none; }
  .demo-phase { display: none; }
}

.demo-calc b { font-variant-numeric: tabular-nums; }
.demo-calc .ob-data { font-variant-numeric: tabular-nums; }
#ob-demo-pill { min-width: 96px; text-align: center; transition: background .25s, color .25s; }
#ob-demo-pill.is-wait { background: var(--ob-line); color: var(--ob-ink-2); }
#ob-demo-pill.is-on { animation: pill-pop .45s cubic-bezier(.34,1.56,.64,1); }
#ob-demo-pill .tick { display: inline-block; vertical-align: -1px; }
#ob-demo-pill.is-on .tick { animation: tick-draw .4s .1s both; }
@keyframes pill-pop { 0% { transform: scale(.72); } 100% { transform: scale(1); } }
@keyframes tick-draw { 0% { opacity: 0; transform: scale(.3) rotate(-18deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  #ob-demo-pill.is-on { animation: none; }
  #ob-demo-pill.is-on .tick { animation: none; }
}