/* Le dessin d'un trophée ou d'une mission (layout/trophy-art.js) : Trophées, Ma ruche */
.art {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.art__base {
  filter: brightness(0);
  opacity: 0.7;
}
.art__fill {
  clip-path: inset(calc((1 - var(--progress, 0)) * 100%) 0 0 0);
}
.art__fill {
  animation: art-rise 1s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}
@keyframes art-rise {
  from {
    clip-path: inset(100% 0 0 0);
  }
}