/* lot 22 (23/10/2026, Hassan) : arrivée sur l'écran de connexion, APRÈS l'intro n°1 (logo SD ONE, v2-intro.js, inchangée) :
   fond blanc, puis la planète apparaît petit à petit (flou -> net, léger zoom), puis l'heure, la carte de connexion et le pied montent.
   Tout est commandé par v2-lot22.js : sans lui, rien ne change. Les mouvements d'origine (cxfDerive, cxfPoussiere) sont gardés. */
@media (prefers-reduced-motion: no-preference) {
  /* pendant l'intro n°1 : écran de connexion caché derrière un blanc (pas de flash) */
  body.cx-ouvert.l22-attente #cx-fond::after, body.cx-ouvert.l22-go #cx-fond::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #fff; pointer-events: none; }
  body.cx-ouvert.l22-attente #cx-fond .cxf-carte, body.cx-ouvert.l22-attente #cx-fond .cxf-plaque, body.cx-ouvert.l22-attente #cx-fond .cxf-poussiere,
  body.cx-ouvert.l22-attente #v2-contenu > .cx > * { opacity: 0 !important; }
  /* après l'intro n°1 : la planète arrive */
  body.cx-ouvert.l22-go #cx-fond::after { animation: l22Voile 3.2s cubic-bezier(.4,0,.2,1) both; }
  body.cx-ouvert.l22-go #cx-fond .cxf-carte { animation: l22Carte 3.8s cubic-bezier(.16,1,.3,1) both, cxfDerive 60s ease-in-out 3.8s infinite alternate !important; }
  body.cx-ouvert.l22-go #cx-fond .cxf-plaque { animation: l22Apparait 3s ease .9s both !important; }
  body.cx-ouvert.l22-go #cx-fond .cxf-poussiere { animation: l22Apparait 3s ease .9s both, cxfPoussiere 7s ease-in-out 3.9s infinite alternate !important; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-hero { animation: l22Monte 1.2s cubic-bezier(.16,1,.3,1) 1.6s both; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-carte { animation: l22Monte 1.3s cubic-bezier(.16,1,.3,1) 1.9s both; }
  body.cx-ouvert.l22-go #v2-contenu > .cx > .cx-bas { animation: l22Monte 1.1s ease 2.3s both; }
}
@keyframes l22Voile { 0%, 15% { opacity: 1; } 100% { opacity: 0; } }
@keyframes l22Carte { 0% { opacity: 0; filter: blur(18px) saturate(.4); scale: 1.16; } 60% { opacity: 1; } 100% { opacity: 1; filter: none; scale: 1; } }
@keyframes l22Apparait { from { opacity: 0; } }
@keyframes l22Monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }