/* Nakama : motion design (notes/mouvements.md). Énergie manga, nette et rapide : 150 à 400 ms,
   courbes franches, lignes de vitesse au bon moment.
   - Seulement transform (et ses propriétés séparées translate, scale, rotate, qui se composent
     avec le transform déjà posé par app.css) et opacity. Aucune animation ne coupe le toucher.
   - Dans un cadre qui rogne (.hero), seulement des échelles d'au plus 1 et des fondus.
   - Entrée d'un écran : classe .mv-entree posée par js/mouvements.js à chaque changement d'écran
     (jamais quand le même écran est redessiné), retirée une fois la cascade finie.
   - Mouvements réduits : rien de ce fichier (bloc final). */

/* ============ Courbes et images clés ============ */
:root{--mv-net:cubic-bezier(.2,.9,.3,1);--mv-claque:cubic-bezier(.2,1.4,.4,1)}
@keyframes mv-monte{from{opacity:0;translate:0 12px}}
@keyframes mv-pop{from{opacity:0;scale:.82;translate:0 10px}}
@keyframes mv-fondu{from{opacity:0}}
@keyframes mv-reduit{from{opacity:0;scale:.92}}
@keyframes mv-dooon{from{opacity:0;scale:1.5}}
@keyframes mv-vitesse{0%{opacity:0;translate:-35% 0}25%{opacity:1}100%{opacity:0;translate:35% 0}}
@keyframes mv-flotte{from{translate:0 0}to{translate:0 -6px}}
@keyframes mv-reflet-paquet{0%,58%{translate:-110% 0}82%,100%{translate:110% 0}}
@keyframes mv-squelette{from{translate:-100% 0}to{translate:100% 0}}
@keyframes mv-remplit{from{scale:0 1}}
@keyframes mv-saute{0%{scale:.55;translate:0 5px}60%{scale:1.15;translate:0 -2px}100%{scale:1;translate:0 0}}
@keyframes mv-appel{0%,100%{scale:1}50%{scale:1.07}}
@keyframes mv-tombe{0%{opacity:0;translate:0 -46px;rotate:-14deg;scale:1.25}70%{opacity:1;translate:0 4px;rotate:2deg;scale:.98}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes mv-eclate{0%{opacity:0;scale:.35}30%{opacity:1}100%{opacity:0;scale:1.15}}
@keyframes mv-glisse-haut{from{opacity:0;translate:0 140%}}
@keyframes mv-battement{0%,100%{scale:1}45%{scale:1.08}}

/* ============ Premier lancement : le titre bat pendant le chargement ============ */
.chargement-titre{animation:mv-battement .9s var(--mv-net) infinite}

/* ============ Entrée d'un écran (tous les écrans) ============ */
.mv-entree>:not(.hero):not(.tuiles){animation:mv-monte .26s var(--mv-net) backwards}
.mv-entree>:nth-child(2){animation-delay:.04s}
.mv-entree>:nth-child(3){animation-delay:.08s}
.mv-entree>:nth-child(4){animation-delay:.12s}
.mv-entree>:nth-child(n+5){animation-delay:.16s}

/* ============ Accueil ============ */
/* Textes du bandeau en cascade (fondu et légère réduction : rien ne dépasse du bandeau). */
.mv-entree .hero-txt>*{animation:mv-reduit .26s var(--mv-net) backwards}
.mv-entree .hero-txt>:nth-child(2){animation-delay:.05s}
.mv-entree .hero-txt>:nth-child(3){animation-delay:.1s}
.mv-entree .hero-txt>:nth-child(4){animation-delay:.15s}
.mv-entree .hero-txt>:nth-child(n+5){animation-delay:.2s}
/* Lignes de vitesse qui traversent le titre à l'arrivée. */
.mv-entree .hero-txt::before{content:"";position:absolute;inset:18% -60px 30%;z-index:-1;pointer-events:none;opacity:0;background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(21,21,21,.2) 9px 11px,transparent 11px 17px,rgba(230,0,18,.22) 17px 18px);animation:mv-vitesse .42s ease-out .05s}
/* Le DOOON du fond tombe sur le bandeau. */
.mv-entree .hero::after{animation:mv-dooon .4s var(--mv-claque) .18s backwards}
/* Paquets : ils claquent à l'arrivée (js/mouvements.js), puis un reflet passe de temps en temps.
   (Ils flottaient aussi en continu : un mouvement sans pause redessine la zone à chaque image ;
   mesuré, c'était le gros de l'écart de fluidité de l'accueil. Le reflet, lui, tient immobile 3 s sur 4.) */
.paquets .paquet-corps::after{content:"";position:absolute;inset:-10% -40%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,rgba(255,246,194,.7) 50%,rgba(255,255,255,.5) 52%,transparent 62%);translate:-110% 0;animation:mv-reflet-paquet 4.2s ease-in-out infinite}
.paquets .paquet.super .paquet-corps::after{animation-delay:1.6s}
/* Tuiles en cascade, après le bandeau. */
.mv-entree .tuile{animation:mv-pop .3s var(--mv-claque) backwards}
.mv-entree .tuile:nth-child(1){animation-delay:.12s}
.mv-entree .tuile:nth-child(2){animation-delay:.16s}
.mv-entree .tuile:nth-child(3){animation-delay:.2s}
.mv-entree .tuile:nth-child(4){animation-delay:.24s}
.mv-entree .tuile:nth-child(5){animation-delay:.28s}
.mv-entree .tuile:nth-child(n+6){animation-delay:.32s}
/* Le cadeau du jour à prendre appelle le doigt. */
.jour.auj{animation:mv-appel 1.6s ease-in-out infinite}
/* Carte reçue en cadeau : elle tombe, des lignes de vitesse éclatent derrière. */
.recu-carte{position:relative;isolation:isolate}
.recu-carte::before{content:"";position:absolute;left:50%;top:42%;z-index:-1;width:100%;max-width:300px;aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 4deg,rgba(230,0,18,.55) 0deg 4deg,transparent 4deg 13deg);-webkit-mask:radial-gradient(circle,transparent 24%,#000 27%,#000 48%,transparent 70%);mask:radial-gradient(circle,transparent 24%,#000 27%,#000 48%,transparent 70%);animation:mv-eclate .6s ease-out .12s}
.recu-carte .carte{animation:mv-tombe .46s var(--mv-net) backwards}
.recu-carte .etiquette{animation:mv-pop .28s var(--mv-claque) .34s backwards}

/* ============ Chiffres qui comptent (js/mouvements.js) ============
   Le texte réel reste la valeur finale (lecteurs d'écran) ; le décompte est un pseudo-élément
   décoratif posé par-dessus (texte de remplacement vide). */
.mv-compte{position:relative;-webkit-text-fill-color:transparent}
.mv-compte::after{content:attr(data-compte);content:attr(data-compte) / "";position:absolute;left:0;top:0;white-space:nowrap;-webkit-text-fill-color:currentColor;pointer-events:none}

/* ============ Collection, œuvre : grilles qui se révèlent ============ */
.mv-entree .oeuvres>li:nth-child(-n+12),.mv-entree .grille>li:nth-child(-n+12){animation:mv-pop .28s var(--mv-net) backwards}
.mv-entree .oeuvres>li:nth-child(2),.mv-entree .grille>li:nth-child(2){animation-delay:.03s}
.mv-entree .oeuvres>li:nth-child(3),.mv-entree .grille>li:nth-child(3){animation-delay:.06s}
.mv-entree .oeuvres>li:nth-child(4),.mv-entree .grille>li:nth-child(4){animation-delay:.09s}
.mv-entree .oeuvres>li:nth-child(5),.mv-entree .grille>li:nth-child(5){animation-delay:.12s}
.mv-entree .oeuvres>li:nth-child(6),.mv-entree .grille>li:nth-child(6){animation-delay:.15s}
.mv-entree .oeuvres>li:nth-child(7),.mv-entree .grille>li:nth-child(7){animation-delay:.18s}
.mv-entree .oeuvres>li:nth-child(8),.mv-entree .grille>li:nth-child(8){animation-delay:.21s}
.mv-entree .oeuvres>li:nth-child(n+9):nth-child(-n+12),.mv-entree .grille>li:nth-child(n+9):nth-child(-n+12){animation-delay:.24s}
/* Barres de progression qui se remplissent. Dans la liste des œuvres, seulement les 12 premières :
   89 barres animées d'un coup coûtaient 89 calques (fluidité mesurée : tests-navigateur/mouvements-ecrans.mjs). */
.barre i{transform-origin:0 50%;animation:mv-remplit .5s var(--mv-net) .1s backwards}
.oeuvres>li:nth-child(n+13) .barre i{animation:none}
/* Squelette animé tant que l'image n'est pas déchiffrée (jamais sur une image illisible), sur le haut
   des listes seulement (même raison : un calque par case animée). */
.oeuvres>li:nth-child(-n+12) .oeuvre-couv:has(>img:not(.charge)):not(.illisible)::before,
:is(.grille,.tirage,.cartes-echange,.vitrine)>li:nth-child(-n+18) .c-art:has(>img:not(.charge)):not(.illisible)::before,
.fiche .c-art:has(>img:not(.charge)):not(.illisible)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 22%,rgba(255,212,0,.45) 44%,rgba(255,255,255,.85) 50%,rgba(255,212,0,.45) 56%,transparent 78%);translate:-100% 0;animation:mv-squelette 1.1s cubic-bezier(.4,0,.6,1) infinite}

/* ============ Entre potes : classement et grosses sorties qui arrivent, attente qui respire ============ */
.classement>li:nth-child(-n+10),.fil>li:nth-child(-n+8){animation:mv-pop .26s var(--mv-net) backwards}
.classement>li:nth-child(2),.fil>li:nth-child(2){animation-delay:.04s}
.classement>li:nth-child(3),.fil>li:nth-child(3){animation-delay:.08s}
.classement>li:nth-child(4),.fil>li:nth-child(4){animation-delay:.12s}
.classement>li:nth-child(n+5):nth-child(-n+10),.fil>li:nth-child(n+5):nth-child(-n+8){animation-delay:.16s}
.attente{animation:mv-attente 1s ease-in-out infinite alternate}
@keyframes mv-attente{from{opacity:1}to{opacity:.55}}

/* ============ Fiche : la carte touchée s'agrandit jusqu'à sa place (js/mouvements.js) ============ */
.mv-entree.mv-depuis-carte>*{animation:none}
.mv-depuis-carte .fiche-infos{animation:mv-monte .26s var(--mv-net) .12s backwards}
.mv-depuis-carte .fiche-nav{animation:mv-fondu .2s .2s backwards}

/* ============ Barre du bas et onglets du haut ============ */
.bas a[aria-current="page"] .ico{animation:mv-saute .32s var(--mv-net)}
.liens a[aria-current="page"]{animation:mv-reduit .2s var(--mv-net)}

/* ============ Bandeau « nouvelle version » : il glisse depuis le bas ============ */
.maj:not([hidden]){animation:mv-glisse-haut .3s var(--mv-net)}

/* ============ Mouvements réduits : rien ne bouge (le texte des chiffres est déjà le bon) ============ */
@media (prefers-reduced-motion: reduce){
  .chargement-titre,.mv-entree>*,.mv-entree .hero-txt>*,.mv-entree .hero::after,.mv-entree .tuile,.jour.auj,
  .recu-carte .carte,.recu-carte .etiquette,.mv-entree .oeuvres>li,.mv-entree .grille>li,.barre i,.mv-depuis-carte .fiche-infos,
  .mv-depuis-carte .fiche-nav,.classement>li,.fil>li,.attente,.bas a[aria-current="page"] .ico,.liens a[aria-current="page"],.maj:not([hidden]){animation:none!important}
  .mv-entree .hero-txt::before,.paquets .paquet-corps::after,.recu-carte::before,.c-art::before,.oeuvre-couv::before{content:none!important;animation:none!important}
  .mv-compte{-webkit-text-fill-color:currentColor}
  .mv-compte::after{content:none}
}