/* Tixbox V3.5 · Service feature scenes library — 20 animated layouts (svx-*)
   Stage = .sp-fx (sv-plus.css): --c accent, --cs soft background, --ink dark. Loops 3.2–6s, transforms and opacity only.
   Paused when the card is off screen (no .sfx-on) and still when reduced motion is on (.sfx-still). */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.sp-fx .svx-i{display:inline-grid;place-items:center;color:var(--c)}
.sp-fx .svx-i svg{width:24px;height:24px;display:block}
.sp-fx [class^="svx-"],.sp-fx [class*=" svx-"]{box-sizing:border-box}
.svx-pill{width:40px;height:40px;border-radius:12px;background:#fff;box-shadow:0 4px 14px rgba(17,17,17,.08)}
.svx-chip{position:absolute;left:12px;top:10px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border-radius:999px;background:#fff;font:700 11.5px var(--tv-font,system-ui);color:var(--ink);box-shadow:0 3px 10px rgba(17,17,17,.07);white-space:nowrap}
.svx-chip .svx-i svg{width:15px;height:15px}
.svx-chip.is-r{left:auto;right:12px;padding:0 10px}
.svx-card{position:relative;width:70px;height:70px;border-radius:20px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 22px rgba(17,17,17,.09)}
.svx-card .svx-i svg{width:32px;height:32px}
.svx-core{position:relative;z-index:1;width:54px;height:54px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(17,17,17,.1)}
.svx-badge{position:absolute;left:calc(50% + 26px);top:18px;height:26px;padding:0 10px;border-radius:999px;background:var(--c);color:#fff;font:700 11.5px var(--tv-font,system-ui);display:grid;place-items:center;white-space:nowrap;transform-origin:left center;animation:svxBadge 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.svx-badge.is-ok{background:#1f9d55}
.svx-bob{animation:svxBob 3.6s ease-in-out infinite}
@keyframes svxBob{0%{transform:scale(.86)}12%{transform:scale(1.04)}20%,100%{transform:scale(1)}55%{transform:translateY(-3px)}}
@keyframes svxBadge{0%,18%{opacity:0;transform:scale(.5)}28%{opacity:1;transform:scale(1.08)}34%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.9)}}
/* orbit */
.svx-orb{position:relative;width:96px;height:96px;display:grid;place-items:center}
.svx-ring{position:absolute;inset:0;border:1.5px dashed color-mix(in srgb,var(--c) 45%,transparent);border-radius:50%;animation:svxSpin 9s linear infinite}
.svx-sat{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 10px rgba(17,17,17,.1);transform:rotate(calc(360deg / var(--t) * var(--k))) translateY(-48px) rotate(calc(-360deg / var(--t) * var(--k)))}
.svx-sat .svx-i{animation:svxSpin 9s linear infinite reverse}
.svx-sat .svx-i svg{width:15px;height:15px}
@keyframes svxSpin{to{transform:rotate(360deg)}}
/* flow */
.svx-flow{display:flex;align-items:center;gap:0;width:min(220px,86%)}
.svx-node{width:50px;height:50px;border-radius:16px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 5px 16px rgba(17,17,17,.08)}
.svx-node.is-b{animation:svxArrive 2.8s ease-in-out infinite}
.svx-path{position:relative;flex:1;height:2px;margin:0 8px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,transparent) 0 6px,transparent 6px 11px)}
.svx-path i{position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent);animation:svxTravel 2.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes svxTravel{0%{left:0;opacity:0}10%{opacity:1}70%{left:calc(100% - 12px);opacity:1}80%,100%{left:calc(100% - 12px);opacity:0}}
@keyframes svxArrive{0%,68%{transform:scale(1)}76%{transform:scale(1.12);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}88%,100%{transform:scale(1)}}
/* count */
.svx-cnt{display:flex;align-items:center;gap:12px}
.svx-cnt b{display:block;font:800 30px/1 var(--tv-font,system-ui);color:var(--ink);letter-spacing:-.02em;counter-reset:n var(--n);animation:svxCount 4.5s cubic-bezier(.2,.7,.2,1) infinite}
.svx-cnt b::before{content:"+" counter(n)}
.svx-cnt em{display:block;font:600 12px var(--tv-font,system-ui);font-style:normal;color:color-mix(in srgb,var(--ink) 60%,transparent);margin-top:4px}
@keyframes svxCount{0%{--n:0}55%,100%{--n:var(--to)}}
/* bars */
.svx-bars{display:flex;align-items:flex-end;gap:7px;height:60px;margin-top:22px}
.svx-bars i{width:14px;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--c);transform-origin:bottom;animation:svxGrow 3.4s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--k) * .09s)}
.svx-bars i:nth-child(even){background:var(--ink)}
@keyframes svxGrow{0%{transform:scaleY(.15)}35%,80%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
/* notify */
.svx-ph{position:relative;width:96px;height:96px;margin-top:28px;border:2.5px solid var(--ink);border-bottom:0;border-radius:18px 18px 0 0;background:#fff;padding:24px 10px 0;display:flex;flex-direction:column;gap:6px}
.svx-ph>i{display:block;height:6px;border-radius:4px;background:color-mix(in srgb,var(--c) 22%,#fff)}
.svx-ph>i:nth-of-type(2){width:70%}
.svx-nt{position:absolute;left:-40px;right:-40px;top:-14px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(17,17,17,.14);animation:svxDrop 4s cubic-bezier(.2,.8,.2,1) infinite}
.svx-nt .svx-i{width:26px;height:26px;border-radius:8px;background:var(--c);color:#fff;flex:none}.svx-nt .svx-i svg{width:15px;height:15px}
.svx-nt span{display:flex;flex-direction:column;font:600 11px/1.25 var(--tv-font,system-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svx-nt b{font-size:10px;color:color-mix(in srgb,var(--ink) 55%,transparent)}
@keyframes svxDrop{0%{opacity:0;transform:translateY(-16px)}12%,82%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-8px)}}
/* stack */
.svx-stk{position:relative;width:132px;height:72px}
.svx-stk>i,.svx-top{position:absolute;inset:0;border-radius:14px;background:#fff;box-shadow:0 5px 14px rgba(17,17,17,.08)}
.svx-stk>i{background:color-mix(in srgb,var(--c) 30%,#fff);animation:svxFan 4s cubic-bezier(.2,.8,.2,1) infinite}
.svx-stk>i:nth-child(2){background:color-mix(in srgb,var(--c) 55%,#fff);--r:5deg;--x:10px;animation-delay:.08s}
.svx-stk>i:first-child{--r:-6deg;--x:-10px}
.svx-top{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 14px 0 52px}
.svx-top .svx-i{position:absolute;left:12px;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c) 14%,#fff)}.svx-top .svx-i svg{width:17px;height:17px}
.svx-top b{font:700 12px var(--tv-font,system-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svx-top em{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 12%,transparent)}.svx-top em+em{width:60%}
@keyframes svxFan{0%,15%{transform:none}35%,80%{transform:translateX(var(--x)) rotate(var(--r))}100%{transform:none}}
/* ripple */
.svx-rip{position:relative;display:grid;place-items:center;width:110px;height:110px}
.svx-rip>i{position:absolute;inset:28px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:svxRip 2.7s ease-out infinite;animation-delay:calc(var(--d,0) * 1s)}
.svx-rip>i:nth-child(2){--d:.9}.svx-rip>i:nth-child(3){--d:1.8}
@keyframes svxRip{0%{transform:scale(.8);opacity:.75}100%{transform:scale(2);opacity:0}}
/* grid */
.svx-grid{display:grid;grid-template-columns:repeat(4,26px);gap:6px}
.svx-grid i{height:22px;border-radius:6px;background:#fff;opacity:.7;animation:svxTile 3.6s ease-in-out infinite;animation-delay:calc(var(--k) * .12s)}
.svx-grid i.is-me{display:grid;place-items:center;opacity:1;background:var(--c);animation:svxBob 3.6s ease-in-out infinite}
.svx-grid i.is-me .svx-i{color:#fff}.svx-grid i.is-me svg{width:14px;height:14px}
@keyframes svxTile{0%,100%{background:#fff}30%{background:color-mix(in srgb,var(--c) 35%,#fff)}}
/* toggle */
.svx-tg{display:flex;flex-direction:column;gap:7px;width:min(200px,80%)}
.svx-row{display:flex;align-items:center;gap:9px;height:24px;padding:0 6px;border-radius:9px;background:#fff}
.svx-row .svx-i svg{width:14px;height:14px}
.svx-ln{flex:1;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.svx-sw{position:relative;width:26px;height:15px;border-radius:9px;background:color-mix(in srgb,var(--ink) 20%,transparent);animation:svxSwBg 4.2s ease infinite;animation-delay:calc(var(--k) * .45s)}
.svx-sw::after{content:"";position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;animation:svxSw 4.2s ease infinite;animation-delay:inherit}
@keyframes svxSwBg{0%,20%{background:color-mix(in srgb,var(--ink) 20%,transparent)}30%,85%{background:var(--c)}95%,100%{background:color-mix(in srgb,var(--ink) 20%,transparent)}}
@keyframes svxSw{0%,20%{transform:none}30%,85%{transform:translateX(11px)}95%,100%{transform:none}}
/* progress */
.svx-prg{width:min(210px,84%);display:flex;flex-direction:column;gap:10px}
.svx-prh{display:flex;align-items:center;gap:10px}
.svx-prh b{flex:1;font:700 13px var(--tv-font,system-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svx-prh em{font:800 14px var(--tv-font,system-ui);font-style:normal;color:var(--c);counter-reset:n var(--n);animation:svxPct 4s cubic-bezier(.3,.6,.2,1) infinite}
.svx-prh em::before{content:counter(n) "%"}
.svx-track{height:8px;border-radius:9px;background:#fff;overflow:hidden}
.svx-track i{display:block;height:100%;border-radius:9px;background:var(--c);transform-origin:left;animation:svxFill 4s cubic-bezier(.3,.6,.2,1) infinite}
@keyframes svxPct{0%{--n:0}70%,100%{--n:100}}
@keyframes svxFill{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
/* float */
.svx-flt{position:absolute;left:50%;top:50%;height:22px;padding:0 9px;border-radius:999px;background:#fff;font:700 11px/22px var(--tv-font,system-ui);color:var(--c);white-space:nowrap;box-shadow:0 3px 10px rgba(17,17,17,.08);opacity:0;animation:svxFloat 3.6s ease-out infinite;animation-delay:calc(var(--k) * 1.2s);--x:calc((var(--k) - 1) * 46px)}
@keyframes svxFloat{0%{opacity:0;transform:translate(calc(-50% + var(--x) * .3),0) scale(.7)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),-58px) scale(1)}}
/* flip */
.svx-flip{position:relative;width:76px;height:76px;transform-style:preserve-3d;animation:svxFlip 4.4s cubic-bezier(.5,0,.3,1) infinite}
.svx-f,.svx-b{position:absolute;inset:0;border-radius:20px;display:grid;place-items:center;backface-visibility:hidden;box-shadow:0 8px 20px rgba(17,17,17,.1)}
.svx-f{background:#fff}.svx-f svg{width:34px!important;height:34px!important}
.svx-b{background:var(--c);color:#fff;font:800 12px var(--tv-font,system-ui);transform:rotateY(180deg);padding:6px;text-align:center}
@keyframes svxFlip{0%,30%{transform:none}45%,80%{transform:rotateY(180deg)}95%,100%{transform:rotateY(360deg)}}
/* map */
.svx-map{position:absolute;inset:0;background:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) 1.2px,transparent 1.4px) 0 0/14px 14px}
.svx-map i{position:absolute;height:6px;border-radius:4px;background:#fff}
.svx-map i:nth-child(1){left:8%;right:30%;top:30%}.svx-map i:nth-child(2){left:44%;width:6px;top:10%;bottom:12%;height:auto}.svx-map i:nth-child(3){left:20%;right:8%;top:68%}
.svx-pin{position:relative;z-index:1;width:44px;height:44px;margin-top:-18px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);background:var(--c);display:grid;place-items:center;animation:svxPin 3.6s cubic-bezier(.2,.8,.2,1) infinite}
.svx-pin .svx-i{transform:rotate(45deg);color:#fff}.svx-pin svg{width:20px;height:20px}
.svx-pr{position:absolute;left:50%;top:50%;width:22px;height:8px;margin:20px 0 0 -11px;border-radius:50%;background:color-mix(in srgb,var(--c) 40%,transparent);animation:svxPr 3.6s ease-out infinite}
@keyframes svxPin{0%{transform:translateY(-60px) rotate(-45deg);opacity:0}20%{transform:translateY(0) rotate(-45deg);opacity:1}26%{transform:translateY(-6px) rotate(-45deg)}32%,90%{transform:rotate(-45deg);opacity:1}100%{opacity:0;transform:rotate(-45deg)}}
@keyframes svxPr{0%,18%{transform:scale(0);opacity:0}24%{opacity:1}60%,100%{transform:scale(3.2);opacity:0}}
/* timeline */
.svx-tl{position:relative;display:flex;justify-content:space-between;width:min(220px,86%)}
.svx-tl-l{position:absolute;left:22px;right:22px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:#fff}
.svx-tl-l b{display:block;height:100%;border-radius:3px;background:var(--c);transform-origin:left;animation:svxFill2 4.5s ease-in-out infinite}
.svx-tn{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(17,17,17,.08);animation:svxNode 4.5s ease-in-out infinite;animation-delay:calc(var(--k) * 1s)}
.svx-tn svg{width:20px!important;height:20px!important}
@keyframes svxFill2{0%,5%{transform:scaleX(0)}55%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes svxNode{0%,8%{transform:scale(.85);background:#fff}16%,60%{transform:scale(1.06);background:color-mix(in srgb,var(--c) 18%,#fff)}75%,100%{transform:scale(1);background:#fff}}
/* bubbles */
.svx-bub{position:absolute;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 7px;border-radius:16px;background:#fff;font:600 12px var(--tv-font,system-ui);color:var(--ink);white-space:nowrap;box-shadow:0 4px 12px rgba(17,17,17,.08);animation:svxBubL 4.6s ease infinite}
.svx-bub .svx-i{width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--c) 15%,#fff)}.svx-bub svg{width:14px!important;height:14px!important}
.svx-bub.is-l{left:12%;top:16px;border-bottom-left-radius:4px}
.svx-bub.is-r{right:12%;bottom:16px;padding:0 7px 0 12px;background:var(--c);color:#fff;border-bottom-right-radius:4px;animation-name:svxBubR}
.svx-bub.is-r .svx-i{background:rgba(255,255,255,.22);color:#fff}
.svx-dots{display:flex;gap:3px}.svx-dots i{width:5px;height:5px;border-radius:50%;background:#fff;animation:svxDot 1s ease-in-out infinite;animation-delay:calc(var(--j,0) * .15s)}.svx-dots i:nth-child(2){--j:1}.svx-dots i:nth-child(3){--j:2}
@keyframes svxBubL{0%{opacity:0;transform:translateY(8px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes svxBubR{0%,25%{opacity:0;transform:translateY(8px)}35%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes svxDot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-2px)}}
/* ring */
.svx-rng{position:relative;width:78px;height:78px;display:grid;place-items:center}
.svx-rng svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.svx-rb{fill:#fff;stroke:#fff;stroke-width:7}
.svx-rf{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round;stroke-dasharray:0 100;animation:svxArc 4s cubic-bezier(.3,.6,.2,1) infinite}
@keyframes svxArc{0%{stroke-dasharray:0 100}60%,88%{stroke-dasharray:82 100}100%{stroke-dasharray:0 100}}
/* beam */
.svx-card.is-scan{overflow:hidden}
.svx-beam{position:absolute;left:6px;right:6px;top:8px;height:2.5px;border-radius:2px;background:var(--c);box-shadow:0 0 10px 2px color-mix(in srgb,var(--c) 55%,transparent);animation:svxBeam 3.6s ease-in-out infinite}
@keyframes svxBeam{0%{transform:translateY(0);opacity:0}8%{opacity:1}30%{transform:translateY(52px)}48%{transform:translateY(0)}58%,100%{opacity:0}}
/* swap */
.svx-swp{position:relative;width:170px;height:60px}
.svx-sa,.svx-sb{position:absolute;top:5px;width:50px;height:50px;border-radius:16px;background:#fff;display:grid;place-items:center;box-shadow:0 5px 14px rgba(17,17,17,.09)}
.svx-sa{left:0;animation:svxSwA 4s cubic-bezier(.6,0,.3,1) infinite}.svx-sb{right:0;animation:svxSwB 4s cubic-bezier(.6,0,.3,1) infinite}
.svx-arr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 18px var(--tv-font,system-ui);color:var(--c)}
@keyframes svxSwA{0%,25%{transform:none}50%,75%{transform:translate(120px,0)}38%{transform:translate(60px,-22px)}63%{transform:translate(120px,0)}88%{transform:translate(60px,22px)}100%{transform:none}}
@keyframes svxSwB{0%,25%{transform:none}38%{transform:translate(-60px,22px)}50%,75%{transform:translate(-120px,0)}88%{transform:translate(-60px,-22px)}100%{transform:none}}
/* wave */
.svx-wave{display:flex;gap:9px}
.svx-wave>span{width:36px;height:36px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:0 4px 12px rgba(17,17,17,.08);animation:svxWv 2.4s ease-in-out infinite;animation-delay:calc(var(--k) * .14s)}
.svx-wave svg{width:18px!important;height:18px!important}
.svx-wave>span:nth-child(even) .svx-i{color:var(--ink)}
@keyframes svxWv{0%,60%,100%{transform:none}25%{transform:translateY(-12px)}}
/* paused off screen; still when reduced motion */
.sva-scenes li:not(.sfx-on) .sp-fx *,.sva-scenes li:not(.sfx-on) .sp-fx *::before,.sva-scenes li:not(.sfx-on) .sp-fx *::after{animation-play-state:paused!important}
.sfx-still [class*="svx-"],.sfx-still [class*="svx-"]::before,.sfx-still [class*="svx-"]::after{animation:none!important}
.sfx-still .svx-badge,.sfx-still .svx-nt,.sfx-still .svx-bub{opacity:1}
.sfx-still .svx-cnt b{--n:var(--to)}.sfx-still .svx-prh em{--n:76}.sfx-still .svx-track i{transform:scaleX(.76)}.sfx-still .svx-rf{stroke-dasharray:76 100}.sfx-still .svx-tl-l b{transform:scaleX(1)}.sfx-still .svx-sw{background:var(--c)}.sfx-still .svx-sw::after{transform:translateX(11px)}
.sfx-still .svx-path i{left:50%;opacity:1}.sfx-still .svx-flt{opacity:0}.sfx-still .svx-flt:first-of-type{opacity:1;transform:translate(-50%,-44px)}
@media (prefers-reduced-motion:reduce){[class*="svx-"],[class*="svx-"]::before,[class*="svx-"]::after{animation:none!important}.svx-badge,.svx-nt,.svx-bub{opacity:1}.svx-cnt b{--n:var(--to)}.svx-flt{display:none}}
/* fit narrow cards */
.svx-badge{left:0;right:0;top:auto;bottom:8px;margin:0 auto;width:max-content;max-width:90%;transform-origin:center}
.sp-fx .svx-card{margin-top:-14px}
.svx-swp{width:150px}
@keyframes svxSwA{0%,25%{transform:none}38%{transform:translate(50px,-20px)}50%,75%{transform:translate(100px,0)}88%{transform:translate(50px,20px)}100%{transform:none}}
@keyframes svxSwB{0%,25%{transform:none}38%{transform:translate(-50px,20px)}50%,75%{transform:translate(-100px,0)}88%{transform:translate(-50px,-20px)}100%{transform:none}}
.svx-wave{gap:7px}.svx-wave>span{width:32px;height:32px;border-radius:11px}
@container (max-width:200px){.svx-swp{transform:scale(.85)}.svx-wave{transform:scale(.85)}.svx-flow{width:92%}}