/* v1.243 MOTION-2 — the marketing site's motion (approved from the v1.242
   preview; <html class="mv2"> on every marketing page). Every rule is scoped
   to html.mv2. Content and wording are unchanged; only how it arrives.

   1. Nothing important starts invisible: the H1 and anything already on
      screen are visible at first paint (better LCP), and with JS off
      everything shows. The three overlapping hide-then-reveal systems
      (.reveal, .lift-wait, .cn-rise, word splitting) are replaced by one.
   2. One motion language — "the lift arrives": blocks rise a short way and
      settle (no fades from nothing), cards follow in a quick stagger, and a
      thin orange "door seam" opens under each section label.
   3. Scroll-linked depth where the browser supports it (scroll-driven
      animations): product visuals drift slightly slower than the text.
   4. Calm by default; prefers-reduced-motion turns all of it off. */

html.mv2 .reveal, html.mv2 .reveal-stagger > *, html.mv2 .lift-wait, html.mv2 .cn-rise,
html.mv2 [data-reveal-words], html.mv2 [data-reveal-words] .rw-word { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none; }

/* 1. Headline: visible immediately, settles into place */
html.mv2 .hero h1 { animation: mvSettle .9s cubic-bezier(.16, .84, .3, 1) both; }
html.mv2 .hero h1::after { content: ""; display: block; width: 72px; height: 3px; margin-top: 18px; background: var(--orange); border-radius: 2px; transform-origin: left; animation: mvSeam .9s .35s cubic-bezier(.65, 0, .35, 1) both; }
html.mv2 .hero .lede, html.mv2 .hero p { animation: mvSettle .9s .12s cubic-bezier(.16, .84, .3, 1) both; }
html.mv2 .hero-ctas { animation: mvSettle .9s .22s cubic-bezier(.16, .84, .3, 1) both; }

/* 2. One reveal for everything below the fold (classes added by motion-v2.js) */
html.mv2 .mv-in { opacity: 0; transform: translate3d(0, 22px, 0); }
html.mv2 .mv-in.mv-on { opacity: 1; transform: none; transition: opacity .55s ease-out, transform .75s cubic-bezier(.16, .84, .3, 1); transition-delay: var(--mv-delay, 0ms); }

/* the "door seam" under section labels: opens from the middle when the section arrives */
html.mv2 .mv-seam { position: relative; }
html.mv2 .mv-seam::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 56px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: center; }
html.mv2 .mv-seam.mv-on::after { transform: scaleX(1); transition: transform .7s .15s cubic-bezier(.65, 0, .35, 1); }
html.mv2 .eyebrow.mv-seam::before { display: none; }

/* section change: the next floor's label slides in like a floor indicator */
html.mv2 .mv-floorline { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 0; font: 600 .7rem/1 ui-monospace, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); }
html.mv2 .mv-floorline b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 6px; background: var(--teal); color: var(--orange); font-size: .72rem; }
html.mv2 .mv-floorline span { overflow: hidden; }
html.mv2 .mv-floorline.mv-on b { animation: mvDing .6s ease-out; }
html.mv2 .flow-connector { display: none; }

/* buttons: a small lift on hover, arrow nudges */
html.mv2 .btn { transition: transform .25s cubic-bezier(.16, .84, .3, 1), box-shadow .25s ease; will-change: transform; }
html.mv2 .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 56, 65, .55); }
html.mv2 .btn:active { transform: translateY(0); }

/* cards: hover depth */
html.mv2 .dept-card, html.mv2 .leader-card, html.mv2 .seo-related-grid a { transition: transform .35s cubic-bezier(.16, .84, .3, 1), box-shadow .35s ease; }
html.mv2 .dept-card:hover, html.mv2 .leader-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 56, 65, .45); }

/* 3. scroll-linked depth (Chrome / Edge; others simply skip it) */
@supports (animation-timeline: view()) {
  html.mv2 .hero-visual, html.mv2 .product-visual, html.mv2 .pf-stage, html.mv2 .iot-topology { animation: mvDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* homepage "quick answers" block (AEO) */
html.mv2 .mv-qa { background: #fff; }
html.mv2 .mv-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 22px; }
html.mv2 .mv-qa-grid details { border: 1px solid var(--line-light); border-radius: 12px; padding: 14px 16px; background: var(--paper); }
html.mv2 .mv-qa-grid summary { cursor: pointer; font-weight: 700; color: var(--teal); }
html.mv2 .mv-qa-grid p { margin: 10px 0 0; color: var(--ink-soft); line-height: 1.6; }

@keyframes mvSettle { from { transform: translate3d(0, 16px, 0); } to { transform: none; } }
@keyframes mvSeam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mvDing { 0% { transform: scale(1); } 40% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(246, 152, 16, .18); } 100% { transform: scale(1); } }
@keyframes mvDrift { from { transform: translate3d(0, 28px, 0); } to { transform: translate3d(0, -28px, 0); } }

@media (prefers-reduced-motion: reduce) {
  html.mv2 *, html.mv2 *::before, html.mv2 *::after { animation: none !important; transition: none !important; }
  html.mv2 .mv-in { opacity: 1; transform: none; }
  html.mv2 .mv-seam::after { transform: scaleX(1); }
}