/* ============================================================
   Motionary, demos K
   Craft, perception, accessibilite
   ============================================================ */

/* ---------------- craft et micro-interactions ---------------- */
/* Mettre en scene, ce n'est pas amplifier l'element principal, c'est
   faire reculer les autres. Les trois lignes secondaires tombent a 32
   pour cent d'opacite et retrecissent legerement pendant que la ligne
   principale avance. Meme cycle pour les quatre. */
.stg2{display:flex;flex-direction:column;gap:9px;width:150px}
.stg2 i{display:block;height:16px;border-radius:6px;background:var(--s2);
  animation:aStgDim 3.4s cubic-bezier(.16,1,.3,1) infinite}
.stg2 .d2{animation-delay:.05s}
.stg2 .d3{animation-delay:.1s}
.stg2 .lead{background:var(--lime);animation:aStg2 3.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes aStgDim{0%,14%{opacity:1;transform:scale(1)}
  46%,84%{opacity:.32;transform:scale(.97)}
  98%,100%{opacity:1;transform:scale(1)}}
@keyframes aStg2{0%,14%{transform:translateX(0);opacity:.6}
  46%,84%{transform:translateX(16px);opacity:1}
  100%{transform:translateX(0);opacity:.6}}

/* La pastille est un AUTRE objet qui reagit, pas un morceau de la carte
   qui continue sa route, c'est ce qui la separe du suivi.
   Amplitude principale 36px, secondaire 12px, soit le tiers exact
   annonce par la consigne, et les deux barres du bas le montrent.
   Depart decale de 3 pour cent de 3.2s, soit 96ms, dans la fourchette. */
.sec2{position:relative;width:150px;height:78px}
.sec2 .card6{position:absolute;left:0;top:8px;width:100px;height:44px;border-radius:10px;
  background:var(--lime);animation:aSec2 3.2s cubic-bezier(.16,1,.3,1) infinite}
.sec2 .badge2{position:absolute;left:88px;top:2px;width:22px;height:22px;border-radius:8px;
  background:var(--a2);animation:aSec2B 3.2s cubic-bezier(.2,1.4,.3,1) infinite}
.sec2 .amp{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px}
.sec2 .amp b{display:block;height:4px;border-radius:2px}
.sec2 .amp .p{width:100%;background:var(--lime)}
.sec2 .amp .s{width:33.3%;background:var(--a2)}
@keyframes aSec2{0%,8%{transform:translateX(-36px);opacity:0}
  36%,84%{transform:translateX(0);opacity:1}98%,100%{transform:translateX(-36px);opacity:0}}
@keyframes aSec2B{0%,11%{transform:translateX(-12px) rotate(-10deg);opacity:0}
  39%,84%{transform:translateX(0) rotate(0);opacity:1}98%,100%{transform:translateX(-12px) rotate(-10deg);opacity:0}}

/* Le viewBox fait 120 sur 60 et le SVG est rendu en 120 sur 60 pixels,
   donc une unite utilisateur vaut exactement un pixel et le path() du
   CSS decrit le meme trace que le rail. Rendu a une autre taille, le
   point voyagerait a cote de son propre rail.
   La corde en pointille fine est le temoin du galbe. Fleche de 17px
   pour une corde de 101, soit 17 pour cent, sous les 20 de la consigne. */
.arcm{position:relative;width:120px;height:66px}
.arcm svg{display:block;width:120px;height:60px}
.arcm .rail{fill:none;stroke:var(--s3);stroke-width:2;stroke-dasharray:4 4}
.arcm .chord{fill:none;stroke:var(--s2);stroke-width:1;stroke-dasharray:2 3}
.arcm .dot{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:4px;background:var(--lime);
  offset-path:path("M10 52C36 26 84 20 110 40");offset-rotate:auto;
  animation:aArcm 3.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes aArcm{0%,8%{offset-distance:0%}70%,90%{offset-distance:100%}100%{offset-distance:0%}}

/* Meme depart, meme arrivee sur le repere a 140, meme duree, memes
   instants. Seule l'amplitude du trajet change, le soulevement passe
   de 2 a 6px et l'inclinaison de 3 a 9 degres, exactement fois trois.
   Le point d'arrivee ne bouge jamais, et c'est ce qui separe
   l'exageration du rebond, qui lui depasse la cible. */
.exg{display:flex;flex-direction:column;gap:14px;width:172px}
.exg .lane{position:relative;display:block;height:30px}
.exg .tag{position:absolute;left:0;top:11px;width:16px;font:600 8px/1 var(--mono);
  color:var(--ink-3);font-style:normal}
.exg .mk{position:absolute;left:140px;top:-2px;bottom:-2px;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,var(--line-2) 0 3px,transparent 3px 6px)}
.exg .sq{position:absolute;left:22px;top:3px;width:24px;height:24px;border-radius:7px;background:var(--lime)}
.exg .lit{animation:aExgLit 3s cubic-bezier(.4,0,.2,1) infinite}
.exg .amp{animation:aExgAmp 3s cubic-bezier(.4,0,.2,1) infinite}
@keyframes aExgLit{0%,12%{transform:translate(0,0) rotate(0) scale(1)}
  40%{transform:translate(53px,-2px) rotate(-3deg) scale(1.03)}
  66%,88%{transform:translate(106px,0) rotate(0) scale(1)}
  100%{transform:translate(0,0) rotate(0) scale(1)}}
@keyframes aExgAmp{0%,12%{transform:translate(0,0) rotate(0) scale(1)}
  40%{transform:translate(53px,-6px) rotate(-9deg) scale(1.09)}
  66%,88%{transform:translate(106px,0) rotate(0) scale(1)}
  100%{transform:translate(0,0) rotate(0) scale(1)}}

/* Les quatre parties de Saffer s'allument dans l'ordre, 240ms d'ecart,
   pendant que l'interrupteur bascule. Le bouton bouge quand feedback
   s'allume, et l'etat reste acquis pendant que mode est allume.
   Course du bouton, 62 moins 3 moins 24 moins 3 donne 32 exactement. */
.mint{display:flex;flex-direction:column;align-items:center;gap:14px;width:172px}
.mint .sw2{position:relative;display:block;width:62px;height:30px;border-radius:16px;
  background:var(--s2);animation:aMintBg 3.2s ease infinite}
.mint .sw2 i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:12px;
  background:var(--ink);display:block;animation:aMint 3.2s cubic-bezier(.2,1.3,.3,1) infinite}
.mint .parts{display:flex;gap:5px;width:100%}
.mint .parts b{display:block;flex:1;padding:5px 0;border-radius:6px;background:var(--s1);
  color:var(--ink-3);font:600 7px/1 var(--mono);text-align:center;
  animation:aMintPart 3.2s steps(1,end) infinite}
.mint .p2{animation-delay:.24s}
.mint .p3{animation-delay:.48s}
.mint .p4{animation-delay:.72s}
@keyframes aMintPart{0%,4%{background:var(--s1);color:var(--ink-3)}
  8%,26%{background:var(--lime);color:var(--on-accent)}
  30%,100%{background:var(--s1);color:var(--ink-3)}}
@keyframes aMint{0%,18%{transform:translateX(0)}50%,88%{transform:translateX(32px)}100%{transform:translateX(0)}}
@keyframes aMintBg{0%,18%{background:var(--s2)}50%,88%{background:var(--lime)}100%{background:var(--s2)}}

/* Meme reaction, meme anneau, meme keyframe dans les deux couloirs.
   En haut un pointeur vient toucher le bouton, declencheur explicite.
   En bas personne ne touche rien, c'est le bloc qui franchit le seuil
   pointille. Le bloc part a 52 et va jusqu'a 80, son bord droit a
   donc 104 puis 132, il croise le seuil de 118 a mi course, soit a
   35 pour cent du cycle. L'anneau du bas porte 216ms de retard pour
   tomber pile la, contre 26 pour cent pour celui du haut. */
.trz{display:flex;flex-direction:column;gap:13px;width:172px}
.trz .lane{position:relative;display:block;height:38px}
.trz .tag{position:absolute;left:0;top:15px;width:46px;font:600 8px/1 var(--mono);font-style:normal}
.trz .lane:first-child .tag{color:var(--lime)}
.trz .lane:last-child .tag{color:var(--a2)}
.trz .btn{position:absolute;left:56px;top:5px;width:28px;height:28px;border-radius:9px;background:var(--s3)}
.trz .ring3{position:absolute;left:56px;top:5px;width:28px;height:28px;border-radius:9px;
  border:2px solid var(--lime);box-sizing:border-box;
  animation:aTrg 2.4s cubic-bezier(.2,.7,.3,1) infinite}
.trz .cur{position:absolute;left:76px;top:24px;
  animation:aTrgCur 2.4s cubic-bezier(.3,0,.2,1) infinite}
.trz .lane:last-child .btn,.trz .lane:last-child .ring3{left:132px;border-color:var(--a2)}
.trz .thr{position:absolute;left:118px;top:0;bottom:0;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,var(--a2) 0 3px,transparent 3px 6px)}
.trz .sc{position:absolute;left:52px;top:9px;width:52px;height:20px;border-radius:6px;background:var(--s2);
  animation:aTrgSc 2.4s cubic-bezier(.4,0,.4,1) infinite}
.trz .d3{animation-delay:.216s}
/* invisible aux deux bouts, le raccord ne se voit donc jamais */
@keyframes aTrg{0%,26%{transform:scale(1);opacity:0}
  30%{transform:scale(1);opacity:.85}
  62%,100%{transform:scale(2.6);opacity:0}}
@keyframes aTrgCur{0%,18%{transform:translate(10px,8px);opacity:0}
  22%{transform:translate(0,0);opacity:1}
  26%{transform:translate(0,3px);opacity:1}
  34%{transform:translate(0,0);opacity:1}
  48%{transform:translate(10px,8px);opacity:0}
  48.001%,100%{transform:translate(10px,8px);opacity:0}}
@keyframes aTrgSc{0%,14%{transform:translateX(0)}56%,86%{transform:translateX(28px)}98%,100%{transform:translateX(0)}}

/* Les deux panneaux se tirent exactement pareil, l'affordance est
   identique. Celui de gauche est a fleur de bord, rien ne le dit.
   Celui de droite depasse de 10px et porte sa poignee, il le dit.
   C'est toute la difference entre affordance et signifiant. */
.sgf{display:flex;gap:14px;width:172px}
.sgf .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.sgf .lbl{display:block;font:600 8px/1 var(--mono);color:var(--ink-3);font-style:normal}
.sgf .scr{position:relative;display:block;width:100%;height:70px;border-radius:9px;
  background:var(--s0);border:1px solid var(--line);overflow:hidden}
.sgf .sheet2{position:absolute;left:0;right:0;bottom:0;height:52px;border-radius:11px 11px 0 0;
  background:var(--lime)}
.sgf .flat{transform:translateY(52px)}
.sgf .peek{animation:aSgf 2.8s cubic-bezier(.3,.9,.3,1) infinite}
.sgf .grab2{position:absolute;top:5px;left:50%;margin-left:-12px;width:24px;height:3px;border-radius:2px;
  background:rgba(var(--on-accent-rgb),.4)}
@keyframes aSgf{0%,30%{transform:translateY(42px)}52%{transform:translateY(32px)}72%,100%{transform:translateY(42px)}}

/* ---------------- perception ----------------
   Le regard est le cercle en pointille, pose en bas de la scene. Le
   changement se produit en haut, hors du point de fixation. A gauche
   rien ne le marque, a droite un decalage de 4px le signale. Memes
   instants, meme valeur finale, seule la marque change.
   La couleur revient a son etat de depart DANS le cycle, sinon le
   retour a zero serait un second changement non annonce. */
.chb{display:flex;gap:14px;width:172px}
.chb .side2{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.chb .lbl{display:block;font:600 8px/1 var(--mono);color:var(--ink-3);font-style:normal}
.chb .scn{position:relative;display:block;width:100%;height:64px;border-radius:9px;background:var(--s1)}
.chb .scn i{position:absolute;left:9px;top:9px;width:28px;height:14px;border-radius:5px;background:var(--s4)}
.chb .foc{position:absolute;left:50%;margin-left:-9px;bottom:9px;width:18px;height:18px;border-radius:50%;
  border:1.5px dashed var(--ink-3);box-sizing:border-box}
.chb .cut{animation:aChbCut 3.4s steps(1,end) infinite}
.chb .fade3{animation:aChbFade 3.4s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes aChbCut{0%,44%{background:var(--s4);transform:translateX(0)}
  46%,92%{background:var(--lime);transform:translateX(0)}
  94%,100%{background:var(--s4);transform:translateX(0)}}
@keyframes aChbFade{0%,40%{background:var(--s4);transform:translateX(0)}
  46%{background:var(--lime);transform:translateX(4px)}
  54%,92%{background:var(--lime);transform:translateX(0)}
  96%,100%{background:var(--s4);transform:translateX(0)}}

/* Meme depart, meme cible, meme duree. En haut un seul objet fait le
   trajet en gardant sa couleur, son rayon et sa taille, c'est une
   translation pure de 108px, donc rien ne se deforme et l'identite
   tient. En bas il s'eteint au depart pendant qu'un autre s'allume a
   l'arrivee, et le lien entre les deux est perdu.
   Emplacement a 126 sur 36 de large, centre a 144. Objet a 24 sur 24
   de large, centre a 36. La course vaut donc 108 exactement. */
.ocs{display:flex;flex-direction:column;gap:14px;width:172px}
.ocs .lane{position:relative;display:block;height:34px}
.ocs .tag{position:absolute;left:0;top:13px;width:16px;font:600 8px/1 var(--mono);font-style:normal}
.ocs .lane:first-child .tag{color:var(--lime)}
.ocs .lane:last-child .tag{color:var(--danger)}
.ocs .slot{position:absolute;left:126px;top:2px;width:36px;height:30px;border-radius:9px;
  border:1.5px dashed var(--line-2);box-sizing:border-box}
.ocs .obj,.ocs .gone,.ocs .new{position:absolute;top:5px;width:24px;height:24px;border-radius:7px}
.ocs .obj{left:24px;background:var(--lime);animation:aOcs 3.4s cubic-bezier(.3,.9,.3,1) infinite}
.ocs .gone{left:24px;background:var(--danger);animation:aOcsGone 3.4s ease infinite}
.ocs .new{left:132px;background:var(--danger);animation:aOcsNew 3.4s ease infinite}
@keyframes aOcs{0%,12%{transform:translateX(0)}52%,88%{transform:translateX(108px)}98%,100%{transform:translateX(0)}}
@keyframes aOcsGone{0%,12%{opacity:1}44%,88%{opacity:0}96%,100%{opacity:1}}
@keyframes aOcsNew{0%,12%{opacity:0}44%,88%{opacity:1}96%,100%{opacity:0}}

/* Les trois barres du milieu partent ensemble, meme direction, meme
   duree, meme courbe, et se lisent comme un bloc. La quatrieme est
   du MEME vert mais part dans l'autre sens, et elle quitte le groupe
   instantanement. La direction bat la couleur, ce que dit la consigne.
   Marge de 28 a gauche et 26 a droite pour que les deux sens aient
   la place d'aller au bout sans sortir du cadre. */
.cfa{display:flex;flex-direction:column;gap:8px;width:176px}
.cfa i{display:block;height:13px;border-radius:5px;background:var(--s2);margin-left:28px;margin-right:26px}
.cfa .s{background:var(--lime);animation:aCfa 3.4s cubic-bezier(.4,0,.2,1) infinite}
.cfa .x{background:var(--lime);animation:aCfaX 3.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes aCfa{0%,14%{transform:translateX(0)}50%,86%{transform:translateX(26px)}100%{transform:translateX(0)}}
@keyframes aCfaX{0%,14%{transform:translateX(0)}50%,86%{transform:translateX(-26px)}100%{transform:translateX(0)}}

/* 0.16s pour deux etats font 80ms chacun, sous le seuil de fusion, et
   les deux points se lisent comme un seul qui se deplace. 0.96s en
   bas font 480ms, six fois plus, au dessus du seuil, et on voit deux
   points qui clignotent. Rapport de six exact, les deux couloirs se
   resynchronisent donc a chaque seconde.
   Ecart de 14px pour un point de 16, le saut reste plus petit que
   l'element lui meme, ce qu'exige la consigne. */
.apm{display:flex;flex-direction:column;gap:16px;width:172px}
.apm .lane{position:relative;display:block;height:22px}
.apm .tag{position:absolute;left:0;top:7px;width:44px;font:600 8px/1 var(--mono);
  color:var(--ink-3);font-style:normal}
.apm .p{position:absolute;top:3px;width:16px;height:16px;border-radius:8px;background:var(--lime)}
.apm .a,.apm .sa{left:56px}
.apm .b,.apm .sb{left:70px}
.apm .a{animation:aApmA .16s steps(1,end) infinite}
.apm .b{animation:aApmB .16s steps(1,end) infinite}
.apm .sa{animation:aApmA .96s steps(1,end) infinite}
.apm .sb{animation:aApmB .96s steps(1,end) infinite}
/* l'alternance franche EST le phenomene phi, la discontinuite est le sujet */
@keyframes aApmA{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes aApmB{0%,49%{opacity:0}50%,100%{opacity:1}}

/* Les DEUX sauts se produisent sous un flou, l'aller a 50 pour cent
   sous la fenetre 46 a 52, le retour a 94 sous la fenetre 90 a 96.
   Un seul flou laisserait le retour de boucle parfaitement visible,
   ce qui dirait exactement le contraire du terme. Le cercle en
   pointille est le regard, il saute au meme instant que le flou. */
.sac{display:grid;place-items:center}
.sac .scene{position:relative;display:block;width:150px;height:70px;border-radius:10px;background:var(--s1);
  animation:aSacB 3.4s steps(1,end) infinite}
.sac .scene i{position:absolute;display:block;width:22px;height:22px;border-radius:7px;background:var(--lime)}
.sac .a1{left:12px;top:10px}
.sac .a2{left:12px;bottom:10px;animation:aSac 3.4s steps(1,end) infinite}
.sac .eye{position:absolute;right:12px;top:50%;margin-top:-8px;width:16px;height:16px;border-radius:50%;
  border:1.5px dashed var(--ink-2);box-sizing:border-box;animation:aSacEye 3.4s steps(1,end) infinite}
@keyframes aSacB{0%,44%{filter:blur(0)}46%,52%{filter:blur(5px)}54%,88%{filter:blur(0)}
  90%,96%{filter:blur(5px)}98%,100%{filter:blur(0)}}
@keyframes aSac{0%,48%{transform:translateX(0)}50%,92%{transform:translateX(104px)}94%,100%{transform:translateX(0)}}
@keyframes aSacEye{0%,44%{transform:translate(0,0)}46%,88%{transform:translate(-108px,-20px)}
  90%,100%{transform:translate(0,0)}}

/* Trois pulsations puis plus rien pendant les deux tiers du cycle, et
   un marqueur statique qui reste. La consigne du terme dit trois
   cycles maximum, la scene les compte au lieu de boucler sans fin,
   ce qu'elle faisait avant et qui contredisait sa propre regle. */
.pmd{position:relative;width:160px;height:78px}
.pmd .txt4{position:absolute;left:0;bottom:6px;display:flex;flex-direction:column;gap:7px;width:104px}
.pmd .txt4 i{display:block;height:9px;border-radius:4px;background:var(--s3)}
.pmd .txt4 i:last-child{width:62%}
.pmd .caret{position:absolute;left:66px;bottom:0;width:2px;height:9px;background:var(--lime);
  animation:aPmdCaret .9s steps(1,end) infinite}
.pmd .edge2{position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:8px;
  background:var(--lime);animation:aPmd 4.5s ease-in-out infinite}
.pmd .mrq{position:absolute;right:6px;top:6px;width:8px;height:8px;border-radius:50%;
  background:var(--lime);opacity:.45}
@keyframes aPmd{0%{transform:scale(.6);opacity:0}
  4%{transform:scale(1);opacity:.9}
  11%{transform:scale(.6);opacity:0}
  15%{transform:scale(1);opacity:.9}
  22%{transform:scale(.6);opacity:0}
  26%{transform:scale(1);opacity:.9}
  33%,100%{transform:scale(.6);opacity:0}}
@keyframes aPmdCaret{0%,50%{opacity:1}51%,100%{opacity:0}}

/* Le cercle en pointille est le regard. En haut trois cartes bougent
   et il n'arrete pas de changer d'avis, en bas une seule bouge et il
   s'y pose. Deux animations ne s'additionnent pas, elles s'annulent.
   Rangee de 154px utiles, trois cartes de 46 avec deux ecarts de 8,
   centres a 41, 95 et 149, donc le regard de 16 se cale a 33, 87
   et 141 pour tomber sur ces centres la. */
.atc{display:flex;flex-direction:column;gap:14px;width:172px}
.atc .row{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding-left:18px}
.atc .tag{position:absolute;left:0;top:18px;font:700 9px/1 var(--mono);color:var(--ink-3);font-style:normal}
.atc .row i{display:block;flex:1;height:38px;border-radius:8px;background:var(--s2)}
.atc .m{background:var(--lime);animation:aAtc 2.8s cubic-bezier(.2,1.2,.3,1) infinite}
.atc .d2{animation-delay:.32s}
.atc .d3{animation-delay:.64s}
.atc .gaze{position:absolute;left:0;top:12px;width:16px;height:16px;border-radius:50%;
  border:1.5px dashed var(--ink-2);box-sizing:border-box}
.atc .g1{transform:translateX(87px)}
.atc .g3{animation:aAtcG3 2.8s steps(1,end) infinite}
@keyframes aAtc{0%,18%{transform:translateY(0) scale(1)}48%,84%{transform:translateY(-8px) scale(1.05)}100%{transform:translateY(0) scale(1)}}
@keyframes aAtcG3{0%,20%{transform:translateX(33px)}
  22%,44%{transform:translateX(87px)}
  46%,66%{transform:translateX(141px)}
  68%,88%{transform:translateX(87px)}
  90%,100%{transform:translateX(33px)}}

/* Meme reorganisation, meme duree, meme resultat. A gauche un seul
   element se deplace, une chose a suivre. A droite les quatre partent
   chacun vers un endroit different, quatre choses a suivre pour
   exactement la meme information. Le cout n'est pas en millisecondes,
   il est en nombre d'objets a garder en tete. */
.cgl{display:flex;gap:14px;width:172px}
.cgl .col{flex:1;display:flex;flex-direction:column;gap:9px}
.cgl .tag{display:block;font:600 8px/1 var(--mono);color:var(--ink-3);font-style:normal}
.cgl .lst{display:flex;flex-direction:column;gap:7px}
.cgl .lst i{display:block;height:15px;border-radius:6px;background:var(--s2);margin:0 14px}
.cgl .mv,.cgl .a1,.cgl .a2,.cgl .a3,.cgl .a4{background:var(--lime)}
.cgl .mv,.cgl .a1{animation:aCglR1 3.4s cubic-bezier(.3,.9,.3,1) infinite}
.cgl .a2{animation:aCglL1 3.4s cubic-bezier(.3,.9,.3,1) infinite}
.cgl .a3{animation:aCglR2 3.4s cubic-bezier(.3,.9,.3,1) infinite}
.cgl .a4{animation:aCglL2 3.4s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes aCglR1{0%,16%{transform:translateX(0)}52%,88%{transform:translateX(14px)}100%{transform:translateX(0)}}
@keyframes aCglL1{0%,16%{transform:translateX(0)}52%,88%{transform:translateX(-10px)}100%{transform:translateX(0)}}
@keyframes aCglR2{0%,16%{transform:translateX(0)}52%,88%{transform:translateX(8px)}100%{transform:translateX(0)}}
@keyframes aCglL2{0%,16%{transform:translateX(0)}52%,88%{transform:translateX(-12px)}100%{transform:translateX(0)}}

/* Le repere en pointille est a 400ms, au meme endroit dans les deux
   couloirs. La barre fait 117px et represente 1200ms, une milliseconde
   vaut donc 0.0975px et 400ms tombent a 39px, soit a 94px du bord de
   la scene. L'echelle de temps est commune, de 10 a 84 pour cent du
   cycle, donc la barre du haut s'arrete a 380/1200 soit 0.317 et
   celle du bas va au bout. Rapport de trois exact entre les deux. */
.doh{display:flex;flex-direction:column;gap:15px;width:172px}
.doh .lane{position:relative;display:flex;align-items:center;gap:9px;height:20px}
.doh .tag{flex:0 0 auto;width:46px;font:600 8px/1 var(--mono);font-style:normal}
.doh .ok .tag{color:var(--lime)}
.doh .ko .tag{color:var(--danger)}
.doh .bar7{position:relative;flex:1;height:8px;border-radius:4px;background:var(--s2);overflow:hidden}
.doh .bar7 i{position:absolute;inset:0;background:var(--lime);transform-origin:left;
  animation:aDoh 3.6s linear infinite}
.doh .bar7 .slow{background:var(--danger);animation:aDohSlow 3.6s linear infinite}
.doh .mk{position:absolute;left:94px;top:-4px;bottom:-4px;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(180deg,var(--ink-2) 0 3px,transparent 3px 6px)}
@keyframes aDoh{0%,10%{transform:scaleX(0)}33.4%{transform:scaleX(.317)}
  60%,88%{transform:scaleX(.317)}96%,100%{transform:scaleX(0)}}
@keyframes aDohSlow{0%,10%{transform:scaleX(0)}84%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}

/* ---------------- accessibilite ----------------
   La variable est la SURFACE, pas la vitesse. Les deux bandeaux
   balaient exactement pareil, meme duree et meme course. Celui du haut
   fait 14px de haut dans une fenetre de 44, soit un tiers moins un
   cheveu, celui du bas en fait 29, soit deux tiers. Le trait pointille
   est pose a 14.67px, le tiers exact. */
.vst{display:flex;flex-direction:column;gap:12px;width:172px}
.vst .vp{position:relative;display:block;height:44px;border-radius:9px;background:var(--s0);overflow:hidden}
.vst .third{position:absolute;left:0;right:0;top:14.67px;height:1px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 4px,transparent 4px 8px)}
.vst .tag{position:absolute;right:7px;bottom:4px;font:700 9px/1 var(--mono);
  color:var(--ink-3);font-style:normal;z-index:2}
.vst .tag.ko{color:var(--danger)}
.vst .band{position:absolute;left:0;right:0;top:0}
.vst .band.ok{height:14px;background:linear-gradient(90deg,transparent,var(--lime),transparent);
  animation:aVst 3.2s linear infinite}
.vst .band.ko{height:29px;background:linear-gradient(90deg,transparent,var(--danger),transparent);
  animation:aVst 3.2s linear infinite}
@keyframes aVst{0%{transform:translateX(-60%);opacity:0}
  10%{transform:translateX(-42%);opacity:1}
  80%{transform:translateX(60%);opacity:1}
  90%{transform:translateX(60%);opacity:0}
  90.001%,100%{transform:translateX(-60%);opacity:0}}

/* La jauge du bas mesure la duree du mouvement et le trait rouge est
   pose a cinq secondes, soit 62.5 pour cent d'un cycle de 8s. Le
   controle de pause ne s'allume qu'APRES ce trait, parce que c'est la
   que le critere devient obligatoire. Avant, il est facultatif. */
.psh{position:relative;width:172px}
.psh .mq2{display:block;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.psh .mq2 span{display:inline-block;white-space:nowrap;font:800 16px/1 var(--font);
  letter-spacing:.05em;color:var(--lime);animation:aPsh 8s linear infinite}
.psh .ft{display:flex;align-items:center;gap:10px;margin-top:14px}
.psh .pz{position:relative;flex:0 0 auto;width:16px;height:16px;border-radius:4px;
  border:1.5px solid var(--ink-3);box-sizing:border-box;animation:aPshP 8s steps(1,end) infinite}
.psh .pz::after{content:"";position:absolute;left:3.5px;top:3px;width:8px;height:7px;box-sizing:border-box;
  border-left:2.5px solid var(--ink-2);border-right:2.5px solid var(--ink-2)}
.psh .dur{position:relative;flex:1;height:5px;border-radius:3px;background:var(--s2)}
.psh .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--ink-3);
  animation:aPshD 8s linear infinite}
.psh .five{position:absolute;left:62.5%;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--danger)}
@keyframes aPsh{0%{transform:translateX(0)}64%{transform:translateX(-32%)}78%{transform:translateX(-32%)}100%{transform:translateX(-50%)}}
@keyframes aPshP{0%,64%{border-color:var(--ink-3)}66%,78%{border-color:var(--lime)}80%,100%{border-color:var(--ink-3)}}
@keyframes aPshD{0%{width:0}96%{width:100%}96.001%,100%{width:0}}

/* Cette scene ne clignote pas et ne clignotera jamais. C'est le seul
   terme du glossaire dont le mode de defaillance est une crise
   d'epilepsie, on ne le demontre pas en reproduisant le danger. Elle
   mesure au lieu de stroboscoper.
   Regle de 129px pour une seconde. Deux eclairs en haut, a 32 et 97,
   soit le quart et les trois quarts. Six en bas, tous les 21.5px a
   partir de 11. La tete de lecture donne l'echelle de temps. */
.flsh{display:flex;flex-direction:column;gap:11px;width:172px}
.flsh .lane{display:flex;align-items:center;gap:9px}
.flsh .tag{flex:0 0 auto;width:34px;font:700 9px/1 var(--mono);font-style:normal}
.flsh .ok .tag{color:var(--lime)}
.flsh .ko .tag{color:var(--danger)}
.flsh .tk{position:relative;flex:1;height:18px;border-radius:5px;background:var(--s1);overflow:hidden}
.flsh .tk i{position:absolute;top:3px;width:3px;height:12px;border-radius:2px;background:var(--lime)}
.flsh .ko .tk i{background:var(--danger)}
.flsh .hdd{position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--ink-2);
  animation:aFlsh 3s linear infinite}
.flsh .rule{display:flex;justify-content:space-between;padding-left:43px;
  font:600 7px/1 var(--mono);color:var(--ink-3)}
.flsh .rule u{text-decoration:none}
@keyframes aFlsh{0%{transform:translateX(0);opacity:0}
  4%{transform:translateX(5px);opacity:1}
  88%{transform:translateX(127px);opacity:1}
  94%{transform:translateX(127px);opacity:0}
  94.001%,100%{transform:translateX(0);opacity:0}}

/* Le critere porte sur l'existence de l'interrupteur, pas sur le gout
   de l'animation. Il bascule a la moitie du cycle. Avant, les lignes
   montent de 16px au defilement. Apres, elles sont simplement la,
   aux memes instants et sur la meme duree. Course du bouton, 28 moins
   2 moins 11 moins 2 donne 13 exactement. */
.wca{display:flex;flex-direction:column;gap:12px;width:172px}
.wca .set{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;
  background:var(--card-2);border:1px solid var(--line-2)}
.wca .set .l{flex:1;height:6px;border-radius:3px;background:var(--s5)}
.wca .sw{position:relative;flex:0 0 auto;width:28px;height:15px;border-radius:8px;background:var(--s3);
  animation:aWcaSw 5s steps(1,end) infinite}
.wca .sw i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);animation:aWcaKn 5s steps(1,end) infinite}
.wca .vp{position:relative;display:block;height:66px;border-radius:9px;background:var(--s1);
  overflow:hidden;padding:9px}
.wca .cd{display:block;height:14px;border-radius:6px;background:var(--lime);margin-bottom:7px;
  animation:aWcaA 5s cubic-bezier(.2,.9,.25,1) infinite}
.wca .b{animation-delay:.1s}
.wca .c{margin-bottom:0;animation-delay:.2s}
@keyframes aWcaSw{0%,48%{background:var(--s3)}50%,98%{background:var(--lime)}99%,100%{background:var(--s3)}}
@keyframes aWcaKn{0%,48%{transform:translateX(0)}50%,98%{transform:translateX(13px)}99%,100%{transform:translateX(0)}}
@keyframes aWcaA{0%,8%{transform:translateY(16px);opacity:0}
  22%,44%{transform:translateY(0);opacity:1}
  47%{transform:translateY(16px);opacity:0}
  50%,58%{transform:translateY(0);opacity:0}
  64%,94%{transform:translateY(0);opacity:1}
  97%{transform:translateY(0);opacity:0}
  100%{transform:translateY(16px);opacity:0}}

/* Meme fond, meme panneau, meme texte, meme deplacement. A gauche un
   backdrop-filter, a droite un aplat opaque. Le panneau glisse pour
   qu'on voie le flou suivre le fond a gauche et ne rien suivre a
   droite, c'est la seule difference et elle se lit d'un coup d'oeil.
   Aucune animation sur la propriete elle meme, une requete media est
   un etat binaire, l'animer la ferait passer pour une transition. */
.rdt{display:flex;gap:14px;width:172px}
.rdt .col{flex:1;display:flex;flex-direction:column;gap:8px}
.rdt .tag{display:block;font:600 8px/1 var(--mono);color:var(--ink-3);font-style:normal}
.rdt .sc{position:relative;display:block;height:70px;border-radius:9px;overflow:hidden}
.rdt .under2{position:absolute;inset:0;background:linear-gradient(120deg,var(--lime),var(--a3))}
.rdt .glass2{position:absolute;left:8px;right:8px;top:16px;padding:9px;border-radius:9px;
  display:flex;flex-direction:column;gap:6px;animation:aRdt 4s ease-in-out infinite}
.rdt .glass2 b{display:block;height:5px;border-radius:3px;background:var(--void)}
.rdt .glass2 .s{width:60%}
.rdt .blur{background:rgba(var(--ink-rgb),.16);border:1px solid rgba(var(--ink-rgb),.32);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.rdt .solid{background:var(--card);border:1px solid var(--line-2)}
.rdt .solid b{background:var(--ink)}
@keyframes aRdt{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}