/* juniperflow.ai motion layer (added). Only movement: once every animation has finished the page looks
   exactly like the reference design. Active only when <html> has the "motion" class, which the head
   snippet sets unless the visitor prefers reduced motion; reveal states need classes that motion.js adds,
   so nothing stays hidden if that script does not run. */

:root { --m-ease: cubic-bezier(.22, 1, .36, 1); --m-back: cubic-bezier(.34, 1.56, .64, 1); }

@keyframes m-rise { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes m-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes m-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.05); } }
@keyframes m-menu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes m-ring { from { opacity: .55; transform: scale(.92); } to { opacity: 0; transform: scale(1.4); } }
@keyframes m-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.45); } }
@keyframes m-bounce { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ---------- page load: headlines and intros ---------- */
.motion .hero h1 span { animation: m-rise .9s var(--m-ease) both; }
.motion .hero h1 span:nth-child(1) { animation-delay: .05s; }
.motion .hero h1 span:nth-child(2) { animation-delay: .17s; }
.motion .hero h1 span:nth-child(3) { animation-delay: .29s; }
.motion .hero .lead { animation: m-rise .9s .45s var(--m-ease) both; }
.motion .hero .go.down { animation: m-rise .8s .6s var(--m-ease) both; }
.motion .page-hero .wrap > * { animation: m-rise .9s var(--m-ease) both; }
.motion .page-hero .wrap > :nth-child(1) { animation-delay: .05s; }
.motion .page-hero .wrap > :nth-child(2) { animation-delay: .18s; }
.motion .page-hero .wrap > :nth-child(n+3) { animation-delay: .3s; }

/* soft drift of the background glows */
.motion .hero::before, .motion .page-hero::before { animation: m-drift 18s ease-in-out infinite alternate; }

/* ---------- hero illustration ---------- */
.motion .hero-art .station { transform-box: fill-box; transform-origin: center; animation: m-pop .7s var(--m-back) both; }
.motion .hero-art .station:nth-of-type(1) { animation-delay: .55s; }
.motion .hero-art .station:nth-of-type(2) { animation-delay: 1.25s; }
.motion .hero-art .station:nth-of-type(3) { animation-delay: 1.65s; }
.motion .hero-art svg > circle, .motion .hero-art svg > text { animation: m-fade .8s .15s both; }
.motion .hero-art svg > circle ~ circle, .motion .hero-art svg > text ~ text { animation-delay: 1.9s; }
.motion .hero-art svg > g[opacity] circle { transform-box: fill-box; animation: m-float 6s ease-in-out infinite alternate; }
.motion .hero-art svg > g[opacity] circle:nth-child(2) { animation-duration: 7.5s; animation-delay: -2s; }
.motion .hero-art svg > g[opacity] circle:nth-child(3) { animation-duration: 5.5s; animation-delay: -4s; }
.motion .hero-art svg > g[opacity] circle:nth-child(4) { animation-duration: 8s; animation-delay: -1s; }
.motion .hero-art svg > g[opacity] circle:nth-child(5) { animation-duration: 6.5s; animation-delay: -3s; }
/* the manuscript travelling along the line (created by motion.js) */
.m-dot { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.m-dot.on { opacity: 1; }
.m-dot .m-core { fill: var(--m-hue, var(--one)); transition: fill .6s ease; }
.m-dot .m-halo { fill: var(--m-hue, var(--one)); opacity: .2; transition: fill .6s ease; }
.m-pulse { fill: none; stroke: var(--m-hue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.m-pulse.go { animation: m-pulse 1.3s var(--m-ease) both; }

/* ---------- reveal on scroll (classes added by motion.js) ---------- */
.motion .m-rv { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--m-ease) var(--m-d, 0s), transform .75s var(--m-ease) var(--m-d, 0s); }
.motion .m-rv.m-in { opacity: 1; transform: none; }

/* journey: the line fills as you scroll, stops come in and pulse once when reached */
.motion .spine::before { transform-origin: top; transform: scaleY(var(--m-p, 0)); }
.motion .stop.m-stop .node { opacity: 0; transform: scale(.7); transition: opacity .6s var(--m-ease), transform .7s var(--m-back); }
.motion .stop.m-stop .who, .motion .stop.m-stop .what { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--m-ease), transform .75s var(--m-ease); }
.motion .stop.m-stop .who { transition-delay: .1s; }
.motion .stop.m-stop .what { transition-delay: .2s; }
.motion .stop.m-stop.m-in .node, .motion .stop.m-stop.m-in .who, .motion .stop.m-stop.m-in .what { opacity: 1; transform: none; }
.motion .stop.m-reached .node::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--hue);
  pointer-events: none; animation: m-ring 1.4s var(--m-ease) both;
}
.motion .stop.flow.m-reached .node::after { border-color: var(--note); }

/* vendor switch: cards arrive in order, their connectors draw, changed stations bounce */
.motion .lane li.m-rv:not(:last-child) .station::before { transform-origin: left; transform: scaleX(0); transition: transform .9s var(--m-ease) calc(var(--m-d, 0s) + .35s); }
.motion .lane li.m-rv.m-in:not(:last-child) .station::before { transform: none; }
.motion .seg button { transition: background-color .25s ease, color .25s ease; }
.motion .lane li.m-swap .station img { animation: m-bounce .55s var(--m-back); }

/* solutions page: hue bars grow in, the jump bar follows the section being read */
.motion .points li.m-rv h3::before { transform: translateY(-3px) scaleX(0); transform-origin: left; transition: transform .6s var(--m-ease) calc(var(--m-d, 0s) + .25s); }
.motion .points li.m-rv.m-in h3::before { transform: translateY(-3px); }
.motion .jump a { transition: color .25s ease, border-color .25s ease; }
.jump a.m-active { color: var(--ink); border-color: var(--hue); }
.motion .solution .name.m-in img { animation: m-pop .6s var(--m-back) both; }

/* about page: accent bars grow in */
.motion .prose-cols > div.m-rv h3::after { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--m-ease) calc(var(--m-d, 0s) + .3s); }
.motion .prose-cols > div.m-rv.m-in h3::after { transform: none; }
.motion .form-done:not([hidden]) { animation: m-rise .6s var(--m-ease) both; }

/* menus */
.motion details.dropdown[open] > .menu, .motion .navdrop:hover .menu, .motion .navdrop.open .menu { animation: m-menu .22s var(--m-ease); }
.motion .nav-toggle[open] .mobile-menu { animation: m-menu .25s var(--m-ease); }

/* theme switch crossfade (class set for half a second by motion.js) */
.m-theme, .m-theme *, .m-theme *::before, .m-theme *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important;
}