/* acellab.io motion layer (site/motion, added to every page by build.mjs; the zip's own files stay untouched).
   - scrolling: progress bar, floating header, the waitlist pill tucks away while you read
   - reveals: headings, cards and lists rise in as they enter the screen, in order
   - scenes: every description box gets a small animation of what it says (search, chat, deck, pipeline...)
   - hover: a soft light follows the pointer on cards
   Everything is off for people who ask for reduced motion, and the page reads fine with no JavaScript. */

/* ---------- scrolling: the window scrolls again (style.css made <body> the scroller, which broke the floating
   header and every scroll listener); clip still stops sideways scrolling ---------- */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
  body { height: auto; min-height: 100%; }
}

.mo-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 10001; pointer-events: none;
  background: linear-gradient(90deg, #2962ff, #18b6a4 55%, #7c4dff);
  transform-origin: 0 50%; transform: scaleX(var(--mo-p, 0));
}

/* the "waitlist is open" pill folds away while scrolling down, comes back when scrolling up */
.announcement-bar { transition: max-height .35s ease, opacity .25s ease, transform .35s ease, padding .35s ease, margin .35s ease; max-height: 120px; }
html.mo-down .announcement-bar { max-height: 0; opacity: 0; transform: translateY(-10px); padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; overflow: hidden; }

/* ---------- reveals (only once motion.js has started, so nothing hides without JavaScript) ---------- */
html.mo .mo-rv {
  opacity: 0; translate: 0 26px; filter: blur(6px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1), filter .7s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.mo .mo-rv.mo-in { opacity: 1; translate: 0 0; filter: none; }
html.mo .mo-rv--left { translate: -34px 0; }
html.mo .mo-rv--right { translate: 34px 0; }
html.mo .mo-rv--zoom { translate: 0 0; scale: .94; transition-property: opacity, scale, filter; }
html.mo .mo-rv--zoom.mo-in { scale: 1; }

/* the hero greets on load: headline wipes up, the rest follows */
html.mo .hero h1.mo-in { animation: mo-wipe 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mo-wipe { from { clip-path: inset(0 0 100% 0); translate: 0 30px; } to { clip-path: inset(0 0 -20% 0); translate: 0 0; } }
.hero h1 { background: linear-gradient(100deg, #0f172a 0%, #0f172a 40%, #2962ff 50%, #0f172a 60%, #0f172a 100%); background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; }
html.mo .hero h1.mo-in { color: transparent; animation: mo-wipe 1s cubic-bezier(.2,.7,.2,1) both, mo-sheen 2.4s ease 1s both; }
@keyframes mo-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* soft moving light behind the hero */
.mo-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mo-aurora i { position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(70px); opacity: .32; }
.mo-aurora i:nth-child(1) { background: #8fb0ff; left: -8%; top: 8%; animation: mo-float1 18s ease-in-out infinite alternate; }
.mo-aurora i:nth-child(2) { background: #9ff0df; right: -6%; top: 22%; animation: mo-float2 22s ease-in-out infinite alternate; }
.mo-aurora i:nth-child(3) { background: #d6c4ff; left: 35%; top: 48%; animation: mo-float1 26s ease-in-out infinite alternate-reverse; }
@keyframes mo-float1 { to { transform: translate(12vw, 6vw) scale(1.15); } }
@keyframes mo-float2 { to { transform: translate(-10vw, 8vw) scale(.9); } }
.hero > *:not(.mo-aurora) { position: relative; z-index: 1; }

/* ---------- small touches on existing parts ---------- */
.plan-exec__accent {
  background: linear-gradient(90deg, #2962ff, #18b6a4, #7c4dff, #2962ff); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: mo-hue 7s linear infinite;
}
@keyframes mo-hue { to { background-position: 300% 0; } }
html.mo .checklist li.mo-in .check { animation: mo-check .5s cubic-bezier(.2,.9,.3,1.4) calc(var(--i, 0) * 90ms + .25s) both; }
@keyframes mo-check { from { scale: 0; rotate: -30deg; } to { scale: 1; rotate: 0deg; } }
.platform-flow__highlight { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .9s cubic-bezier(.2,.7,.2,1) .4s; }
.mo-in .platform-flow__highlight, .platform-flow__highlight.mo-in { background-size: 100% 2px; }
html.mo .platform-flow__step-arrow.mo-in svg path:first-child { stroke-dasharray: 22; animation: mo-dash 1.6s ease-in-out infinite; }
@keyframes mo-dash { from { stroke-dashoffset: 22; } 60%, to { stroke-dashoffset: 0; } }

/* demos that move on by themselves: a line fills under the active step */
.mo-auto-active { position: relative; }
.mo-auto-active::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 2px; border-radius: 2px; background: currentColor; opacity: .55; transform-origin: 0 50%; animation: mo-fill var(--mo-step, 5s) linear both; }
@keyframes mo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.psc__bash-step { transition: box-shadow .4s ease, border-color .4s ease, translate .4s ease; }
.psc__bash-step.mo-lit { box-shadow: 0 0 0 2px rgba(102, 209, 143, .55), 0 14px 34px rgba(15, 23, 42, .1); translate: 0 -2px; }

/* light that follows the pointer on cards */
.mo-spot { position: relative; isolation: isolate; }
.mo-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(41, 98, 255, .09), transparent 45%);
}
.mo-spot:hover::after { opacity: 1; }

/* ---------- scenes: a picture of what the box says ---------- */
.mo-scene { display: block; width: 100%; margin: 4px 0 14px; transition: opacity .25s ease; }
.mo-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.mo-scene.mo-reset { opacity: 0; }
.trait-card .trait-icon { display: none; }
.trait-card .mo-scene { margin: -2px 0 14px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, #f6f8ff, #fbfcff); border: 1px solid rgba(41, 98, 255, .08); box-sizing: border-box; }
.product .mo-scene { margin: 8px 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(15, 23, 42, .06); box-sizing: border-box; }
.platform-flow__step .mo-scene { margin: 2px 0 12px; padding: 8px 10px; border-radius: 12px; background: #f6f8ff; box-sizing: border-box; }
.platform-flow__problem.mo-has-scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 18px 36px; align-items: center; }
.platform-flow__problem.mo-has-scene > p { grid-column: 1; }
.platform-flow__problem.mo-has-scene > .mo-scene { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 760px) {
  .platform-flow__problem.mo-has-scene { grid-template-columns: 1fr; }
  .platform-flow__problem.mo-has-scene > .mo-scene { grid-column: 1; grid-row: auto; max-width: 360px; }
}

/* pieces of a scene: they stay in their finished place unless a run is playing */
.mo-scene * { transform-box: fill-box; }
.mo-run .a-pop { animation: mo-pop .55s cubic-bezier(.2,.9,.3,1.35) var(--d, 0s) both; transform-origin: center; }
.mo-run .a-up { animation: mo-up .5s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both; }
.mo-run .a-in { animation: mo-in .4s ease var(--d, 0s) both; }
.mo-run .a-gx { animation: mo-gx .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s) both; transform-origin: left center; }
.mo-run .a-gy { animation: mo-gy .6s cubic-bezier(.2,.7,.2,1.2) var(--d, 0s) both; transform-origin: center bottom; }
.mo-run .a-draw { stroke-dasharray: 1; animation: mo-draw .9s ease var(--d, 0s) both; }
.mo-run .a-blink { animation: mo-blink 1s steps(1) var(--d, 0s) infinite; }
.mo-run .a-pulse { animation: mo-pulse 1.6s ease-in-out var(--d, 0s) infinite; transform-origin: center; }
.mo-run .a-spin { animation: mo-spinz 6s linear infinite; transform-origin: center; }
@keyframes mo-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes mo-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mo-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-gx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mo-gy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mo-blink { 50% { opacity: 0; } }
@keyframes mo-pulse { 50% { transform: scale(1.18); opacity: .75; } }
@keyframes mo-spinz { to { transform: rotate(360deg); } }

/* scene-specific moves */
.mo-run .m-lens { animation: mo-lens 2.6s cubic-bezier(.5,0,.3,1) .5s both; }
@keyframes mo-lens { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translate(150px, 22px); } 100% { transform: translate(60px, 44px); } }
.mo-run .m-hl { animation: mo-in .3s ease 2.6s both, mo-pulse 1.6s ease-in-out 3s infinite; }
.mo-run .m-card { animation: mo-kanban 3.6s cubic-bezier(.6,0,.3,1) .4s both; }
@keyframes mo-kanban { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 30%, 42% { transform: translate(76px, 0); } 70%, 100% { transform: translate(152px, 0); } }
.mo-run .m-plane { animation: mo-plane 2.2s cubic-bezier(.5,0,.4,1) .3s both; }
@keyframes mo-plane { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 10% { opacity: 1; } 60% { transform: translate(52px, -14px) rotate(6deg); } 90% { transform: translate(84px, 0) rotate(14deg); opacity: 1; } 100% { transform: translate(90px, 4px) scale(.4); opacity: 0; } }
.mo-run .m-gather { animation: mo-gather 1.4s cubic-bezier(.6,0,.3,1) var(--d, 1.6s) both; }
@keyframes mo-gather { from { transform: translate(var(--gx, 0), var(--gy, 0)); } to { transform: translate(0, 0); } }
.mo-run .m-fadeout { animation: mo-fadeout .6s ease var(--d, 1.4s) both; }
@keyframes mo-fadeout { to { opacity: 0; } }
.mo-run .m-dot { animation: mo-dotout .5s ease var(--d, 1s) both; }
@keyframes mo-dotout { to { opacity: .15; transform: scale(.6); } }
.mo-run .m-packet { offset-rotate: 0deg; animation: mo-packet 2.4s linear var(--d, 1.4s) infinite; }
@keyframes mo-packet { from { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html.mo .mo-rv { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; transition: none !important; }
  .mo-aurora, .mo-progress { display: none; }
  .plan-exec__accent, html.mo .hero h1.mo-in { animation: none !important; }
  .hero h1 { background: none; color: inherit !important; }
  .mo-auto-active::after { animation: none; transform: scaleX(1); }
}
@media print { html.mo .mo-rv { opacity: 1; translate: none; filter: none; } .mo-progress, .mo-aurora { display: none; } }
/* the three step cards' pictures share one height so their titles line up */
.platform-flow__step .mo-scene svg { height: 84px; }
.trait-card .mo-scene svg, .product .mo-scene svg { height: 104px; }

/* phones and tablets: the product cards' hover layer (always on there, so the button can be tapped) used to cover
   the whole card; it becomes a plain button under the description instead */
@media (max-width: 980px) {
  .product .product-hover { position: static; inset: auto; opacity: 1; transform: none; background: none; padding: 0; margin: 2px 0 14px; display: flex; justify-content: center; pointer-events: auto; }
  .product .product-hover__video { display: none; }
  .product .product-hover__actions { position: static; inset: auto; padding: 0; display: flex; justify-content: center; background: none; }
}

/* phones and tablets: the "waitlist is open" pill hangs below the menu over the hero, which had only 20px of room,
   so it covered the "Backed by" logos. The hero now leaves the pill's height (measured into --ribbon-h) free. */
@media (max-width: 980px) {
  .hero--fullvid { padding-top: calc(var(--ribbon-h, 0px) + 20px); }
}

/* Product page: the four AI models and the three product cards */
.panel .blk .mo-scene, .cards > .card .mo-scene { margin: 10px 0 12px; padding: 10px 12px; border-radius: 12px; background: #f6f8ff; border: 1px solid rgba(41, 98, 255, .08); box-sizing: border-box; }
.panel .blk .mo-scene svg, .cards > .card .mo-scene svg { height: 96px; }
.mo-run .m-scan { animation: mo-scan 1.6s ease-in-out .3s both; }
@keyframes mo-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .6; } 90% { opacity: .6; } 100% { transform: translateY(60px); opacity: 0; } }