/* Monbot motion layer.
   Everything is scoped to html.motion, which the inline head script sets unless the URL has ?nomotion.
   Delete this file's <link> and motion.js's <script> to return the original site. */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-fast: 200ms;
  --m-base: 320ms;
  --m-slow: 600ms;
  --nav-h: 80px;
}

/* ---- Still by default: drop the always-on loops that compete with the content ---- */
html.motion .hero-visual-frame,
html.motion .hero-title,
html.motion .hero-section::after { animation: none; }
/* orbs keep drifting, but slower and shorter */
html.motion .hero-orb { animation-duration: 40s, 40s; }

/* ---- Reveals: 12px, one curve, staggered by sibling index, alternating hair of tilt (pattern 33) ---- */
html.motion.js .loading-animation {
  transform: translateY(12px) rotate(var(--tilt, 0deg));
  transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease);
  transition-delay: var(--d, 0s);
}
html.motion.js .loading-animation.loaded { transform: none; }
/* cards keep their own hover lift once revealed */
html.motion.js .loading-animation.loaded.m-settled { transition-delay: 0s; transition: all 0.4s var(--m-ease); }

/* ---- Counters: digits don't jiggle ---- */
html.motion .stat-number,
html.motion .metric-number { font-variant-numeric: tabular-nums; }

/* ---- Autonomy scene (desktop): sticky stage, line drawn by scroll ---- */
html.motion .an-scene { position: relative; }
html.motion .an-scene.is-sticky { height: 230vh; }
html.motion .an-scene.is-sticky .an-stage {
  position: sticky;
  top: var(--nav-h);
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 2rem;
}
html.motion .an-scene .an-rail-fill {
  transform-origin: left center;
  transform: scaleX(var(--p, 1));
}
html.motion .an-scene .an-node .an-dot,
html.motion .an-scene .an-node .an-label {
  transition: background var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease),
              border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease),
              transform var(--m-slow) var(--m-ease);
}
html.motion .an-scene .an-range-caption {
  transition: opacity var(--m-slow) var(--m-ease), transform var(--m-slow) var(--m-ease);
}
html.motion .an-scene.is-pending .an-range-caption { opacity: 0; transform: translateY(12px); }

/* mobile / reduced: no stickiness, the line draws once on entry */
html.motion .an-scene.is-once .an-rail-fill { transition: transform 1200ms var(--m-ease); }

/* ---- Magnetic CTA (desktop, fine pointer): uses `translate` so it never fights the hover `transform` ---- */
html.motion .m-magnet { translate: var(--mx, 0px) var(--my, 0px); }

/* ---- Reduced motion: a different path, not a slower one ---- */
@media (prefers-reduced-motion: reduce) {
  html.motion.js .loading-animation { transform: none; transition: none; opacity: 1; }
  html.motion .an-scene .an-rail-fill,
  html.motion .an-scene .an-node .an-dot,
  html.motion .an-scene .an-node .an-label,
  html.motion .an-scene .an-range-caption { transition: none; }
  html.motion .m-magnet { translate: none; }
}