/* TATEA — animations retenues sur la planche (tatea-anim-essais.html) : X-A, X-D, C-A, C-B, C-D */
:root { --out: cubic-bezier(.16, 1, .3, 1); --back: cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: no-preference) {
  /* ---------- X-A : titres de section, ligne par ligne sous masque ---------- */
  .stats__next .s02__title, .acb__next .s02__title, .lvb__next .s02__title, .cvb__next .s02__title { opacity: 1 !important; transform: none !important; }
  .s02__title .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
  .s02__title .ln > span { display: block; transform: translateY(112%); transition: transform .45s var(--ease); }
  .stats.is-next .s02__title .ln > span, .acb.is-next .s02__title .ln > span, .lvb.is-next .s02__title .ln > span, .cvb.is-next .s02__title .ln > span {
    transform: none; transition: transform .9s var(--out) calc(.14s + var(--k, 0) * .08s); }

  /* ---------- X-D : phrases de bascule lues au défilement ---------- */
  .why__out.is-read .rd { color: rgb(22 33 61 / .2); transition: color .3s; }
  .why__out.is-read .rd.on { color: var(--ink); }
  .why__out.is-read b .rd.on { color: var(--gold); }

  /* ---------- C-D : le bouton arrive en dernier, la pastille tourne, la flèche glisse ---------- */
  .why__foot .btn { opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .2s, transform .3s; }
  .why__foot .btn .btn__icon { transform: rotate(-90deg) scale(.6); transition: transform .3s; }
  .why__foot .btn .btn__arrow { opacity: 0; transform: translate(-6px, 6px); transition: opacity .2s, transform .3s; }
  .stats.is-why .why__foot .btn { opacity: 1; transform: none; transition: opacity .4s .55s, transform .7s var(--back) .55s; }
  .stats.is-why .why__foot .btn .btn__icon { transform: none; transition: transform .6s var(--back) .85s; }
  .stats.is-why .why__foot .btn .btn__arrow { opacity: 1; transform: none; transition: opacity .4s 1.05s, transform .5s var(--out) 1.05s; }
  .lvb .lv__foot > * { opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .2s, transform .3s; }
  .lvb .lv__foot .btn__icon { transform: rotate(-90deg) scale(.6); transition: transform .3s; }
  .lvb .lv__foot .btn__arrow { opacity: 0; transform: translate(-6px, 6px); }
  .lvb.is-lv .lv__foot > * { opacity: 1; transform: none; transition: opacity .4s .55s, transform .7s var(--back) .55s; }
  .lvb.is-lv .lv__foot p { transition-delay: .45s; }
  .lvb.is-lv .lv__foot .btn__icon { transform: none; transition: transform .6s var(--back) .85s; }
  .lvb.is-lv .lv__foot .btn__arrow { opacity: 1; transform: none; transition: opacity .4s 1.05s, transform .5s var(--out) 1.05s; }
  .cvb .cv__foot > * { opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .2s, transform .3s; }
  .cvb .cv__foot .btn__icon { transform: rotate(-90deg) scale(.6); transition: transform .3s; }
  .cvb .cv__foot .btn__arrow { opacity: 0; transform: translate(-6px, 6px); }
  .cvb.is-cv .cv__foot > * { opacity: 1; transform: none; transition: opacity .4s .55s, transform .7s var(--back) .55s; }
  .cvb.is-cv .cv__foot p { transition-delay: .45s; }
  .cvb.is-cv .cv__foot .btn__icon { transform: none; transition: transform .6s var(--back) .85s; }
  .cvb.is-cv .cv__foot .btn__arrow { opacity: 1; transform: none; transition: opacity .4s 1.05s, transform .5s var(--out) 1.05s; }

  /* ---------- C-A : en cascade (manques, sigles des académies, marches des niveaux) ---------- */
  .why__row { transform: translateY(22px) scale(.97); }
  .is-why .why__row { transition: opacity .5s, transform .8s var(--out); }
  .acx--f .acx__ks button, .acx--f .acx__the { opacity: 0; transform: translateX(18px); }
  .acb.is-ac .acx--f .acx__ks button, .acb.is-ac .acx--f .acx__the { opacity: 1; transform: none; transition: opacity .45s calc(.1s + var(--c, 0) * .07s), transform .8s var(--out) calc(.1s + var(--c, 0) * .07s), color .3s; }
  .acx--f .acx__ks button:nth-child(1) { --c: 1; } .acx--f .acx__ks button:nth-child(2) { --c: 2; } .acx--f .acx__ks button:nth-child(3) { --c: 3; }
  .acx--f .acx__ks button:nth-child(4) { --c: 4; } .acx--f .acx__ks button:nth-child(5) { --c: 5; }
  .lvx--a .lvx__step { transform: translateY(40px); opacity: 0; }
  .lvb.is-lv .lvx--a .lvx__step { transform: none; opacity: 1; transition: opacity .45s calc(.1s + var(--c, 0) * .08s), transform .9s var(--out) calc(.1s + var(--c, 0) * .08s); }
  .lvx--a .lvx__step:nth-child(2) { --c: 1; } .lvx--a .lvx__step:nth-child(3) { --c: 2; }
  .lvx--i .lvx__rv, .lvx--i .lvx__rul { opacity: 0; transform: translateX(60px); }
  .lvb.is-lv .lvx--i .lvx__rv { opacity: 1; transform: none; transition: opacity .5s .1s, transform 1s var(--out) .1s; }
  .lvb.is-lv .lvx--i .lvx__rul { opacity: 1; transform: none; transition: opacity .5s .3s, transform 1s var(--out) .3s; }

  /* ---------- C-B : photos dévoilées (un cache se retire de bas en haut, la photo dézoome) ---------- */
  .lvx--a .lvx__step img { clip-path: inset(100% 0 0 0); transform: scale(1.25); }
  .lvb.is-lv .lvx--a .lvx__step img { clip-path: inset(0); transform: none; transition: clip-path 1s var(--out) calc(.25s + var(--c, 0) * .1s), transform 1.4s var(--out) calc(.25s + var(--c, 0) * .1s), opacity .2s; }
  .lvx--i .lvx__pph { clip-path: inset(100% 0 0 0); }
  .lvb.is-lv .lvx--i .lvx__pph { clip-path: inset(0); transition: clip-path 1s var(--out) .3s; }
  .acx--f .acx__fig { clip-path: inset(0 0 100% 0); }
  .acb.is-ac .acx--f .acx__fig { clip-path: inset(0); transition: clip-path 1s var(--out) .2s; }
}