/* ==========================================================================
   WriteWise v3 MOTION LAYER (v3-motion only). Loaded after site.css.

   RULES
   - One easing (--ease), durations 400–900ms (chart lines up to ~1.8s),
     distances 8–24px. No bounce, no color changes: final states are exactly
     the site.css look.
   - Motion is reserved for data visuals (charts, mocks, diagrams, count-ups)
                     and the finder's narrowing. Page text, sections, heroes,
                     buttons and the dot texture stay still.
   - html.js-motion  set inline in <head> unless prefers-reduced-motion: reduce.
   - html.mo         set by motion.js. Every "hidden before it animates" state is
                     scoped to .mo, so no JS / failed JS = everything visible.
   - .seen           persistent "has been on screen" trigger for components
                     (.step mocks, .cap-chart, .chain, .ledger, .prem, .squares,
                     [data-tabs], .feat instruments).
   - .viz            small drawn visuals; children use .g (grow x), .d (draw line,
                     needs pathLength="1"), .f (fade), .w (wipe), .s (slide in),
                     with style="--i:n" as the step in the sequence.
   ========================================================================== */
:root{--ease:cubic-bezier(.2,.7,.2,1)}


/* sliding indicator under the active tab */
.tabs.has-ind{position:relative}
.tabs.has-ind button.on::after{display:none}
.ind{position:absolute;left:0;height:2px;background:var(--navy);width:var(--iw,0);transform:translateX(var(--ix,0));opacity:0;pointer-events:none;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
.ind.on{opacity:1}
.tabs .ind{bottom:0}

/* ---------- home: "How it works" mocks ---------- */
.mo .step .m-card > *{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--k,0) * 160ms + 300ms)}
.mo .step.seen .m-card > *{opacity:1;transform:none}
.mo .step .m-file .ok{display:inline-block;opacity:0;transform:scale(.5);transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--k,0) * 160ms + 700ms)}
.mo .step.seen .m-file .ok{opacity:1;transform:none}
.mo .step .m-bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease) 1.1s}
.mo .step.seen .m-bar i{transform:none}
.mo .step .m-chart i{transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s var(--ease);transition-delay:calc(var(--k,0) * 45ms + 500ms)}
.mo .step.seen .m-chart i{transform:none}
.mo .step .navy-pill{display:inline-block;opacity:0;transform:scale(.85);transition:opacity .4s var(--ease),transform .5s var(--ease) ;transition-delay:1.9s}
.mo .step.seen .navy-pill{opacity:1;transform:none}

/* ---------- drawn visuals (.viz): feature instruments + Core Solutions mocks ---------- */
@keyframes viz-g{from{transform:scaleX(0)}}
@keyframes viz-d{from{stroke-dashoffset:1}}
@keyframes viz-f{from{opacity:0}}
@keyframes viz-w{from{clip-path:inset(-2px 100% -2px -2px)}}
@keyframes viz-s{from{opacity:0;transform:translateX(24px)}}
.mo .viz .g{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0)}
.mo .viz .d{stroke-dasharray:1;stroke-dashoffset:1}
.mo .viz :is(.f,.s){opacity:0}
.mo .viz .w{clip-path:inset(-2px 100% -2px -2px)}
.mo .seen .viz :is(.g,.d,.f,.w,.s){--dl:calc(var(--i,0) * 110ms + 200ms)}
.mo .seen .viz .g{transform:none;animation:viz-g .9s var(--ease) var(--dl) both}
.mo .seen .viz .d{stroke-dashoffset:0;animation:viz-d 1s var(--ease) var(--dl) both}
.mo .seen .viz .d.slow{animation-duration:1.6s}
.mo .seen .viz .f{opacity:1;animation:viz-f .6s var(--ease) var(--dl) both}
.mo .seen .viz .w{clip-path:inset(-2px);animation:viz-w .9s var(--ease) var(--dl) both}
.mo .seen .viz .s{opacity:1;animation:viz-s .7s var(--ease) var(--dl) both}
/* tab switch: the panel's visual redraws (display:none -> block restarts the animations) */

/* ---------- Get Covered: cap chart ---------- */
.mo .cap-chart .cc-area{opacity:0;transition:opacity .9s var(--ease) .1s}
.mo .cap-chart :is(.cc-cap,.cc-line){stroke-dasharray:1;stroke-dashoffset:1}
.mo .cap-chart .cc-cap{transition:stroke-dashoffset .9s var(--ease) .2s}
.mo .cap-chart .cc-line{transition:stroke-dashoffset 1.8s var(--ease) .6s}
.mo .cap-chart .cc-over{clip-path:inset(-2px 100% -2px -2px);transition:clip-path 1s var(--ease) 1.5s}
.mo .cap-chart .cc-n{opacity:0;transition:opacity .6s var(--ease)}
.mo .cap-chart .cc-n[style*="--i:0"]{transition-delay:.9s}
.mo .cap-chart .cc-n[style*="--i:4"]{transition-delay:1.1s}
.mo .cap-chart .cc-n[style*="--i:1"]{transition-delay:1.3s}
.mo .cap-chart .cc-n[style*="--i:2"]{transition-delay:1.8s}
.mo .cap-chart .cc-n[style*="--i:3"]{transition-delay:2.3s}
.mo .cap-chart.seen .cc-area,.mo .cap-chart.seen .cc-n{opacity:1}
.mo .cap-chart.seen :is(.cc-cap,.cc-line){stroke-dashoffset:0}
.mo .cap-chart.seen .cc-over{clip-path:inset(-2px)}

/* ---------- Who We Serve diagrams ---------- */
.mo .chain li{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--k,0) * 300ms + 100ms)}
.mo .chain li::before{transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease);transition-delay:calc(var(--k,0) * 300ms + 300ms)}
.mo .chain.seen li{opacity:1;transform:none}
.mo .chain.seen li::before{transform:none}
.mo .ledger > *{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--k,0) * 140ms + 100ms)}
.mo .ledger.seen > *{opacity:1;transform:none}
.mo .ledger .chk{opacity:0;transform:scale(.6);transition:opacity .4s var(--ease) 1.1s,transform .5s var(--ease) 1.1s}
.mo .ledger.seen .chk{opacity:1;transform:none}
.mo .prem .prem-bar{clip-path:inset(-2px 100% -2px -2px);transition:clip-path .9s var(--ease);transition-delay:calc(var(--k,0) * 300ms + 150ms)}
.mo .prem.seen .prem-bar{clip-path:inset(-2px)}
.mo .squares i{opacity:0;transform:scale(.7);transition:opacity .4s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--k,0) * 28ms + 150ms)}
.mo .squares.seen i{opacity:1;transform:none}

/* ---------- product finder ---------- */
@keyframes f-out{from{background:var(--navy-tint)}}
@keyframes f-tick{from{opacity:0;transform:translateY(-.4em)}}
.mo .f-tile{transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.mo .f-tile.out{animation:f-out .9s var(--ease) both}
.mo .f-tile b{transition:color .4s var(--ease)}
.mo .f-left{display:inline-block}
.mo .f-left.tick{animation:f-tick .45s var(--ease)}