/* sx-kit.css: light-card illustration kit for v3 (every class and keyframe is prefixed sx-k-).
   Small inline-SVG scenes for white (#FFFFFF) and tint (#F5F0FC) cards: Match / Give / Show steps and the
   five "Why businesses sign up" reasons. Snippets and placement: see KIT.md in the build scratchpad.

   Contract with the engine (sx.css / sx.js): each scene is wrapped in
     <div class="sx-ill sx-ill-<name> sx-loop sx-k sx-k-<name>" aria-hidden="true">
   The engine adds .sx-run only while the scene's card is hovered (or has keyboard focus) and pauses the loop otherwise.

   How the motion is built
   - The un-animated styles ARE the still frame (reduced motion, print, no animation support): a complete scene.
   - All motion lives inside @media (prefers-reduced-motion: no-preference). Every element of a scene shares one
     timeline (--sx-k-dur) and one phase (--sx-k-at, a negative delay), so a paused loop (engine not running yet)
     also rests on a complete frame instead of an empty one.
   - Only transform, opacity and stroke-dashoffset animate. Money (the orb) only ever rides business → charity.
   - Textless: icons, shapes and abstract lines. No numbers, ticks, scores or progress. */

/* ---------- stage ---------- */
.sx-k { --sx-k-dur: 8s; --sx-k-at: 0s; position: relative; display: block; width: 100%; box-sizing: border-box;
        flex-shrink: 0; margin: 0; border-radius: 16px; overflow: hidden; isolation: isolate;
        background: linear-gradient(180deg, #FCFAFF 0%, #F5EFFD 100%); border: 1px solid #ECE4F8;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.95); container-type: inline-size;
        transition: border-color .35s ease, box-shadow .35s ease; }
.sx-k::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
                background-image: radial-gradient(circle, rgba(108,43,217,.15) 0.9px, rgba(108,43,217,0) 1.4px);
                background-size: 14px 14px; background-position: 50% 50%;
                -webkit-mask-image: radial-gradient(ellipse 58% 82% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%);
                mask-image: radial-gradient(ellipse 58% 82% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%); }
.sx-k::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
               background: radial-gradient(ellipse 42% 74% at 50% 60%, rgba(174,138,234,.16), rgba(174,138,234,0) 72%); }
.sx-k-svg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 150px; overflow: hidden; }
@container (min-width: 600px) { .sx-k-svg { max-height: 170px; } }
/* tint cards: a white stage so it still lifts off the card */
.dp-card.is-tint .sx-k, .sx-k.is-on-tint { background: linear-gradient(180deg, #FFFFFF 0%, #FCFAFF 100%); border-color: #E2D5F7; }
/* variants */
.sx-k.is-bare { background: none; border: 0; box-shadow: none; border-radius: 0; }
.sx-k.is-bare::before, .sx-k.is-bare::after { display: none; }
.sx-k.is-sm .sx-k-svg { max-height: 120px; }
/* sits under a draft row: pull it up a touch so the tag stays attached to the card top */
.dp-draft-row + .sx-k { margin-top: -6px; }
@media (hover: hover) and (pointer: fine) {
  .dp-card:hover .sx-k { border-color: #DCCBF7; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px -24px rgba(78,27,165,.45); }
}
@media (max-width: 700px) { .sx-k { border-radius: 14px; } }

/* ---------- shared parts ---------- */
.sx-k-a, .sx-k-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.sx-k .sx-k-a { animation-duration: var(--sx-k-dur); animation-delay: var(--sx-k-at); animation-iteration-count: infinite;
                animation-timing-function: cubic-bezier(.65,0,.35,1); animation-fill-mode: both; }
.sx-k-shadow { fill: #4E1BA5; fill-opacity: .08; }
.sx-k-tile { fill: #FFFFFF; stroke: #E5DCF4; stroke-width: 1.2; filter: drop-shadow(0 6px 8px rgba(78,27,165,.09)); }
.sx-k-card { fill: #FFFFFF; stroke: #E3D9F4; stroke-width: 1.2;
             filter: drop-shadow(0 10px 14px rgba(78,27,165,.11)) drop-shadow(0 1px 1px rgba(78,27,165,.06)); }
.sx-k-card.is-sm { filter: drop-shadow(0 5px 7px rgba(78,27,165,.13)); }
.sx-k-ghost { fill: #FFFFFF; stroke: #E8E0F7; stroke-width: 1.1; opacity: .75; }
.sx-k-node { fill: #FFFFFF; stroke: #E0D3F5; stroke-width: 1.2; filter: drop-shadow(0 8px 11px rgba(78,27,165,.13)); }
.sx-k-node-ring { fill: #FFFFFF; fill-opacity: .55; stroke: #E8DEF9; stroke-width: 1; }
.sx-k-node-on { fill: none; stroke: #9B70E8; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(174,138,234,.8)); }
.sx-k-ic, .sx-k-ic-h { fill: none; stroke: #6C2BD9; stroke-linecap: round; stroke-linejoin: round; }
.sx-k-ic-h.is-mute { stroke: #B9A0EC; }
.sx-k-ic-h.is-soft { fill: #F1E8FE; }
.sx-k-ic-h.is-lit { fill: #E6D8FD; stroke: #6C2BD9; }
.sx-k-ic-h.is-on { fill: #FFFFFF; stroke: #FFFFFF; }
.sx-k-ic-h.is-fill { fill: #6C2BD9; stroke: #6C2BD9; }
.sx-k-av { fill: #F3EDFC; }
.sx-k-av.is-lit { fill: #EEE5FD; stroke: #CDB6F3; stroke-width: 1; }
.sx-k-av.is-on { fill: #6C2BD9; filter: drop-shadow(0 3px 5px rgba(108,43,217,.35)); }
.sx-k-av.is-ring { fill: #F2EAFE; stroke: #E0D2F8; stroke-width: 1; }
.sx-k-ln { fill: #ECE7F3; }
.sx-k-ln.is-dk { fill: #DDD5EA; }
.sx-k-ln.is-ink { fill: #2F2744; fill-opacity: .82; }
.sx-k-ln.is-acc { fill: #C4AAF2; }
.sx-k-wl { transform-origin: 0% 50%; }
.sx-k-rule { fill: none; stroke: #EFE9F6; stroke-width: 1; }
.sx-k-ring { fill: none; stroke: #AE8AEA; stroke-width: 1.6; opacity: 0; }
/* the pipe: thick pale track with a marching dotted current */
.sx-k-pipe { fill: #F0E8FC; stroke: #E0D3F6; stroke-width: 1; }
.sx-k-cur { fill: none; stroke: #A47EE8; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .01 7.5; opacity: .85; }
/* the money: a glowing white orb with a comet trail */
.sx-k-orb-halo { fill: #AE8AEA; opacity: .26; }
.sx-k-orb-core { fill: #FFFFFF; stroke: #A47EE8; stroke-width: 1.1;
                 filter: drop-shadow(0 0 3px rgba(174,138,234,.95)) drop-shadow(0 0 8px rgba(108,43,217,.55)); }
.sx-k-trail { transform-origin: 100% 50%; }
/* magnifier */
.sx-k-mag { filter: drop-shadow(0 6px 5px rgba(78,27,165,.18)); }
.sx-k-mag-glass { fill: #EFE6FD; fill-opacity: .42; }
.sx-k-mag-rim { fill: none; stroke: #6C2BD9; stroke-width: 2.6; }
.sx-k-mag-glint { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; opacity: .95; }
.sx-k-mag-handle, .sx-k-mag-grip { fill: none; stroke: #6C2BD9; stroke-width: 4.8; stroke-linecap: round; }
.sx-k-mag-grip { stroke: #4E1BA5; }
/* writing pen (the tip that writes the abstract lines) */
.sx-k-pen { opacity: 0; transform: translate(-40px, -40px); }
.sx-k-pen-halo { fill: #AE8AEA; opacity: .3; }
.sx-k-pen-dot { fill: #6C2BD9; }
@keyframes sx-k-march { to { stroke-dashoffset: -7.51; } }

/* =========================================================================================
   K1 · MATCH: magnifier glides over three charity tiles, settles on one; it lifts with a purple
   ring and glow while a dashed connector draws from the business tile to it. (8 s)
   ========================================================================================= */
.sx-k-match { --sx-k-dur: 8s; --sx-k-at: -7.04s; }
.sx-k-m-bpulse { fill: none; stroke: #AE8AEA; stroke-width: 1.6; opacity: 0; }
.sx-k-m-bon { fill: none; stroke: #AE8AEA; stroke-width: 1.6; }
.sx-k-m-t1, .sx-k-m-t3 { opacity: .5; }
.sx-k-m-peek { opacity: 0; }
.sx-k-m-t2 { transform: translateY(-6px); }
.sx-k-m-sh2 { transform: scale(.82); opacity: .55; }
.sx-k-m-ring { fill: none; stroke: #6C2BD9; stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(174,138,234,.85)); }
.sx-k-m-link { fill: none; stroke: #9469E3; stroke-width: 1.8; stroke-linecap: round; stroke-dashoffset: 0;
               stroke-dasharray: 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4
                                 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 2.6 2.4 0 100; }
.sx-k-m-end { fill: #FFFFFF; stroke: #6C2BD9; stroke-width: 1.6; }
.sx-k-m-hit { fill: none; stroke: #AE8AEA; stroke-width: 1.4; opacity: 0; }
.sx-k-m-mag { transform: translate(0, -6px); transform-origin: 43% 43%; }

@media (prefers-reduced-motion: no-preference) {
  .sx-k-match .sx-k-m-mag { animation-name: sx-k-m-mag; }
  .sx-k-match .sx-k-m-p1 { animation-name: sx-k-m-p1; }
  .sx-k-match .sx-k-m-p2 { animation-name: sx-k-m-p2; }
  .sx-k-match .sx-k-m-p3 { animation-name: sx-k-m-p3; }
  .sx-k-match .sx-k-m-t1, .sx-k-match .sx-k-m-t3 { animation-name: sx-k-m-dim; }
  .sx-k-match .sx-k-m-t2 { animation-name: sx-k-m-lift; animation-timing-function: cubic-bezier(.3,1.5,.6,1); }
  .sx-k-match .sx-k-m-sh2 { animation-name: sx-k-m-sh; }
  .sx-k-match .sx-k-m-ring, .sx-k-match .sx-k-m-pick, .sx-k-match .sx-k-m-glow, .sx-k-match .sx-k-m-bon { animation-name: sx-k-m-on; }
  .sx-k-match .sx-k-m-link { animation-name: sx-k-m-link; animation-timing-function: cubic-bezier(.45,0,.25,1); }
  .sx-k-match .sx-k-m-e1 { animation-name: sx-k-m-e1; }
  .sx-k-match .sx-k-m-e2 { animation-name: sx-k-m-e2; }
  .sx-k-match .sx-k-m-hit { animation-name: sx-k-m-hit; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-match .sx-k-m-bpulse { animation-name: sx-k-m-bpulse; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
}
@keyframes sx-k-m-mag {
  0% { transform: translate(-104px, 10px) scale(.82); opacity: 0; }
  6%, 15% { transform: translate(-60px, 0) scale(1); opacity: 1; }
  24%, 28% { transform: translate(0, -2px) scale(1); opacity: 1; }
  37%, 46% { transform: translate(60px, 0) scale(1); opacity: 1; }
  54% { transform: translate(-3px, 0) scale(1); opacity: 1; }
  57% { transform: translate(0, 0) scale(1); opacity: 1; }
  63%, 92% { transform: translate(0, -6px) scale(1); opacity: 1; }
  97% { transform: translate(10px, -14px) scale(.86); opacity: 0; }
  100% { transform: translate(-104px, 10px) scale(.82); opacity: 0; }
}
@keyframes sx-k-m-p1 { 0%, 3% { opacity: 0; } 7%, 15% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes sx-k-m-p2 { 0%, 21% { opacity: 0; } 25%, 28% { opacity: 1; } 32%, 52% { opacity: 0; } 57% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes sx-k-m-p3 { 0%, 34% { opacity: 0; } 38%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sx-k-m-dim { 0%, 58% { opacity: 1; } 64%, 92% { opacity: .5; } 98%, 100% { opacity: 1; } }
@keyframes sx-k-m-lift { 0%, 57% { transform: translateY(0); } 63%, 92% { transform: translateY(-6px); } 98%, 100% { transform: translateY(0); } }
@keyframes sx-k-m-sh { 0%, 57% { transform: scale(1); opacity: 1; } 63%, 92% { transform: scale(.82); opacity: .55; } 98%, 100% { transform: scale(1); opacity: 1; } }
@keyframes sx-k-m-on { 0%, 57% { opacity: 0; } 63%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sx-k-m-link { 0%, 61% { stroke-dashoffset: 100; opacity: 0; } 62% { stroke-dashoffset: 100; opacity: 1; } 78%, 92% { stroke-dashoffset: 0; opacity: 1; }
                         96% { stroke-dashoffset: 0; opacity: 0; } 97%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes sx-k-m-e1 { 0%, 61% { opacity: 0; transform: scale(.3); } 64%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes sx-k-m-e2 { 0%, 77% { opacity: 0; transform: scale(.3); } 80% { opacity: 1; transform: scale(1.35); }
                       83%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes sx-k-m-hit { 0%, 77% { opacity: 0; transform: scale(.5); } 78% { opacity: .85; transform: scale(.5); } 92%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes sx-k-m-bpulse { 0%, 61% { opacity: 0; transform: scale(1); } 62% { opacity: .75; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(1.35); } }

/* =========================================================================================
   K1 · GIVE: business → straight pipe → charity. The orb rides across, the heart pulses with a
   halo on arrival and the charity's receipt slides up out of the charity node. (7 s)
   ========================================================================================= */
.sx-k-give { --sx-k-dur: 7s; --sx-k-at: -4.9s; }
.sx-k-g-glow { opacity: .9; }
.sx-k-g-orb { transform: translateX(180px); }
.sx-k-g-trail { transform: scaleX(1); }
.sx-k-g-rc { transform: rotate(-4deg); transform-origin: 50% 100%; }
.sx-k-rc-paper { fill: #FFFFFF; stroke: #D9CBF4; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 6px 8px rgba(78,27,165,.15)); }
.sx-k-rc-cut { fill: none; stroke: #E2D9F0; stroke-width: 1; stroke-dasharray: 2 2.2; }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-give .sx-k-cur, .sx-k-direct .sx-k-cur { animation: sx-k-march .9s linear infinite; }
  .sx-k-give .sx-k-g-orb { animation-name: sx-k-g-orb; }
  .sx-k-give .sx-k-g-trail { animation-name: sx-k-g-trail; animation-timing-function: ease-in-out; }
  .sx-k-give .sx-k-g-biz { animation-name: sx-k-bump-send; }
  .sx-k-give .sx-k-g-bring { animation-name: sx-k-g-bring; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-give .sx-k-g-cha { animation-name: sx-k-g-cha; }
  .sx-k-give .sx-k-g-on { animation-name: sx-k-g-on; }
  .sx-k-give .sx-k-g-r1 { animation-name: sx-k-g-r1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-give .sx-k-g-r2 { animation-name: sx-k-g-r2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-give .sx-k-g-glow { animation-name: sx-k-g-glow; }
  .sx-k-give .sx-k-g-rc { animation-name: sx-k-g-rc; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
}
@keyframes sx-k-g-orb { 0%, 5% { transform: translateX(46px); opacity: 0; } 7% { transform: translateX(54px); opacity: 1; }
                        45% { transform: translateX(254px); opacity: 1; } 46%, 100% { transform: translateX(254px); opacity: 0; } }
@keyframes sx-k-g-trail { 0%, 7% { transform: scaleX(0); } 16% { transform: scaleX(.55); } 26% { transform: scaleX(1.05); }
                          36% { transform: scaleX(.9); } 43% { transform: scaleX(.35); } 46%, 100% { transform: scaleX(0); } }
@keyframes sx-k-bump-send { 0% { transform: scale(1); } 3% { transform: scale(.94); } 8% { transform: scale(1.03); } 12%, 100% { transform: scale(1); } }
@keyframes sx-k-g-bring { 0%, 2% { opacity: 0; transform: scale(1); } 3% { opacity: .7; transform: scale(1); } 18%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sx-k-g-cha { 0%, 44% { transform: scale(1); } 48% { transform: scale(1.1); } 54%, 100% { transform: scale(1); } }
@keyframes sx-k-g-on { 0%, 44% { opacity: 0; } 47%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes sx-k-g-r1 { 0%, 44% { opacity: 0; transform: scale(1); } 45% { opacity: .75; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sx-k-g-r2 { 0%, 48% { opacity: 0; transform: scale(1); } 49% { opacity: .5; transform: scale(1); } 68%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sx-k-g-glow { 0%, 44% { opacity: 0; } 50% { opacity: 1; } 72%, 88% { opacity: .75; } 96%, 100% { opacity: 0; } }
@keyframes sx-k-g-rc { 0%, 50% { transform: translateY(34px) scale(.72) rotate(0deg); opacity: 0; }
                       54% { transform: translateY(18px) scale(.86) rotate(-1deg); opacity: 1; }
                       61% { transform: translateY(-3px) scale(1.02) rotate(-6deg); opacity: 1; }
                       65%, 90% { transform: translateY(0) scale(1) rotate(-4deg); opacity: 1; }
                       96%, 100% { transform: translateY(24px) scale(.8) rotate(0deg); opacity: 0; } }

/* =========================================================================================
   K1 · SHOW: the charity's update card writes its abstract lines in one by one, a soft highlight
   passes over it and a small eye opens once. (8 s)
   ========================================================================================= */
.sx-k-show { --sx-k-dur: 8s; --sx-k-at: -6.4s; }
.sx-k-s-eyepill { fill: #F5F0FC; stroke: #E2D5F7; stroke-width: 1; }
.sx-k-s-eyering { fill: none; stroke: #AE8AEA; stroke-width: 1.4; opacity: 0; }
.sx-k-s-eyeball { fill: #FFFFFF; stroke: #6C2BD9; stroke-width: 1.5; stroke-linejoin: round; }
.sx-k-s-iris { fill: #6C2BD9; }
.sx-k-s-glint { fill: #FFFFFF; }
.sx-k-s-sheen { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-show .sx-k-s-card { animation-name: sx-k-s-card; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-show .sx-k-s-av { animation-name: sx-k-s-av; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-show .sx-k-s-h1 { animation-name: sx-k-s-h1; }
  .sx-k-show .sx-k-s-h2 { animation-name: sx-k-s-h2; }
  .sx-k-show .sx-k-s-l1 { animation-name: sx-k-s-l1; }
  .sx-k-show .sx-k-s-l2 { animation-name: sx-k-s-l2; }
  .sx-k-show .sx-k-s-l3 { animation-name: sx-k-s-l3; }
  .sx-k-show .sx-k-s-l4 { animation-name: sx-k-s-l4; }
  .sx-k-show .sx-k-wl, .sx-k-show .sx-k-s-pen { animation-timing-function: cubic-bezier(.35,0,.6,1); }
  .sx-k-show .sx-k-s-pen { animation-name: sx-k-s-pen; }
  .sx-k-show .sx-k-s-sheen { animation-name: sx-k-s-sheen; }
  .sx-k-show .sx-k-s-eye { animation-name: sx-k-s-eye; }
  .sx-k-show .sx-k-s-pupil { animation-name: sx-k-s-pupil; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-show .sx-k-s-eyering { animation-name: sx-k-s-eyering; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
}
@keyframes sx-k-s-card { 0% { transform: translateY(8px); opacity: 0; } 7%, 92% { transform: translateY(0); opacity: 1; } 98%, 100% { transform: translateY(-4px); opacity: 0; } }
@keyframes sx-k-s-av { 0%, 6% { transform: scale(.4); opacity: 0; } 11% { transform: scale(1.1); opacity: 1; } 14%, 100% { transform: scale(1); opacity: 1; } }
@keyframes sx-k-s-h1 { 0%, 8% { transform: scaleX(0); } 14%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-h2 { 0%, 10% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-l1 { 0%, 15% { transform: scaleX(0); } 24%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-l2 { 0%, 24.6% { transform: scaleX(0); } 33%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-l3 { 0%, 33.6% { transform: scaleX(0); } 43%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-l4 { 0%, 43.6% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
@keyframes sx-k-s-pen {
  0%, 14% { transform: translate(78px, 75.5px); opacity: 0; }
  15% { transform: translate(78px, 75.5px); opacity: 1; }
  24% { transform: translate(218px, 75.5px); opacity: 1; }
  24.3% { transform: translate(218px, 75.5px); opacity: 0; }
  24.4% { transform: translate(78px, 86.5px); opacity: 0; }
  24.6% { transform: translate(78px, 86.5px); opacity: 1; }
  33% { transform: translate(206px, 86.5px); opacity: 1; }
  33.3% { transform: translate(206px, 86.5px); opacity: 0; }
  33.4% { transform: translate(78px, 97.5px); opacity: 0; }
  33.6% { transform: translate(78px, 97.5px); opacity: 1; }
  43% { transform: translate(220px, 97.5px); opacity: 1; }
  43.3% { transform: translate(220px, 97.5px); opacity: 0; }
  43.4% { transform: translate(78px, 108.5px); opacity: 0; }
  43.6% { transform: translate(78px, 108.5px); opacity: 1; }
  50% { transform: translate(170px, 108.5px); opacity: 1; }
  53%, 100% { transform: translate(170px, 108.5px); opacity: 0; }
}
@keyframes sx-k-s-sheen { 0%, 55% { transform: translateX(-70px); opacity: 0; } 56% { transform: translateX(-62px); opacity: 1; }
                          69% { transform: translateX(220px); opacity: 1; } 70%, 100% { transform: translateX(230px); opacity: 0; } }
@keyframes sx-k-s-eye { 0%, 58% { transform: scaleY(.1); } 64% { transform: scaleY(1.08); } 67%, 92% { transform: scaleY(1); } 96%, 100% { transform: scaleY(.1); } }
@keyframes sx-k-s-pupil { 0%, 61% { transform: scale(0); } 66% { transform: scale(1.12); } 69%, 100% { transform: scale(1); } }
@keyframes sx-k-s-eyering { 0%, 63% { opacity: 0; transform: scale(1); } 64% { opacity: .7; transform: scale(1); } 78%, 100% { opacity: 0; transform: scale(1.45); } }

/* =========================================================================================
   K2 · SEE WHAT YOUR GIFT FUNDED: the charity (heart) speaks a quote bubble whose abstract lines
   write in, in its own words. (8 s)
   ========================================================================================= */
.sx-k-see-funded { --sx-k-dur: 8s; --sx-k-at: -6.4s; }
.sx-k-f-q { fill: #C4AAF2; }
.sx-k-f-bub { transform-box: view-box; transform-origin: 82px 110px; }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-see-funded .sx-k-f-node { animation-name: sx-k-f-node; }
  .sx-k-see-funded .sx-k-f-glow { animation-name: sx-k-f-glow; }
  .sx-k-see-funded .sx-k-f-w1 { animation-name: sx-k-f-w1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-see-funded .sx-k-f-w2 { animation-name: sx-k-f-w2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-see-funded .sx-k-f-w3 { animation-name: sx-k-f-w3; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-see-funded .sx-k-f-bub { animation-name: sx-k-f-bub; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-see-funded .sx-k-f-qg { animation-name: sx-k-f-qg; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-see-funded .sx-k-wl, .sx-k-see-funded .sx-k-f-pen { animation-timing-function: cubic-bezier(.35,0,.6,1); }
  .sx-k-see-funded .sx-k-f-l1 { animation-name: sx-k-f-l1; }
  .sx-k-see-funded .sx-k-f-l2 { animation-name: sx-k-f-l2; }
  .sx-k-see-funded .sx-k-f-l3 { animation-name: sx-k-f-l3; }
  .sx-k-see-funded .sx-k-f-l4 { animation-name: sx-k-f-l4; }
  .sx-k-see-funded .sx-k-f-pen { animation-name: sx-k-f-pen; }
}
@keyframes sx-k-f-node { 0%, 3% { transform: scale(1); } 6% { transform: scale(1.07); } 10%, 100% { transform: scale(1); } }
@keyframes sx-k-f-glow { 0%, 3% { opacity: .3; } 12%, 88% { opacity: 1; } 97%, 100% { opacity: .3; } }
@keyframes sx-k-f-w1 { 0%, 4% { opacity: 0; transform: scale(1); } 5% { opacity: .65; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes sx-k-f-w2 { 0%, 24% { opacity: 0; transform: scale(1); } 25% { opacity: .45; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes sx-k-f-w3 { 0%, 40% { opacity: 0; transform: scale(1); } 41% { opacity: .45; transform: scale(1); } 56%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes sx-k-f-bub { 0%, 6% { transform: scale(.3); opacity: 0; } 9% { opacity: 1; } 13% { transform: scale(1.04); opacity: 1; }
                        16%, 90% { transform: scale(1); opacity: 1; } 97%, 100% { transform: scale(.3); opacity: 0; } }
@keyframes sx-k-f-qg { 0%, 13% { transform: scale(.3); opacity: 0; } 17% { transform: scale(1.15); opacity: 1; } 20%, 100% { transform: scale(1); opacity: 1; } }
@keyframes sx-k-f-l1 { 0%, 19% { transform: scaleX(0); } 27%, 100% { transform: scaleX(1); } }
@keyframes sx-k-f-l2 { 0%, 27.6% { transform: scaleX(0); } 37%, 100% { transform: scaleX(1); } }
@keyframes sx-k-f-l3 { 0%, 37.6% { transform: scaleX(0); } 47%, 100% { transform: scaleX(1); } }
@keyframes sx-k-f-l4 { 0%, 47.6% { transform: scaleX(0); } 54%, 100% { transform: scaleX(1); } }
@keyframes sx-k-f-pen {
  0%, 18% { transform: translate(138px, 34.75px); opacity: 0; }
  19% { transform: translate(138px, 34.75px); opacity: 1; }
  27% { transform: translate(250px, 34.75px); opacity: 1; }
  27.3% { transform: translate(250px, 34.75px); opacity: 0; }
  27.4% { transform: translate(112px, 49.5px); opacity: 0; }
  27.6% { transform: translate(112px, 49.5px); opacity: 1; }
  37% { transform: translate(260px, 49.5px); opacity: 1; }
  37.3% { transform: translate(260px, 49.5px); opacity: 0; }
  37.4% { transform: translate(112px, 62.5px); opacity: 0; }
  37.6% { transform: translate(112px, 62.5px); opacity: 1; }
  47% { transform: translate(250px, 62.5px); opacity: 1; }
  47.3% { transform: translate(250px, 62.5px); opacity: 0; }
  47.4% { transform: translate(112px, 75.5px); opacity: 0; }
  47.6% { transform: translate(112px, 75.5px); opacity: 1; }
  54% { transform: translate(208px, 75.5px); opacity: 1; }
  57%, 100% { transform: translate(208px, 75.5px); opacity: 0; }
}

/* =========================================================================================
   K2 · STATUS: a magnifier passes over the charity tile with a scan glint: the check itself.
   The shield stays steady: no lit state, glow or ripple when the check passes, which would read
   as a "verified" seal being awarded to the charity. No tick. (7 s)
   ========================================================================================= */
.sx-k-status { --sx-k-dur: 7s; --sx-k-at: -4.9s; }
.sx-k-st-shield { fill: #FFFFFF; stroke: #CDBDF0; stroke-linejoin: round; }
.sx-k-st-shield.is-on { fill: #F4EDFE; stroke: #6C2BD9; filter: drop-shadow(0 0 6px rgba(174,138,234,.85)); }
.sx-k-st-inner { fill: none; stroke: #EBE2FA; stroke-linejoin: round; }
.sx-k-st-inner.is-on { stroke: #C9B0F4; }
.sx-k-st-peek { opacity: 0; }
.sx-k-st-scan { opacity: 0; }
.sx-k-st-mag { transform: translate(66px, 38px); transform-origin: 42% 42%; }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-status .sx-k-st-mag { animation-name: sx-k-st-mag; }
  .sx-k-status .sx-k-st-scan { animation-name: sx-k-st-scan; }
  .sx-k-status .sx-k-st-peek { animation-name: sx-k-st-peek; }
}
.sx-k-status .sx-k-st-on, .sx-k-status .sx-k-st-glow, .sx-k-status .sx-k-st-r1, .sx-k-status .sx-k-st-r2 { display: none; }
@keyframes sx-k-st-mag {
  0% { transform: translate(-62px, 10px) scale(.84); opacity: 0; }
  7%, 14% { transform: translate(0, 0) scale(1); opacity: 1; }
  24% { transform: translate(56px, 2px) scale(1); opacity: 1; }
  32%, 41% { transform: translate(96px, 24px) scale(1); opacity: 1; }
  48% { transform: translate(118px, 4px) scale(.88); opacity: 0; }
  49%, 100% { transform: translate(-62px, 10px) scale(.84); opacity: 0; }
}
@keyframes sx-k-st-scan {
  0% { transform: translateX(-62px); opacity: 0; }
  7%, 14% { transform: translateX(0); opacity: 1; }
  24% { transform: translateX(56px); opacity: 1; }
  32%, 41% { transform: translateX(96px); opacity: 1; }
  46% { transform: translateX(112px); opacity: 0; }
  49%, 100% { transform: translateX(-62px); opacity: 0; }
}
@keyframes sx-k-st-peek { 0%, 4% { opacity: 0; } 8%, 14% { opacity: 1; } 19%, 100% { opacity: 0; } }

/* =========================================================================================
   K2 · DIRECT: the orb rides straight from business to charity. DigiDonate (a plain app tile)
   sits off the pipe, linked to the business only by a thin dashed information line. (6.5 s)
   ========================================================================================= */
.sx-k-direct { --sx-k-dur: 6.5s; --sx-k-at: -2.275s; }
.sx-k-d-glow { opacity: .45; }
.sx-k-d-orb { transform: translateX(166px); }
.sx-k-d-trail { transform: scaleX(1); }
.sx-k-d-on { opacity: 0; }
.sx-k-d-app { fill: #FFFFFF; stroke: #DCCDF5; stroke-width: 1.2; filter: drop-shadow(0 6px 9px rgba(78,27,165,.12)); }
.sx-k-d-appring { fill: none; stroke: #ECE3FA; stroke-width: 1.2; }
.sx-k-d-info-bg { fill: none; stroke: #EEE6FA; stroke-width: 3.2; stroke-linecap: round; }
.sx-k-d-info { fill: none; stroke: #B497EA; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1.2 4.4; }
@keyframes sx-k-march-i { to { stroke-dashoffset: -5.6; } }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-direct .sx-k-d-info { animation: sx-k-march-i 1.6s linear infinite; }
  .sx-k-direct .sx-k-d-orb { animation-name: sx-k-d-orb; }
  .sx-k-direct .sx-k-d-trail { animation-name: sx-k-d-trail; animation-timing-function: ease-in-out; }
  .sx-k-direct .sx-k-d-biz { animation-name: sx-k-bump-send; }
  .sx-k-direct .sx-k-d-bring { animation-name: sx-k-g-bring; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-direct .sx-k-d-cha { animation-name: sx-k-d-cha; }
  .sx-k-direct .sx-k-d-on { animation-name: sx-k-d-on; }
  .sx-k-direct .sx-k-d-r1 { animation-name: sx-k-d-r1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-direct .sx-k-d-r2 { animation-name: sx-k-d-r2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-direct .sx-k-d-glow { animation-name: sx-k-d-glow; }
}
@keyframes sx-k-d-orb { 0%, 4% { transform: translateX(46px); opacity: 0; } 6% { transform: translateX(54px); opacity: 1; }
                        52% { transform: translateX(254px); opacity: 1; } 53%, 100% { transform: translateX(254px); opacity: 0; } }
@keyframes sx-k-d-trail { 0%, 6% { transform: scaleX(0); } 16% { transform: scaleX(.55); } 29% { transform: scaleX(1.05); }
                          42% { transform: scaleX(.9); } 50% { transform: scaleX(.35); } 53%, 100% { transform: scaleX(0); } }
@keyframes sx-k-d-cha { 0%, 51% { transform: scale(1); } 55% { transform: scale(1.1); } 61%, 100% { transform: scale(1); } }
@keyframes sx-k-d-on { 0%, 51% { opacity: 0; } 54%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sx-k-d-r1 { 0%, 51% { opacity: 0; transform: scale(1); } 52% { opacity: .75; transform: scale(1); } 69%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sx-k-d-r2 { 0%, 55% { opacity: 0; transform: scale(1); } 56% { opacity: .5; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sx-k-d-glow { 0%, 50% { opacity: .2; } 56% { opacity: 1; } 80% { opacity: .7; } 96%, 100% { opacity: .2; } }

/* =========================================================================================
   K2 · NO LOCK-IN: the padlock's key turns, the shackle lifts and swings open with a soft
   release glow, then it closes again. (7 s)
   ========================================================================================= */
.sx-k-nolock { --sx-k-dur: 7s; --sx-k-at: -3.5s; }
.sx-k-l-orbit circle { fill: none; stroke: #E0D3F6; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: .01 6.5; }
.sx-k-l-o2 { opacity: .65; }
.sx-k-l-sh { transform-box: view-box; transform-origin: 138px 82px; transform: translateY(-12px) scaleX(-1); }
.sx-k-l-sh-o, .sx-k-l-sh-i { fill: none; stroke-linecap: round; }
.sx-k-l-sh-o { stroke: #A88BE6; stroke-width: 8.5; }
.sx-k-l-sh-i { stroke: #E3D7FA; stroke-width: 3.2; }
.sx-k-l-case { filter: drop-shadow(0 10px 12px rgba(78,27,165,.28)); }
.sx-k-l-shine { fill: #FFFFFF; opacity: .24; }
.sx-k-l-hole { fill: #FFFFFF; }
.sx-k-l-kglow { fill: #D9C5FF; opacity: .55; }
.sx-k-l-key { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-nolock .sx-k-l-o1 { animation: sx-k-spin 40s linear infinite; }
  .sx-k-nolock .sx-k-l-o2 { animation: sx-k-spin 56s linear infinite reverse; }
  .sx-k-nolock .sx-k-l-sh { animation-name: sx-k-l-sh; }
  .sx-k-nolock .sx-k-l-body { animation-name: sx-k-l-body; }
  .sx-k-nolock .sx-k-l-key { animation-name: sx-k-l-key; }
  .sx-k-nolock .sx-k-l-kglow { animation-name: sx-k-l-kglow; }
  .sx-k-nolock .sx-k-l-glow { animation-name: sx-k-l-glow; }
  .sx-k-nolock .sx-k-l-w1 { animation-name: sx-k-l-w1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-nolock .sx-k-l-w2 { animation-name: sx-k-l-w2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
}
@keyframes sx-k-spin { to { transform: rotate(360deg); } }
@keyframes sx-k-l-sh {
  0%, 14% { transform: translateY(0) scaleX(1); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  22% { transform: translateY(-12px) scaleX(1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  34%, 66% { transform: translateY(-12px) scaleX(-1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  76% { transform: translateY(-12px) scaleX(1); animation-timing-function: cubic-bezier(.55,0,.9,.5); }
  81% { transform: translateY(1.5px) scaleX(1); animation-timing-function: ease-out; }
  84%, 100% { transform: translateY(0) scaleX(1); }
}
@keyframes sx-k-l-body { 0%, 80% { transform: translateY(0); } 82% { transform: translateY(1.6px); } 85%, 100% { transform: translateY(0); } }
@keyframes sx-k-l-key { 0%, 7% { transform: rotate(0deg); } 14%, 80% { transform: rotate(90deg); } 87%, 100% { transform: rotate(0deg); } }
@keyframes sx-k-l-kglow { 0%, 7% { opacity: 0; } 14%, 80% { opacity: .55; } 88%, 100% { opacity: 0; } }
@keyframes sx-k-l-glow { 0%, 18% { opacity: .25; transform: scale(.85); } 32% { opacity: 1; transform: scale(1.05); }
                         40%, 66% { opacity: .9; transform: scale(1); } 82%, 100% { opacity: .25; transform: scale(.85); } }
@keyframes sx-k-l-w1 { 0%, 28% { opacity: 0; transform: scale(1); } 30% { opacity: .7; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(2.1); } }
@keyframes sx-k-l-w2 { 0%, 34% { opacity: 0; transform: scale(1); } 36% { opacity: .5; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.4); } }

/* =========================================================================================
   K2 · SOMETHING REAL TO SHOW YOUR TEAM: the charity's update is pinned to a little board and
   three faceless avatars light up one after another. (8 s)
   ========================================================================================= */
.sx-k-team { --sx-k-dur: 8s; --sx-k-at: -6.4s; }
.sx-k-t-board { fill: #EEE6FB; stroke: #E0D3F6; stroke-width: 1.1; filter: drop-shadow(0 8px 12px rgba(78,27,165,.10)); }
.sx-k-t-panel { fill: #FBF9FE; stroke: #EAE1F9; stroke-width: 1; }
.sx-k-t-card { transform-box: view-box; transform-origin: 150px 23.5px; }
.sx-k-t-pin-h { fill: #6C2BD9; filter: drop-shadow(0 1px 1.5px rgba(78,27,165,.45)); }
.sx-k-t-pin-g { fill: #FFFFFF; opacity: .75; }
.sx-k-t-bg { fill: #EDE7F6; }
.sx-k-t-bg.is-on { fill: #6C2BD9; filter: drop-shadow(0 0 6px rgba(174,138,234,.9)); }
.sx-k-t-fig { fill: #C9BCE0; }
.sx-k-t-fig.is-on { fill: #FFFFFF; }
.sx-k-t-pulse { fill: none; stroke: #AE8AEA; stroke-width: 1.6; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sx-k-team .sx-k-t-card { animation-name: sx-k-t-card; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-pin { animation-name: sx-k-t-pin; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-wl { animation-timing-function: cubic-bezier(.35,0,.6,1); }
  .sx-k-team .sx-k-t-l1 { animation-name: sx-k-t-l1; }
  .sx-k-team .sx-k-t-l2 { animation-name: sx-k-t-l2; }
  .sx-k-team .sx-k-t-l3 { animation-name: sx-k-t-l3; }
  .sx-k-team .sx-k-t-l4 { animation-name: sx-k-t-l4; }
  .sx-k-team .sx-k-t-on1 { animation-name: sx-k-t-on1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-on2 { animation-name: sx-k-t-on2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-on3 { animation-name: sx-k-t-on3; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-pu1 { animation-name: sx-k-t-pu1; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-pu2 { animation-name: sx-k-t-pu2; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-pu3 { animation-name: sx-k-t-pu3; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  .sx-k-team .sx-k-t-glow { animation-name: sx-k-t-glow; }
}
@keyframes sx-k-t-card { 0%, 6% { transform: translateY(-18px) rotate(-6deg); opacity: 0; } 10% { opacity: 1; }
                         15% { transform: translateY(1.5px) rotate(1deg); opacity: 1; } 18%, 90% { transform: translateY(0) rotate(0deg); opacity: 1; }
                         96%, 100% { transform: translateY(-10px) rotate(0deg); opacity: 0; } }
@keyframes sx-k-t-pin { 0%, 15% { transform: scale(0); } 18% { transform: scale(1.3); } 21%, 100% { transform: scale(1); } }
@keyframes sx-k-t-l1 { 0%, 20% { transform: scaleX(0); } 26%, 100% { transform: scaleX(1); } }
@keyframes sx-k-t-l2 { 0%, 26% { transform: scaleX(0); } 31%, 100% { transform: scaleX(1); } }
@keyframes sx-k-t-l3 { 0%, 31% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }
@keyframes sx-k-t-l4 { 0%, 36% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
@keyframes sx-k-t-on1 { 0%, 27% { opacity: 0; transform: scale(.8); } 31% { opacity: 1; transform: scale(1.08); } 34%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes sx-k-t-on2 { 0%, 35% { opacity: 0; transform: scale(.8); } 39% { opacity: 1; transform: scale(1.08); } 42%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes sx-k-t-on3 { 0%, 43% { opacity: 0; transform: scale(.8); } 47% { opacity: 1; transform: scale(1.08); } 50%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes sx-k-t-pu1 { 0%, 28% { opacity: 0; transform: scale(1); } 29% { opacity: .75; transform: scale(1); } 45%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sx-k-t-pu2 { 0%, 36% { opacity: 0; transform: scale(1); } 37% { opacity: .75; transform: scale(1); } 53%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sx-k-t-pu3 { 0%, 44% { opacity: 0; transform: scale(1); } 45% { opacity: .75; transform: scale(1); } 61%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sx-k-t-glow { 0%, 26% { opacity: .3; } 48%, 90% { opacity: 1; } 98%, 100% { opacity: .3; } }