/* Catalogue d'animations — partagé player / éditeur de pages.
   Trois familles pour les blocs : entrée (anim-*), sortie (sortie-*),
   affichage en boucle (boucle-*) ; plus les transitions de page (tr-*)
   appliquées aux diapositives de playlist. Sobres et fluides (perf TV). */

/* ---------- entrées ---------- */
@keyframes anim-fondu { from { opacity: 0; } }
@keyframes anim-gauche { from { opacity: 0; transform: translateX(-6%); } }
@keyframes anim-droite { from { opacity: 0; transform: translateX(6%); } }
@keyframes anim-haut { from { opacity: 0; transform: translateY(-40%); } }
@keyframes anim-bas { from { opacity: 0; transform: translateY(40%); } }
@keyframes anim-zoom { from { opacity: 0; transform: scale(.6); } }
@keyframes anim-zoom-arriere { from { opacity: 0; transform: scale(1.45); } }
@keyframes anim-rebond {
  0% { opacity: 0; transform: scale(.3); }
  55% { opacity: 1; transform: scale(1.08); }
  75% { transform: scale(.96); }
  100% { transform: scale(1); } }
@keyframes anim-rotation { from { opacity: 0; transform: rotate(-160deg) scale(.4); } }
@keyframes anim-bascule { from { opacity: 0; transform: perspective(30em) rotateY(80deg); } }
@keyframes anim-etire { from { opacity: 0; transform: scaleX(.1); } }

.animable { animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
.anim-fondu { animation-name: anim-fondu; }
.anim-gauche { animation-name: anim-gauche; }
.anim-droite { animation-name: anim-droite; }
.anim-haut { animation-name: anim-haut; }
.anim-bas { animation-name: anim-bas; }
.anim-zoom { animation-name: anim-zoom; }
.anim-zoom-arriere { animation-name: anim-zoom-arriere; }
.anim-rebond { animation-name: anim-rebond; animation-timing-function: linear; }
.anim-rotation { animation-name: anim-rotation; }
.anim-bascule { animation-name: anim-bascule; }
.anim-etire { animation-name: anim-etire; }

/* ---------- sorties ---------- */
@keyframes sortie-fondu { to { opacity: 0; } }
@keyframes sortie-gauche { to { opacity: 0; transform: translateX(-8%); } }
@keyframes sortie-droite { to { opacity: 0; transform: translateX(8%); } }
@keyframes sortie-haut { to { opacity: 0; transform: translateY(-50%); } }
@keyframes sortie-bas { to { opacity: 0; transform: translateY(50%); } }
@keyframes sortie-zoom { to { opacity: 0; transform: scale(.4); } }
@keyframes sortie-zoom-avant { to { opacity: 0; transform: scale(1.5); } }
@keyframes sortie-rotation { to { opacity: 0; transform: rotate(160deg) scale(.4); } }
@keyframes sortie-bascule { to { opacity: 0; transform: perspective(30em) rotateY(-80deg); } }

.sortant { animation-fill-mode: both; animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
.sortie-fondu { animation-name: sortie-fondu; }
.sortie-gauche { animation-name: sortie-gauche; }
.sortie-droite { animation-name: sortie-droite; }
.sortie-haut { animation-name: sortie-haut; }
.sortie-bas { animation-name: sortie-bas; }
.sortie-zoom { animation-name: sortie-zoom; }
.sortie-zoom-avant { animation-name: sortie-zoom-avant; }
.sortie-rotation { animation-name: sortie-rotation; }
.sortie-bascule { animation-name: sortie-bascule; }

/* ---------- affichage : emphases en boucle ---------- */
@keyframes boucle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes boucle-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes boucle-balance { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes boucle-clignote { 0%, 60% { opacity: 1; } 80% { opacity: .35; } 100% { opacity: 1; } }
@keyframes boucle-brille {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201, 162, 39, 0)); }
  50% { filter: drop-shadow(0 0 .35em rgba(201, 162, 39, .85)); } }
@keyframes boucle-tremble {
  0%, 88%, 100% { transform: translateX(0); }
  90% { transform: translateX(-1.5%); } 93% { transform: translateX(1.5%); }
  96% { transform: translateX(-1%); } 98% { transform: translateX(1%); } }
@keyframes boucle-respire { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.boucle-pulse { animation: boucle-pulse 2.4s ease-in-out infinite; }
.boucle-flotte { animation: boucle-flotte 3.4s ease-in-out infinite; }
.boucle-balance { animation: boucle-balance 3s ease-in-out infinite; transform-origin: 50% 0; }
.boucle-clignote { animation: boucle-clignote 2.2s linear infinite; }
.boucle-brille { animation: boucle-brille 2.8s ease-in-out infinite; }
.boucle-tremble { animation: boucle-tremble 4s linear infinite; }
.boucle-respire { animation: boucle-respire 3.2s ease-in-out infinite; }

/* entrée + boucle : la boucle démarre après l'entrée (délai géré en JS) */

/* ---------- transitions de page (diapositives) ---------- */
@keyframes tr-glisse-gauche { from { transform: translateX(100%); } }
@keyframes tr-glisse-droite { from { transform: translateX(-100%); } }
@keyframes tr-glisse-haut { from { transform: translateY(100%); } }
@keyframes tr-glisse-bas { from { transform: translateY(-100%); } }
@keyframes tr-zoom { from { opacity: 0; transform: scale(1.18); } }
@keyframes tr-volet { from { transform: scaleY(0); } }

.calque.tr-glisse-gauche { animation: tr-glisse-gauche .8s cubic-bezier(.2, .8, .25, 1) both; }
.calque.tr-glisse-droite { animation: tr-glisse-droite .8s cubic-bezier(.2, .8, .25, 1) both; }
.calque.tr-glisse-haut { animation: tr-glisse-haut .8s cubic-bezier(.2, .8, .25, 1) both; }
.calque.tr-glisse-bas { animation: tr-glisse-bas .8s cubic-bezier(.2, .8, .25, 1) both; }
.calque.tr-zoom { animation: tr-zoom .8s cubic-bezier(.2, .8, .25, 1) both; }
.calque.tr-volet { animation: tr-volet .7s cubic-bezier(.2, .8, .25, 1) both; transform-origin: 50% 0; }
.calque.tr-aucun { transition: none !important; }