/* ===========================================================================
   Awoui — LA BARRE D'EXPÉRIENCE.

   ELLE DOIT SE VOIR SANS RIEN ENCADRER. C'est la seule pièce de l'interface
   qui a le droit de porter la couleur de la marque en aplat : tout le reste
   est noir sur blanc, donc un seul trait coloré suffit à attirer l'œil — là
   où un cadre, un fond ou une ombre auraient remis le mobilier qu'on vient
   d'enlever.

   LE DÉGRADÉ EST CELUI DE LA MAISON (`--grad`, émeraude → cyan → iris), pas
   une couleur de jeu vidéo. La barre doit ressembler à Awoui, pas à un ATH.
   =========================================================================== */

.xp{
  position:relative;
  display:grid;gap:7px;
  /* Elle appartient à la colonne : mêmes bords que le contenu, jamais un
     bandeau qui traverse l'écran. */
  width:100%;
}

.xp-tete{
  display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--fm);font-size:11px;letter-spacing:.1em;
}
.xp-niveau{color:var(--encre);text-transform:lowercase}
.xp-compte{color:var(--encre-3)}

.xp-piste{
  height:6px;border-radius:99px;
  background:var(--feuille-3);
  overflow:hidden;
}
.xp-jauge{
  height:100%;width:0;
  border-radius:99px;
  background:var(--grad,linear-gradient(100deg,var(--bien),var(--cyan) 48%,var(--iris)));
  /* LA MONTÉE SE REGARDE. Une jauge qui saute d'une valeur à l'autre ne dit
     pas qu'on a gagné quelque chose : elle dit que la page a changé. Sept
     dixièmes de seconde, c'est le temps de voir sans le temps d'attendre. */
  transition:width .7s cubic-bezier(.22,1,.36,1);
}

/* Le souffle du gain : il part de la barre et monte. Rien d'autre ne bouge. */
.xp-gain{
  position:absolute;right:0;top:-4px;
  font-family:var(--fm);font-size:12px;font-weight:600;
  color:var(--bien);
  animation:xp-monte 1.4s cubic-bezier(.22,1,.36,1) both;
  pointer-events:none;
}
@keyframes xp-monte{
  0%{opacity:0;transform:translateY(6px)}
  18%{opacity:1;transform:translateY(-4px)}
  70%{opacity:1;transform:translateY(-12px)}
  100%{opacity:0;transform:translateY(-20px)}
}

/* Au moment du gain, la piste respire une fois. Une seule. */
.xp.gagne .xp-piste{animation:xp-souffle .9s ease both}
@keyframes xp-souffle{
  0%{box-shadow:0 0 0 0 rgba(63,224,162,0)}
  30%{box-shadow:0 0 0 4px rgba(63,224,162,.18)}
  100%{box-shadow:0 0 0 0 rgba(63,224,162,0)}
}

@media (prefers-reduced-motion:reduce){
  .xp-jauge{transition:none}
  .xp-gain,.xp.gagne .xp-piste{animation:none}
  .xp-gain{opacity:1}
}