/* Offerings · Infrasel "What we built": the ROAM film, its heading, the phases and the feature tabs.
   Three phases (find, fix, report) sit on top as a numbered flow, then the selected phase's feature tabs; the
   panel below pairs a product screen (left) with its description (right).
   Screens are inline SVG (.rf-*). Resting styles are the finished picture; entrance motion runs
   once per tab while the block is in view (roam.js adds .is-in). Colours come from tokens.css only. */

.roam { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

/* ---------- Film: about 70% of the screen on desktop, full width on phones ---------- */
.roam-film { width: min(100%, 70vw); justify-self: center; }
.roam-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--surface-deep); box-shadow: var(--shadow-lg); }
@media (max-width: 899px) { .roam-film { width: 100%; } }

.roam-head { display: grid; gap: 1rem; justify-items: center; text-align: center; max-width: 52rem; justify-self: center; }
.roam-head h3 { font-size: var(--text-2xl); font-weight: 400; letter-spacing: -0.045em; line-height: 1.05; text-wrap: balance; }
.roam-head p:last-child { color: var(--text-muted); max-width: 52ch; }

/* ---------- Phases: a three-step flow (find → fix → report) ----------
   Each phase is a numbered node on one line; an arrowed connector runs to the next node.
   Phases before the selected one read as done (navy node, inked line), so the line itself
   shows how far through the flow the visitor is. */
.roam-phases {
  --phase-node: 2.75rem;
  --phase-gap: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--phase-gap);
  margin-bottom: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}
.roam-phases > li { position: relative; display: grid; }
/* the arrow that carries one phase into the next: from this node to the next one */
.roam-phases > li:not(:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  top: calc(var(--phase-node) / 2); left: calc(var(--phase-node) + 0.75rem); right: calc(-1 * var(--phase-gap) + 0.75rem);
  height: 1px; background: var(--line-strong);
  transition: background var(--dur) var(--ease-out);
}
.roam-phases > li:not(:last-child)::before {
  content: ""; position: absolute; pointer-events: none;
  top: calc(var(--phase-node) / 2 - 4px); right: calc(-1 * var(--phase-gap) + 0.85rem);
  width: 8px; height: 8px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong);
  transform: rotate(45deg); transition: border-color var(--dur) var(--ease-out);
}
.roam-phases > li:has(~ li > [aria-pressed="true"])::after { background: var(--navy); }
.roam-phases > li:has(~ li > [aria-pressed="true"])::before { border-color: var(--navy); }

.roam-phase {
  display: grid; gap: 0.4rem; align-content: start; justify-items: start; padding: 0 0 0.25rem;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-muted);
  text-align: left; cursor: pointer;
}
.roam-phase__node {
  display: grid; place-items: center; width: var(--phase-node); height: var(--phase-node); margin-bottom: 0.85rem;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--white);
  font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-muted);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform 160ms var(--ease-out);
}
.roam-phase__top { display: flex; gap: 0.5rem; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.roam-phase__count { opacity: 0.75; }
.roam-phase__count::before { content: "·"; margin-right: 0.5rem; }
.roam-phase__name { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; color: var(--text-muted); transition: color var(--dur) var(--ease-out); }
.roam-phase__desc { font-size: var(--text-sm); max-width: 30ch; }
.roam-phase:hover .roam-phase__node { border-color: var(--ink); color: var(--ink); }
.roam-phase:hover .roam-phase__name { color: var(--text); }
.roam-phase:active .roam-phase__node { transform: scale(0.94); }
.roam-phase:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
/* done: the phases already passed */
.roam-phases > li:has(~ li > [aria-pressed="true"]) .roam-phase__node { border-color: var(--navy); background: var(--navy-100); color: var(--navy); }
/* now: the selected phase */
.roam-phase[aria-pressed="true"] { color: var(--text-muted); }
.roam-phase[aria-pressed="true"] .roam-phase__node {
  border-color: transparent; background: var(--surface-deep); color: var(--white);
  box-shadow: 0 0 0 6px var(--navy-100);
}
.roam-phase[aria-pressed="true"] .roam-phase__name { color: var(--text); }

/* one segment per feature; the current one fills over --roam-step, then the tour moves on */
.roam-phase__track { --roam-step: 7s; display: flex; gap: 4px; width: min(100%, 14rem); margin-top: 0.6rem; }
.roam-phase__track i { flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line); }
.roam-phase__track i::after {
  content: ""; display: block; height: 100%; background: var(--navy);
  transform: scaleX(0); transform-origin: left;
}
.roam-phase__track .is-done::after { transform: none; }
.roam-phase[aria-pressed="true"] .roam-phase__track i::after { background: var(--ink); }
.roam-phase__track .is-now::after { animation: roam-fill var(--roam-step) linear forwards; }
.roam.is-paused .roam-phase__track .is-now::after { animation-play-state: paused; }
.roam.is-manual .roam-phase__track .is-now::after { animation: none; transform: none; }
@keyframes roam-fill { to { transform: none; } }

/* phones: the same flow, compact: node and name only, above the deck */
@media (max-width: 899px) {
  .roam-phases { --phase-node: 2.25rem; --phase-gap: 0.75rem; margin-bottom: 1.5rem; }
  .roam-phases > li:not(:last-child)::after { left: calc(var(--phase-node) + 0.4rem); right: calc(-1 * var(--phase-gap) + 0.4rem); }
  .roam-phases > li:not(:last-child)::before { right: calc(-1 * var(--phase-gap) + 0.5rem); }
  .roam-phase { gap: 0.15rem; }
  .roam-phase__node { margin-bottom: 0.5rem; font-size: var(--text-xs); }
  .roam-phase[aria-pressed="true"] .roam-phase__node { box-shadow: 0 0 0 4px var(--navy-100); }
  .roam-phase__top, .roam-phase__desc, .roam-phase__track { display: none; }
  .roam-phase__name { font-size: var(--text-base); }
}

/* ---------- Scroll-through (desktop): the block pins while the page scrolls one step per feature ----------
   roam.js adds .is-pinned only when the whole block fits on screen, first as it is, else with
   .is-compact (below), and sets the step size and number of steps; shorter screens keep the
   block in the page flow. */
@media (min-width: 900px) {
  /* every feature's panel is as tall as the tallest, so changing feature never moves the page */
  .roam-stage { display: grid; }
  .roam-stage > .roam-pane { grid-area: 1 / 1; }
  .roam-stage > .roam-pane[hidden] { display: grid; visibility: hidden; }

  .roam.is-pinned .roam-scroll::after { content: ""; display: block; height: calc(var(--roam-steps, 0) * var(--roam-step-h, 0px)); }
  .roam.is-pinned .roam-features {
    --pin-top: calc(var(--header-h) + var(--client-nav-h, 0px) + 0.5rem);
    position: sticky; top: min(var(--pin-top), calc(100vh - var(--roam-h, 0px) - 0.5rem));
    transition: top var(--dur) var(--ease-out);
  }
  .header-hidden .roam.is-pinned .roam-features { --pin-top: calc(var(--client-nav-h, 0px) + 0.5rem); }
  /* compact, for screens where the full block would not fit: the steps keep their names, the panel loses some padding */
  .roam.is-compact .roam-phases { margin-bottom: 1rem; }
  .roam.is-compact .roam-phase__node { margin-bottom: 0.5rem; }
  .roam.is-compact .roam-phase__desc { display: none; }
  .roam.is-compact .roam-stage { padding-block: clamp(1rem, 0.5rem + 1.25vw, 1.75rem); }
  .roam.is-compact .roam-pane__close { display: none; } /* the closing line repeats the lede */
}

/* ---------- Feature tabs: one joined strip, selection first ---------- */
.roam-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: 1px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--line); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.roam-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .roam-tabs { grid-auto-columns: minmax(0, 1fr); overflow: hidden; } }
.roam-tab {
  display: grid; gap: 0.35rem; align-content: start; padding: 0.95rem 1.1rem 1.05rem; scroll-snap-align: start;
  border: 0; background: color-mix(in oklab, var(--white) 70%, transparent); color: var(--text-muted);
  text-align: left; font-size: var(--text-sm); cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.roam-tab[hidden] { display: none; }
.roam-tab__num { font-size: var(--text-xs); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; opacity: 0.7; }
.roam-tab__label { font-weight: 500; letter-spacing: -0.01em; }
.roam-tab:hover { background: var(--white); color: var(--text); }
.roam-tab[aria-selected="true"] { background: var(--ink); color: var(--white); }
.roam-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; }
.roam-tab:active { background: var(--navy-100); }
.roam-tab[aria-selected="true"]:active { background: var(--ink-800); }

/* ---------- Panel: screen | description on a dotted ground ---------- */
.roam-stage {
  position: relative; padding: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  border: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background:
    radial-gradient(circle, color-mix(in oklab, var(--slate) 20%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--white);
}

.roam-pane { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
.roam-pane[hidden] { display: none; }
.roam-pane:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--radius-md); }
@media (min-width: 1000px) { .roam-pane { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 3.5vw, 4.5rem); align-items: center; } }

.roam-pane__figure { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.roam-pane__figure svg { display: block; width: 100%; height: auto; }

.roam-pane__copy { display: grid; gap: 1rem; align-content: center; }
.roam-pane__label { font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--text-muted); }
.roam-pane__label span { color: var(--accent); font-variant-numeric: tabular-nums; }
.roam-pane__copy h4 { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.roam-pane__lede { color: var(--text-muted); max-width: 46ch; }
.roam-points { display: grid; gap: 0 1.75rem; margin-top: 0.5rem; }
@media (min-width: 640px) { .roam-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.roam-points li { display: grid; gap: 0.3rem; align-content: start; padding-block: 0.9rem 1.1rem; border-top: 1px solid var(--line); }
.roam-points strong { font-weight: 500; letter-spacing: -0.01em; }
.roam-points p { font-size: var(--text-sm); color: var(--text-muted); }
.roam-pane__close { padding-left: 0.9rem; border-left: 2px solid var(--accent); font-weight: 500; }

.roam-note { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ---------- Desktop scale: the flow sits a size down in a narrower centred column; the feature
   tabs and panel below keep their full type in a column a fifth wider ---------- */
@media (min-width: 900px) {
  .roam-features { width: 100%; max-width: 79rem; justify-self: center; }
  .roam-phases { --phase-node: 2.4rem; max-width: 66rem; margin-inline: auto; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
  .roam-phase__node { margin-bottom: 0.6rem; font-size: var(--text-xs); }
  .roam-phase__top { font-size: 0.7rem; }
  .roam-phase__name { font-size: var(--text-lg); }
  .roam-phase__desc { font-size: var(--text-xs); }
}

/* ---------- Phones: one card per feature in a deck (roam.js, deck.js) ---------- */
.roam.has-deck :is(.roam-tabs, .roam-stage) { display: none; }
/* the ROAM heading already introduces the block, so the case's "What we built" goes */
@media (max-width: 899px) { .case__built:has(> .roam) > h3 { display: none; } }
.roam-card {
  position: relative; overflow: hidden; height: 100%; padding: 0.75rem 0.75rem 1.1rem;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  background:
    radial-gradient(circle, color-mix(in oklab, var(--slate) 20%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--white);
}
.roam-card .roam-pane { gap: 1rem; }
.roam-card .roam-pane__copy { gap: 0.6rem; padding-inline: 0.25rem; }
.roam-card .roam-pane__copy h4 { font-size: var(--text-lg); }
.roam-card .roam-pane__lede { font-size: var(--text-sm); }
.roam-more {
  justify-self: start; margin-top: 0.35rem; padding: 0.6rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.roam-more:active { background: var(--navy); border-color: var(--navy); color: var(--white); }
/* the detail points: a sheet that slides up over the card */
.roam-sheet {
  position: absolute; inset: 0; z-index: 2; display: grid; align-content: start; gap: 0.25rem;
  padding: 1.1rem 1rem 1.25rem; overflow-y: auto; overscroll-behavior: contain;
  background: var(--white); border-radius: inherit;
  transform: translateY(100%); visibility: hidden;
  transition: transform 450ms var(--ease-out), visibility 0s linear 450ms;
}
.roam-card.is-open .roam-sheet { transform: none; visibility: visible; transition-delay: 0s; }
.roam-sheet__title { padding-right: 2.75rem; font-weight: 500; letter-spacing: -0.02em; }
.roam-sheet__close {
  position: absolute; top: 0.6rem; right: 0.6rem; display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg-alt); color: var(--ink); cursor: pointer;
}
.roam-sheet__close svg { width: 14px; height: 14px; }
.roam-sheet .roam-points { margin-top: 0.5rem; }
.roam-sheet .roam-points li { padding-block: 0.7rem 0.8rem; }
.roam-sheet .roam-pane__close { margin-top: 0.75rem; font-size: var(--text-sm); }

/* ---------- Screens (.rf) ---------- */
.rf { font-family: var(--font-sans); }
.rf :where(g, rect, circle, path, ellipse) { transform-box: fill-box; transform-origin: center; }
.rf text { font-variant-numeric: tabular-nums; }
.rf-card { fill: var(--white); stroke: var(--line-strong); }
.rf-lights circle { fill: var(--slate-200); }
.rf-rule { fill: none; stroke: var(--line); }
.rf-rule--strong { stroke: var(--line-strong); }
.rf-cap { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; fill: var(--slate); }
.rf-t { font-size: 12.5px; fill: var(--ink); }
.rf-b { font-weight: 600; }
.rf-m { font-size: 15px; }
.rf-l { font-size: 18px; letter-spacing: -0.02em; }
.rf-s { font-size: 11px; fill: var(--slate); }
.rf-num { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; fill: var(--ink); }
.rf-num--hi { fill: var(--navy); }
.rf-num--l { font-size: 30px; }

.rf-tile { fill: var(--navy-50); }
.rf-tile--on { fill: var(--navy-100); }
.rf-sheet { fill: var(--white); stroke: var(--line); }
.rf-track { fill: var(--slate-200); }
.rf-bar { fill: var(--navy); }
.rf-bar--soft { fill: var(--navy-300); }
.rf-grow { transform-origin: left center; }
.rf-target { stroke: var(--ink); stroke-width: 2; }
.rf-pill { fill: var(--navy-100); }
.rf-pill--solid { fill: var(--navy); }
.rf-pill--line { fill: none; stroke: var(--line-strong); }
.rf-pill-t { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; fill: var(--navy); }
.rf-pill-t--solid { fill: var(--white); }
.rf-flag { fill: var(--navy-50); }
.rf-btn { fill: var(--navy); }
.rf-btn-t { font-size: 11px; font-weight: 600; fill: var(--white); }
.rf-ok { fill: var(--navy); }
.rf-tick { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf-file { fill: var(--navy); }

/* camera frames (dashcam, drone) */
.rf-cam { fill: var(--ink); }
.rf-cam-line { stroke: color-mix(in oklab, var(--white) 12%, transparent); }
.rf-cam-road { fill: color-mix(in oklab, var(--white) 9%, transparent); }
.rf-cam-lane { fill: none; stroke: color-mix(in oklab, var(--white) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 8 8; }
.rf-cam-hole { fill: color-mix(in oklab, var(--black) 55%, transparent); stroke: color-mix(in oklab, var(--white) 25%, transparent); }
.rf-cam-crack { fill: none; stroke: color-mix(in oklab, var(--white) 60%, transparent); stroke-width: 1.5; stroke-linejoin: round; }
.rf-cam-t { font-size: 9.5px; letter-spacing: 0.06em; fill: color-mix(in oklab, var(--white) 70%, transparent); }
.rf-rec { fill: var(--navy-300); }
.rf-patch { fill: color-mix(in oklab, var(--white) 28%, transparent); }
.rf-box { fill: none; stroke: var(--navy-300); stroke-width: 1.5; }
.rf-chip { fill: var(--navy-300); }
.rf-chip-t { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; fill: var(--ink); }
.rf-asset { fill: none; stroke: color-mix(in oklab, var(--white) 55%, transparent); stroke-width: 2; }
.rf-lamp { fill: color-mix(in oklab, var(--white) 85%, transparent); }
.rf-sign { fill: color-mix(in oklab, var(--white) 78%, transparent); }
.rf-sign-arrow { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-verge { fill: color-mix(in oklab, var(--white) 6%, transparent); }
.rf-drain-a, .rf-key-a { fill: var(--navy-300); }
.rf-drain-b, .rf-key-b { fill: var(--slate-300); }
.rf-drain-a, .rf-drain-b { opacity: 0.55; }
.rf-key-c { fill: var(--navy); }
.rf-key-d { fill: var(--slate-200); }
.rf-slabs { fill: none; stroke: color-mix(in oklab, var(--ink) 70%, transparent); }
.rf-vehicle { fill: color-mix(in oklab, var(--white) 70%, transparent); }
.rf-scan { fill: color-mix(in oklab, var(--navy-300) 70%, transparent); }

/* maps */
.rf-map { fill: var(--navy-50); stroke: var(--line); }
.rf-road { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.rf-road--1 { stroke: var(--navy); }
.rf-road--2 { stroke: var(--navy-300); }
.rf-road--3 { stroke: var(--slate-300); }
.rf-road--4 { stroke: var(--slate-300); stroke-width: 3; stroke-dasharray: 1 7; }
.rf-road--base { stroke: var(--slate-200); stroke-width: 8; }
.rf-route { fill: none; stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 3 5; }
.rf-car { fill: var(--navy); stroke: var(--white); stroke-width: 1.5; }
.rf-car-ring { fill: color-mix(in oklab, var(--navy) 16%, transparent); }
.rf-sq { fill: var(--navy-300); stroke: var(--white); stroke-width: 1.5; }
.rf-district { fill: color-mix(in oklab, var(--navy) 6%, transparent); stroke: var(--navy-300); stroke-linejoin: round; }
.rf-heat { fill: color-mix(in oklab, var(--navy) 16%, transparent); }
.rf-status--on { fill: var(--navy); }
.rf-status--up { fill: var(--navy-300); }
.rf-status--off { fill: none; stroke: var(--slate-300); stroke-width: 1.5; }

/* case steps */
.rf-step-track { stroke: var(--slate-200); stroke-width: 2; }
.rf-step-done { stroke: var(--navy); stroke-width: 2; }
.rf-step { fill: var(--navy); }
.rf-step--now { fill: var(--white); stroke: var(--navy); stroke-width: 2; }
.rf-step-core { fill: var(--navy); }

/* chat */
.rf-wa-bg { fill: var(--navy-50); }
.rf-wa-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.rf-wa-head { fill: var(--navy); }
.rf-wa-avatar { fill: color-mix(in oklab, var(--white) 20%, transparent); }
.rf-wa-avatar-t { font-size: 9px; font-weight: 700; fill: var(--white); }
.rf-wa-name { font-size: 12px; font-weight: 600; fill: var(--white); }
.rf-wa-sub { font-size: 10px; fill: color-mix(in oklab, var(--white) 70%, transparent); }
.rf-wa-me { fill: var(--navy-100); }
.rf-wa-bot { fill: var(--white); stroke: var(--line); }
.rf-wa-t { font-size: 11px; fill: var(--ink); }
.rf-wa-play { fill: var(--navy); }
.rf-wa-wave { fill: var(--navy-300); }
.rf-wa-dot { fill: var(--slate-300); }

/* dashboard and inbox controls */
.rf-prompt { fill: var(--white); stroke: var(--navy-300); stroke-width: 1.5; }
.rf-spark { fill: var(--navy); }
.rf-filter { fill: var(--navy-50); }
.rf-filter--on { fill: var(--ink); }
.rf-filter--soon { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 3; }
.rf-filter-t { font-size: 10.5px; font-weight: 500; fill: var(--ink); }
.rf-filter-t--on { fill: var(--white); }
.rf-filter-t--soon { fill: var(--slate); }
.rf-senti--neg { fill: var(--navy); }
.rf-senti--neu { fill: none; stroke: var(--line-strong); }
.rf-senti--pos { fill: var(--navy-100); }
.rf-senti-t { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; fill: var(--slate); }
.rf-senti-t--neg { fill: var(--white); }
.rf-senti-t--pos { fill: var(--navy); }
.rf-act--line { fill: var(--white); stroke: var(--navy); stroke-width: 1.2; }
.rf-act--soft { fill: var(--navy-100); }
.rf-act-t { font-size: 11px; font-weight: 600; fill: var(--navy); }
.rf-act-t--none { fill: var(--slate); font-weight: 500; }

/* ---------- Motion: each screen assembles in reading order when its tab opens ---------- */
@keyframes rf-rise { from { opacity: 0; translate: 0 6px; } }
@keyframes rf-pop { from { opacity: 0; scale: 0.6; } }
@keyframes rf-grow { from { scale: 0 1; } }
@keyframes rf-copy { from { opacity: 0; translate: 0 10px; } }
@keyframes rf-march { to { stroke-dashoffset: -64; } }
@keyframes rf-sweep { to { translate: 508px 0; } }
@keyframes rf-bounce { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -3px; } }
@keyframes rf-blink { 50% { opacity: 0.25; } }
@keyframes rf-pulse { 50% { scale: 1.2; opacity: 0.6; } }

.roam { --pop: cubic-bezier(0.34, 1.56, 0.64, 1); }
.roam.is-in .roam-pane:not([hidden]) .rf-in { animation: rf-rise 600ms var(--ease-out) calc(var(--k, 0) * 55ms) both; }
.roam.is-in .roam-pane:not([hidden]) .rf-pop { animation: rf-pop 500ms var(--pop) calc(200ms + var(--k, 0) * 55ms) both; }
.roam.is-in .roam-pane:not([hidden]) .rf-grow { animation: rf-grow 900ms var(--ease-out) calc(250ms + var(--k, 0) * 55ms) both; }
.roam.is-in .roam-pane:not([hidden]) .rf-route { animation: rf-march 3s linear infinite; }
.roam.is-in .roam-pane:not([hidden]) .rf-scan { animation: rf-sweep 4.5s var(--ease-in-out) infinite alternate; }
.roam.is-in .roam-pane:not([hidden]) .rf-wa-dot { animation: rf-bounce 1.1s ease-in-out var(--d) infinite; }
.roam.is-in .roam-pane:not([hidden]) .rf-rec { animation: rf-blink 1.2s steps(1) infinite; }
.roam.is-in .roam-pane:not([hidden]) .rf-heat { animation: rf-pulse 2.4s var(--ease-in-out) infinite; }
.roam.is-in .roam-pane:not([hidden]) .roam-pane__copy > * { animation: rf-copy 600ms var(--ease-out) both; }
.roam.is-in .roam-pane:not([hidden]) .roam-pane__copy > :nth-child(2) { animation-delay: 60ms; }
.roam.is-in .roam-pane:not([hidden]) .roam-pane__copy > :nth-child(3) { animation-delay: 120ms; }
.roam.is-in .roam-pane:not([hidden]) .roam-pane__copy > :nth-child(4) { animation-delay: 180ms; }
.roam.is-in .roam-pane:not([hidden]) .roam-pane__copy > :nth-child(5) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .roam *, .roam *::before, .roam *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .roam-phase__track .is-now::after { transform: none; }
}