/* Mini graphics at the top of each service card (/services/ and "More services").
   Markup lives in _partials/mini/*.html. Everything here is prefixed m-, except where a mini
   reuses the shared line-graphic vocabulary from site.css (.ep, .short, .takes, .topic, .cap2).
   site.js adds .in to .mini when the card scrolls in, and .off while it is offscreen.
   Without JS, and with reduced motion, every mini shows its finished state. */

.m-wrap { container-type:inline-size; width:100%; max-width:480px; margin:0 auto; position:relative; }
.m-wrap.m-shot { max-width:440px; }
.m-wrap svg { overflow:visible; }

/* two-part flow: input, arrow, output */
.m-flow { display:grid; grid-template-columns:1fr 24px 1fr; gap:10px; align-items:center; }
.m-arrow { color:var(--faint); }
.m-arrow svg { width:24px; height:14px; display:block; }
.m-wrap .mini-lab { text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* shared small browser bar */
.m-bar { display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--rule-soft); background:var(--sunken); }
.m-bar i { width:6px; height:6px; border-radius:50%; background:var(--rule); flex-shrink:0; }
.m-bar span { margin-left:6px; height:5px; width:36%; border-radius:3px; background:var(--rule); }

/* gold check used in pills, ticks and the automation end node */
.m-wrap b svg, .m-wrap em svg, .m-end svg { width:62%; height:62%; fill:none; stroke:var(--accent-ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- shot: screenshot in a small browser frame, cursor click, two new-lead pills ---------- */
.m-frame { position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); }
.m-frame img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top; }
.m-pill { position:absolute; right:-2px; z-index:2; display:flex; align-items:center; gap:5px; padding:4px 10px 4px 4px;
  background:var(--surface); border:1px solid var(--rule); border-radius:20px; box-shadow:var(--shadow); }
.m-pill b { width:16px; height:16px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.m-pill i { display:block; height:4px; border-radius:2px; background:var(--ink); opacity:.55; width:30px; }
.m-pill i + i { width:16px; opacity:.3; }
.m-p1 { top:30%; }
.m-p2 { top:30%; margin-top:30px; }
.m-cursor { position:absolute; left:46%; top:62%; width:15px; height:19px; z-index:2; fill:var(--ink); stroke:var(--surface); stroke-width:1.2; stroke-linejoin:round; }
.m-click { position:absolute; left:46%; top:62%; width:24px; height:24px; margin:-10px 0 0 -10px; border:2px solid var(--accent); border-radius:50%; opacity:0; z-index:1; }

.js .m-cursor { opacity:0; transform:translate(-56px,30px); transition:opacity .3s ease .2s, transform 1s cubic-bezier(.45,0,.2,1) .2s; }
.js .mini.in .m-cursor { opacity:1; transform:none; }
.js .mini.in .m-click { animation:m-ping .7s ease-out 1.25s 1 both; }
@keyframes m-ping { from { opacity:1; transform:scale(.3); } to { opacity:0; transform:scale(1.5); } }
.js .m-pill { opacity:0; transform:translateY(8px) scale(.85); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.js .mini.in .m-pill { opacity:1; transform:none; }
.js .mini.in .m-p1 { transition-delay:1.5s; }
.js .mini.in .m-p2 { transition-delay:1.9s; }

/* ---------- clips: long video, three moments, three captioned Shorts ---------- */
.m-ep .play { width:17%; height:auto; aspect-ratio:1; top:30%; }
.m-cut { position:absolute; top:52%; height:34%; border:1.5px solid var(--accent); border-radius:2px; background:rgba(212,175,55,.16); }
.m-shorts { display:grid; grid-template-columns:repeat(3,1fr); gap:7%; }
.m-shorts .short { border-width:1.5px; border-radius:6px; }
.m-shorts .short .cap { left:12%; right:12%; gap:2px; }
.m-shorts .short .cap i { height:3px; }
.js .mini.in .m-ep .wave i { animation:pulse 1.6s ease-in-out infinite; animation-delay:var(--d,0s); }
.js .m-cut { opacity:0; transition:opacity .35s ease; }
.js .mini.in .m-cut { opacity:1; }
.js .mini.in .m-cut:nth-of-type(1) { transition-delay:.5s; }
.js .mini.in .m-cut:nth-of-type(2) { transition-delay:.8s; }
.js .mini.in .m-cut:nth-of-type(3) { transition-delay:1.1s; }
.js .m-shorts .short { opacity:0; transform:translateY(10px) scale(.9); transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.js .mini.in .m-shorts .short { opacity:1; transform:none; }
.js .mini.in .m-shorts .short:nth-child(1) { transition-delay:1.2s; }
.js .mini.in .m-shorts .short:nth-child(2) { transition-delay:1.45s; }
.js .mini.in .m-shorts .short:nth-child(3) { transition-delay:1.7s; }

/* ---------- editing and explainer: the output video builds itself ---------- */
.m-edit .takes { gap:3px; }
.js .mini.in .takes i.x { flex:0 0 0; border-width:0; opacity:0; transition-delay:.7s; }
.js .mini.in .topic i { transform:none; }
.js .mini.in .topic i:nth-of-type(2) { transition-delay:.3s; }
.js .mini.in .topic i:nth-of-type(3) { transition-delay:.6s; }
.m-out .cap2 { gap:3px; }
.m-out .cap2 i { height:4px; }
.js .m-out > * { opacity:0; transform:scale(.8); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.js .mini.in .m-out > * { opacity:1; transform:none; }
.js .mini.in .m-out > *:nth-child(1) { transition-delay:1.3s; }
.js .mini.in .m-out > *:nth-child(2) { transition-delay:1.5s; }
.js .mini.in .m-out > *:nth-child(3) { transition-delay:1.7s; }
.js .mini.in .m-out > *:nth-child(4) { transition-delay:1.9s; }

/* ---------- automation: manual to-dos get crossed off, one flow runs and checks ---------- */
.m-todo { list-style:none; margin:0; padding:7% 10%; background:var(--surface); border:2px solid var(--rule); border-radius:5px;
  aspect-ratio:16/9; display:flex; flex-direction:column; justify-content:space-evenly; }
.m-todo li { position:relative; display:flex; align-items:center; gap:8%; }
.m-todo li i { width:8px; height:8px; border:1.5px solid var(--faint); border-radius:2px; flex-shrink:0; }
.m-todo li b { display:block; height:4px; border-radius:2px; background:var(--ink); opacity:.4; }
.m-todo li::after { content:""; position:absolute; left:-3%; right:6%; top:50%; height:1.5px; margin-top:-.75px; background:var(--accent); transform-origin:left; }
.js .m-todo li::after { transform:scaleX(0); transition:transform .45s cubic-bezier(.45,0,.2,1); }
.js .mini.in .m-todo li::after { transform:none; }
.js .mini.in .m-todo li:nth-child(1)::after { transition-delay:.3s; }
.js .mini.in .m-todo li:nth-child(2)::after { transition-delay:.55s; }
.js .mini.in .m-todo li:nth-child(3)::after { transition-delay:.8s; }
.js .mini.in .m-todo li:nth-child(4)::after { transition-delay:1.05s; }
.m-todo li b, .m-todo li i { opacity:.25; }
.js .m-todo li b { opacity:.4; transition:opacity .4s ease 1.2s; }
.js .m-todo li i { opacity:1; transition:opacity .4s ease 1.2s; }
.js .mini.in .m-todo li b, .js .mini.in .m-todo li i { opacity:.25; }

.m-pipe { position:relative; aspect-ratio:16/9; background:var(--surface); border:2px solid var(--rule); border-radius:5px;
  display:flex; align-items:center; justify-content:space-between; padding:0 11%; }
.m-line { position:absolute; left:16%; right:16%; top:50%; height:2px; margin-top:-1px; background:var(--accent); transform-origin:left; }
.m-node { position:relative; z-index:1; width:15%; aspect-ratio:1; border:1.5px solid var(--accent); border-radius:3px; background:var(--surface);
  box-shadow:0 0 0 3px rgba(212,175,55,.14); }
.m-node.m-end { width:22%; border-radius:50%; background:var(--accent); display:grid; place-items:center; box-shadow:none; }
.js .m-line { transform:scaleX(0); transition:transform .9s cubic-bezier(.45,0,.2,1) 1.3s; }
.js .mini.in .m-line { transform:none; }
.js .m-node { border-color:var(--rule); box-shadow:none; transition:border-color .35s ease, box-shadow .35s ease; }
.js .mini.in .m-node { border-color:var(--accent); box-shadow:0 0 0 3px rgba(212,175,55,.14); }
.js .mini.in .m-node:nth-of-type(2) { transition-delay:1.4s; }
.js .mini.in .m-node:nth-of-type(3) { transition-delay:1.8s; }
.js .m-node.m-end { opacity:0; transform:scale(.4); transition:opacity .3s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.js .mini.in .m-node.m-end { opacity:1; transform:none; box-shadow:none; transition-delay:2.2s; }

/* ---------- care: updates tick off on the site, the monthly line trends up ---------- */
.m-site { background:var(--surface); border:2px solid var(--rule); border-radius:5px; aspect-ratio:16/9; overflow:hidden; display:flex; flex-direction:column; }
.m-site .m-bar { padding:4px 6px; gap:3px; }
.m-site .m-bar i { width:5px; height:5px; }
.m-rows { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; padding:2% 9%; }
.m-rows span { display:flex; align-items:center; justify-content:space-between; gap:6px; }
.m-rows b { display:block; height:4px; border-radius:2px; background:var(--ink); opacity:.35; }
.m-rows em { width:13px; height:13px; border-radius:50%; background:var(--accent); display:grid; place-items:center; flex-shrink:0; }
.js .m-rows em { opacity:0; transform:scale(.3); transition:opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.js .mini.in .m-rows em { opacity:1; transform:none; }
.js .mini.in .m-rows span:nth-child(1) em { transition-delay:.4s; }
.js .mini.in .m-rows span:nth-child(2) em { transition-delay:.75s; }
.js .mini.in .m-rows span:nth-child(3) em { transition-delay:1.1s; }

.m-report { aspect-ratio:16/9; background:var(--surface); border:2px solid var(--rule); border-radius:5px; padding:9% 9%; }
.m-report svg { width:100%; height:100%; display:block; }
.m-grid { fill:none; stroke:var(--rule); stroke-width:1; vector-effect:non-scaling-stroke; }
.m-trend { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.m-tip { fill:var(--accent); transform-box:fill-box; transform-origin:center; }
.js .m-trend { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1) 1.1s; }
.js .mini.in .m-trend { stroke-dashoffset:0; }
.js .m-tip { opacity:0; transform:scale(.2); transition:opacity .3s ease 2.4s, transform .45s cubic-bezier(.16,1,.3,1) 2.4s; }
.js .mini.in .m-tip { opacity:1; transform:none; }

/* ---------- narrow cards ---------- */
@container (max-width:300px) {
  .m-flow { grid-template-columns:1fr 16px 1fr; gap:6px; }
  .m-arrow svg { width:16px; height:10px; }
  .m-wrap .mini-lab { font-size:9px; letter-spacing:.06em; }
  .m-pill { padding:3px 7px 3px 3px; gap:4px; }
  .m-pill b { width:13px; height:13px; }
  .m-pill i { width:22px; }
  .m-pill i + i { width:11px; }
  .m-p2 { margin-top:24px; }
  .m-rows em { width:10px; height:10px; }
  .m-todo li i { width:6px; height:6px; border-width:1px; }
  .m-todo li b, .m-rows b { height:3px; }
}

@media (prefers-reduced-motion:reduce) {
  .js .m-cursor, .js .m-pill, .js .m-cut, .js .m-shorts .short, .js .m-out > *, .js .m-node.m-end,
  .js .m-rows em, .js .m-tip { opacity:1; transform:none; }
  .js .m-todo li::after, .js .m-line, .js .topic i { transform:none; }
  .js .m-node { border-color:var(--accent); }
  .js .m-trend { stroke-dashoffset:0; }
  .js .takes i.x { flex:0 0 0; border-width:0; opacity:0; }
  .js .m-click { opacity:0; }
}