/* ============================================================
   Motionary, mise en situation

   Machinerie des deux temps, puis les 26 scenes de contexte.
   Tout est en CSS, aucun minuteur JavaScript. Les scenes sont
   mises en pause avec le reste quand la carte sort de l'ecran.
   ============================================================ */

/* ---------------- machinerie des deux temps ---------------- */
/* Les deux temps partagent exactement le meme centre optique. Le
   padding bas reserve la place de l'etiquette, sinon la scene parait
   posee dessus et decentree vers le bas. */
/* Enfant DIRECT, et non descendant. Dix demos utilisent p1 et p2 comme
   noms de classe internes, et contexts.css etant charge apres les
   demos-*.css, a specificite egale il gagnait. Ces elements heritaient
   donc de position absolute, inset 0 et du fondu de 17s, ce qui les
   etalait sur toute la scene. Les conteneurs de phase sont toujours des
   enfants directs du stage, le chevron est donc gratuit et il ferme la
   collision pour de bon. */
.stage > .p1,.stage > .p2{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:12px 14px 40px;
  animation-duration:17s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-delay:var(--pd,0s);
}
.stage > .p1 > *,.stage > .p2 > *{flex:none}
.stage > .p1{animation-name:aPhaseA}
.stage > .p2{animation-name:aPhaseB;opacity:0}
@keyframes aPhaseA{0%,50%{opacity:1}57%,93%{opacity:0}100%{opacity:1}}
@keyframes aPhaseB{0%,50%{opacity:0}57%,93%{opacity:1}100%{opacity:0}}

/* l'etiquette passe a la ligne au lieu d'etre coupee, certaines
   legendes d'exemple font une phrase entiere */
.ph-lbl{
  position:absolute;left:8px;right:8px;bottom:7px;z-index:6;
  font:600 8.5px/1.45 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(var(--bg-rgb),.82);border:1px solid var(--line);
  padding:4px 7px;border-radius:6px;white-space:normal;overflow-wrap:break-word;
  animation-duration:17s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-delay:var(--pd,0s);
}
.ph-lbl.l1{animation-name:aPhaseA}
.ph-lbl.l2{animation-name:aPhaseB;opacity:0;color:var(--accent);border-color:rgba(var(--accent-rgb),.35)}

/* La propriete reellement animee, en haut a droite pendant le temps
   abstrait. C'est ce qui distingue deux scenes qui se ressemblent. */
.ph-prop{
  position:absolute;right:8px;top:8px;z-index:6;max-width:calc(100% - 16px);
  font:600 9px/1 var(--mono);color:var(--accent);
  background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.28);
  padding:4px 7px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation-name:aPhaseA;animation-duration:17s;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;animation-delay:var(--pd,0s);
}

/* socle commun des scenes */
.cx{position:relative}
.cx i,.cx b,.cx span{display:block}

/* ---------------- 1. bouton ---------------- */
.cx-btn{width:126px;height:76px}
.cx-btn .pg{position:absolute;left:0;top:4px;display:flex;flex-direction:column;gap:7px;width:100%}
.cx-btn .pg i{height:8px;border-radius:4px;background:var(--s2)}
.cx-btn .pg i:last-child{width:64%}
.cx-btn .b{position:absolute;left:0;bottom:4px;width:64px;height:26px;border-radius:9px;background:var(--s3);animation:aKBtn 4s cubic-bezier(.2,.9,.25,1) infinite}
.cx-btn .cur{left:16px;top:66px;animation:aKBtnCur 4s ease infinite}
@keyframes aKBtn{0%,34%{transform:scale(1);background:var(--s3)}46%,56%{transform:scale(.93);background:var(--accent)}72%,100%{transform:scale(1);background:var(--s3)}}
@keyframes aKBtnCur{0%,16%{transform:translate(0,0);opacity:.6}40%{transform:translate(14px,-12px);opacity:1}46%,56%{transform:translate(14px,-12px) scale(.72)}72%,100%{transform:translate(0,0);opacity:.6}}

/* ---------------- 2. menu ---------------- */
.cx-menu{width:118px;height:78px}
.cx-menu .bar{position:absolute;left:0;top:0;width:52px;height:18px;border-radius:7px;background:var(--accent)}
.cx-menu .mn{position:absolute;left:0;top:24px;width:90px;border-radius:10px;background:var(--card-2);border:1px solid var(--line-2);overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:0 9px;height:0;animation:aKMenu 4s cubic-bezier(.2,.9,.25,1) infinite}
.cx-menu .mn i{height:7px;border-radius:4px;background:var(--s4);animation:aKMenuI 4s ease infinite}
.cx-menu .mn i:nth-child(2){width:74%;animation-delay:.07s}
.cx-menu .mn i:nth-child(3){width:52%;animation-delay:.14s}
@keyframes aKMenu{0%,12%{height:0;padding-top:0;padding-bottom:0}40%,82%{height:37px;padding-top:9px;padding-bottom:9px}96%,100%{height:0;padding-top:0;padding-bottom:0}}
@keyframes aKMenuI{0%,22%{opacity:0;transform:translateY(5px)}42%,82%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ---------------- 3. modale ---------------- */
.cx-modal{width:126px;height:82px;border-radius:10px;overflow:hidden}
.cx-modal .pg{position:absolute;inset:0;background:repeating-linear-gradient(var(--s2) 0 8px,transparent 8px 17px)}
.cx-modal .scrim{position:absolute;inset:0;background:rgba(var(--void-rgb),.6);animation:aKModS 4.2s ease infinite}
.cx-modal .win2{position:absolute;left:14px;right:14px;top:20px;height:44px;border-radius:11px;background:var(--card-2);border:1px solid var(--line-2);box-shadow:0 12px 26px rgba(var(--shadow-rgb),.5);display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 12px;animation:aKMod 4.2s cubic-bezier(.2,1.1,.3,1) infinite}
.cx-modal .win2 i{height:7px;border-radius:4px;background:var(--s5)}
.cx-modal .win2 i:last-child{width:50%;background:var(--accent)}
@keyframes aKMod{0%,10%{opacity:0;transform:scale(.9) translateY(8px)}32%,80%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.9) translateY(8px)}}
@keyframes aKModS{0%,10%{opacity:0}32%,80%{opacity:1}96%,100%{opacity:0}}

/* ---------------- 4. bottom sheet ---------------- */
.cx-sheet{width:108px;height:84px;border-radius:11px;overflow:hidden;background:var(--s0)}
.cx-sheet .pg{position:absolute;left:9px;right:9px;top:8px;display:flex;flex-direction:column;gap:7px}
.cx-sheet .pg i{height:8px;border-radius:4px;background:var(--s2)}
.cx-sheet .sh{position:absolute;left:0;right:0;bottom:0;height:56px;border-radius:12px 12px 0 0;background:var(--accent);display:flex;flex-direction:column;gap:7px;padding:14px 12px 0;animation:aKSheet 4s cubic-bezier(.2,1.05,.3,1) infinite}
.cx-sheet .sh i{height:7px;border-radius:4px;background:rgba(var(--on-accent-rgb),.4)}
.cx-sheet .sh .g{position:absolute;top:5px;left:50%;margin-left:-12px;width:24px;height:3px;border-radius:2px}
@keyframes aKSheet{0%,10%{transform:translateY(58px)}38%,84%{transform:translateY(0)}98%,100%{transform:translateY(58px)}}

/* ---------------- 5. liste ---------------- */
.cx-list{width:118px;display:flex;flex-direction:column;gap:8px}
.cx-list i{height:16px;border-radius:6px;background:var(--s3);animation:aKList 3.6s cubic-bezier(.16,1,.3,1) infinite}
.cx-list i:first-child{background:var(--accent)}
.cx-list i:nth-child(2){animation-delay:.08s}
.cx-list i:nth-child(3){animation-delay:.16s;width:82%}
.cx-list i:nth-child(4){animation-delay:.24s;width:60%}
@keyframes aKList{0%,8%{opacity:0;transform:translateY(9px)}32%,86%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(9px)}}

/* ---------------- 6. reordonner ---------------- */
.cx-reorder{width:112px;height:70px}
.cx-reorder i{position:absolute;left:0;right:0;height:18px;border-radius:7px;background:var(--s3)}
.cx-reorder .a{top:0}
.cx-reorder .b{top:24px;background:var(--accent);z-index:2;animation:aKReo 3.8s cubic-bezier(.3,.9,.3,1) infinite}
.cx-reorder .c{top:48px;animation:aKReoS 3.8s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes aKReo{0%,14%{transform:none;box-shadow:none}26%{transform:scale(1.04);box-shadow:0 6px 14px rgba(var(--shadow-rgb),.45)}58%,80%{transform:translateY(24px) scale(1.04);box-shadow:0 6px 14px rgba(var(--shadow-rgb),.45)}90%,100%{transform:translateY(24px)}}
@keyframes aKReoS{0%,26%{transform:none}58%,100%{transform:translateY(-24px)}}

/* ---------------- 7. onglets ---------------- */
.cx-nav{position:relative;display:flex;gap:4px;padding:5px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
.cx-nav b{position:relative;z-index:2;width:30px;height:22px;border-radius:8px;background:var(--s4);opacity:.55}
.cx-nav .ind{position:absolute;left:5px;top:5px;width:30px;height:22px;border-radius:8px;background:var(--accent);z-index:1;animation:aKNav 4s cubic-bezier(.2,1.05,.3,1) infinite}
@keyframes aKNav{0%,16%{transform:translateX(0)}42%,58%{transform:translateX(34px)}82%,100%{transform:translateX(68px)}}

/* ---------------- 8. page ---------------- */
.cx-page{width:122px;height:82px;border-radius:10px;overflow:hidden}
.cx-page .p{position:absolute;inset:0;padding:13px;display:flex;flex-direction:column;gap:8px}
.cx-page .p i{height:9px;border-radius:4px;background:rgba(var(--ink-rgb),.3)}
.cx-page .p i:last-child{width:58%}
.cx-page .a{background:var(--s2);animation:aKPageA 4s cubic-bezier(.4,0,.2,1) infinite}
.cx-page .b{background:var(--accent);animation:aKPageB 4s cubic-bezier(.4,0,.2,1) infinite}
.cx-page .b i{background:rgba(var(--on-accent-rgb),.35)}
@keyframes aKPageA{0%,16%{transform:none;opacity:1}46%,74%{transform:translateX(-26%) scale(.95);opacity:0}94%,100%{transform:none;opacity:1}}
@keyframes aKPageB{0%,16%{transform:translateX(100%)}46%,74%{transform:none}94%,100%{transform:translateX(100%)}}

/* ---------------- 9. vignette vers detail ---------------- */
.cx-detail{width:124px;height:82px}
.cx-detail .gr{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cx-detail .gr i{border-radius:8px;background:var(--s3)}
.cx-detail .big{position:absolute;left:0;top:0;width:58px;height:37px;border-radius:8px;background:var(--accent);transform-origin:top left;animation:aKDet 4.2s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes aKDet{0%,14%{transform:none;border-radius:8px}52%,84%{transform:scale(2.14,2.22);border-radius:4px}98%,100%{transform:none;border-radius:8px}}

/* ---------------- 10. formulaire ---------------- */
.cx-form{width:118px;display:flex;flex-direction:column;gap:7px}
.cx-form .lb{width:44px;height:6px;border-radius:3px;background:var(--s4)}
.cx-form .fd{height:28px;border-radius:9px;background:var(--s0);border:1.5px solid var(--s4);animation:aKForm 4s steps(1,end) infinite}
.cx-form .er{height:6px;width:70%;border-radius:3px;background:var(--danger);animation:aKFormE 4s ease infinite}
@keyframes aKForm{0%,26%{border-color:var(--s4)}30%,60%{border-color:var(--danger)}64%,100%{border-color:var(--accent)}}
@keyframes aKFormE{0%,26%{opacity:0}32%,60%{opacity:1}66%,100%{opacity:0}}

/* ---------------- 11. notification ---------------- */
.cx-toast{width:122px;height:80px}
.cx-toast .pg{position:absolute;left:0;right:0;top:2px;display:flex;flex-direction:column;gap:7px}
.cx-toast .pg i{height:9px;border-radius:4px;background:var(--s2)}
.cx-toast .ts{position:absolute;left:6px;right:6px;bottom:2px;height:24px;border-radius:9px;background:var(--card-2);border:1px solid var(--line-2);box-shadow:0 8px 18px rgba(var(--shadow-rgb),.4);display:flex;align-items:center;padding:0 9px;animation:aKToast 4.2s cubic-bezier(.2,1.1,.3,1) infinite}
.cx-toast .ts b{width:34px;height:7px;border-radius:4px;background:var(--accent)}
@keyframes aKToast{0%,12%{transform:translateY(32px);opacity:0}30%,74%{transform:none;opacity:1}92%,100%{transform:translateY(32px);opacity:0}}

/* ---------------- 12. chargement ---------------- */
.cx-load{position:relative;width:116px;height:64px}
.cx-load .sk,.cx-load .ct{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;justify-content:center}
.cx-load .sk i{height:11px;border-radius:5px;background:var(--s2)}
.cx-load .sk i:nth-child(2){width:76%}.cx-load .sk i:nth-child(3){width:52%}
.cx-load .sk{animation:aKLoadA 4s ease infinite}
.cx-load .ct i{height:11px;border-radius:5px;background:var(--s5)}
.cx-load .ct i:first-child{background:var(--accent)}
.cx-load .ct i:nth-child(2){width:76%}.cx-load .ct i:nth-child(3){width:52%}
.cx-load .ct{animation:aKLoadB 4s ease infinite}
@keyframes aKLoadA{0%,44%{opacity:1}60%,100%{opacity:0}}
@keyframes aKLoadB{0%,44%{opacity:0}60%,100%{opacity:1}}

/* ---------------- 13. tableau ---------------- */
.cx-table{width:120px;display:flex;flex-direction:column;gap:6px}
.cx-table .hd{height:9px;border-radius:4px;background:var(--s5)}
.cx-table i{height:14px;border-radius:5px;background:var(--s2);animation:aKTab 3.6s ease infinite}
.cx-table i:nth-child(3){animation-delay:.22s}
.cx-table i:nth-child(4){animation-delay:.44s}
@keyframes aKTab{0%,20%{background:var(--s2)}36%,72%{background:var(--accent)}90%,100%{background:var(--s2)}}

/* ---------------- 14. conversation ---------------- */
.cx-chat{width:120px;display:flex;flex-direction:column;gap:9px}
.cx-chat .me{align-self:flex-end;width:62px;height:20px;border-radius:10px 10px 3px 10px;background:var(--s4)}
.cx-chat .ai{width:96px;border-radius:10px 10px 10px 3px;background:var(--card-2);border:1px solid var(--line-2);padding:8px 9px;display:flex;flex-direction:column;gap:6px}
.cx-chat .ai i{height:6px;border-radius:3px;background:var(--accent);transform-origin:left;animation:aKChat 3.6s cubic-bezier(.4,0,.6,1) infinite}
.cx-chat .ai i:nth-child(2){animation-delay:.5s;width:70%}
@keyframes aKChat{0%,8%{transform:scaleX(.04)}54%,90%{transform:scaleX(1)}98%,100%{transform:scaleX(.04)}}

/* ---------------- 15. hero ---------------- */
.cx-hero{width:122px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.cx-hero .h1{width:100%;height:15px;border-radius:6px;background:var(--ink);opacity:.9;animation:aKHero 4s cubic-bezier(.16,1,.3,1) infinite}
.cx-hero .h2{width:72%;height:8px;border-radius:4px;background:var(--s5);animation:aKHero 4s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.1s}
.cx-hero .cta{width:48px;height:20px;border-radius:8px;background:var(--accent);animation:aKHero 4s cubic-bezier(.16,1,.3,1) infinite;animation-delay:.2s}
@keyframes aKHero{0%,8%{opacity:0;transform:translateY(12px)}34%,86%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(12px)}}

/* ---------------- 16. defilement ---------------- */
.cx-scroll{width:98px;height:84px}
.cx-scroll .vp{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:var(--s0);border:1px solid var(--line)}
.cx-scroll .doc{position:absolute;left:9px;right:9px;top:0;display:flex;flex-direction:column;gap:9px;animation:aKScroll 5s cubic-bezier(.4,0,.4,1) infinite}
.cx-scroll .doc i{height:22px;border-radius:7px;background:var(--s2);flex:none}
.cx-scroll .doc i:nth-child(3){background:var(--accent)}
@keyframes aKScroll{0%,8%{transform:translateY(8px)}56%,92%{transform:translateY(-96px)}100%{transform:translateY(8px)}}

/* ---------------- 17. galerie ---------------- */
.cx-gallery{width:124px;display:flex;gap:7px}
.cx-gallery i{width:36px;height:52px;border-radius:8px;background:linear-gradient(150deg,var(--accent),var(--accent-deep));animation:aKGal 3.8s cubic-bezier(.4,0,.2,1) infinite}
.cx-gallery i:nth-child(2){animation-delay:.14s}
.cx-gallery i:nth-child(3){animation-delay:.28s}
@keyframes aKGal{0%,10%{clip-path:inset(100% 0 0 0)}40%,84%{clip-path:inset(0 0 0 0)}98%,100%{clip-path:inset(100% 0 0 0)}}

/* ---------------- 18. graphique ---------------- */
.cx-chart{width:112px;height:62px;display:flex;align-items:flex-end;gap:7px}
.cx-chart i{flex:1;border-radius:4px 4px 0 0;background:var(--accent);transform-origin:bottom;animation:aKChart 3.6s cubic-bezier(.16,1,.3,1) infinite}
.cx-chart i:nth-child(1){height:40%}.cx-chart i:nth-child(2){height:68%}
.cx-chart i:nth-child(3){height:48%}.cx-chart i:nth-child(4){height:88%}
.cx-chart i:nth-child(5){height:62%}
.cx-chart i:nth-child(2){animation-delay:.07s}.cx-chart i:nth-child(3){animation-delay:.14s}
.cx-chart i:nth-child(4){animation-delay:.21s}.cx-chart i:nth-child(5){animation-delay:.28s}
@keyframes aKChart{0%,8%{transform:scaleY(.04)}38%,86%{transform:scaleY(1)}98%,100%{transform:scaleY(.04)}}

/* ---------------- 19. compteur ---------------- */
.cx-counter{display:flex;flex-direction:column;align-items:center;gap:10px}
.cx-counter .lb{width:52px;height:6px;border-radius:3px;background:var(--s5)}
.cx-counter .win{height:38px;overflow:hidden;width:26px;border-radius:7px;background:var(--s0);display:grid}
.cx-counter .reel{display:flex;flex-direction:column;font:800 26px/38px var(--mono);color:var(--accent);text-align:center;animation:aKCount 3.6s cubic-bezier(.16,1,.3,1) infinite}
.cx-counter .reel b{height:38px}
@keyframes aKCount{0%,8%{transform:translateY(0)}76%,94%{transform:translateY(-152px)}100%{transform:translateY(0)}}

/* ---------------- 20. pointeur ---------------- */
.cx-cursor{width:124px;height:78px}
.cx-cursor .pg{position:absolute;left:0;right:0;top:4px;display:flex;flex-direction:column;gap:9px}
.cx-cursor .pg i{height:18px;border-radius:7px;background:var(--s2)}
.cx-cursor .hl{position:absolute;left:0;right:0;top:4px;height:18px;border-radius:7px;background:var(--accent);animation:aKCurH 4.4s cubic-bezier(.3,.9,.3,1) infinite}
.cx-cursor .cur{left:14px;top:12px;animation:aKCurC 4.4s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes aKCurH{0%,14%{transform:translateY(0);opacity:1}42%,58%{transform:translateY(27px);opacity:1}86%,100%{transform:translateY(54px);opacity:1}}
@keyframes aKCurC{0%,14%{transform:translateY(0)}42%,58%{transform:translateY(27px)}86%,100%{transform:translateY(54px)}}

/* ---------------- 21. reglages ---------------- */
.cx-settings{width:122px;display:flex;flex-direction:column;gap:14px}
.cx-settings .r{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-settings .r i{flex:1;height:8px;border-radius:4px;background:var(--s3)}
.cx-settings .tg{position:relative;width:32px;height:18px;border-radius:10px;background:var(--s4);flex:none;animation:aKSetBg 4s cubic-bezier(.2,1.05,.3,1) infinite}
.cx-settings .tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:8px;background:var(--ink);animation:aKSet 4s cubic-bezier(.2,1.05,.3,1) infinite}
.cx-settings .t2,.cx-settings .t2::after{animation-delay:.5s}
@keyframes aKSet{0%,16%{transform:translateX(0)}44%,88%{transform:translateX(14px)}100%{transform:translateX(0)}}
@keyframes aKSetBg{0%,16%{background:var(--s4)}44%,88%{background:var(--accent)}100%{background:var(--s4)}}

/* ---------------- 22. suppression ---------------- */
.cx-danger{width:124px}
.cx-danger .zone{border:1.5px solid var(--danger);background:rgba(var(--danger-rgb),.07);border-radius:10px;padding:11px;display:flex;flex-direction:column;gap:10px;animation:aKDngZ 3.6s ease-in-out infinite}
.cx-danger .zone i{height:7px;width:62%;border-radius:4px;background:var(--danger);opacity:.55}
.cx-danger .btn{width:52px;height:18px;border-radius:7px;background:var(--danger);animation:aKDng 3.6s ease infinite}
@keyframes aKDng{0%,44%{opacity:.42;transform:scale(1)}60%,84%{opacity:1;transform:scale(1.05)}96%,100%{opacity:.42;transform:scale(1)}}
@keyframes aKDngZ{0%,100%{box-shadow:0 0 0 0 rgba(var(--danger-rgb),0)}55%{box-shadow:0 0 0 5px rgba(var(--danger-rgb),.13)}}

/* ---------------- 23. agent ---------------- */
.cx-agent{width:120px;display:flex;flex-direction:column;gap:11px}
.cx-agent .st{display:flex;align-items:center;gap:11px;animation:aKAgt 4.2s ease infinite}
.cx-agent .st:nth-child(2){animation-delay:.55s}
.cx-agent .st:nth-child(3){animation-delay:1.1s}
.cx-agent .st i{width:11px;height:11px;border-radius:6px;background:var(--accent);flex:none}
.cx-agent .st b{flex:1;height:8px;border-radius:4px;background:var(--s3)}
.cx-agent .st:nth-child(2) b{width:78%}
.cx-agent .st:nth-child(3) b{width:56%}
@keyframes aKAgt{0%,10%{opacity:.18;transform:translateX(-6px)}28%,88%{opacity:1;transform:none}98%,100%{opacity:.18;transform:translateX(-6px)}}

/* ---------------- 24. performance ---------------- */
.cx-perf{position:relative;display:flex;align-items:flex-end;gap:5px;height:64px;padding-bottom:16px}
.cx-perf i{width:8px;height:34px;border-radius:3px;background:var(--accent);transform-origin:bottom;animation:aKPerf 1.3s ease-in-out infinite}
.cx-perf i:nth-child(2){animation-delay:.07s}.cx-perf i:nth-child(3){animation-delay:.14s}
.cx-perf i:nth-child(4){animation-delay:.21s}.cx-perf i:nth-child(5){animation-delay:.28s}
.cx-perf i:nth-child(6){animation-delay:.35s}.cx-perf i:nth-child(7){animation-delay:.42s}
.cx-perf i:nth-child(8){animation-delay:.49s}.cx-perf i:nth-child(9){animation-delay:.56s}
.cx-perf i:nth-child(10){animation-delay:.63s}
.cx-perf .lb{position:absolute;left:0;bottom:0;width:34px;height:5px;border-radius:3px;background:var(--s5)}
@keyframes aKPerf{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ---------------- 25. tokens ---------------- */
.cx-tokens{width:122px;display:flex;flex-direction:column;gap:13px}
.cx-tokens .sw{display:flex;gap:7px}
.cx-tokens .sw i{width:26px;height:26px;border-radius:8px;background:var(--s3);animation:aKTokS 3.8s ease infinite}
.cx-tokens .sw i:nth-child(2){animation-delay:.12s}
.cx-tokens .sw i:nth-child(3){animation-delay:.24s}
.cx-tokens .cmp{display:flex;flex-direction:column;gap:7px}
.cx-tokens .cmp b{height:12px;border-radius:5px;background:var(--s2);animation:aKTokC 3.8s cubic-bezier(.16,1,.3,1) infinite}
.cx-tokens .cmp b:nth-child(2){width:66%;animation-delay:.14s}
@keyframes aKTokS{0%,16%{background:var(--s3)}36%,84%{background:var(--accent)}96%,100%{background:var(--s3)}}
@keyframes aKTokC{0%,26%{transform:translateX(0);background:var(--s2)}52%,88%{transform:translateX(10px);background:var(--accent)}100%{transform:translateX(0);background:var(--s2)}}

/* ---------------- 26. icone ---------------- */
.cx-icon{display:grid;place-items:center}
.cx-icon .bar{display:flex;gap:9px;padding:9px 12px;border-radius:12px;background:var(--card-2);border:1px solid var(--line)}
.cx-icon .bar i{width:20px;height:20px;border-radius:6px;background:var(--s4)}
.cx-icon .bar .on{background:var(--accent);animation:aKIcon 2.6s cubic-bezier(.2,1.3,.3,1) infinite}
@keyframes aKIcon{0%,30%,100%{transform:scale(1) rotate(0)}44%{transform:scale(1.22) rotate(-8deg)}58%{transform:scale(1.05) rotate(5deg)}72%{transform:scale(1) rotate(0)}}