/* ======================= MOUVEMENT (marche + classement) =======================
   Entrees en cascade, transitions d'onglets, retour au toucher (ondulation, enfoncement), compteurs,
   apparition des fiches, celebrations. Tout est coupe si le systeme demande moins d'animations. */
:root { --spring: cubic-bezier(.22, 1.45, .4, 1); --ease: cubic-bezier(.2, .8, .2, 1); }

/* chargement de la page : l'interface se pose en douceur */
.fx-load { animation: fxRise .7s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes fxRise { from { opacity: 0; transform: translateY(22px) scale(.98); } }

/* elements qui arrivent (listes, cartes, cases) : cascade */
.fx-in { animation: fxIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes fxIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.fx-pop { animation: fxPop .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes fxPop { from { opacity: 0; transform: scale(.82); } }

/* fond : anneaux qui flottent lentement */
.rings i { animation: fxFloat 26s ease-in-out infinite alternate; }
.rings i:nth-child(2) { animation-duration: 32s; animation-direction: alternate-reverse; }
.rings i:nth-child(3) { animation-duration: 38s; }
@keyframes fxFloat { to { transform: translate(-46%, -54%) scale(1.06); } }

/* boutons : survol qui souleve, appui qui enfonce, ondulation au toucher */
.btn, .bigbtn, .rbx, .pill, .cat, .grph, .row, .line, .cell, .want, .pod, .maintabs button, .tabs button, .kinds button, .segs button, .seg button, .chk, .filtbtn, .kpi, .acct > button, .mon {
  position: relative; overflow: hidden; transition: transform .22s var(--spring), box-shadow .22s ease, background-color .2s ease, filter .2s ease; -webkit-tap-highlight-color: transparent; }
.btn:hover, .bigbtn:hover:not(:disabled), .rbx:hover, .pill:hover, .cell:hover, .want:hover, .pod:hover, .kpi:hover, .acct > button:hover, .mon:hover { transform: translateY(-3px); filter: brightness(1.03); }
.row:hover, .line:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--teal), 0 8px 18px -10px rgba(36,46,70,.35); }
.btn:active, .bigbtn:active:not(:disabled), .rbx:active, .pill:active, .cat:active, .grph:active, .row:active, .line:active, .cell:active, .want:active, .pod:active,
.maintabs button:active, .tabs button:active, .kinds button:active, .segs button:active, .seg button:active, .chk:active, .filtbtn:active { transform: scale(.955); transition-duration: .08s; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.65); transform: scale(0); animation: fxRipple .6s ease-out forwards; mix-blend-mode: soft-light; }
.bigbtn .fx-ripple, .rbx .fx-ripple, .btn.blue .fx-ripple { background: rgba(255,255,255,.45); mix-blend-mode: normal; }
@keyframes fxRipple { to { transform: scale(2.6); opacity: 0; } }
.bigbtn:not(:disabled)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: fxShine 3.6s ease-in-out infinite 1.2s; pointer-events: none; }
@keyframes fxShine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* images des brainrots : petit saut au survol */
.tile.pic img { transition: transform .35s var(--spring); }
.row:hover .tile.pic img, .line:hover .tile.pic img, .cell:hover .tile.pic img, .want:hover .tile.pic img { transform: translateY(-4px) scale(1.12) rotate(-4deg); }
.tile .spark { animation: fxTwinkle 1.6s ease-in-out infinite; }
@keyframes fxTwinkle { 50% { transform: scale(1.35) rotate(18deg); opacity: .75; } }

/* onglets : pastille doree qui glisse */
.maintabs, .kinds { position: relative; }
.tabind { position: absolute; z-index: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(180deg, var(--gold-a), var(--gold-b)); box-shadow: 0 0 0 3px #fff, 0 5px 0 rgba(196,130,0,.35);
  transition: left .42s var(--spring), top .42s var(--spring), width .42s var(--spring), height .42s var(--spring), opacity .2s; }
.maintabs.has-ind button, .kinds.has-ind button { z-index: 1; }
.maintabs.has-ind button.on, .kinds.has-ind button.on { background: transparent !important; box-shadow: none !important; }
.maintabs button i, .tabs button i { display: inline-block; transition: transform .35s var(--spring); }
.maintabs button.on i, .tabs button.on i { animation: fxWiggle .6s var(--spring); }
@keyframes fxWiggle { 30% { transform: rotate(-14deg) scale(1.25); } 60% { transform: rotate(10deg) scale(1.1); } }

/* changement de vue */
.view.on { animation: fxView .45s var(--ease) backwards; }
@keyframes fxView { from { opacity: 0; transform: translateY(16px); } }

/* fiche : grand apercu qui saute (seulement quand la fiche s'ouvre) */
.hero.fx-in img, .hero.fx-pop img { animation: fxHero .7s var(--spring) both, bob 3.2s ease-in-out .7s infinite !important; }
@keyframes fxHero { from { opacity: 0; transform: translateY(30px) scale(.6) rotate(-8deg); } }
.fx-radar { transform-origin: 180px 152px; animation: fxGrow .8s var(--spring) .15s both; }
@keyframes fxGrow { from { transform: scale(0); opacity: 0; } }
.fx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fxDraw 1.1s var(--ease) .1s forwards; }
@keyframes fxDraw { to { stroke-dashoffset: 0; } }

/* fenetres */
.modal.open { animation: fxFade .25s ease both; }
.modal.open > .panel { animation: fxModal .5s var(--spring) both; }
@keyframes fxFade { from { opacity: 0; } }
@keyframes fxModal { from { opacity: 0; transform: translateY(26px) scale(.9); } }
.menu.open { animation: fxMenu .35s var(--spring) both; transform-origin: top right; }
@keyframes fxMenu { from { opacity: 0; transform: translateY(-8px) scale(.92); } }
.op { animation: fxToast .55s var(--spring) both !important; }
@keyframes fxToast { from { opacity: 0; transform: translateX(-40px) scale(.9); } }
.op.done { animation: fxToast .55s var(--spring) both, fxDone .7s ease .1s !important; }
@keyframes fxDone { 40% { box-shadow: 0 0 0 8px rgba(46,170,90,.35), var(--drop); } }

/* barres de progression qui se remplissent */
.bar i { animation: fxFill 1.2s var(--ease) .2s both; transform-origin: left; }
@keyframes fxFill { from { transform: scaleX(0); } }

/* squelettes de chargement */
.skel { height: 66px; margin-top: 6px; border-radius: 16px; background: linear-gradient(90deg, #eef4f8 25%, #fff 37%, #eef4f8 63%); background-size: 400% 100%; animation: fxShimmer 1.3s ease infinite; }
@keyframes fxShimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* compteur qui change : petit rebond */
.fx-bump { display: inline-block; animation: fxBump .5s var(--spring); }
@keyframes fxBump { 40% { transform: scale(1.18); color: var(--green); } }

/* confettis (operation reussie) */
.fx-confetti { position: fixed; z-index: 60; pointer-events: none; font-size: 20px; will-change: transform, opacity; animation: fxConf 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes fxConf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}