/* ═══════════════════════════════════════════════════════════════════ RAVEHQ MOTION-V2 — shared motion CSS Extracted + generalized from site/_hp_directions/01-pipeline-draws-itself.html (D-006 winner: "the pipeline draws itself"). Governs all motion sitewide per planning/DESIGN_CONTRACT_V2.md. Rules baked into this file (do not violate when composing pages): - Every animation is transform/opacity only. No layout properties. - prefers-reduced-motion fallbacks are OPACITY-ONLY overrides. NEVER add `transform:none !important` to a positioned SVG group — that snaps pipeline nodes out of their perimeter position and back into document-flow (0,0), which is the exact bug the winner fixed. Reduced motion means "skip the animation, keep the end state," not "strip the base transform that places the element." - <880px: pipeline visuals hide, typography carries the hero. ═══════════════════════════════════════════════════════════════════ */ :root{ /* tokens — VISUAL_CRAFT_CONTRACT v1, unchanged */ --canvas:#FAF7F1; --surface:#FFFFFF; --surf-w:#F3EEE5; --ink:#121217; --ink-m:#4A4A5A; --ink-l:#646471; /* Golden Sweep Phase B (2026-07-03): was #7A7A8A, failed WCAG 4.5:1 on every background it's used against (402 sitewide findings, contrast_gate.py) — see assets/style.css's matching token for the full rationale. This file has a sibling copy at the other site/ vs site-v2/ assets/motion-v2.css path — keep BOTH copies byte-identical (M7 discipline: stale-copy root cause; this exact comment block must match verbatim in both, not just the token). */ --line:#E4DECE; --gold:#B8892A; --gold-l:#E8C96A; --gold-bg:#FDF3DC; --navy:#0D1B35; --win:#117A4A; --loss:#C03020; /* motion timing scale — reused across every primitive below */ --mv2-ease-out: cubic-bezier(.22,1,.36,1); --mv2-ease-inout: cubic-bezier(.45,0,.55,1); --mv2-stagger: 100ms; --mv2-fade-dur: .6s; --mv2-draw-dur: .6s; } /* --------------------------------------------------------------------- 0. BASE RESET (scoped additions only — do not fight assets/style.css) --------------------------------------------------------------------- */ .mv2-root{ overflow-x:hidden; } /* Golden Sweep fix wave (2026-07-03): overflow-x:hidden on .mv2-root (= ) does NOT reliably suppress document-level horizontal scroll, because document.scrollingElement resolves to in this document (confirmed via document.scrollingElement.tagName === 'HTML'), and itself had no overflow-x restriction. This is a known browser gotcha: the overflow property only stops the SCROLLING ELEMENT's own scroll — setting it on body is a no-op for scroll suppression when html is the one actually scrolling. Confirmed by direct repro: pages with a genuinely wide descendant (e.g. insights/from-search-to-answer- engine.html's .compare-table, min-width:420px inside a scrollable wrapper) showed a REAL horizontal scroll (window.scrollTo(1000,0) actually moved scrollX to 103) despite .mv2-root's overflow-x:hidden being correctly applied and computed — because it was applied to the wrong element. Setting it on html as well closes the gap: verified this single-line addition alone drops document.scrollingElement. scrollWidth from 463 to 360 (exact viewport width, zero overflow) on the affected page, with no other page-local changes. This is the true root cause behind the §8.1 "zero horizontal overflow" floor, more fundamental than the previous per-page investigation (Root cause D) suggested — the table-wrap fix in that page was still correct/necessary (overflow-x:auto + max-width:100% properly contains the table so it's touch-scrollable instead of just spilling sideways) but this html-level fix is what actually stops the overflow from reaching the page's own scroll region regardless of which specific element on a given page might overflow in the future. */ html{ overflow-x:hidden; } /* --------------------------------------------------------------------- 1. ENTRANCE STAGGER — fade-up Usage: add [data-mv2="fade-up"] to any element inside a [data-mv2-group] container. motion-v2.js walks children in DOM order and staggers them by --mv2-stagger. Works with or without JS present because the CSS end-state is opacity:1 by default — JS only ADDS the animated entrance; a JS failure never hides content (see the class toggle model in section 6). --------------------------------------------------------------------- */ [data-mv2="fade-up"]{ opacity:1; transform:none; } /* JS arms the entrance by adding .mv2-armed before elements enter the viewport / before the load timeline fires. Only THEN do we hide them, so a script that never runs (blocked, slow 3G, ad-blocker) can never leave content invisible. */ .mv2-armed[data-mv2="fade-up"]{ opacity:0; transform:translateY(16px); transition:opacity var(--mv2-fade-dur) var(--mv2-ease-out), transform var(--mv2-fade-dur) var(--mv2-ease-out); } .mv2-armed[data-mv2="fade-up"].mv2-in{ opacity:1; transform:translateY(0); } /* --------------------------------------------------------------------- 2. SVG PATH DRAW-ON SYSTEM Usage: for the base line, for the gold traveling overlay on the SAME path geometry, and for each destination node. motion-v2.js measures getTotalLength(), sets stroke-dasharray / stroke-dashoffset, then draws to 0 and fades the destination node in. --------------------------------------------------------------------- */ .mv2-flow-line{ fill:none; stroke:var(--line); stroke-width:1.6; } .mv2-flow-line-active{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; } .mv2-pulse-dot{ fill:var(--gold); filter:drop-shadow(0 0 6px rgba(184,137,42,0.6)); } /* Node starts invisible ONLY once JS has armed it (see .mv2-armed pattern above) — same fail-open guarantee as the fade-up primitive. */ .mv2-node{ opacity:1; } .mv2-armed.mv2-node{ opacity:0; } .mv2-armed.mv2-node.mv2-in{ opacity:1; transition:opacity .5s var(--mv2-ease-out); } .mv2-node-ring{ fill:var(--canvas); stroke:var(--navy); stroke-width:1.6; } .mv2-node-ring-active{ fill:var(--gold-bg); stroke:var(--gold); } .mv2-node-icon{ stroke:var(--navy); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; } .mv2-node-icon-accent{ stroke:var(--gold); stroke-width:1.8; fill:none; stroke-linecap:round; } .mv2-node-label{ font-family:'Switzer',sans-serif; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; fill:var(--ink-l); } /* --------------------------------------------------------------------- 3. CONTENT-EXCLUSION-ZONE PIPELINE LAYOUT THE RULE (locked, from D-006 repair): the SVG pipeline is a full-bleed background layer (position:absolute, inset:0, z-index under content). Nodes live ONLY on the perimeter of the viewBox — a top strip and a bottom strip. The vertical center third of the viewBox is a protected safe-zone for the headline/copy column and must stay clear of any node, label, or connector that crosses through it horizontally. Verified reference points from the winner (1600x1000 viewBox): node4 -> translate(410,940) (bottom strip) node5 -> translate(1195,905) (bottom strip) Connectors that must travel top-to-bottom hug the far left/right edges (x<80 or x>1520 in a 1600-wide viewBox), never crossing the vertical center. Any new page composing this pattern MUST keep its node coordinates inside the same perimeter bands relative to its own viewBox — do not place a node inside the middle band. --------------------------------------------------------------------- */ .mv2-pipeline-stage{ position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; } .mv2-pipeline-svg{ width:min(1600px,150vw); height:auto; max-height:92vh; opacity:0.85; } /* The safe-zone rect is authoring guidance, not a runtime element — draw it as a temporary at 25%-75% height while composing a new pipeline layout, then delete it before ship. motion-v2.js will warn in the console if a node's y-coordinate (or x-coordinate translation) falls inside that band on page load. */ .mv2-safezone-debug{ fill:rgba(192,48,32,0.06); stroke:rgba(192,48,32,0.4); stroke-dasharray:6 6; } /* Content column sits above the pipeline layer, unaffected by it */ .mv2-content-col{ position:relative; z-index:2; } /* --------------------------------------------------------------------- 4. COUNT-UP NUMBERS Usage: motion-v2.js tweens textContent from the "from" value (default 0) to "to" over --mv2-count-dur (default 1.1s). Purely a JS text mutation — no layout-affecting CSS needed, but we still gate the trigger via IntersectionObserver (section 5) so it fires once, in view. --------------------------------------------------------------------- */ [data-mv2-count]{ font-variant-numeric:tabular-nums; } /* --------------------------------------------------------------------- 5. SCROLL-REVEAL (IntersectionObserver-driven) Usage: add [data-mv2-reveal] to a container. motion-v2.js observes it; on first intersection it adds .mv2-in to the container AND to every descendant carrying [data-mv2="fade-up"], honoring per-child stagger via each child's DOM order (index * --mv2-stagger). --------------------------------------------------------------------- */ [data-mv2-reveal]{ opacity:1; } .mv2-armed[data-mv2-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--mv2-ease-out), transform .7s var(--mv2-ease-out); } .mv2-armed[data-mv2-reveal].mv2-in{ opacity:1; transform:translateY(0); } /* --------------------------------------------------------------------- 6. SHIMMER SWEEP (scanning-moment primitive, from VISUAL_CRAFT_CONTRACT Rule 6) — opt-in via .mv2-shimmer-active, one-shot, CSS-only. --------------------------------------------------------------------- */ @keyframes mv2-shimmer{ 0%{transform:translateX(-100%);} 100%{transform:translateX(250%);} } .mv2-shimmer-surface{ position:relative; overflow:hidden; } .mv2-shimmer-surface::after{ content:''; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); pointer-events:none; opacity:0; } .mv2-shimmer-surface.mv2-shimmer-active::after{ opacity:1; animation:mv2-shimmer 1.1s ease-in-out 1; } /* --------------------------------------------------------------------- 7. CTA HOVER LIFT (Rule 6 — subtle and premium) --------------------------------------------------------------------- */ .mv2-hover-lift{ transition:transform .15s ease, box-shadow .15s ease; } .mv2-hover-lift:hover{ transform:translateY(-1px); } /* --------------------------------------------------------------------- 8. MOBILE RULE (<880px): pipeline cinema hides, typography carries --------------------------------------------------------------------- */ @media (max-width:880px){ .mv2-pipeline-stage{ display:none; } .mv2-hide-mobile{ display:none !important; } } /* --------------------------------------------------------------------- 9. REDUCED-MOTION FALLBACKS — opacity-only, per the hard rule above. Every animated primitive gets its end-state locked in and its animation/transition killed. transform is NEVER reset to none on a .mv2-node or any element carrying a positional SVG transform. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .mv2-armed[data-mv2="fade-up"], .mv2-armed[data-mv2-reveal]{ opacity:1 !important; transition:none !important; /* transform intentionally untouched for SVG-positioned elements; for plain HTML fade-up blocks translateY(0) is harmless and matches the settled state, so it is safe to zero here. */ } [data-mv2="fade-up"]:not(g):not(svg *){ transform:none !important; } .mv2-armed.mv2-node{ opacity:1 !important; transition:none !important; /* transform NOT reset — see file header + section 3 rule. The node's translate(x,y) is its layout position, not an animation. */ } .mv2-pulse-dot{ display:none; } .mv2-flow-line-active{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; opacity:0.9; } .mv2-shimmer-surface.mv2-shimmer-active::after{ animation:none !important; opacity:0 !important; } .mv2-scroll-cue .mv2-scroll-line::after{ animation:none !important; } } /* ═══════════════════════════════════════════════════════════════════ 10. MOBILE LAYER — Contract v2.1 (locked 2026-07-03) Class-level mobile primitives per DESIGN_CONTRACT_V2.md §8. Pages compose these classes; they do NOT reimplement the pattern inline (page-local reinvention is a contract violation — see §8.8). What lives here: 10.1 Compact vertical mini-pipeline (.mv2-vpipe) — the mobile equivalent of the full desktop pipeline cinema. Motion survives mobile per L-050: this is NOT a hide-and-replace- with-nothing pattern, it's a genuine adapted equivalent. 10.2 Mobile type floors — headline clamp floor, body floor, input floor (iOS zoom-jump guard). 10.3 Mobile spacing clamps for shared primitives. 10.4 Collapse rules — desktop-only artifacts close their space instead of leaving a void (§8.6). 10.5 Tap target floor — nav drawer + generic interactive floor. ═══════════════════════════════════════════════════════════════════ */ /* --------------------------------------------------------------------- 10.1 COMPACT VERTICAL MINI-PIPELINE Usage:

...svg... Customer visits

... 2 more nodes (3 total — compact, not the full 6-7 node story) ...

The connecting line draws top-to-bottom via the SAME stroke-dasharray/ stroke-dashoffset mechanic as the desktop pipeline (motion-v2.js §10 initVPipe), just re-oriented to a vertical SVG line instead of a full-bleed background scene. Hidden above 880px (desktop uses the full pipeline instead) and shown only below it — the two are mutually exclusive, never both mounted visibly at once. --------------------------------------------------------------------- */ .mv2-vpipe{ display:none; /* shown only under the 880px breakpoint, see below */ position:relative; flex-direction:column; gap:28px; max-width:100%; box-sizing:border-box; } .mv2-vpipe-line-svg{ position:absolute; top:6px; bottom:6px; left:0; width:44px; /* matches the node's reserved icon-gutter width exactly, so the line always centers under the icon column regardless of the node's own padding-box math (no negative-margin coupling). */ overflow:visible; pointer-events:none; } .mv2-vpipe-line-svg path{ fill:none; stroke:var(--line); stroke-width:1.6; } .mv2-vpipe-line-svg path.mv2-vpipe-line-active{ stroke:var(--gold); stroke-width:2; stroke-linecap:round; } .mv2-vpipe-node{ position:relative; display:flex; align-items:center; min-height:44px; /* tap-target-adjacent rhythm even though these are non-interactive */ padding-left:44px; /* reserves the icon-gutter INSIDE the node's own box (box-sizing:border-box), so the icon can be absolutely positioned at left:0 without any negative-margin math that could escape the container's edge (§8.1 zero-overflow discipline). */ box-sizing:border-box; } .mv2-vpipe-icon{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:32px; height:32px; border-radius:50%; background:var(--canvas); border:1.6px solid var(--navy); display:flex; align-items:center; justify-content:center; } .mv2-vpipe-node.mv2-vpipe-node-active .mv2-vpipe-icon{ background:var(--gold-bg); border-color:var(--gold); } .mv2-vpipe-icon svg{ width:16px; height:16px; stroke:var(--navy); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .mv2-vpipe-node.mv2-vpipe-node-active .mv2-vpipe-icon svg{ stroke:var(--gold); } .mv2-vpipe-label{ font-family:'Switzer',sans-serif; font-weight:600; font-size:15px; line-height:1.3; color:var(--ink); } .mv2-vpipe-node-active .mv2-vpipe-label{ font-weight:700; } /* Count-up / reveal equivalent (§8.7 option 2) — a staggered card sequence with a leading stat, for pages where a connector line is visually redundant with existing card rhythm. No new classes needed: compose [data-mv2-reveal] + [data-mv2="fade-up"] + [data-mv2-count] (all already shipped in §1/§4/§5 above) inside a single-column mobile stack. This comment documents the pattern so it isn't independently reinvented per §8.8 — the primitives already exist, mobile usage is just "use them in a single column below 880px instead of omitting motion entirely." */ @media (max-width:880px){ .mv2-vpipe{ display:flex; } } /* --------------------------------------------------------------------- 10.2 MOBILE TYPE FLOORS (§8.2 / §8.3) These are FLOOR guards, not replacements for a page's own clamp() scale. Pages should already be using clamp() with a sane vw coefficient (per VISUAL_CRAFT_CONTRACT + existing sitewide pattern); this block is the safety net for any element that isn't, or whose coefficient starves below the contract floor at 360px. --------------------------------------------------------------------- */ /* CASCADE-FIGHT FIX (2026-07-03, Golden Sweep fix wave): every v2 page's own