/* Motion layer: entrance sequencing, micro-interactions and ambient motion.
   Motion only: every state here resolves back to the element's own styles.
   Reveal motion uses the individual translate/scale properties so it composes with,
   and never replaces, an element's existing transform. */
:root{
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-out:cubic-bezier(.16,1,.3,1);
  --m-soft:cubic-bezier(.33,1,.68,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1);
  --m-fluid:cubic-bezier(.65,0,.35,1)
}

/* Hero content stays hidden for the first frames until motion.js has staged it (fail-safe in <head>). */
html.m-boot :is(.hero-copy,.hero-visual,.neo-hero-layout,.neo-performance-strip,.ms-hero-grid,.ms-promises,.price-hero-layout){opacity:0}

@media (prefers-reduced-motion:no-preference){
  /* ---- Entrance reveals ----
     Hidden states apply instantly; only the move into place is transitioned. Opacity
     resolves faster than movement, so content reads early while it is still settling. */
  html.m-on [data-m].m-in{
    transition:
      opacity var(--mo,500ms) var(--m-soft) var(--md,0ms),
      translate var(--mt,800ms) var(--m-out) var(--md,0ms),
      scale var(--mt,800ms) var(--m-out) var(--md,0ms),
      clip-path var(--mc,1000ms) var(--m-fluid) var(--md,0ms)
  }
  html.m-on [data-m=rise]{--mo:450ms;--mt:700ms}
  html.m-on [data-m=lift]{--mo:520ms;--mt:920ms}
  html.m-on [data-m=cascade]{--mo:380ms;--mt:620ms}
  html.m-on [data-m=fade]{--mo:700ms}
  html.m-on [data-m=zoom]{--mo:800ms;--mt:1250ms}
  html.m-on [data-m=unmask]{--mt:1050ms;--mc:1050ms}
  html.m-on [data-m=wipe]{--mc:1100ms}

  html.m-on [data-m=rise]:not(.m-in){opacity:0;translate:0 16px}
  html.m-on [data-m=lift]:not(.m-in){opacity:0;translate:0 32px;scale:.965}
  html.m-on [data-m=cascade]:not(.m-in){opacity:0;translate:-16px 0}
  html.m-on [data-m=fade]:not(.m-in){opacity:0}
  html.m-on [data-m=zoom]:not(.m-in){opacity:0;scale:.9}
  html.m-on [data-m=unmask]:not(.m-in){clip-path:inset(0 0 100% 0);translate:0 24px}
  html.m-on [data-m=wipe]:not(.m-in){clip-path:inset(0 100% 0 0)}
  html.m-on [data-m=unmask].m-in,html.m-on [data-m=wipe].m-in{clip-path:inset(-48px)}

  /* Headlines: words rise out of their own line masks. h1 is slower with a slight tilt; h2 is brisk. */
  .m-split .mw{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .12em;margin:-.06em 0 -.12em}
  .m-split .mw>span{display:inline-block;transform-origin:left bottom}
  .m-split1:not(.m-in) .mw>span{translate:0 105%;rotate:3deg}
  .m-split2:not(.m-in) .mw>span{translate:0 100%}
  .m-split1.m-in .mw>span{
    transition:translate 1050ms var(--m-out),rotate 1050ms var(--m-out);
    transition-delay:calc(var(--i) * 45ms + var(--md,0ms))
  }
  .m-split2.m-in .mw>span{
    transition:translate 820ms var(--m-out);
    transition-delay:calc(var(--i) * 28ms + var(--md,0ms))
  }

  /* Count-up figures keep their final width so the unit beside them never moves */
  .m-count{display:inline-block;font:inherit}

  /* Ambient loops pause while their section is off screen */
  .m-off,.m-off *{animation-play-state:paused!important}

  /* Pointer parallax on hero illustrations (transform is otherwise unused on these) */
  .m-par{transform:translate3d(var(--mpx,0px),var(--mpy,0px),0);will-change:transform}

  /* Existing panel/tab transitions: one easing curve across the site */
  .nav-panel:not([hidden]),
  .hero-audience>p.is-switching,
  .stack-trigger[aria-pressed=true]+.stack-chips,
  .deploy-stage.switching .deploy-source,
  .product-stage.switching .product-node,
  .product-stage.switching .board-module,
  .product-stage.switching .scene-item,
  .js-motion .mcp-console.is-playing .mcp-log-step,
  .price-panel{animation-timing-function:var(--m-ease)}

  /* Theme change: circular reveal from the toggle (View Transitions) */
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
}

/* ---- Micro-interactions (precise pointers only) ---- */
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .text-link:after,.price-order:after{transition:transform .5s var(--m-ease)}
  .text-link span,.price-order span{transition:transform .45s var(--m-spring)}
  .button span{transition:transform .45s var(--m-spring)}

  .catalog-card h3>span{transition:translate .45s var(--m-spring)}
  .catalog-card:hover h3>span{translate:3px -3px}

  .journey-card,.pipeline-stage,.price-models>article{transition:border-color .25s,translate .45s var(--m-ease)}
  .journey-card:hover,.pipeline-stage:hover,.price-models>article:hover{translate:0 -3px}
  .journey-card .journey-icon{transition:background .2s,border-color .2s,scale .45s var(--m-spring)}
  .journey-card:hover .journey-icon{scale:1.06}

  .price-scene-label i{transition:transform .45s var(--m-spring)}
}

/* Pointer-less fallbacks and reduced motion: everything rests in its original state */
@media (prefers-reduced-motion:reduce){
  html.m-boot :is(.hero-copy,.hero-visual,.neo-hero-layout,.neo-performance-strip,.ms-hero-grid,.ms-promises,.price-hero-layout){opacity:1}
}