/* ============================================================
   Motionary, demos D
   UX patterns et hero animations
   ============================================================ */


/* Les trois classes du terme, une par rangee. Le theme bascule a 14
   pour cent et revient a 68 sans jamais appeler la barre. Le champ de
   facturation passe en modification a 30 et c'est LUI qui la fait
   monter a 34. La suppression n'a ni bascule ni barre, elle part en
   quarantaine ailleurs.
   Les quatre boucles se referment maintenant sur leur etat de depart,
   avant elles se teleportaient toutes les quatre au raccord. */
.brz{position:relative;width:172px;display:flex;flex-direction:column;gap:11px;padding-bottom:32px}
.brz .rowi{display:flex;align-items:center;gap:8px}
.brz .tg2{flex:0 0 auto;width:54px;font:600 8px/1 var(--mono);color:var(--ink-3);font-style:normal}
.brz .tg2.red{color:var(--danger)}
.brz .bar{flex:1;height:8px;border-radius:4px;background:var(--s3)}
.brz .tg{position:relative;flex:0 0 auto;width:30px;height:16px;border-radius:9px;background:var(--s3);
  animation:aToggleBg 4.4s ease infinite}
.brz .tg::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--ink);animation:aToggle 4.4s cubic-bezier(.2,.9,.25,1) infinite}
.brz .fld{flex:0 0 auto;width:44px;height:18px;border-radius:6px;background:var(--s1);
  border:1px solid var(--line-2);box-sizing:border-box;animation:aFldEdit 4.4s ease infinite}
.brz .del{flex:0 0 auto;width:30px;height:16px;border-radius:5px;box-sizing:border-box;
  background:rgba(var(--danger-rgb),.22);border:1px solid var(--danger)}
.brz .savebar{position:absolute;left:0;right:0;bottom:0;height:22px;border-radius:8px;background:var(--lime);
  animation:aSaveBar 4.4s cubic-bezier(.2,1.2,.3,1) infinite}
@keyframes aToggle{0%,14%{transform:translateX(0)}24%,68%{transform:translateX(14px)}80%,100%{transform:translateX(0)}}
@keyframes aToggleBg{0%,14%{background:var(--s3)}24%,68%{background:var(--lime)}80%,100%{background:var(--s3)}}
@keyframes aFldEdit{0%,30%{border-color:var(--line-2)}38%,64%{border-color:var(--lime)}72%,100%{border-color:var(--line-2)}}
@keyframes aSaveBar{0%,34%{transform:translateY(32px);opacity:0}44%,66%{transform:translateY(0);opacity:1}76%,100%{transform:translateY(32px);opacity:0}}

/* Sequence complete, modification puis barre puis annulation. La
   valeur du premier champ passe de 56 a 87px par un scaleX de 1.55
   depuis son bord gauche, et REVIENT a 66 pour cent, juste apres que
   le bouton annuler s'est allume a 58. C'est la restitution qui rend
   cette barre digne de confiance, une barre qui se contenterait de
   disparaitre laisserait des modifications qu'on croit jetees. */
.svb{position:relative;width:172px;display:flex;flex-direction:column;gap:10px;padding-bottom:38px}
.svb .fld{position:relative;display:block;height:26px;border-radius:8px;background:var(--s1);
  border:1px solid var(--line-2);box-sizing:border-box}
.svb .fld:first-child{animation:aSbFld 4.6s ease infinite}
.svb .val{position:absolute;left:9px;top:10px;width:56px;height:6px;border-radius:3px;background:var(--s5);
  transform-origin:left center;animation:aSbVal 4.6s cubic-bezier(.3,.9,.3,1) infinite}
.svb .v2{width:38px;animation:none}
.svb .bar2{position:absolute;left:0;right:0;bottom:0;height:28px;border-radius:9px;background:var(--s0);
  border:1px solid var(--line-2);box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:0 9px;
  animation:aSaveBar2 4.6s cubic-bezier(.2,1.2,.3,1) infinite}
.svb .bar2 .dot{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.svb .btn{display:block;height:15px;border-radius:5px}
.svb .cancel{width:28px;background:var(--s4);margin-left:auto;animation:aSbCancel 4.6s steps(1,end) infinite}
.svb .save{width:32px;background:var(--lime)}
@keyframes aSbVal{0%,14%{transform:scaleX(1)}24%,60%{transform:scaleX(1.55)}66%,100%{transform:scaleX(1)}}
@keyframes aSbFld{0%,14%{border-color:var(--line-2)}24%,60%{border-color:var(--lime)}70%,100%{border-color:var(--line-2)}}
@keyframes aSaveBar2{0%,18%{transform:translateY(38px);opacity:0}28%,68%{transform:translateY(0);opacity:1}78%,100%{transform:translateY(38px);opacity:0}}
@keyframes aSbCancel{0%,56%{background:var(--s4)}58%,64%{background:var(--ink-2)}66%,100%{background:var(--s4)}}

/* La page mesure 227px pour une fenetre de 110, il faut donc defiler
   de 117px avant d'atteindre la zone. Le bouton principal reste tout
   en haut, hors de portee de la memoire du geste. C'est la distance
   qui fait la friction, pas la couleur, et aucune pulsation
   permanente n'est necessaire, une quarantaine qui clignote n'est
   plus lue au bout de deux visites. */
.dz{position:relative;width:172px;height:110px;border-radius:10px;overflow:hidden;background:var(--s0)}
.dz .pg{position:absolute;left:0;right:0;top:0;padding:10px;display:flex;flex-direction:column;gap:8px;
  animation:aDzScroll 5.4s cubic-bezier(.4,0,.2,1) infinite}
.dz .pg i{height:9px;border-radius:4px;background:var(--s2)}
.dz .hd{height:13px;width:56%;background:var(--s4)}
.dz .pri{height:18px;width:64px;border-radius:6px;background:var(--lime)}
.dz .zone{margin-top:22px;padding:9px;border-radius:9px;box-sizing:border-box;
  border:1.5px solid var(--danger);background:rgba(var(--danger-rgb),.08);
  display:flex;align-items:center;justify-content:space-between}
.dz .lbl{font:700 8px/1 var(--mono);color:var(--danger);font-style:normal}
.dz .btn{width:34px;height:16px;border-radius:6px;background:var(--danger)}
@keyframes aDzScroll{0%,16%{transform:translateY(0)}56%,86%{transform:translateY(-117px)}96%,100%{transform:translateY(0)}}

/* Remplissage de 8 a 34 pour cent, relachement, rembobinage complet a
   46, puis reprise et fin a 78. Le maintien complet dure 900ms sur un
   cycle de 4s, dans la fourchette 600 a 1200 de la consigne.
   pathLength a 1, donc le dasharray ne depend plus du rayon et le
   trace reste juste si on change la taille de l'anneau. */
.htd{position:relative;display:grid;place-items:center;width:96px;height:96px}
.htd .ring{width:72px;height:72px;transform:rotate(-90deg)}
.htd .ring circle{fill:none}
.htd .ring .bg{stroke:var(--danger-bg);stroke-width:5}
.htd .ring .fg{stroke:var(--danger);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:aHtd 4s cubic-bezier(.4,0,.6,1) infinite}
.htd .lbl{position:absolute;font:700 9px/1 var(--mono);color:var(--danger)}
.htd .cur{position:absolute;left:32px;top:32px;animation:aHtdCur 4s ease infinite}
@keyframes aHtd{0%,8%{stroke-dashoffset:1}34%{stroke-dashoffset:.48}46%,54%{stroke-dashoffset:1}
  78%,92%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:1}}
@keyframes aHtdCur{0%,6%{transform:scale(1);opacity:.5}12%,40%{transform:scale(.72);opacity:1}
  46%,54%{transform:scale(1);opacity:.5}60%,92%{transform:scale(.72);opacity:1}
  98%,100%{transform:scale(1);opacity:.5}}

/* Le nom attendu est affiche au dessus, il doit pouvoir etre lu et
   copie sinon la friction ne sert a rien. Treize caracteres, treize
   pas, largeur en ch, chaque palier tombe donc exactement sur une
   frontiere de glyphe. Le bouton ne devient destructeur qu'apres la
   derniere lettre, a 48 pour cent. */
.nc{display:flex;flex-direction:column;gap:10px;width:172px}
.nc .ask{display:block;padding:5px 8px;border-radius:6px;background:var(--s1);
  font:600 10px/1 var(--mono);color:var(--ink-2)}
.nc .ask em{font-style:normal}
.nc .fld{display:flex;align-items:center;gap:2px;height:28px;border-radius:8px;background:var(--s1);
  border:1px solid var(--line-2);box-sizing:border-box;padding:0 8px;overflow:hidden;
  font:600 11px/28px var(--mono)}
.nc .typed{display:block;font:inherit;color:var(--ink);white-space:nowrap;overflow:hidden;width:0;
  animation:aNcType 5s steps(13,end) infinite}
.nc .caret{display:block;flex:0 0 auto;width:1.5px;height:14px;background:var(--lime);
  animation:aCaret .9s steps(1,end) infinite}
.nc .btn{display:block;height:24px;border-radius:8px;background:var(--s3);
  animation:aNcBtn 5s steps(1,end) infinite}
@keyframes aNcType{0%{width:0}42%,86%{width:13ch}96%,100%{width:0}}
@keyframes aNcBtn{0%,44%{background:var(--s3)}48%,88%{background:var(--danger)}92%,100%{background:var(--s3)}}

/* Le curseur appuie sur le bouton de la deuxieme rangee a 42 pour
   cent, et c'est SEULEMENT apres, a 56, que le point et le bouton
   s'effacent. La troisieme rangee est deja a sa valeur par defaut,
   elle n'a donc ni marque ni bouton, c'est elle le temoin. */
.ovd{position:relative;width:172px;display:flex;flex-direction:column;gap:14px}
.ovd .rowi{display:flex;align-items:center;gap:10px}
.ovd .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.ovd .bar{flex:1;height:9px;border-radius:4px;background:var(--s3)}
.ovd .rst{flex:none;width:16px;height:16px;border-radius:5px;box-sizing:border-box;
  border:1.5px solid var(--lime)}
/* La troisieme rangee est le reglage SANS surcharge. Sa pastille et son
   bouton de remise a zero sont a opacite nulle et non retires, parce
   qu ils gardent leur place et que la barre reste alignee avec les deux
   autres rangees. Un element invisible qui tient une colonne n est pas
   du markup mort. */
.ovd .off .dot,.ovd .off .rst{opacity:0}
.ovd .off .bar{opacity:.5}
.ovd .r2 .dot,.ovd .r2 .rst{animation:aOvd 4.2s ease infinite}
.ovd .r2 .bar{animation:aOvdBar 4.2s ease infinite}
.ovd .cur{position:absolute;right:0;top:31px;animation:aOvdCur 4.2s cubic-bezier(.3,0,.2,1) infinite}
@keyframes aOvd{0%,44%{opacity:1;transform:scale(1)}56%,92%{opacity:0;transform:scale(.4)}98%,100%{opacity:1;transform:scale(1)}}
@keyframes aOvdBar{0%,44%{opacity:1}56%,92%{opacity:.5}98%,100%{opacity:1}}
@keyframes aOvdCur{0%,20%{transform:translate(12px,10px);opacity:0}
  30%{transform:translate(0,0);opacity:1}
  42%{transform:translate(0,3px);opacity:1}
  54%{transform:translate(0,0);opacity:1}
  70%{transform:translate(12px,10px);opacity:0}
  70.001%,100%{transform:translate(12px,10px);opacity:0}}

/* La requete se tape d'abord, en neuf paliers de 6px pour 54px de
   large, et les resultats ne viennent qu'apres, a 44 pour cent.
   Chaque resultat porte son chemin d'acces au dessus, c'est lui qui
   apprend a l'utilisateur ou vit reellement le reglage. */
.ss2{width:172px;display:flex;flex-direction:column;gap:9px}
.ss2 .fld{display:flex;align-items:center;gap:3px;height:26px;padding:0 9px;box-sizing:border-box;
  border-radius:8px;background:var(--s1);border:1px solid var(--lime)}
.ss2 .q{display:block;height:6px;border-radius:3px;background:var(--s5);width:0;
  animation:aSsQ 3.8s steps(9,end) infinite}
.ss2 .caret{display:block;flex:0 0 auto;width:1.5px;height:14px;background:var(--lime);
  animation:aCaret .9s steps(1,end) infinite}
.ss2 .res{display:flex;flex-direction:column;gap:5px;animation:aRes 3.8s ease infinite}
.ss2 .r2{animation-delay:.14s;opacity:.5}
.ss2 .path{height:5px;width:56%;border-radius:3px;background:var(--s4)}
.ss2 .path.s{width:38%}
.ss2 .bar{height:9px;border-radius:4px;background:var(--s3)}
.ss2 .hit{background:var(--lime);width:80%}
@keyframes aSsQ{0%{width:0}34%,86%{width:54px}96%,100%{width:0}}
@keyframes aRes{0%,30%{opacity:0;transform:translateY(6px)}44%,86%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(6px)}}

/* Un vrai decompte, pas un spinner. L'anneau perd un quatorzieme de
   sa longueur, soit 0.07 avec pathLength a 1, et le nombre passe de
   14 a 13 dans une fenetre de 26px pour un glyphe de 26px. Puis on
   appuie sur annuler a 76 pour cent et tout revient a 84. C'est ce
   retour qui est le sujet du terme, pas l'attente. */
.gp{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;width:172px;padding-top:76px}
.gp .ring2{position:absolute;left:50%;top:0;margin-left:-34px;width:68px;height:68px;transform:rotate(-90deg)}
.gp .ring2 circle{fill:none}
.gp .ring2 .bg{stroke:var(--s2);stroke-width:5}
.gp .ring2 .fg{stroke:var(--lime);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;animation:aGrace 5s linear infinite}
.gp .win{position:absolute;left:50%;top:21px;margin-left:-19px;width:38px;height:26px;overflow:hidden}
.gp .reel{display:block;font:800 20px/26px var(--mono);font-variant-numeric:tabular-nums;
  color:var(--lime);text-align:center;animation:aGraceN 5s cubic-bezier(.3,.9,.3,1) infinite}
.gp .reel b{display:block;height:26px}
.gp .lbl{font:600 8px/1 var(--mono);color:var(--ink-3)}
.gp .cx{width:58px;height:19px;border-radius:6px;box-sizing:border-box;background:var(--s3);
  border:1px solid var(--line-2);animation:aGraceCx 5s steps(1,end) infinite}
@keyframes aGrace{0%,20%{stroke-dashoffset:0}44%,72%{stroke-dashoffset:.07}84%,100%{stroke-dashoffset:0}}
@keyframes aGraceN{0%,20%{transform:translateY(0)}44%,72%{transform:translateY(-26px)}84%,100%{transform:translateY(0)}}
@keyframes aGraceCx{0%,74%{background:var(--s3);border-color:var(--line-2)}
  76%,82%{background:var(--lime);border-color:var(--lime)}
  86%,100%{background:var(--s3);border-color:var(--line-2)}}


/* Onglets de largeur egale, 48px, ecart de 4, donc un pas de 52 et
   des positions de blob a 0, 52 et 104 exactement. Le blob fait
   lui aussi 48 de large, il couvre donc sa cible au pixel pres.
   La couleur du libelle actif SUIT le blob, un onglet qui garde sa
   couleur inactive sous un fond vert devient le moins lisible de la
   rangee, ce qui est exactement l'inverse du but. */
.ltb{position:relative;display:flex;align-items:center;gap:4px;padding:5px;border-radius:12px;
  background:var(--s1);border:1px solid var(--line)}
.ltb .t{position:relative;z-index:2;width:48px;box-sizing:border-box;text-align:center;
  font:600 11px/1 var(--font);color:var(--ink-2);padding:9px 0;border-radius:9px;
  animation:aLtbLbl 4.4s cubic-bezier(.5,0,.2,1) infinite}
.ltb .t2{animation-name:aLtbLbl2}
.ltb .t3{animation-name:aLtbLbl3}
.ltb .blob{position:absolute;left:5px;top:5px;width:48px;height:29px;border-radius:9px;
  background:var(--lime);z-index:1;animation:aLiquid 4.4s cubic-bezier(.5,0,.2,1) infinite}
@keyframes aLtbLbl{0%,16%{color:var(--on-accent)}26%,88%{color:var(--ink-2)}96%,100%{color:var(--on-accent)}}
@keyframes aLtbLbl2{0%,22%{color:var(--ink-2)}32%,44%{color:var(--on-accent)}54%,100%{color:var(--ink-2)}}
@keyframes aLtbLbl3{0%,56%{color:var(--ink-2)}66%,82%{color:var(--on-accent)}90%,100%{color:var(--ink-2)}}
/* Positions exactes, 0 puis 52 puis 104, et l'etirement culmine a mi
   parcours a 26 et 78 avant de revenir a 1 pile sur la cible. Un
   scaleX qui ne redescend pas a 1 laisse l'onglet actif deforme en
   permanence, ce qui se voit tout de suite. */
@keyframes aLiquid{
  0%,16%{transform:translateX(0) scaleX(1);border-radius:9px}
  26%{transform:translateX(26px) scaleX(1.5);border-radius:14px/9px}
  32%,44%{transform:translateX(52px) scaleX(1);border-radius:9px}
  56%{transform:translateX(78px) scaleX(1.5);border-radius:14px/9px}
  66%,82%{transform:translateX(104px) scaleX(1);border-radius:9px}
  92%,100%{transform:translateX(0) scaleX(1);border-radius:9px}}

.ctz{position:relative;width:132px;height:84px}
.ctz i,.ctz .cur{position:absolute;left:8px;top:12px;display:block;border-radius:50%;animation:aTrail 4s cubic-bezier(.45,0,.35,1) infinite}
.ctz i{width:13px;height:13px;background:var(--lime)}
.ctz .cur{width:13px;height:13px;background:var(--ink);box-shadow:0 0 0 4px rgba(var(--ink-rgb),.14);z-index:6}
.ctz i:nth-child(1){animation-delay:-.30s;opacity:.16;filter:blur(3px)}
.ctz i:nth-child(2){animation-delay:-.25s;opacity:.26;filter:blur(2.4px)}
.ctz i:nth-child(3){animation-delay:-.20s;opacity:.38;filter:blur(1.8px)}
.ctz i:nth-child(4){animation-delay:-.15s;opacity:.52;filter:blur(1.2px)}
.ctz i:nth-child(5){animation-delay:-.10s;opacity:.68;filter:blur(.6px)}
.ctz i:nth-child(6){animation-delay:-.05s;opacity:.85}
@keyframes aTrail{
  0%{transform:translate(0,0)}25%{transform:translate(98px,10px)}
  50%{transform:translate(60px,54px)}75%{transform:translate(6px,42px)}
  100%{transform:translate(0,0)}}

/* ---------------- hero ---------------- */
.spt{display:flex;gap:2px}
.spt .m{display:block;overflow:hidden;height:36px}
.spt .m b{display:block;font:800 28px/36px var(--font);letter-spacing:-.02em;color:var(--lime);animation:aSplit 3.6s cubic-bezier(.2,.9,.25,1) infinite}
/* 45ms entre chaque lettre, dans la fourchette 25 a 50 de la consigne.
   A 60ms le CSS contredisait son propre prompt. Six lettres font donc
   225ms de cascade, tres en dessous du plafond de 800. */
.spt .m:nth-child(2) b{animation-delay:.045s}
.spt .m:nth-child(3) b{animation-delay:.09s}
.spt .m:nth-child(4) b{animation-delay:.135s}
.spt .m:nth-child(5) b{animation-delay:.18s}
.spt .m:nth-child(6) b{animation-delay:.225s}
@keyframes aSplit{0%,10%{transform:translateY(100%)}38%,84%{transform:translateY(0)}96%,100%{transform:translateY(-100%)}}

.kt{display:flex;flex-direction:column;align-items:center;line-height:.92;font-weight:800;letter-spacing:-.03em}
/* 450ms entre chaque mot, dans la fourchette 400 a 600 de la consigne.
   A 100ms les trois mots se chevauchaient et l ensemble se lisait
   comme une cascade ordinaire, ce qui est precisement ce que ce terme
   n est pas. Le cycle passe a 4.4s pour loger les trois temps. */
.kt b{display:block;animation:aKinetic 4.4s cubic-bezier(.2,.9,.25,1) infinite}
.kt .w1{font-size:18px;color:var(--ink-2)}
.kt .w2{font-size:13px;color:var(--ink-3);animation-delay:.45s}
.kt .w3{font-size:30px;color:var(--lime);animation-delay:.9s}
@keyframes aKinetic{0%,8%{transform:translateY(12px) scale(.9);opacity:0}30%,74%{transform:none;opacity:1}94%,100%{transform:translateY(-8px);opacity:0}}

.spl{position:relative;width:136px;height:88px;border-radius:12px;background:var(--s0);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 14px}
.spl .glow{position:absolute;width:120px;height:120px;left:-40px;top:-30px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.34),transparent 65%);animation:aSpot 4.4s ease-in-out infinite}
.spl .hd{position:relative;height:12px;border-radius:5px;background:rgba(var(--ink-rgb),.75);width:82%}
.spl .sub{position:relative;height:7px;border-radius:4px;background:rgba(var(--ink-rgb),.28);width:56%}
/* Le halo porte 180ms de retard sur le curseur, et c est CE retard qui
   le fait lire comme une lumiere ayant du poids plutot qu une forme
   collee au pointeur. Le titre s allume au passage, une lumiere qui
   traverse une surface inerte n a rien eclaire. */
.spl .cur{left:0;top:0;animation:aSpotCur 4.4s ease-in-out infinite}
.spl .glow{animation-delay:.18s}
.spl .hd{animation:aSpotHd 4.4s ease-in-out infinite}
.spl .sub{animation:aSpotHd 4.4s ease-in-out infinite;animation-delay:.12s}
@keyframes aSpotHd{0%,22%{opacity:.55}46%,58%{opacity:1}82%,100%{opacity:.55}}
@keyframes aSpot{0%,100%{transform:translate(6px,6px)}50%{transform:translate(96px,44px)}}
@keyframes aSpotCur{0%,100%{transform:translate(20px,26px)}50%{transform:translate(110px,64px)}}

.gdr{position:relative;width:136px;height:88px;border-radius:12px;overflow:hidden;background:var(--stage);display:grid;place-items:center}
.gdr span[class^="b"]{position:absolute;width:76px;height:76px;border-radius:50%;filter:blur(18px)}
.gdr .b1{background:rgba(var(--accent-rgb),.55);animation:aDrift1 7s ease-in-out infinite}
.gdr .b2{background:rgba(var(--a2-rgb),.35);animation:aDrift2 9s ease-in-out infinite}
.gdr .b3{background:rgba(var(--ink-rgb),.14);animation:aDrift3 11s ease-in-out infinite}
.gdr .hd{position:relative;z-index:2;width:76px;height:11px;border-radius:5px;background:rgba(var(--ink-rgb),.9)}
@keyframes aDrift1{0%,100%{transform:translate(-34px,-22px)}50%{transform:translate(24px,18px)}}
@keyframes aDrift2{0%,100%{transform:translate(38px,20px)}50%{transform:translate(-20px,-24px)}}
@keyframes aDrift3{0%,100%{transform:translate(10px,30px) scale(1)}50%{transform:translate(-30px,-10px) scale(1.3)}}

.mir{position:relative;width:132px;height:84px;border-radius:12px;overflow:hidden}
.mir .img{position:absolute;inset:0;background:linear-gradient(135deg,var(--lime),var(--accent-2) 55%,var(--accent-deep));animation:aMirImg 4s cubic-bezier(.5,0,.2,1) infinite}
.mir .wipe{position:absolute;inset:0;background:var(--stage);animation:aMirWipe 4s cubic-bezier(.5,0,.2,1) infinite}
/* 1.15 et non 1.18, la consigne du terme donne la valeur.
   Et surtout, l image se pose 10 pour cent APRES que le rideau soit
   passe, a 62 contre 52. C est ce decalage qui fait la profondeur, la
   zone decouverte est encore en mouvement quand on la decouvre. Un
   rideau sur une image immobile ne serait qu un rideau.
   La vignette boucle, la consigne dit once on load, c est une entree
   et non une boucle, mais une vignette doit se rejouer. */
@keyframes aMirWipe{0%,8%{transform:translateY(0)}52%,86%{transform:translateY(-100%)}96%,100%{transform:translateY(0)}}
@keyframes aMirImg{0%,8%{transform:scale(1.15)}62%,86%{transform:scale(1)}96%,100%{transform:scale(1.15)}}

.hmq{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;transform:rotate(-6deg) scale(1.14)}
.hmq .band{display:block;white-space:nowrap;overflow:hidden}
.hmq .band span{display:inline-block;font:800 17px/28px var(--font);letter-spacing:.04em;padding-right:16px}
.hmq .b1{background:var(--lime)}
.hmq .b1 span{color:var(--on-accent);animation:aBand 8s linear infinite}
.hmq .b2 span{color:var(--ink-3);animation:aBandR 10s linear infinite}
@keyframes aBand{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes aBandR{from{transform:translateX(-50%)}to{transform:translateX(0)}}