/* tour-motion.css — shared motion for the About + Workflow demo scenes.
 *
 * Principles (2026-10-15 redesign — the old scenes swayed, floated, pulsed
 * and bounced forever, which read as generated):
 *   • Every scene plays ONCE, as a single purposeful pass, then holds its
 *     finished state. Nothing loops, nothing idles in motion.
 *   • One easing for everything: a calm deceleration, no overshoot.
 *   • Flat, not faux-3D.
 *
 * Trigger: a scene animates while it is inside the deck's active step
 * (`.tour-step.is-active`, set by iframe-tour.js), or on load when the page
 * is opened on its own (no `html.tour-mode`). Leaving and re-entering a step
 * replays it. Base styles are the FINISHED state; the keyframes only hold
 * the start state, so a step that isn't playing always looks complete.
 *
 * Usage in a page:  :is(html:not(.tour-mode), .tour-step.is-active) .x {
 *                     animation: name var(--tm-dur) var(--tm-ease) <delay> both; }
 */
:root {
  --tm-ease: cubic-bezier(.22, .8, .24, 1);
  --tm-dur: .55s;
}

/* ── Flow row (Upload → … → Deliver / Get Paid) ─────────────────────────
   Four flat stations on a line. The line draws left → right once and each
   station lights as the line reaches it; then it all rests, fully lit. */
.flow3d { --disc: clamp(50px, 13vw, 74px); margin-top: 2.2rem; }
.flow3d-stage {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(0.3rem, 3vw, 1.4rem);
  padding: 1.4rem 0.4rem 1.6rem;
}
/* Equal-width stations: centres sit at 12.5 / 37.5 / 62.5 / 87.5 %. */
.flow3d-track {
  position: absolute; left: 12.5%; right: 12.5%;
  top: calc(1.4rem + var(--disc) / 2);
  height: 2px; margin-top: -1px; border-radius: 2px;
  background: var(--line);
}
.flow3d-track::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--ink); opacity: .5;
  transform-origin: left center;
}
.flow3d-node {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.flow3d-disc {
  width: var(--disc); height: var(--disc); border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card);
  border: 1px solid rgba(24,24,27,0.16);
  box-shadow: 0 8px 18px rgba(24,24,27,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  color: var(--ink);
}
.flow3d-disc svg { width: 44%; height: 44%; display: block; }
/* Touchups = the app's colour wheel (a div with inline 19px sizing). */
.flow3d-disc > div { width: 46% !important; height: 46% !important; }
.flow3d-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink);
}

@keyframes tm-flow-draw { from { transform: scaleX(0); } }
@keyframes tm-flow-station {
  from { opacity: .45; transform: translateY(4px); box-shadow: none; border-color: rgba(24,24,27,0.08); }
}
@keyframes tm-flow-label { from { color: var(--ink-faint); } }

:is(html:not(.tour-mode), .tour-step.is-active) .flow3d-track::after {
  animation: tm-flow-draw 1.6s cubic-bezier(.45, 0, .25, 1) .35s both;
}
/* A station lights when the line reaches its centre: 0.35s + i × (1.6s / 3). */
:is(html:not(.tour-mode), .tour-step.is-active) .flow3d-disc {
  animation: tm-flow-station var(--tm-dur) var(--tm-ease) calc(.3s + var(--i, 0) * .533s) both;
}
:is(html:not(.tour-mode), .tour-step.is-active) .flow3d-label {
  animation: tm-flow-label var(--tm-dur) var(--tm-ease) calc(.3s + var(--i, 0) * .533s) both;
}
/* --i lives on the node; the disc and label inherit it. */

/* Reduced motion: show every scene in its finished state, no movement. */
@media (prefers-reduced-motion: reduce) {
  :is(html:not(.tour-mode), .tour-step.is-active) *,
  :is(html:not(.tour-mode), .tour-step.is-active) *::before,
  :is(html:not(.tour-mode), .tour-step.is-active) *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }
}