/* Le mouvement entre les pages. Une page ne passe jamais par le noir : la suivante se pose par-dessus en fondu,
   l'ancienne reste pleine dessous et se floute à peine, le logo glisse d'une barre à l'autre. */
@view-transition { navigation: auto; }
.nav-logo svg { view-transition-name: brand; }
::view-transition-group(brand) { animation-duration: 600ms; animation-timing-function: var(--spring); }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-out 600ms var(--press) both; }
::view-transition-new(root) { animation: vt-in 600ms var(--spring) both; }
/* L'ancienne page reste opaque (jamais de noir dessous) : elle recule à peine dans le flou, la nouvelle monte par-dessus. */
@keyframes vt-out { to { transform: scale(calc(1 + 0.03 * var(--m))); filter: blur(10px) brightness(0.8); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(calc(22px * var(--m))) scale(calc(1 - 0.012 * var(--m))); } }

/* Le départ : le bouton cliqué s'enfonce et sa flèche file. Si la page suivante tarde, l'étoile de Skillls tourne au centre. */
.btn[data-going] { animation: go-press 360ms var(--spring); }
@keyframes go-press { 35% { transform: scale(calc(1 - 0.035 * var(--m))); } }
.btn[data-going] svg { transform: translateX(calc(6px * var(--m))); }
:root[data-leaving] main { opacity: 0.55; transition: opacity 300ms 450ms var(--press); }
:root[data-leaving] body::after { content: ""; position: fixed; z-index: 300; top: calc(50% - 21px); left: calc(50% - 21px); width: 42px; height: 42px; background: var(--rainbow); -webkit-mask: var(--star-big) center / contain no-repeat; mask: var(--star-big) center / contain no-repeat; pointer-events: none; animation: leave-wait 320ms 450ms var(--spring) backwards, sk-turn 1.2s linear infinite; }
@keyframes leave-wait { from { opacity: 0; transform: scale(calc(1 - 0.3 * var(--m))) rotate(calc(-30deg * var(--m))); } }

/* Arrivée sur le paiement : la feuille monte, la carte Skillls Pro tombe en place en se redressant, le reste suit ligne à ligne.
   fill: backwards seulement, rien ne reste accroché une fois posé (la carte garde sa bascule au pointeur). */
.pay-sheet { animation: pay-in 620ms var(--spring) backwards; }
@keyframes pay-in { from { opacity: 0; transform: translateY(calc(28px * var(--m))) scale(calc(1 - 0.015 * var(--m))); } }
.pay .pass-slot { transform-origin: 50% 0; animation: pass-in 900ms 140ms var(--spring) backwards; }
@keyframes pass-in { from { opacity: 0; transform: perspective(900px) translateY(calc(-18px * var(--m))) rotateX(calc(-32deg * var(--m))) rotateY(calc(14deg * var(--m))) scale(calc(1 - 0.08 * var(--m))); } }
.pay-head > *, .pay-side dl, .pay-side > p, .pay-details, .pay-main > .btn, .pay-note { animation: line-in 520ms var(--spring) backwards; }
.pay-head > :nth-child(2) { animation-delay: 60ms; }
.pay-side dl, .pay-details { animation-delay: 200ms; }
.pay-side > p, .pay-main > .btn { animation-delay: 260ms; }
.pay-note { animation-delay: 320ms; }
@keyframes line-in { from { opacity: 0; transform: translateY(calc(10px * var(--m))); } }

/* Arrivée sur la connexion : autre geste que le paiement. La carte bascule vers soi comme une porte qui s'ouvre,
   pendant que la lumière se pose derrière, puis le formulaire arrive ligne à ligne. Les cases du code ont leur propre cascade. */
.login { perspective: 1200px; }
.login-card { transform-origin: 50% 100%; animation: login-in 760ms var(--spring) backwards; }
@keyframes login-in { from { opacity: 0; transform: translateY(calc(24px * var(--m))) rotateX(calc(18deg * var(--m))) scale(calc(1 - 0.05 * var(--m))); } }
.login-card form:not([hidden]) > :not(.field:has(.otp)) { animation: line-in 520ms calc(120ms + var(--n, 0) * 45ms) var(--spring) backwards; }
.login-card form > :nth-child(2) { --n: 1; }
.login-card form > :nth-child(3) { --n: 2; }
.login-card form > :nth-child(4) { --n: 3; }
.login-card form > :nth-child(n + 5) { --n: 4; }

/* Mon compte et les pages légales (CGV, ouvertes depuis le paiement) arrivent comme les autres feuilles, avec ou sans fondu du navigateur. */
.legal { animation: rise 640ms var(--spring) backwards; }