/* ═══════════════════════════════════════════════════════════════ APPARITION EN CASCADE — commune au site public --------------------------------------------------------------- Une seule entrée : la CASCADE — 30 px vers le haut, 95 ms entre chaque bloc. On la remarque à peine, et c'est le but. La liste des évènements en est exclue : ses cartes s'affichent sans animation (voir la liste des cibles dans apparition.js). Deux règles de sûreté : • la classe .anim-cascade est posée sur par un script en tête de page. Sans JavaScript, elle n'existe pas et rien n'est masqué — la page reste lisible. • --i porte le rang du bloc dans son groupe : c'est ce qui fait la cascade. Sans lui la valeur vaut 0 et tout arrive ensemble, ce qui reste correct. ═══════════════════════════════════════════════════════════════ */ .anim-cascade .av{ opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0) * 95ms); will-change:opacity,transform; } .anim-cascade .av.on{opacity:1;transform:none} /* Une fois arrivé, le bloc n'a plus rien à optimiser. */ .anim-cascade .av.fini{will-change:auto} /* Réglage système « réduire les animations » : tout s'affiche d'un coup. */ @media (prefers-reduced-motion:reduce){ .anim-cascade .av{opacity:1;transform:none;transition:none} }