/* ===== Top page motion demos (html[data-mod]) — 2026-10-15 =====
   Service rows (.mo-svc-rows), Why Rootfor (.mo-ab-items), Process (.mo-flow5); mo.js adds .mo-in when a list comes into view */
:root[data-mod] { --mo-g: linear-gradient(90deg, #2448e6, #1fb5a8 55%, #7b5cff); --mo-out: cubic-bezier(.16, 1, .3, 1); }
:root[data-mod] .mo-l > li.sx { transform: none !important; opacity: 1 !important; clip-path: none !important; filter: none !important; }
:root[data-mod] .mo-l .svc-row, :root[data-mod] .mo-ab-items > li { position: relative; isolation: isolate; }
:root[data-mod] .mo-flow5 > li { isolation: isolate; }
:root[data-mod] .mo-l { position: relative; }
:root[data-mod] .mo-l .svc-row:hover .ct { text-decoration: none; }
/* optical centring (p4.js) measures with html.oc-measure: the entrance offsets are lifted for that moment */
html.oc-measure[data-mod] .mo-l .mo-k, html.oc-measure[data-mod] .mo-l .mo-c, html.oc-measure[data-mod] .mo-l > li { transform: none !important; transition: none !important; }
html.oc-measure[data-mod] .mo-l .mo-c { top: 0 !important; }

/* ---------- 1 Drafting: lines are drawn, numbers are typed, text rises out of a slit ---------- */
:root[data-mod="1"] .mo-l { border-top-color: transparent; }
:root[data-mod="1"] .mo-l::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--mo-out); }
:root[data-mod="1"] .mo-l.mo-in::before { transform: none; }
:root[data-mod="1"] .mo-svc-rows .svc-row, :root[data-mod="1"] .mo-ab-items > li { border-bottom-color: transparent; }
:root[data-mod="1"] .mo-svc-rows .svc-row::after, :root[data-mod="1"] .mo-ab-items > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--mo-out) calc(.3s + var(--i) * .14s); }
:root[data-mod="1"] .mo-in .svc-row::after, :root[data-mod="1"] .mo-ab-items.mo-in > li::after { transform: none; }
:root[data-mod="1"] .mo-svc-rows .svc-row::before, :root[data-mod="1"] .mo-ab-items > li::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; z-index: 1; background: var(--mo-g); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--mo-out); }
:root[data-mod="1"] .mo-svc-rows .svc-row:hover::before, :root[data-mod="1"] .mo-ab-items > li:hover::before { transform: none; }
:root[data-mod="1"] .mo-l .mo-k { transition: clip-path 1s var(--mo-out), transform 1s var(--mo-out), color .4s; transition-delay: calc(.4s + var(--i) * .14s + var(--k) * .07s); }
:root[data-mod="1"] .mo-l:not(.mo-in) .mo-k { clip-path: inset(0 0 100% 0); transform: translateY(.9em); }
:root[data-mod="1"] .mo-l .mo-k { clip-path: inset(-.4em -1em -.4em -.4em); }
:root[data-mod="1"] .mo-l .no.mo-k { transition: clip-path .45s steps(3, end), color .4s; transition-delay: calc(.3s + var(--i) * .14s); }
:root[data-mod="1"] .mo-l:not(.mo-in) .no.mo-k { clip-path: inset(0 100% 0 0); transform: none; }
:root[data-mod="1"] .mo-l .svc-row:hover .no, :root[data-mod="1"] .mo-ab-items > li:hover .no, :root[data-mod="1"] .mo-flow5 > li:hover .no { color: #2448e6; transition-delay: 0s; }
@media (min-width: 901px) {
  :root[data-mod="1"] .mo-flow5 > li + li { border-left-color: transparent; }
  :root[data-mod="1"] .mo-flow5 > li + li::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--line); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.1s var(--mo-out) calc(.5s + var(--i) * .22s); }
  :root[data-mod="1"] .mo-flow5.mo-in > li + li::before { transform: none; }
}
:root[data-mod="1"] .mo-flow5::after { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #2448e6; box-shadow: 0 0 12px 3px rgba(36, 72, 230, .45); opacity: 0; pointer-events: none; }
:root[data-mod="1"] .mo-flow5.mo-in::after { animation: mo-run 2.8s cubic-bezier(.65, 0, .35, 1) .5s both; }
:root[data-mod="1"] .mo-flow5 .mo-k { transition-delay: calc(.6s + var(--i) * .22s + var(--k) * .07s); }
@keyframes mo-run { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }

/* ---------- 2 Light: a gradient light sweeps each row in; a soft light follows the cursor ---------- */
:root[data-mod="2"] .mo-svc-rows .svc-row, :root[data-mod="2"] .mo-ab-items > li, :root[data-mod="2"] .mo-flow5 > li {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 270% 100%; mask-size: 270% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: -webkit-mask-position 1.8s var(--mo-out), mask-position 1.8s var(--mo-out); transition-delay: calc(.15s + var(--i) * .16s);
}
:root[data-mod="2"] .mo-in .svc-row, :root[data-mod="2"] .mo-ab-items.mo-in > li, :root[data-mod="2"] .mo-flow5.mo-in > li { -webkit-mask-position: 0 0; mask-position: 0 0; }
:root[data-mod="2"] .mo-svc-rows .svc-row::after, :root[data-mod="2"] .mo-ab-items > li::after, :root[data-mod="2"] .mo-flow5 > li::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(36, 72, 230, .16) 44%, rgba(31, 181, 168, .16) 52%, rgba(123, 92, 255, .14) 60%, transparent 74%) 0 0 / 300% 100% no-repeat;
}
:root[data-mod="2"] .mo-in .svc-row::after, :root[data-mod="2"] .mo-ab-items.mo-in > li::after, :root[data-mod="2"] .mo-flow5.mo-in > li::after { animation: mo-streak 1.9s var(--mo-out) calc(.15s + var(--i) * .16s) both; }
@keyframes mo-streak { 0% { background-position: 100% 0; opacity: 1; } 70% { opacity: 1; } 100% { background-position: 0 0; opacity: 0; } }
:root[data-mod="2"] .mo-svc-rows .svc-row::before, :root[data-mod="2"] .mo-ab-items > li::before, :root[data-mod="2"] .mo-flow5 > li::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(240px 140px at var(--mx, 50%) var(--my, 50%), rgba(36, 72, 230, .11), rgba(31, 181, 168, .07) 45%, transparent 72%);
}
:root[data-mod="2"] .mo-svc-rows .svc-row:hover::before, :root[data-mod="2"] .mo-ab-items > li:hover::before, :root[data-mod="2"] .mo-flow5 > li:hover::before { opacity: 1; }
:root[data-mod="2"] .mo-l :is(.svc-row, li):hover .no { background: var(--mo-g); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-mod="2"] .mo-flow5 > li + li { border-left-color: var(--line); }

/* ---------- 3 Type: letters rise out of a blur, numbers run through digits, a wave on hover ---------- */
:root[data-mod="3"] .mo-c { position: relative; top: 0; transition: top 1s var(--mo-out), opacity 1s var(--mo-out), filter 1s var(--mo-out); transition-delay: calc(.25s + var(--i) * .16s + var(--c) * 24ms); }
:root[data-mod="3"] .mo-l:not(.mo-in) .mo-c { top: .7em; opacity: 0; filter: blur(8px); }
:root[data-mod="3"] .mo-l .mo-k:not(.ct):not(h3):not(.no) { transition: transform 1.1s var(--mo-out), opacity 1.1s var(--mo-out); transition-delay: calc(.55s + var(--i) * .16s); }
:root[data-mod="3"] .mo-l:not(.mo-in) .mo-k:not(.ct):not(h3):not(.no) { transform: translateY(14px); opacity: 0; }
:root[data-mod="3"] .mo-l .no { font-variant-numeric: tabular-nums; }
:root[data-mod="3"] .mo-l .svc-row:hover .mo-c, :root[data-mod="3"] .mo-ab-items > li:hover .mo-c, :root[data-mod="3"] .mo-flow5 > li:hover .mo-c { animation: mo-wave .7s var(--mo-out) calc(var(--c) * 20ms); }
@keyframes mo-wave { 0% { top: 0; } 35% { top: -5px; color: #2448e6; } 100% { top: 0; } }
:root[data-mod="3"] .mo-svc-rows .svc-row { transition: padding-left .6s var(--mo-out); }
:root[data-mod="3"] .mo-svc-rows .svc-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fg); transform: scaleX(0); transition: transform .7s var(--mo-out); }
:root[data-mod="3"] .mo-svc-rows .svc-row:hover::after { transform: none; }

/* ---------- 4 Scroll: the row at the centre of the screen comes forward; the process line fills as you scroll ---------- */
:root[data-mod="4"] .mo-svc-rows .svc-row > *, :root[data-mod="4"] .mo-ab-items > li > * { opacity: calc(.22 + .78 * var(--f, 1)); transition: opacity .2s linear; }
:root[data-mod="4"] .mo-svc-rows .svc-row .ct { transform: translateX(calc((1 - var(--f, 1)) * -14px)); }
:root[data-mod="4"] .mo-svc-rows .svc-row::after, :root[data-mod="4"] .mo-ab-items > li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mo-g); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
:root[data-mod="4"] .mo-svc-rows .svc-row::before {
  content: attr(data-mo-no); position: absolute; right: 64px; top: 50%; z-index: -1; pointer-events: none;
  font: 500 clamp(64px, 9vw, 140px)/1 var(--f-disp); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(36, 72, 230, .45);
  opacity: var(--f, 0); transform: translateY(calc(-50% + (1 - var(--f, 0)) * 36px));
}
:root[data-mod="4"] .mo-ab-items > li { transform: translateY(var(--py, 0px)); }
:root[data-mod="4"] .mo-flow5 { border-top-color: var(--line); }
:root[data-mod="4"] .mo-flow5::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--mo-g); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
:root[data-mod="4"] .mo-flow5 > li > * { transition: opacity .6s ease, color .6s ease, transform .6s var(--mo-out); }
:root[data-mod="4"] .mo-flow5 > li:not(.on) > :is(h3, p) { opacity: .28; }
:root[data-mod="4"] .mo-flow5 > li:not(.on) > .no { opacity: .4; }
:root[data-mod="4"] .mo-flow5 > li.on > .no { color: #2448e6; }
:root[data-mod="4"] .mo-flow5 > li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #2448e6; box-shadow: 0 0 0 4px rgba(36, 72, 230, .14); transform: scale(0); transition: transform .5s var(--mo-out); }
:root[data-mod="4"] .mo-flow5 > li + li::after { left: -4px; }
:root[data-mod="4"] .mo-flow5 > li.on::after { transform: none; }
@media (max-width: 900px) {
  :root[data-mod="4"] .mo-svc-rows .svc-row::before { right: 36px; font-size: 72px; }
  :root[data-mod="4"] .mo-flow5 > li + li::after { left: 0; }
}

/* ---------- 5 Interactive: a panel slides under the row, the arrow follows the cursor, cards tilt, a step widens ---------- */
:root[data-mod="5"] .mo-l > li .mo-k { transition: transform 1s var(--mo-out), opacity 1s var(--mo-out); transition-delay: calc(.2s + var(--i) * .13s + var(--k) * .05s); }
:root[data-mod="5"] .mo-l:not(.mo-in) > li .mo-k { transform: translateY(26px) skewY(3deg); opacity: 0; }
:root[data-mod="5"] .mo-svc-rows .svc-row::before {
  content: ""; position: absolute; inset: 0 -20px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(36, 72, 230, .07), rgba(31, 181, 168, .06) 55%, rgba(123, 92, 255, .08));
  clip-path: inset(0 100% 0 0); transition: clip-path .75s var(--mo-out);
}
:root[data-mod="5"] .mo-svc-rows .svc-row:hover::before { clip-path: inset(0 0 0 0); }
:root[data-mod="5"] .mo-svc-rows .svc-row:hover :is(.nm, .ct, .ds) { transform: translateX(12px); transition-delay: calc(var(--k) * 40ms); }
:root[data-mod="5"] .mo-svc-rows.mo-in .svc-row :is(.nm, .ct, .ds) { transition-duration: .7s; }
:root[data-mod="5"] .mo-svc-rows .svc-row > i {
  width: 48px; height: 48px; margin-right: -12px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid transparent; transform: translate(var(--ax, 0px), var(--ay, 0px));
  transition: transform .5s var(--mo-out), border-color .4s, background .4s, color .4s, opacity 1s var(--mo-out);
}
:root[data-mod="5"] .mo-svc-rows .svc-row:hover > i { border-color: #2448e6; background: #2448e6; color: #fff; transition-delay: 0s; }
:root[data-mod="5"] .mo-svc-rows.mo-in .svc-row:not(:hover) > i { transform: none; }
:root[data-mod="5"] .mo-ab-items { perspective: 1100px; }
:root[data-mod="5"] .mo-ab-items > li { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--mo-out); transform-style: preserve-3d; }
:root[data-mod="5"] .mo-ab-items > li::before {
  content: ""; position: absolute; inset: 0 -18px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(320px 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 60%), linear-gradient(135deg, rgba(36, 72, 230, .06), rgba(123, 92, 255, .06));
  box-shadow: 0 30px 60px -34px rgba(36, 72, 230, .35);
}
:root[data-mod="5"] .mo-ab-items > li:hover::before { opacity: 1; }
:root[data-mod="5"] .mo-ab-items > li:hover .no { color: #2448e6; }
@media (min-width: 901px) {
  :root[data-mod="5"] .mo-flow5 { transition: grid-template-columns .8s var(--mo-out); }
  :root[data-mod="5"] .mo-flow5:has(> li:nth-child(1):hover) { grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; }
  :root[data-mod="5"] .mo-flow5:has(> li:nth-child(2):hover) { grid-template-columns: 1fr 1.7fr 1fr 1fr 1fr; }
  :root[data-mod="5"] .mo-flow5:has(> li:nth-child(3):hover) { grid-template-columns: 1fr 1fr 1.7fr 1fr 1fr; }
  :root[data-mod="5"] .mo-flow5:has(> li:nth-child(4):hover) { grid-template-columns: 1fr 1fr 1fr 1.7fr 1fr; }
  :root[data-mod="5"] .mo-flow5:has(> li:nth-child(5):hover) { grid-template-columns: 1fr 1fr 1fr 1fr 1.7fr; }
  :root[data-mod="5"] .mo-flow5:has(> li:hover) > li:not(:hover) > :is(h3, p) { opacity: .45; }
}
:root[data-mod="5"] .mo-flow5 > li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--mo-g); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--mo-out); }
:root[data-mod="5"] .mo-flow5 > li:hover::after { transform: none; }
:root[data-mod="5"] .mo-flow5 > li:hover > .no { color: #2448e6; }

@media (prefers-reduced-motion: reduce) {
  :root[data-mod] .mo-l, :root[data-mod] .mo-l *, :root[data-mod] .mo-l *::before, :root[data-mod] .mo-l *::after, :root[data-mod] .mo-l::before, :root[data-mod] .mo-l::after { animation: none !important; transition: none !important; }
}